@nordcode/ui 2.0.5 → 2.1.0

package/out/complete.css

@@ -59,14 +59,14 @@
     --color-brand-primary-base-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary));
     --color-brand-primary-emphasis-light: oklch(calc(var(--l-brand-primary-light) * .85) calc(var(--c-brand-primary) * 1.1) var(--h-brand-primary));
     --color-brand-primary-surface-light: oklch(calc(var(--lightness-max)  - .1 + var(--l-brand-primary-light) / 10) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
-    --color-brand-primary-contrast-lightness-light: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-brand-primary-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-brand-primary-contrast-lightness-light: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-brand-primary-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-brand-primary-contrast-light: oklch(var(--color-brand-primary-contrast-lightness-light) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
     --color-brand-primary-hover-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary) / calc(var(--transparency-weaker) / 10));
     --l-brand-primary-dark: .75;
     --color-brand-primary-base-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary));
     --color-brand-primary-emphasis-dark: oklch(calc(var(--l-brand-primary-dark) * 1.25) calc(var(--c-brand-primary) * 1.1) var(--h-brand-primary));
     --color-brand-primary-surface-dark: oklch(calc(var(--lightness-min)  + var(--l-brand-primary-dark) / 3) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
-    --color-brand-primary-contrast-lightness-dark: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-brand-primary-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-brand-primary-contrast-lightness-dark: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-brand-primary-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-brand-primary-contrast-dark: oklch(var(--color-brand-primary-contrast-lightness-dark) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
     --color-brand-primary-hover-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary) / calc(var(--transparency-weaker) / 10));
     --c-brand-secondary: .4;
@@ -75,14 +75,14 @@
     --color-brand-secondary-base-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary));
     --color-brand-secondary-emphasis-light: oklch(calc(var(--l-brand-secondary-light) * .85) calc(var(--c-brand-secondary) * 1.1) var(--h-brand-secondary));
     --color-brand-secondary-surface-light: oklch(calc(var(--lightness-max)  - .1 + var(--l-brand-secondary-light) / 10) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
-    --color-brand-secondary-contrast-lightness-light: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-brand-secondary-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-brand-secondary-contrast-lightness-light: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-brand-secondary-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-brand-secondary-contrast-light: oklch(var(--color-brand-secondary-contrast-lightness-light) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
     --color-brand-secondary-hover-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary) / calc(var(--transparency-weaker) / 10));
     --l-brand-secondary-dark: .76;
     --color-brand-secondary-base-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary));
     --color-brand-secondary-emphasis-dark: oklch(calc(var(--l-brand-secondary-dark) * 1.25) calc(var(--c-brand-secondary) * 1.1) var(--h-brand-secondary));
     --color-brand-secondary-surface-dark: oklch(calc(var(--lightness-min)  + var(--l-brand-secondary-dark) / 3) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
-    --color-brand-secondary-contrast-lightness-dark: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-brand-secondary-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-brand-secondary-contrast-lightness-dark: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-brand-secondary-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-brand-secondary-contrast-dark: oklch(var(--color-brand-secondary-contrast-lightness-dark) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
     --color-brand-secondary-hover-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary) / calc(var(--transparency-weaker) / 10));
     --l-text-light: .28;
@@ -143,14 +143,14 @@
     --color-status-success-base-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success));
     --color-status-success-emphasis-light: oklch(calc(var(--l-status-success-light) * .85) calc(var(--c-status-success) * 1.1) var(--h-status-success));
     --color-status-success-surface-light: oklch(calc(var(--lightness-max)  - .1 + var(--l-status-success-light) / 10) calc(var(--c-status-success) * .25) var(--h-status-success));
-    --color-status-success-contrast-lightness-light: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-status-success-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-status-success-contrast-lightness-light: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-status-success-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-status-success-contrast-light: oklch(var(--color-status-success-contrast-lightness-light) calc(var(--c-status-success) * .25) var(--h-status-success));
     --color-status-success-hover-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success) / calc(var(--transparency-weaker) / 10));
     --l-status-success-dark: .75;
     --color-status-success-base-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success));
     --color-status-success-emphasis-dark: oklch(calc(var(--l-status-success-dark) * 1.25) calc(var(--c-status-success) * 1.1) var(--h-status-success));
     --color-status-success-surface-dark: oklch(calc(var(--lightness-min)  + var(--l-status-success-dark) / 3) calc(var(--c-status-success) * .25) var(--h-status-success));
