From aa03ce80e92eea0dec38fad04c70997cf8413597 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Wed, 10 Mar 2021 17:51:59 +0300
Subject: [PATCH 01/17] nu-btngroup: change outline behavior depending on
 radiogroup injection

---
 components/playground.svelte | 14 ++------------
 src/behaviors/radiogroup.js  |  1 +
 src/elements/btngroup.js     |  4 ++--
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/components/playground.svelte b/components/playground.svelte
index 666a7c2c..c8489ac2 100644
--- a/components/playground.svelte
+++ b/components/playground.svelte
@@ -206,21 +206,11 @@
 
   <nu-card as="section">
     <nu-props transition=".2s"></nu-props>
-    <nu-attrs
-      for="btn"
-      shadow="0 0 0 1bw #border :pressed[0 0 0 1bw #special-bg]"
-      fill="#bg :pressed[#special-bg]"
-      z=":pressed[above]"
-      border="n"
-      color="#special :pressed[special-text]"
-      inset="n :active[.75em] :pressed[n]"></nu-attrs>
-    <nu-radiogroup
-      value="0" display="inline-flex"
-      group-radius="1r" border="#clear" gap="1bw" radius>
+    <nu-btngroup>
       <nu-btn>A</nu-btn>
       <nu-btn>B</nu-btn>
       <nu-btn>C</nu-btn>
-    </nu-radiogroup>
+    </nu-btngroup>
   </nu-card>
 {/if}
 
diff --git a/src/behaviors/radiogroup.js b/src/behaviors/radiogroup.js
index 33c83de0..39d8fd72 100644
--- a/src/behaviors/radiogroup.js
+++ b/src/behaviors/radiogroup.js
@@ -38,6 +38,7 @@ export default class RadioGroupBehavior extends WidgetBehavior {
     }
 
     this.setContext('radiogroup', this);
+    this.setMod('radiogroup', true);
 
     this.on('keydown', this.onKeyDown.bind(this));
   }
diff --git a/src/elements/btngroup.js b/src/elements/btngroup.js
index 149a57a6..7d5c09b7 100644
--- a/src/elements/btngroup.js
+++ b/src/elements/btngroup.js
@@ -11,7 +11,7 @@ export default class NuBtnGroup extends NuGroup {
       radius: '',
       border: '',
       fill: 'var(--local-border-color, var(--border-color)) :disabled[rgba(var(--local-border-color-rgb, var(--border-color-rgb)), var(--disabled-opacity))]',
-      outline: 'focus-inside visible',
+      outline: 'n :radiogroup[focus-inside visible]',
     };
   }
 
