@nordcode/ui 2.0.5 → 2.1.0

package/out/complete_configless.css

@@ -99,14 +99,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) {
@@ -985,21 +979,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;
     }
@@ -1122,6 +1132,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;
@@ -1308,7 +1326,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));
@@ -1331,7 +1349,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;
@@ -1339,31 +1356,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);
@@ -1374,58 +1396,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));
@@ -1437,22 +1446,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%);
@@ -1465,63 +1478,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);
@@ -1566,7 +1578,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;
   }
@@ -1625,13 +1637,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;
@@ -1660,7 +1672,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]) {
@@ -1909,8 +1921,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);
@@ -1921,7 +1933,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));
@@ -1935,7 +1947,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;
@@ -1951,39 +1963,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%);
@@ -1993,14 +2017,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;
@@ -2008,18 +2032,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);
@@ -2031,11 +2055,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%);
   }
 
@@ -2050,7 +2074,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);
   }
@@ -2066,7 +2090,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) {
@@ -2110,43 +2134,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 {
@@ -2357,7 +2344,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;
   }
@@ -2371,6 +2358,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%;
@@ -2437,7 +2463,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%);
   }
 
@@ -2480,7 +2506,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;
@@ -2520,7 +2546,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 {

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
   },
-  "version": "2.0.5",
+  "version": "2.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -68,8 +68,9 @@
     "./fonts": "./src/assets/fonts/fonts.css"
   },
   "devDependencies": {
-    "browserslist": "^4.24.2",
-    "lightningcss": "^1.28.1"
+    "browserslist": "^4.28.0",
+    "lightningcss": "^1.30.2",
+    "browserslist-config-baseline": "^0.5.0"
   },
   "scripts": {
     "lib:transform": "node transform.js",

package/src/assets/icons/ArrowRightSolid.svelte

@@ -1 +1,3 @@
-<svg class="nc-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z"/></svg>
+<svg class="nc-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor">
+    <path d="M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z" />
+</svg>