-    --color-status-success-contrast-lightness-dark: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-status-success-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-status-success-contrast-lightness-dark: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-status-success-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-status-success-contrast-dark: oklch(var(--color-status-success-contrast-lightness-dark) calc(var(--c-status-success) * .25) var(--h-status-success));
     --color-status-success-hover-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success) / calc(var(--transparency-weaker) / 10));
     --c-status-warning: .3;
@@ -159,14 +159,14 @@
     --color-status-warning-base-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning));
     --color-status-warning-emphasis-light: oklch(calc(var(--l-status-warning-light) * .85) calc(var(--c-status-warning) * 1.1) var(--h-status-warning));
     --color-status-warning-surface-light: oklch(calc(var(--lightness-max)  - .1 + var(--l-status-warning-light) / 10) calc(var(--c-status-warning) * .25) var(--h-status-warning));
-    --color-status-warning-contrast-lightness-light: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-status-warning-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-status-warning-contrast-lightness-light: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-status-warning-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-status-warning-contrast-light: oklch(var(--color-status-warning-contrast-lightness-light) calc(var(--c-status-warning) * .25) var(--h-status-warning));
     --color-status-warning-hover-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning) / calc(var(--transparency-weaker) / 10));
     --l-status-warning-dark: .75;
     --color-status-warning-base-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning));
     --color-status-warning-emphasis-dark: oklch(calc(var(--l-status-warning-dark) * 1.25) calc(var(--c-status-warning) * 1.1) var(--h-status-warning));
     --color-status-warning-surface-dark: oklch(calc(var(--lightness-min)  + var(--l-status-warning-dark) / 3) calc(var(--c-status-warning) * .25) var(--h-status-warning));
-    --color-status-warning-contrast-lightness-dark: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-status-warning-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-status-warning-contrast-lightness-dark: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-status-warning-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-status-warning-contrast-dark: oklch(var(--color-status-warning-contrast-lightness-dark) calc(var(--c-status-warning) * .25) var(--h-status-warning));
     --color-status-warning-hover-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning) / calc(var(--transparency-weaker) / 10));
     --c-status-danger: .3;
@@ -175,14 +175,14 @@
     --color-status-danger-base-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger));
     --color-status-danger-emphasis-light: oklch(calc(var(--l-status-danger-light) * .85) calc(var(--c-status-danger) * 1.1) var(--h-status-danger));
     --color-status-danger-surface-light: oklch(calc(var(--lightness-max)  - .1 + var(--l-status-danger-light) / 10) calc(var(--c-status-danger) * .25) var(--h-status-danger));
-    --color-status-danger-contrast-lightness-light: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-status-danger-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-status-danger-contrast-lightness-light: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-status-danger-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-status-danger-contrast-light: oklch(var(--color-status-danger-contrast-lightness-light) calc(var(--c-status-danger) * .25) var(--h-status-danger));
     --color-status-danger-hover-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger) / calc(var(--transparency-weaker) / 10));
     --l-status-danger-dark: .75;
     --color-status-danger-base-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger));
     --color-status-danger-emphasis-dark: oklch(calc(var(--l-status-danger-dark) * 1.25) calc(var(--c-status-danger) * 1.1) var(--h-status-danger));
     --color-status-danger-surface-dark: oklch(calc(var(--lightness-min)  + var(--l-status-danger-dark) / 3) calc(var(--c-status-danger) * .25) var(--h-status-danger));
-    --color-status-danger-contrast-lightness-dark: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-status-danger-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-status-danger-contrast-lightness-dark: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-status-danger-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-status-danger-contrast-dark: oklch(var(--color-status-danger-contrast-lightness-dark) calc(var(--c-status-danger) * .25) var(--h-status-danger));
     --color-status-danger-hover-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger) / calc(var(--transparency-weaker) / 10));
     --c-status-info: .3;
@@ -191,14 +191,14 @@
     --color-status-info-base-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info));
     --color-status-info-emphasis-light: oklch(calc(var(--l-status-info-light) * .85) calc(var(--c-status-info) * 1.1) var(--h-status-info));
     --color-status-info-surface-light: oklch(calc(var(--lightness-max)  - .1 + var(--l-status-info-light) / 10) calc(var(--c-status-info) * .25) var(--h-status-info));