@@ -19,7 +19,7 @@ export default class NuBtnGroup extends NuGroup {
     return {
       'attrs:action': {
         border: '0',
-        outline: 'n',
+        outline: '^btngroup focus visible :radiogroup[n]',
         padding: '1x',
       },
     };

From 46cfbd30a94ece1952b842ef8bf9c4a7eb828732 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Fri, 12 Mar 2021 14:46:52 +0300
Subject: [PATCH 02/17] fix dev build to provide logs

---
 src/helpers.js | 8 +++++++-
 src/index.js   | 2 ++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/helpers.js b/src/helpers.js
index feca1535..e05b7ee9 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -275,7 +275,13 @@ export function queryById(element, id, includeNames) {
  * Tell if library run in dev mode.
  * @type {Boolean}
  */
-export const devMode = typeof process !== 'undefined' && process.env.NODE_ENV === 'development';
+export const devMode = (() => {
+  try {
+    return process.env.NODE_ENV === 'development';
+  } catch (e) {
+    return false;
+  }
+})();
 
 /**
  * Write log to console.
diff --git a/src/index.js b/src/index.js
index c9d74da0..487bfb6a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -114,6 +114,8 @@ const Nude = {
   hue,
   themes,
   color,
+  dev: devMode,
+  env: typeof process.env.NODE_ENV === 'string' ? process.env.NODE_ENV : 'production',
   // css,
 };
 

From 8dd41895edc8686b0ca02acf3711f512198a82ec Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Sun, 14 Mar 2021 16:15:09 +0300
Subject: [PATCH 03/17] nu-btn: new disabled styles

---
 src/elements/btn.js  | 3 ++-
 src/styles/filter.js | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/elements/btn.js b/src/elements/btn.js
index 7220293d..34d6f9ef 100644
--- a/src/elements/btn.js
+++ b/src/elements/btn.js
@@ -18,7 +18,8 @@ export default class NuBtn extends NuAction {
       mark: 'n :focusable[hover]',
       text: 'sb nowrap',
       inset: '#clear :active[#shadow.50] :active:special[#special-shadow.50] :pressed[y] :pressed:special[#special-shadow] :active:pressed[#shadow.50] :active:special[#special-shadow.50] :active:pressed:special[#special-shadow.50]',
-      fill: 'bg :special[special-bg] :clear[clear]',
+      fill: 'bg :disabled[#bg] :special.disabled[#special-bg] :clear[clear] :clear:disabled[#bg]',
+      filter: 'n :disabled[saturate(.5) contrast(0.9)]',
       color: 'text :clear[special] :special[special-text] :special:clear[special-text]',
     };
   }
diff --git a/src/styles/filter.js b/src/styles/filter.js
index 85b97d6d..4578aaac 100644
--- a/src/styles/filter.js
+++ b/src/styles/filter.js
@@ -1,8 +1,10 @@
-import { convertUnit, extractStyleFuncs } from '../helpers';
+import { convertUnit, extractStyleFuncs, isNoValue } from '../helpers';
 
 const CONVERT_FILTERS = ['drop-shadow', 'blur'];
 
 export default function filterAttr(val) {
+  if (isNoValue(val)) return;
+
   const parts = extractStyleFuncs(val);
   const filters = [];
 

From 91d700268c6c53c177cc58fe7dd47e990dc2fe1a Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 15 Mar 2021 11:21:28 +0300
Subject: [PATCH 04/17] styles: new filter-based disabled state

---
 components/playground.svelte | 9 +++++----
 index.html                   | 2 +-
 src/elements/action.js       | 1 +
 src/elements/btn.js          | 3 +--
 src/elements/checkbox.js     | 2 +-
 src/elements/input.js        | 2 +-
 src/elements/listbox.js      | 2 +-
 src/elements/option.js       | 3 ++-
 src/elements/radio.js        | 4 ++--
 src/elements/slider.js       | 3 ++-
 src/elements/switch.js       | 9 ++-------
 src/styles/opacity.js        | 1 +
 12 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/components/playground.svelte b/components/playground.svelte
index c8489ac2..ae7a88f0 100644
--- a/components/playground.svelte
+++ b/components/playground.svelte
@@ -280,19 +280,19 @@
         </nu-flex>
       </nu-radiogroup>
 
-      <nu-radiogroup flow="column" gap value="second">
+      <nu-radiogroup flow="column" gap value="second" disabled>
         <nu-flex gap="1x" items="center">
-          <nu-radio labelledby=":next" value="first" disabled></nu-radio>
+          <nu-radio labelledby=":next" value="first"></nu-radio>
           <nu-label>First value</nu-label>
         </nu-flex>
 
         <nu-flex gap="1x" items="center">
-          <nu-radio labelledby=":next" value="second" disabled></nu-radio>
+          <nu-radio labelledby=":next" value="second"></nu-radio>
           <nu-label>Second value</nu-label>
         </nu-flex>
 
         <nu-flex gap="1x" items="center">
-          <nu-radio labelledby=":next" value="third" disabled></nu-radio>
+          <nu-radio labelledby=":next" value="third"></nu-radio>
           <nu-label>Third value</nu-label>
         </nu-flex>
       </nu-radiogroup>
@@ -1841,6 +1841,7 @@ var b = /wow?/;
     <nu-heading level="2">Slider</nu-heading>
     <nu-slider value="50" use-debug="slider-debug-h"></nu-slider>
     <nu-slider value="50" orient="v" use-debug="slider-debug-v"></nu-slider>
+    <nu-slider value="50" disabled></nu-slider>
 
     <nu-grid gap columns="1fr 1fr">
       <nu-debug id="slider-debug-h"></nu-debug>
diff --git a/index.html b/index.html
index 1c7b362b..513efb8e 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
 <nu-root padding="2x||1x" responsive="1280px|960px|640px" fill="subtle">
 <!--  This theme has default values-->
   <nu-theme
-    id="main-theme" hue="262" saturation="70"></nu-theme>
+    id="main-theme" hue="262" saturation="70" mod="tint"></nu-theme>
   <nu-theme
     id="secondary-theme"
     name="secondary"
diff --git a/src/elements/action.js b/src/elements/action.js
index 8b8fa750..406359b7 100644
--- a/src/elements/action.js
+++ b/src/elements/action.js
@@ -24,6 +24,7 @@ export default class NuAction extends NuEl {
       cursor: 'pointer :disabled[default]',
       selectable: 'y',
       box: 'y',
+      filter: 'n :disabled[saturate(.5) contrast(0.9)]',
     };
   }
 
diff --git a/src/elements/btn.js b/src/elements/btn.js
index 34d6f9ef..179ad7f4 100644
--- a/src/elements/btn.js
+++ b/src/elements/btn.js
@@ -18,8 +18,7 @@ export default class NuBtn extends NuAction {
       mark: 'n :focusable[hover]',
       text: 'sb nowrap',
       inset: '#clear :active[#shadow.50] :active:special[#special-shadow.50] :pressed[y] :pressed:special[#special-shadow] :active:pressed[#shadow.50] :active:special[#special-shadow.50] :active:pressed:special[#special-shadow.50]',
-      fill: 'bg :disabled[#bg] :special.disabled[#special-bg] :clear[clear] :clear:disabled[#bg]',
-      filter: 'n :disabled[saturate(.5) contrast(0.9)]',
+      fill: '#bg :disabled[#bg] :special.disabled[#special-bg] :clear[#clear] :clear:disabled[#local-bg]',
       color: 'text :clear[special] :special[special-text] :special:clear[special-text]',
     };
   }
diff --git a/src/elements/checkbox.js b/src/elements/checkbox.js
index b589049c..ac1a5c2b 100644
--- a/src/elements/checkbox.js
+++ b/src/elements/checkbox.js
@@ -35,7 +35,7 @@ export default class NuCheckbox extends NuAction {
       items: 'center',
       padding: '0',
       sizing: 'content',
-      color: 'special :disabled[text 66%]',
+      color: '#special',
       fill: 'bg',
       cursor: 'default',
       text: 'v-middle',
diff --git a/src/elements/input.js b/src/elements/input.js
index b1747d48..b90d9f94 100644
--- a/src/elements/input.js
+++ b/src/elements/input.js
@@ -32,11 +32,11 @@ export default class NuInput extends NuEl {
       radius: '',
       padding: '1x',
       fill: 'input :special[special-bg]',
-      mark: 'n :disabled[#special-bg.10]',
       color: 'text :special[special-text]',
       border: '1bw',
       outline: 'focus-inside',
       opacity: '1 :disabled[--disabled-opacity]',
+      filter: 'n :disabled[saturate(.5) contrast(0.8)]',
       transition: 'theme',
       selectable: 'n',
       box: 'y',
diff --git a/src/elements/listbox.js b/src/elements/listbox.js
index 190a1312..e9ebbd86 100644
--- a/src/elements/listbox.js
+++ b/src/elements/listbox.js
@@ -20,7 +20,7 @@ export default class NuListBox extends NuCard {
     return {
       padding: '.5x',
       outline: 'n',
-      gap: '0 :multiple[1bw]',
+      gap: '1bw',
       border: 'y :focus[y #special]',
     };
   }
diff --git a/src/elements/option.js b/src/elements/option.js
index 1914fe6d..c207c1d4 100644
--- a/src/elements/option.js
+++ b/src/elements/option.js
@@ -21,7 +21,7 @@ export default class NuOption extends NuEl {
     return {
       display: 'grid',
       padding: '1x 1.5x',
-      fill: 'transparent :selected[special-bg]',
+      fill: 'transparent :selected.disabled[#special-bg] :disabled[#local-bg]',
       outline: 'n :current[y focus-outside visible]',
       width: '100%',
       flow: 'column',
@@ -34,6 +34,7 @@ export default class NuOption extends NuEl {
       transition: 'theme',
       mark: 'hover',
       opacity: '1 :disabled[--disabled-opacity]',
+      filter: 'n :disabled[saturate(.5) contrast(0.9)]',
       cursor: 'pointer :disabled[default]',
       inset: '.75em #shadow.0 :active[.75em #shadow.50] :selected[.75em #shadow.0] :active:selected[.75em #special-shadow.50]',
       text: 'sb nowrap',
diff --git a/src/elements/radio.js b/src/elements/radio.js
index bbab7934..fca27284 100644
--- a/src/elements/radio.js
+++ b/src/elements/radio.js
@@ -16,7 +16,7 @@ export default class NuRadio extends NuAction {
   static get nuTemplate() {
     return `
       <nu-circle
-        fill="^host clear :pressed[special] :disabled:pressed[text 50%]"
+        fill="^host clear :pressed[special]"
         transition="fill"
         border="0"></nu-circle>
     `;
@@ -27,7 +27,7 @@ export default class NuRadio extends NuAction {
       display: 'inline-block',
       width: '1em',
       height: '1em',
-      border: '1bw #text :disabled[1bw #text.50]',
+      border: '1bw #text',
       radius: 'round',
       content: 'stretch',
       items: 'center',
diff --git a/src/elements/slider.js b/src/elements/slider.js
index 6ab6d305..a494f25c 100644
--- a/src/elements/slider.js
+++ b/src/elements/slider.js
@@ -52,7 +52,7 @@ export default class NuSlider extends NuEl {
     return {
       display: 'block',
       radius: 'round',
-      fill: 'special :disabled[text 50%]',
+      fill: 'special',
       opacity: '1 :disabled[--disabled-opacity]',
       border: '1bw',
       text: 'v-middle',
@@ -63,6 +63,7 @@ export default class NuSlider extends NuEl {
       orient: 'h',
       outline: 'n',
       box: 'y',
+      filter: 'n :disabled[saturate(.5) contrast(0.9)]',
     };
   }
 
diff --git a/src/elements/switch.js b/src/elements/switch.js
index 9dc25b88..94914c06 100644
--- a/src/elements/switch.js
+++ b/src/elements/switch.js
@@ -37,9 +37,7 @@ export default class NuSwitch extends NuAction {
       inset: `0 :active[.5em #shadow.50] :pressed[0] :pressed:active[.5em #special-shadow.50]`,
       transition: 'shadow',
       width: '(--size * 2)',
-      fill: `bg
-        :pressed[special-bg]
-        :pressed:disabled[text 50%]`,
+      fill: `bg :pressed[special-bg]`,
       text: 'middle',
       mark: ':focusable[hover]',
       padding: '--circle-gap',
@@ -49,10 +47,7 @@ export default class NuSwitch extends NuAction {
       '--circle-size': '--size',
       '--circle-offset': `0
         :pressed[--size - 1bw]`,
-      '--circle-bg-color': `--special-bg-color
-        :disabled[rgba(--text-color-rgb, .66)]
-        :pressed[--special-text-color]
-        :pressed:disabled[--special-text-color]`,
+      '--circle-bg-color': `--special-bg-color :pressed[--special-text-color]`,
       '--circle-shadow-color': '#shadow :pressed[#special-shadow.66]',
     };
   }
diff --git a/src/styles/opacity.js b/src/styles/opacity.js
index b414ec1b..d92144ad 100644
--- a/src/styles/opacity.js
+++ b/src/styles/opacity.js
@@ -5,5 +5,6 @@ export default function opacityAttr(val) {
 
   return {
     opacity: values[0] || '1',
+    '--opacity': values[0] || '1',
   };
 }

From 0a5550d8ea15342c6558cce64fe7daebd3a990fa Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 15 Mar 2021 13:00:35 +0300
Subject: [PATCH 05/17] form: trigger validation for non-input elements

---
 src/behaviors/form.js   | 2 +-
 src/behaviors/input.js  | 2 +-
 src/behaviors/widget.js | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/behaviors/form.js b/src/behaviors/form.js
index 23423249..31c59943 100644
--- a/src/behaviors/form.js
+++ b/src/behaviors/form.js
@@ -36,7 +36,7 @@ export default class FormBehavior extends WidgetBehavior {
     this.setContext('form', this);
     this.context.value = null;
 
-    this.on('nu-blur', (event) => {
+    this.on('nu-change', (event) => {
       const field = event.detail;
       if (this.fields[field]) {
         this.verifyData(field);
diff --git a/src/behaviors/input.js b/src/behaviors/input.js
index b044f419..c08964b2 100644
--- a/src/behaviors/input.js
+++ b/src/behaviors/input.js
@@ -77,7 +77,7 @@ export default class InputBehavior extends WidgetBehavior {
 
     ref.addEventListener('blur', () => {
       if (host.id) {
-        this.emit('nu-blur', host.nuId, { bubbles: true });
+        this.emit('nu-change', host.nuId, { bubbles: true });
       }
     });
 
diff --git a/src/behaviors/widget.js b/src/behaviors/widget.js
index f22f04cc..fd19b93b 100644
--- a/src/behaviors/widget.js
+++ b/src/behaviors/widget.js
@@ -496,6 +496,10 @@ export default class WidgetBehavior extends Behavior {
     if (!silent) {
       this.emit('input', value);
       this.doActions(value);
+
+      if (this.host.id) {
+        this.emit('nu-change', this.host.nuId, { bubbles: true });
+      }
     }
 
     if (!silent || this.trigger) {

From 2f817fccb52f7eb963678b9b7dd0f9cb71d82016 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 15 Mar 2021 13:01:19 +0300
Subject: [PATCH 06/17] themes: add #success, #danger, #warning built-in color

---
 src/themes.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/themes.js b/src/themes.js
index 10a26dd0..e200d2a5 100644
--- a/src/themes.js
+++ b/src/themes.js
@@ -887,9 +887,12 @@ export const COLOR_THEMES = [
   ['blue', 262],
   ['cyan', 192],
   ['green', 134],
+  ['success', 134],
   ['yellow', 75, 100],
   ['orange', 45],
+  ['warning', 45],
   ['red', 12, 75],
+  ['danger', 12, 75],
   ['purple', 312],
   ['violet', 282],
 ].reduce((map, [name, hue, saturation]) => {

From 18adade0bfea1a4194cb5595dcc52127bc3cfd62 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 15 Mar 2021 13:01:58 +0300
Subject: [PATCH 07/17] styles: migrate disabled transparency to filter
 property

---
 components/playground.svelte | 34 ++++++++++++++++++++++++++++++++++
 index.html                   |  2 +-
 src/elements/action.js       |  5 ++---
 src/elements/check.js        |  4 ++--
 src/elements/input.js        |  3 +--
 src/elements/option.js       |  3 +--
 src/elements/slider.js       |  3 +--
 7 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/components/playground.svelte b/components/playground.svelte
index ae7a88f0..22731bf4 100644
--- a/components/playground.svelte
+++ b/components/playground.svelte
@@ -1,5 +1,36 @@
 <nu-heading>Playground</nu-heading>
 
+{#if show('validation')}
+  <nu-heading level="2">Properties</nu-heading>
+
+  <nu-card gap="1x">
+    <nu-form>
+      <nu-field>
+        <nu-btn id="digit" width="10" columns="1fr auto">
+          <nu-value list placeholder="placeholder"></nu-value>
+          <nu-dropdownicon></nu-dropdownicon>
+          <nu-popuplistbox>
+            <nu-option value="one">One</nu-option>
+            <nu-option value="two">Two</nu-option>
+            <nu-option value="three">Three</nu-option>
+            <nu-option value="four">Four</nu-option>
+            <nu-option value="five">Five</nu-option>
+            <nu-option value="six">Six</nu-option>
+            <nu-option value="seven">Seven</nu-option>
+          </nu-popuplistbox>
+        </nu-btn>
+
+        <nu-check for="digit" assert={sixValidator}>
+          Value should be SIX
+        </nu-check>
+      </nu-field>
+
+      <nu-btn action="submit">Submit</nu-btn>
+
+    </nu-form>
+  </nu-card>
+{/if}
+
 {#if show('props')}
   <nu-heading level="2">Properties</nu-heading>
 
@@ -2041,4 +2072,7 @@ window.addEventListener('hashchange', () => {
 $: show = (name) => {
   return hash ? hash.includes(name) : true;
 }
+
+let sixValidator = v => v === 'six';
+
 </script>
diff --git a/index.html b/index.html
index 513efb8e..1c7b362b 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
 <nu-root padding="2x||1x" responsive="1280px|960px|640px" fill="subtle">
 <!--  This theme has default values-->
   <nu-theme
-    id="main-theme" hue="262" saturation="70" mod="tint"></nu-theme>
+    id="main-theme" hue="262" saturation="70"></nu-theme>
   <nu-theme
     id="secondary-theme"
     name="secondary"
diff --git a/src/elements/action.js b/src/elements/action.js
index 406359b7..15436547 100644
--- a/src/elements/action.js
+++ b/src/elements/action.js
@@ -17,14 +17,13 @@ export default class NuAction extends NuEl {
     return {
       radius: '0',
       text: 'nowrap',
-      transition: 'theme, radius',
+      transition: 'theme, radius, filter',
       outline: 'focus visible',
       mark: 'n :focusable[hover]',
-      opacity: '1 :disabled[--disabled-opacity]',
       cursor: 'pointer :disabled[default]',
       selectable: 'y',
       box: 'y',
-      filter: 'n :disabled[saturate(.5) contrast(0.9)]',
+      filter: 'n :disabled[saturate(0.25) contrast(0.88) opacity(var(--disabled-opacity))]',
     };
   }
 
diff --git a/src/elements/check.js b/src/elements/check.js
index 65775b32..e7e078e9 100644
--- a/src/elements/check.js
+++ b/src/elements/check.js
@@ -18,9 +18,9 @@ export default class NuCheck extends NuEl {
       interactive: ':invalid[yes] no',
       size: 'sm',
       text: 'b',
-      // height: ':invalid[max(1lh)] max(1px)',
       transition: 'opacity, height',
-    }
+      color: '#danger',
+    };
   }
 
   nuInit() {
diff --git a/src/elements/input.js b/src/elements/input.js
index b90d9f94..f8a8222d 100644
--- a/src/elements/input.js
+++ b/src/elements/input.js
@@ -35,8 +35,7 @@ export default class NuInput extends NuEl {
       color: 'text :special[special-text]',
       border: '1bw',
       outline: 'focus-inside',
-      opacity: '1 :disabled[--disabled-opacity]',
-      filter: 'n :disabled[saturate(.5) contrast(0.8)]',
+      filter: 'n :disabled[saturate(0.25) contrast(0.78) opacity(var(--disabled-opacity))]',
       transition: 'theme',
       selectable: 'n',
       box: 'y',
diff --git a/src/elements/option.js b/src/elements/option.js
index c207c1d4..81f2567a 100644
--- a/src/elements/option.js
+++ b/src/elements/option.js
@@ -33,8 +33,7 @@ export default class NuOption extends NuEl {
       color: 'text',
       transition: 'theme',
       mark: 'hover',
-      opacity: '1 :disabled[--disabled-opacity]',
-      filter: 'n :disabled[saturate(.5) contrast(0.9)]',
+      filter: 'n :disabled[saturate(0.25) contrast(0.88) opacity(var(--disabled-opacity))]',
       cursor: 'pointer :disabled[default]',
       inset: '.75em #shadow.0 :active[.75em #shadow.50] :selected[.75em #shadow.0] :active:selected[.75em #special-shadow.50]',
       text: 'sb nowrap',
diff --git a/src/elements/slider.js b/src/elements/slider.js
index a494f25c..0a6b227c 100644
--- a/src/elements/slider.js
+++ b/src/elements/slider.js
@@ -53,7 +53,6 @@ export default class NuSlider extends NuEl {
       display: 'block',
       radius: 'round',
       fill: 'special',
-      opacity: '1 :disabled[--disabled-opacity]',
       border: '1bw',
       text: 'v-middle',
       cursor: 'pointer :disabled[default]',
@@ -63,7 +62,7 @@ export default class NuSlider extends NuEl {
       orient: 'h',
       outline: 'n',
       box: 'y',
-      filter: 'n :disabled[saturate(.5) contrast(0.9)]',
+      filter: 'n :disabled[saturate(0.25) contrast(0.88) opacity(var(--disabled-opacity))]',
     };
   }
 

From fc0083d363a6e3baf432abec93386c86890f9730 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 15 Mar 2021 16:36:10 +0300
Subject: [PATCH 08/17] nu-checkbox & nu-radio: update checked styles

---
 src/elements/checkbox.js | 19 ++++++++++---------
 src/elements/radio.js    | 11 ++++++-----
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/elements/checkbox.js b/src/elements/checkbox.js
index ac1a5c2b..c137eff1 100644
--- a/src/elements/checkbox.js
+++ b/src/elements/checkbox.js
@@ -19,8 +19,12 @@ export default class NuCheckbox extends NuAction {
         name="check checkmark"
         size="1em"
         height="1em"
-        opacity="--icon-opacity"
-        transition="opacity"></nu-icon>
+        width="1em"
+        color="^ #clear :pressed[#special-text]"
+        fill="^ #bg :pressed[#special-bg]"
+        transition="fill, color, opacity, inset"
+        transition="opacity"
+        inset="^ 0 :active[.5em] :pressed[0] :active:pressed[.5em]"></nu-icon>
     `;
   }
 
@@ -29,21 +33,18 @@ export default class NuCheckbox extends NuAction {
       display: 'inline-grid',
       width: '1em',
       height: '1em',
-      border: '1bw #text :disabled[1bw #text.50]',
+      border: '#text :disabled.pressed[#text.50] :pressed[#special-bg]',
       radius: '.25em',
       content: 'stretch',
       items: 'center',
       padding: '0',
+      overflow: 'n',
       sizing: 'content',
-      color: '#special',
-      fill: 'bg',
       cursor: 'default',
       text: 'v-middle',
-      inset: '0 :active[.5em] :pressed[0] :active:pressed[.5em]',
-      mark: ':focusable[.5em hover]',
+      mark: '.5em hover :disabled[n]',
       expand: '.5em',
-
-      '--icon-opacity': ':pressed[1] 0',
+      inset: 'n',
     };
   }
 }
diff --git a/src/elements/radio.js b/src/elements/radio.js
index fca27284..e9e7b2fd 100644
--- a/src/elements/radio.js
+++ b/src/elements/radio.js
@@ -16,8 +16,9 @@ export default class NuRadio extends NuAction {
   static get nuTemplate() {
     return `
       <nu-circle
-        fill="^host clear :pressed[special]"
+        fill="^host clear :pressed[#special]"
         transition="fill"
+        size="1em - 2bw"
         border="0"></nu-circle>
     `;
   }
@@ -25,13 +26,13 @@ export default class NuRadio extends NuAction {
   static get nuStyles() {
     return {
       display: 'inline-block',
-      width: '1em',
-      height: '1em',
-      border: '1bw #text',
+      width: '1em - 2bw',
+      height: '1em - 2bw',
+      border: '#text :pressed[#special]',
       radius: 'round',
       content: 'stretch',
       items: 'center',
-      padding: '2bw',
+      padding: '1ow',
       sizing: 'content',
       cursor: 'default',
       text: 'v-middle',

From e9d1cb3f80ae8fce3ca92800862262b96041b874 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 15 Mar 2021 16:44:53 +0300
Subject: [PATCH 09/17] nu-checkbox & nu-radio: update checked styles * 2

---
 src/elements/radio.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/elements/radio.js b/src/elements/radio.js
index e9e7b2fd..af83145c 100644
--- a/src/elements/radio.js
+++ b/src/elements/radio.js
@@ -16,7 +16,7 @@ export default class NuRadio extends NuAction {
   static get nuTemplate() {
     return `
       <nu-circle
-        fill="^host clear :pressed[#special]"
+        fill="^host clear :pressed[#special-bg]"
         transition="fill"
         size="1em - 2bw"
         border="0"></nu-circle>
@@ -28,7 +28,7 @@ export default class NuRadio extends NuAction {
       display: 'inline-block',
       width: '1em - 2bw',
       height: '1em - 2bw',
-      border: '#text :pressed[#special]',
+      border: '#text :pressed[#special-bg]',
       radius: 'round',
       content: 'stretch',
       items: 'center',

From 4e3ea3305b463405419f721fd4de779093f76b7f Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 16 Mar 2021 15:17:39 +0300
Subject: [PATCH 10/17] nu-datepicker: fix inset style for days

---
 src/components/datepicker.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/datepicker.svelte b/src/components/datepicker.svelte
index e9b2fd96..1cec746d 100644
--- a/src/components/datepicker.svelte
+++ b/src/components/datepicker.svelte
@@ -74,19 +74,19 @@
   columns="repeat(7, 1fr)" content="start stretch"
   text="center" gap="1bw">
   <nu-attrs for="day" fill="clear" radius={isRange ? '1r :hover[1r 0 0 1r]' : '1r :hover[1r]'}
-            text="n" inset="n" border="n" focus="inset"></nu-attrs>
-  <nu-attrs for="today" text="h" color="special" inset="0 0 0 1bw #border"></nu-attrs>
+            text="n" inset="#clear :active[#shadow.50]" border="n" focus="inset"></nu-attrs>
+  <nu-attrs for="today" text="h" color="special" inset="0 0 0 1bw #border :active[#shadow.50]"></nu-attrs>
   <nu-attrs for="other-month" color="text 50% :hover[text]"></nu-attrs>
   <nu-attrs for="disabled" disabled color="text 50%"></nu-attrs>
-  <nu-attrs for="start" special fill="special-bg" color radius="1r 0 0 1r" inset="n"></nu-attrs>
+  <nu-attrs for="start" special fill="special-bg" color radius="1r 0 0 1r"></nu-attrs>
   <nu-attrs for="end" radius="0r 1r 1r 0r :hover[1r 0 0 1r]" special fill="special-bg"
-            color inset="n"></nu-attrs>
+            color></nu-attrs>
   <nu-attrs for="selected" radius special fill="special-bg" color="special-text"></nu-attrs>
   <nu-attrs for="range"
-            radius={isRange ? '0 :hover[0 1r 1r 0]' : '1r'} inset="n"
+            radius={isRange ? '0 :hover[0 1r 1r 0]' : '1r'}
             fill="special-bg 25%" color="text" border="0 0 0 1bw #bg"></nu-attrs>
   <nu-attrs for="range-inside" radius="0 :hover[1r 0 0 1r]" fill="special-bg 25%" color="text"
-            border="0 0 0 1bw #bg" inset="n"></nu-attrs>
+            border="0 0 0 1bw #bg"></nu-attrs>
 
   {#each monthDays as day}
     <nu-btn

From eb56820e3e584f499cff7d121ddc2b27bb388691 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 16 Mar 2021 15:17:59 +0300
Subject: [PATCH 11/17] nu-btngroup: fix disabled styles

---
 src/elements/btngroup.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/elements/btngroup.js b/src/elements/btngroup.js
index 7d5c09b7..2a598647 100644
--- a/src/elements/btngroup.js
+++ b/src/elements/btngroup.js
@@ -12,6 +12,8 @@ export default class NuBtnGroup extends NuGroup {
       border: '',
       fill: 'var(--local-border-color, var(--border-color)) :disabled[rgba(var(--local-border-color-rgb, var(--border-color-rgb)), var(--disabled-opacity))]',
       outline: 'n :radiogroup[focus-inside visible]',
+      transition: 'filter, opacity',
+      filter: 'n :disabled[saturate(0.33) contrast(0.88) opacity(var(--disabled-opacity))]',
     };
   }
 
@@ -20,7 +22,8 @@ export default class NuBtnGroup extends NuGroup {
       'attrs:action': {
         border: '0',
         outline: '^btngroup focus visible :radiogroup[n]',
-        padding: '1x',
+        padding: '1x 1.5x',
+        filter: 'n',
       },
     };
   }

From 0753e1fccde1850d46468ce8c2b0a71bc446e9d3 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 16 Mar 2021 15:18:20 +0300
Subject: [PATCH 12/17] nu-input: fix placeholder styles

---
 src/elements/input.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/elements/input.js b/src/elements/input.js
index f8a8222d..9550404b 100644
--- a/src/elements/input.js
+++ b/src/elements/input.js
@@ -35,7 +35,7 @@ export default class NuInput extends NuEl {
       color: 'text :special[special-text]',
       border: '1bw',
       outline: 'focus-inside',
-      filter: 'n :disabled[saturate(0.25) contrast(0.78) opacity(var(--disabled-opacity))]',
+      filter: 'n :disabled[saturate(0.33) contrast(0.78) opacity(var(--disabled-opacity))]',
       transition: 'theme',
       selectable: 'n',
       box: 'y',
@@ -119,13 +119,21 @@ export default class NuInput extends NuEl {
         color: var(--local-placeholder-color);
       }`,
 
-      `${sel('[special]', '::placeholder')} {
+      `${sel('[special]:not([disabled])', '::placeholder')} {
         --local-placeholder-color: var(--placeholder-color, rgba(var(--special-text-color-rgb), .5));
       }`,
 
-      `${sel(':not([special])', '::placeholder')} {
+      `${sel(':not([special]):not([disabled])', '::placeholder')} {
         --local-placeholder-color: var(--placeholder-color, rgba(var(--text-color-rgb), .5));
       }`,
+
+      `${sel('[special][disabled]', '::placeholder')} {
+        --local-placeholder-color: var(--placeholder-color, rgba(var(--special-text-color-rgb), .66));
+      }`,
+
+      `${sel(':not([special])[disabled]', '::placeholder')} {
+        --local-placeholder-color: var(--placeholder-color, rgba(var(--text-color-rgb), .66));
+      }`,
     ];
   }
 }

From c7b3daba8a744df9d15d3c3da0724c0cdf3082ec Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 16 Mar 2021 15:18:33 +0300
Subject: [PATCH 13/17] widgets: fix disabled filter

---
 src/elements/action.js | 2 +-
 src/elements/option.js | 2 +-
 src/elements/radio.js  | 2 +-
 src/elements/slider.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/elements/action.js b/src/elements/action.js
index 15436547..f751c924 100644
--- a/src/elements/action.js
+++ b/src/elements/action.js
@@ -23,7 +23,7 @@ export default class NuAction extends NuEl {
       cursor: 'pointer :disabled[default]',
       selectable: 'y',
       box: 'y',
-      filter: 'n :disabled[saturate(0.25) contrast(0.88) opacity(var(--disabled-opacity))]',
+      filter: 'n :disabled[saturate(0.33) contrast(0.88) opacity(var(--disabled-opacity))]',
     };
   }
 
diff --git a/src/elements/option.js b/src/elements/option.js
index 81f2567a..371f9cb2 100644
--- a/src/elements/option.js
+++ b/src/elements/option.js
@@ -33,7 +33,7 @@ export default class NuOption extends NuEl {
       color: 'text',
       transition: 'theme',
       mark: 'hover',
-      filter: 'n :disabled[saturate(0.25) contrast(0.88) opacity(var(--disabled-opacity))]',
+      filter: 'n :disabled[saturate(0.33) contrast(0.88) opacity(var(--disabled-opacity))]',
       cursor: 'pointer :disabled[default]',
       inset: '.75em #shadow.0 :active[.75em #shadow.50] :selected[.75em #shadow.0] :active:selected[.75em #special-shadow.50]',
       text: 'sb nowrap',
diff --git a/src/elements/radio.js b/src/elements/radio.js
index af83145c..d1beaa8b 100644
--- a/src/elements/radio.js
+++ b/src/elements/radio.js
@@ -28,7 +28,7 @@ export default class NuRadio extends NuAction {
       display: 'inline-block',
       width: '1em - 2bw',
       height: '1em - 2bw',
-      border: '#text :pressed[#special-bg]',
+      border: '#text :disabled.pressed[#text.50] :pressed[#special-bg]',
       radius: 'round',
       content: 'stretch',
       items: 'center',
diff --git a/src/elements/slider.js b/src/elements/slider.js
index 0a6b227c..c4cf2afe 100644
--- a/src/elements/slider.js
+++ b/src/elements/slider.js
@@ -62,7 +62,7 @@ export default class NuSlider extends NuEl {
       orient: 'h',
       outline: 'n',
       box: 'y',
-      filter: 'n :disabled[saturate(0.25) contrast(0.88) opacity(var(--disabled-opacity))]',
+      filter: 'n :disabled[saturate(0.33) contrast(0.88) opacity(var(--disabled-opacity))]',
     };
   }
 

From af1ae1d419ed8ca2adeec1bb5ac1823db6ef1295 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 16 Mar 2021 15:34:02 +0300
Subject: [PATCH 14/17] nu-input: fix placeholder styles * 2

---
 src/elements/input.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/elements/input.js b/src/elements/input.js
index 9550404b..b1d77c87 100644
--- a/src/elements/input.js
+++ b/src/elements/input.js
@@ -117,6 +117,7 @@ export default class NuInput extends NuEl {
       `${sel('', '::placeholder')} {
         -webkit-text-fill-color: var(--local-placeholder-color);
         color: var(--local-placeholder-color);
+        filter: saturate(.33);
       }`,
 
       `${sel('[special]:not([disabled])', '::placeholder')} {
@@ -126,14 +127,6 @@ export default class NuInput extends NuEl {
       `${sel(':not([special]):not([disabled])', '::placeholder')} {
         --local-placeholder-color: var(--placeholder-color, rgba(var(--text-color-rgb), .5));
       }`,
-
-      `${sel('[special][disabled]', '::placeholder')} {
-        --local-placeholder-color: var(--placeholder-color, rgba(var(--special-text-color-rgb), .66));
-      }`,
-
-      `${sel(':not([special])[disabled]', '::placeholder')} {
-        --local-placeholder-color: var(--placeholder-color, rgba(var(--text-color-rgb), .66));
-      }`,
     ];
   }
 }

From f6a2a479f203c080f306f2e4cb62fff094fc5c19 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 16 Mar 2021 16:35:00 +0300
Subject: [PATCH 15/17] bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2f327438..7f3818f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "numl",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.23",
   "module": "dist/index.js",
   "homepage": "https://numl.design",
   "repository": {

From c6e2690f0ab58ec684048aed1b736e7c86dcb4b2 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 16 Mar 2021 16:53:49 +0300
Subject: [PATCH 16/17] bump version * 2

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index f9258b43..0fb9ab2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "numl",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.23",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

From c12ac036f5d9c174627d8f946a3f327596e7d238 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 16 Mar 2021 16:54:20 +0300
Subject: [PATCH 17/17] readme: bump version

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 774c5e18..1d78c22a 100644
--- a/README.md
+++ b/README.md
@@ -46,13 +46,13 @@ Add the following code to your page.
 via [JsDelivr](http://www.jsdelivr.com/):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/numl@1.0.0-beta.21/dist/index.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/numl@1.0.0-beta.23/dist/index.js"></script>
 ```
 
 via [Skypack](https://www.skypack.dev/):
 
 ```html
-<script type="module" src="https://cdn.skypack.dev/numl@1.0.0-beta.21"></script>
+<script type="module" src="https://cdn.skypack.dev/numl@1.0.0-beta.23"></script>
 ```
 
 That's it! Now you can use all Numl elements and features!