-    --color-status-info-contrast-lightness-light: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-status-info-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-status-info-contrast-lightness-light: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-status-info-light)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-status-info-contrast-light: oklch(var(--color-status-info-contrast-lightness-light) calc(var(--c-status-info) * .25) var(--h-status-info));
     --color-status-info-hover-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
     --l-status-info-dark: .75;
     --color-status-info-base-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info));
     --color-status-info-emphasis-dark: oklch(calc(var(--l-status-info-dark) * 1.25) calc(var(--c-status-info) * 1.1) var(--h-status-info));
     --color-status-info-surface-dark: oklch(calc(var(--lightness-min)  + var(--l-status-info-dark) / 3) calc(var(--c-status-info) * .25) var(--h-status-info));
-    --color-status-info-contrast-lightness-dark: calc(var(--lightness-max)  - ( var(--lightness-diff) * min(max((var(--l-status-info-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
+    --color-status-info-contrast-lightness-dark: calc(var(--lightness-max)  - var(--lightness-diff) * min(max((var(--l-status-info-dark)  - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
     --color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) calc(var(--c-status-info) * .25) var(--h-status-info));
     --color-status-info-hover-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
     --control-height-base: var(--button-height-base);
@@ -307,14 +307,8 @@
     border-width: 0;
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    :where(:focus-visible) {
-      transition: outline-offset var(--transition-duration-short) var(--ease-2);
-    }
-
-    :where(:not(:active):focus-visible) {
-      transition-duration: var(--transition-duration-base);
-    }
+  :where(:focus-visible) {
+    transition: outline-offset var(--transition-duration-quick-1) var(--ease-2);
   }
 
   :where(:not(:active):focus-visible) {
@@ -1193,21 +1187,37 @@
     --ease-bounce-3: linear(0, .004, .016, .035, .062, .098, .141 11.4%, .25, .39, .562, .764, 1 30.3%, .847 34.8%, .787, .737, .699, .672, .655, .65, .656, .672, .699, .738, .787, .847 61.7%, 1 66.2%, .946, .908, .885 74.2%, .879, .878, .879, .885 79.5%, .908, .946, 1 87.4%, .981, .968, .96, .957, .96, .968, .981, 1);
     --ease-bounce-4: linear(0, .004, .016 3%, .062, .141, .25, .391, .562 18.2%, 1 24.3%, .81, .676 32.3%, .629, .595, .575, .568, .575, .595, .629, .676 48.2%, .811, 1 56.2%, .918, .86, .825, .814, .825, .86, .918, 1 77.2%, .94 80.6%, .925, .92, .925, .94 87.5%, 1 90.9%, .974, .965, .974, 1);
     --ease-bounce-5: linear(0, .004, .016 2.5%, .063, .141, .25 10.1%, .562, 1 20.2%, .783, .627, .534 30.9%, .511, .503, .511, .534 38%, .627, .782, 1 48.7%, .892, .815, .769 56.3%, .757, .753, .757, .769 61.3%, .815, .892, 1 68.8%, .908 72.4%, .885, .878, .885, .908 79.4%, 1 83%, .954 85.5%, .943, .939, .943, .954 90.5%, 1 93%, .977, .97, .977, 1);
+    --easing-entry: cubic-bezier(.1, 0, 0, 1);
+    --easing-exit: cubic-bezier(.3, 0, 1, .8);
     --transition-duration-instant: 0s;
-    --transition-duration-short: .1s;
-    --transition-duration-base: .2s;
-    --transition-duration-long: .3s;
+    --transition-duration-quick-1: 80ms;
+    --transition-duration-quick-2: .12s;
+    --transition-duration-moderate-1: .18s;
+    --transition-duration-moderate-2: .26s;
+    --transition-duration-gentle-1: .32s;
+    --transition-duration-gentle-2: .42s;
+    --transition-duration-short: var(--transition-duration-quick-1);
+    --transition-duration-base: var(--transition-duration-moderate-1);
+    --transition-duration-long: var(--transition-duration-gentle-1);
     --transition-duration-entry: 0s;
     --transition-duration-exit: 0s;
     --transition-target-scale: .9;
+    --animated-element-distance: 0;
+    --animated-element-width: 0;
+    --animated-element-height: 0;
+    --transition-duration-calculated: calc(( .5 * var(--animated-element-distance, 0)  + .35 * var(--animated-element-width, 0)  + .3 * var(--animated-element-height, 0)) * 1ms);
   }
 
   @media (prefers-reduced-motion: reduce) {
     :where(html) {
+      --transition-duration-quick-1: 80ms;
+      --transition-duration-quick-2: .12s;
+      --transition-duration-moderate-1: .18s;
+      --transition-duration-moderate-2: .26s;
+      --transition-duration-gentle-1: .32s;
+      --transition-duration-gentle-2: .42s;
+      --transition-duration-calculated: 0;
       --transition-duration-instant: 0s;
-      --transition-duration-short: 0s;
-      --transition-duration-base: 0s;
-      --transition-duration-long: 0s;
       --transition-duration-entry: 0s;
       --transition-duration-exit: 0s;
     }
@@ -1330,6 +1340,14 @@
   }
 }
 
+@layer helpers.conditionalRadius {
+  :where(html) {
+    --border-radius-cond-small: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-small));
+    --border-radius-cond-medium: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-medium));
+    --border-radius-cond-large: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-large));
+  }
+}
+
 :where(.text-assistive, .sr-only) {
   clip: rect(0 0 0 0);
   white-space: nowrap;
@@ -1516,7 +1534,7 @@
 }
 
 @layer components.buttons {
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), input[type="file"]:not([class]), .nc-button) {
+  :where(button, button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], .nc-button) {
     --_button-background: var(--button-background, var(--surface-hover));
     --_button-color: var(--button-color, var(--text-hover));
     --_button-border-color: var(--button-border-color, var(--surface-hover));
@@ -1539,7 +1557,6 @@
     font-weight: var(--font-weight-default);
     font-size: inherit;
     cursor: pointer;
-    box-sizing: border-box;
     text-align: center;
     transition: var(--transition-duration-base) var(--ease-2);
     -webkit-text-decoration: unset;
@@ -1547,31 +1564,36 @@
     box-shadow: var(--_button-box-shadow);
     -webkit-user-select: none;
     user-select: none;
+    justify-content: center;
+    align-items: center;
+    gap: var(--control-spacing-tiny, .25em);
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     line-height: var(--line-height-base);
-    justify-content: center;
-    align-items: center;
     padding-block: 0;
     transition-property: box-shadow, transform;
     display: inline-flex;
     position: relative;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button):hover {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button):hover {
     background: var(--_button-background-hover);
     color: var(--_button-color-hover);
     border-color: var(--_button-border-color-hover);
     box-shadow: var(--_button-hover-shadow);
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button)[aria-pressed="true"] {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button)[aria-pressed="true"] {
     box-shadow: none;
     font-weight: var(--font-weight-active);
     transform: none;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button):is(:active, .-active) {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button) > svg {
+    pointer-events: none;
+  }
+
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button):is(:active, .-active) {
     background-color: var(--_button-background-hover);
     color: var(--_button-color-hover);
     border-color: var(--_button-border-color-hover);
@@ -1582,58 +1604,45 @@
     transform: none;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button)[disabled] {
-    --_button-border-color-hover: var(--_button-border-color);
-    filter: contrast(.72) opacity(.72);
-    cursor: not-allowed;
-    --_button-background: none !important;
-    --_button-background-hover: none !important;
-    --_button-color: var(--color-text-subtle) !important;
-    --_button-color-hover: var(--_button-color) !important;
-    --_button-border-color: var(--color-text-subtle) !important;
-    box-shadow: none !important;
-    transform: none !important;
-  }
-
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-outline {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-outline {
     color: var(--text);
     border-color: var(--border);
     background-color: #0000;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-outline:hover {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-outline:hover {
     background-color: var(--_button-background-hover-light);
     color: var(--text);
     border-color: var(--border-hover);
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-stealth {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-stealth {
     color: var(--text);
     background-color: #0000;
     border-color: #0000;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-stealth:hover {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-stealth:hover {
     background-color: var(--_button-background-hover-light);
     color: var(--text);
     border-color: #0000;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-stealth {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-stealth {
     box-shadow: none !important;
     transform: none !important;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-small {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-small {
     --_button-padding-inline: var(--control-spacing-near, .5em);
     min-block-size: var(--control-height-small);
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-round {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-round {
     --_button-border-radius: var(--border-radius-round);
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-offset {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-offset {
     --_button-offset-distance: var(--button-offset-distance, calc(-1 * var(--control-spacing-minimal)));
     --_button-offset-distance-hover: var(--button-offset-distance-hover, calc(-.5 * var(--control-spacing-minimal)));
     --_button-transform: translate(var(--_button-offset-distance), var(--_button-offset-distance));
@@ -1645,22 +1654,26 @@
     inset-inline-start: calc(var(--_button-offset-distance) * -1);
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-offset:hover {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-offset:hover {
     transform: var(--_button-hover-transform);
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button):has(svg) {
-    gap: var(--control-spacing-tiny, .25em);
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-icon.-small {
+    padding: 0;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button)[aria-label], :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-icon {
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-aligned {
+    margin-inline: calc(-1 * var(--_button-padding-inline));
+  }
+
+  :is([aria-label], .-icon):where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
     --_button-border-radius: var(--border-radius-round);
     aspect-ratio: 1;
     fill: currentColor;
     padding: 0;
   }
 
-  :is(:where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button)[aria-label], :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-icon):after {
+  :is([aria-label], .-icon):where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button):after {
     content: "";
     inline-size: max(var(--control-height-base), 100%);
     block-size: max(var(--control-height-base), 100%);
@@ -1673,63 +1686,62 @@
     inset-inline-start: calc(-.5 * (var(--control-height-base)  - 100%));
   }
 
-  :is(:where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button)[aria-label], :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-icon) > svg {
-    pointer-events: none;
-  }
-
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-icon.-small {
-    padding: 0;
-  }
-
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-aligned {
-    margin-inline: calc(-1 * var(--_button-padding-inline));
+  [disabled]:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
+    --_button-border-color-hover: var(--_button-border-color);
+    filter: contrast(.72) opacity(.72);
+    cursor: not-allowed;
+    --_button-background: none !important;
+    --_button-background-hover: none !important;
+    --_button-color: var(--color-text-subtle) !important;
+    --_button-color-hover: var(--_button-color) !important;
+    --_button-border-color: var(--color-text-subtle) !important;
+    box-shadow: none !important;
+    transform: none !important;
   }
 
-  :where(input[type="file"]:not([class])) {
+  :where(input[type="file"]) {
     color: var(--_input-color);
     background-color: var(--_input-background);
     border: var(--_input-border);
     min-block-size: var(--control-height-base);
     border-radius: var(--_input-border-radius);
-    padding-inline-start: 0;
     padding-inline-end: var(--contol-spacing-near, .5em);
+    padding-inline-start: 0 !important;
   }
 
-  :where(input[type="file"]:not([class]))::-webkit-file-upload-button {
+  :where(input[type="file"])::-webkit-file-upload-button {
     background-color: var(--_button-background);
     color: var(--_button-color);
     padding-inline: var(--_button-padding-inline);
     cursor: pointer;
     box-shadow: none;
-    min-block-size: calc(var(--control-height-base)  - var(--border-width-thin));
     border: none;
-    border-inline-end: var(--border-width-thin) solid var(--color-border-base);
     border-start-end-radius: 0;
     border-end-end-radius: 0;
+    min-block-size: 100%;
     margin-inline-end: var(--contol-spacing-near, .5em);
     inset-block-start: 0;
     inset-inline-start: 0;
     transform: none;
   }
 
-  :where(input[type="file"]:not([class]))::file-selector-button {
+  :where(input[type="file"])::file-selector-button {
     background-color: var(--_button-background);
     color: var(--_button-color);
     padding-inline: var(--_button-padding-inline);
     cursor: pointer;
     box-shadow: none;
-    min-block-size: calc(var(--control-height-base)  - var(--border-width-thin));
     border: none;
-    border-inline-end: var(--border-width-thin) solid var(--color-border-base);
     border-start-end-radius: 0;
     border-end-end-radius: 0;
+    min-block-size: 100%;
     margin-inline-end: var(--contol-spacing-near, .5em);
     inset-block-start: 0;
     inset-inline-start: 0;
     transform: none;
   }
 
-  :where(button[type="reset"]:not([class]), .nc-button.-destructive) {
+  :where(button[type="reset"], .nc-button.-destructive) {
     --text: var(--color-status-danger-emphasis);
     --color: var(--color-status-danger-base);
     --surface: var(--color-status-danger-surface);
@@ -1774,7 +1786,7 @@
     background-color: var(--_card-background-color);
     border-radius: var(--_card-border-radius);
     box-shadow: var(--_card-shadow);
-    transition: border-color var(--transition-duration-base) var(--ease-2);
+    transition: border-color var(--transition-duration-quick-2) var(--ease-2);
     display: inline-block;
     overflow: hidden;
   }
@@ -1833,13 +1845,13 @@
     --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
     --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
     --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
-    --_dialog-transition-duration: var(--dialog-transition-duration, var(--transition-duration-base));
+    --_dialog-transition-duration: var(--dialog-transition-duration, var(--transition-duration-moderate-2));
     --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
     --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
     --_dialog-radius: 0;
     z-index: var(--layer-important);
-    animation: close-dialog var(--_dialog-transition-duration) cubic-bezier(.7, 0, 1, 1) forwards;
-    transition: opacity var(--_dialog-transition-duration) cubic-bezier(.7, 0, 1, 1);
+    animation: close-dialog var(--_dialog-transition-duration) var(--easing-exit) forwards;
+    transition: opacity var(--_dialog-transition-duration) var(--easing-exit);
     border: var(--border-width-thin) solid var(--color-border-base);
     block-size: max-content;
     inline-size: 100dvw;
@@ -1868,7 +1880,7 @@
   }
 
   :where(.nc-dialog)[open] {
-    animation: open-dialog var(--_dialog-transition-duration) cubic-bezier(0, .6, .58, 1);
+    animation: open-dialog var(--_dialog-transition-duration) var(--easing-entry);
   }
 
   :where(.nc-dialog):not([open]) {
@@ -2117,8 +2129,8 @@
   }
 }
 
-@layer components.inputs {
-  :where(label:not([class]), .nc-input-label) {
+@layer base.inputs {
+  :where(label, .nc-input-label) {
     font-family: var(--font-family-default);
     letter-spacing: var(--tracking-tight);
     font-weight: var(--font-weight-active);
@@ -2129,7 +2141,7 @@
     display: inline-flex;
   }
 
-  :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="text"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="tel"], input[type="color"], input[type="file"], input[type="checkbox"], input[type="radio"], textarea, select, .nc-input, .nc-select, .nc-textarea, .nc-input-checkbox, .nc-input-radio, .nc-input-label, .nc-input-color, .nc-input-field, .nc-input-error, .nc-checkbox-wrapper, .nc-input-switch, .nc-radio-field, .nc-checkbox-field) {
+  :where(input, textarea, select, .nc-input, .nc-select, .nc-textarea, .nc-input-checkbox, .nc-input-radio, .nc-input-label, .nc-input-color, .nc-input-field, .nc-input-error, .nc-checkbox-wrapper, .nc-input-switch, .nc-radio-field, .nc-checkbox-field) {
     --_input-background: var(--input-background, var(--color-surface-subtle));
     --_input-background-active: var(--input-background-active, var(--color-surface-base));
     --_input-color: var(--input-color, var(--color-text-base));
@@ -2143,7 +2155,7 @@
     --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
   }
 
-  :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="text"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="tel"], input[type="color"], input[type="file"], textarea, select, .nc-input) {
+  :where(input, textarea, select, .nc-input) {
     font: inherit;
     letter-spacing: inherit;
     word-spacing: inherit;
@@ -2159,39 +2171,51 @@
     line-height: var(--line-height-base);
   }
 
-  :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="text"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="tel"], input[type="color"], input[type="file"], textarea, select, .nc-input):focus, :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="text"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="tel"], input[type="color"], input[type="file"], textarea, select, .nc-input):hover:focus {
+  :where(input, textarea, select, .nc-input):focus, :where(input, textarea, select, .nc-input):hover:focus {
     --current-background: var(--_input-background-active);
     outline: var(--_input-outline);
     outline-offset: 0;
     background-color: var(--_input-background-active);
   }
 
-  :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="text"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="tel"], input[type="color"], input[type="file"], textarea, select, .nc-input):disabled {
+  :where(input, textarea, select, .nc-input):disabled {
     filter: var(--_input-disabled-filter);
     cursor: not-allowed;
   }
 
-  :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="text"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="tel"], input[type="color"], input[type="file"], textarea, select, .nc-input):hover {
+  :where(input, textarea, select, .nc-input):hover {
     --current-background: var(--_input-hover-background);
     background-color: var(--_input-hover-background);
   }
 
-  :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="text"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="tel"], input[type="color"], input[type="file"], textarea, select, .nc-input)[required] {
+  :where(input, textarea, select, .nc-input)[required] {
     border-inline-start-width: var(--border-width-thick);
   }
 
-  :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="text"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="tel"], input[type="color"], input[type="file"], textarea, select, .nc-input)::placeholder {
+  :where(input, textarea, select, .nc-input)::placeholder {
     color: var(--color-text-subtle);
   }
 
-  :where(select:not([class]), .nc-select) {
+  :where(input, textarea, select, .nc-input).-validate:user-valid {
+    outline: var(--_input-outline);
+    outline-offset: 0;
+    outline-color: var(--color-status-success-base);
+  }
+
+  :where(input, textarea, select, .nc-input).-validate:user-invalid {
+    outline: var(--_input-outline);
+    outline-offset: 0;
+    outline-color: var(--color-status-danger-base);
+  }
+
+  :where(select, .nc-select) {
     background-image: var(--triangle-down-url);
     background-position: right .5em top 50%;
     background-size: 1em .75em;
     padding-inline-end: 1.75em;
   }
 
-  :where(textarea:not([class]), .nc-textarea) {
+  :where(textarea, .nc-textarea) {
     min-block-size: calc(8lh + 2 * var(--_input-padding-block));
     max-block-size: 80svh;
     min-inline-size: var(--input-inline-size, 100%);
@@ -2201,14 +2225,14 @@
     field-sizing: content;
   }
 
-  :where(input[type="checkbox"]:not([class]), input[type="radio"]:not([class]), .nc-input-checkbox, .nc-input-radio, .nc-input-switch) {
+  :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch) {
     appearance: none;
     border: var(--_input-border);
     --current-background: var(--_input-background);
     background: var(--current-background);
     block-size: 1lh;
     inline-size: 1lh;
-    transition: var(--transition-duration-short) background var(--ease-2);
+    transition: var(--transition-duration-quick-1) background var(--ease-2);
     box-shadow: var(--_input-box-shadow);
     justify-content: center;
     align-items: center;
@@ -2216,18 +2240,18 @@
     display: inline-flex;
   }
 
-  :where(input[type="checkbox"]:not([class]), .nc-input-checkbox) {
+  :where(input[type="checkbox"], .nc-input-checkbox) {
     --_transition-duration: 0s;
     border-radius: var(--_input-border-radius);
     overflow: hidden;
   }
 
-  :where(input[type="checkbox"]:not([class]), .nc-input-checkbox):before {
+  :where(input[type="checkbox"], .nc-input-checkbox):before {
     content: "";
     background-color: var(--color-brand-primary-contrast);
     block-size: .75lh;
     inline-size: .75lh;
-    transition: transform var(--ease-out-2) var(--transition-duration-short);
+    transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
     font-family: var(--font-family-sans);
     --font-weight: var(--font-weight-active);
     color: var(--_input-background);
@@ -2239,11 +2263,11 @@
     transform: scale(.8)translateY(2em);
   }
 
-  :where(input[type="checkbox"]:not([class]), .nc-input-checkbox):checked {
+  :where(input[type="checkbox"], .nc-input-checkbox):checked {
     --current-background: var(--color-brand-primary-base);
   }
 
-  :where(input[type="checkbox"]:not([class]), .nc-input-checkbox):checked:before {
+  :where(input[type="checkbox"], .nc-input-checkbox):checked:before {
     transform: scale(1)translateY(0%);
   }
 
@@ -2258,7 +2282,7 @@
     background-color: var(--color-brand-primary-contrast);
     block-size: 50%;
     inline-size: 50%;
-    transition: transform var(--ease-out-2) var(--transition-duration-short);
+    transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
     display: inline-flex;
     transform: scale(.8)translateY(2em);
   }
@@ -2274,7 +2298,7 @@
   :where(input[type="color"], .nc-input-color) {
     aspect-ratio: 1;
     inline-size: auto;
-    padding: var(--control-spacing-minimal, .125em);
+    padding: var(--control-spacing-nearest, .125em);
   }
 
   :where(input[type="date"], .nc-input-date) {
@@ -2318,43 +2342,6 @@
     background-color: var(--color-brand-primary-base);
     border-color: var(--color-brand-primary-base);
   }
-
-  :where(.nc-tag-select-field) {
-    --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
-    --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
-    --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
-    --nc-legend-spacing: var(--control-spacing-near, .5em);
-  }
-
-  :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
-    outline-offset: var(--controls-spacing-near, .5em);
-    outline: var(--_input-outline);
-    border-radius: var(--_tag-select-border-radius);
-  }
-
-  :where(.nc-tag-select-field) input {
-    opacity: 0;
-    position: absolute;
-  }
-
-  :where(.nc-tag-select-field) label {
-    display: grid;
-  }
-
-  :where(.nc-tag-select-field) label:hover, :where(.nc-tag-select-field) label:focus-within {
-    background-color: var(--_input-hover-background);
-  }
-
-  :where(.nc-tag-select-field) label:has(input:checked) {
-    background: var(--_tag-select-checked-surface-color);
-    color: var(--_tag-select-checked-text-color);
-    box-shadow: var(--shadow-near);
-  }
-
-  :where(.nc-tag-select-field) label:has(input:disabled) {
-    filter: var(--_input-disabled-filter);
-    cursor: not-allowed;
-  }
 }
 
 @layer components.input-fields {
@@ -2565,7 +2552,7 @@
     border-radius: var(--_input-border-radius);
     box-shadow: var(--shadow-near);
     transition: transform, background-color;
-    transition-duration: var(--transition-duration-base);
+    transition-duration: var(--transition-duration-quick-2);
     transition-timing-function: var(--ease-2);
     display: block;
   }
@@ -2579,6 +2566,45 @@
   }
 }
 
+@layer components.inputs {
+  :where(.nc-tag-select-field) {
+    --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
+    --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
+    --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
+    --nc-legend-spacing: var(--control-spacing-near, .5em);
+  }
+
+  :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
+    outline-offset: var(--controls-spacing-near, .5em);
+    outline: var(--_input-outline);
+    border-radius: var(--_tag-select-border-radius);
+  }
+
+  :where(.nc-tag-select-field) input {
+    opacity: 0;
+    position: absolute;
+  }
+
+  :where(.nc-tag-select-field) label {
+    display: grid;
+  }
+
+  :where(.nc-tag-select-field) label:hover, :where(.nc-tag-select-field) label:focus-within {
+    background-color: var(--_input-hover-background);
+  }
+
+  :where(.nc-tag-select-field) label:has(input:checked) {
+    background: var(--_tag-select-checked-surface-color);
+    color: var(--_tag-select-checked-text-color);
+    box-shadow: var(--shadow-near);
+  }
+
+  :where(.nc-tag-select-field) label:has(input:disabled) {
+    filter: var(--_input-disabled-filter);
+    cursor: not-allowed;
+  }
+}
+
 @layer components.lists {
   :where(.nc-meta-list) {
     inline-size: 100%;
@@ -2645,7 +2671,7 @@
     backdrop-filter: blur(3px);
     background-color: var(--_notification-center-background);
     block-size: 100%;
-    transition: transform var(--transition-duration-base) ease-in-out;
+    transition: transform var(--transition-duration-moderate-2) var(--ease-in-out-2);
     transform: translate(100%);
   }
 
@@ -2688,7 +2714,7 @@
     border-radius: var(--border-radius-small);
     inline-size: 100%;
     box-shadow: var(--shadow-far);
-    animation: pop-in var(--transition-duration-base) cubic-bezier(0, .6, .58, 1);
+    animation: pop-in var(--transition-duration-moderate-2) var(--easing-entry);
     color: var(--color-text-base);
     pointer-events: all;
     flex-direction: column;
@@ -2728,7 +2754,7 @@
   }
 
   :where(.nc-notification.-closing) {
-    animation: remove-notification var(--transition-duration-base) cubic-bezier(.7, 0, 1, 1) forwards;
+    animation: remove-notification var(--transition-duration-moderate-2) var(--easing-exit) forwards;
   }
 
   @keyframes pop-in {