@nordcode/ui 2.0.6 → 2.1.0

package/src/styles/components/buttons.css

@@ -1,5 +1,5 @@
 @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"], input[type="file"]::-webkit-file-upload-button, input[type="file"]::file-selector-button, .nc-button) {
+    :where(button, button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], input[type="file"]::-webkit-file-upload-button, input[type="file"]::file-selector-button, .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));
@@ -31,7 +31,6 @@
         font-size: inherit;
         cursor: pointer;
         display: inline-flex;
-        box-sizing: border-box;
         align-items: center;
         justify-content: center;
         text-align: center;
@@ -41,13 +40,14 @@
         text-decoration: unset;
         box-shadow: var(--_button-box-shadow);
         user-select: none;
+        gap: var(--control-spacing-tiny, 0.25em);
         -webkit-tap-highlight-color: transparent;
         -webkit-touch-callout: none;
 
         line-height: var(--line-height-base);
     }
 
-    :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) {
+    :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);
@@ -61,6 +61,10 @@
             font-weight: var(--font-weight-active);
         }
 
+        & > svg {
+            pointer-events: none;
+        }
+
         &:is(:active, .-active) {
             background-color: var(--_button-background-hover);
             color: var(--_button-color-hover);
@@ -72,20 +76,6 @@
             backdrop-filter: contrast(2);
         }
 
-        &[disabled] {
-            --_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;
-            --_button-border-color-hover: var(--_button-border-color);
-
-            box-shadow: none !important;
-            transform: none !important;
-            filter: contrast(0.72) opacity(0.72);
-            cursor: not-allowed;
-        }
-
         &.-outline {
             background-color: transparent;
             color: var(--text);
@@ -169,45 +159,6 @@
             }
         }
 
-        /*
-         * for inline icons
-         */
-
-        &:has(svg) {
-            gap: var(--control-spacing-tiny, 0.25em);
-        }
-
-        /*
-         * If there is no text node for the button,
-         * it is assumed that an `aria-label` is that
-         * and the button will be styled as an icon button.
-         */
-
-        &[aria-label],
-        &.-icon {
-            --_button-border-radius: var(--border-radius-round);
-            padding: 0;
-            aspect-ratio: 1;
-            fill: currentColor;
-
-            &:after {
-                content: "";
-                inline-size: max(var(--control-height-base), 100%);
-                block-size: max(var(--control-height-base), 100%);
-                aspect-ratio: 1;
-                border-radius: 100%;
-                inset-inline-start: calc(-0.5 * (var(--control-height-base) - 100%));
-                inset-block-start: calc(-0.5 * (var(--control-height-base) - 100%));
-                position: absolute;
-                z-index: -1;
-                pointer-events: all;
-            }
-
-            & > svg {
-                pointer-events: none;
-            }
-        }
-
         &.-icon.-small {
             padding: 0;
         }
@@ -217,6 +168,45 @@
         }
     }
 
+    /*
+     * If there is no text node for the button,
+     * it is assumed that an `aria-label` is that
+     * and the button will be styled as an icon button.
+     */
+    :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);
+        padding: 0;
+        aspect-ratio: 1;
+        fill: currentColor;
+
+        &:after {
+            content: "";
+            inline-size: max(var(--control-height-base), 100%);
+            block-size: max(var(--control-height-base), 100%);
+            aspect-ratio: 1;
+            border-radius: 100%;
+            inset-inline-start: calc(-0.5 * (var(--control-height-base) - 100%));
+            inset-block-start: calc(-0.5 * (var(--control-height-base) - 100%));
+            position: absolute;
+            z-index: -1;
+            pointer-events: all;
+        }
+    }
+
+    [disabled]:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
+        --_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;
+        --_button-border-color-hover: var(--_button-border-color);
+
+        box-shadow: none !important;
+        transform: none !important;
+        filter: contrast(0.72) opacity(0.72);
+        cursor: not-allowed;
+    }
+
     :where(input[type="file"]) {
         color: var(--_input-color);
         background-color: var(--_input-background);
@@ -244,7 +234,7 @@
         border-end-end-radius: 0;
     }
 
-    :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);

package/src/styles/components/card.css

@@ -34,7 +34,7 @@
         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);
 
         @media (width >= 480px) {
             --_card-padding-inline: var(--card-padding-inline, var(--spacing-far));

package/src/styles/components/dialogs.css

@@ -5,7 +5,7 @@
         --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
         --_dialog-transition-duration: var(
             --dialog-transition-duration,
-            var(--transition-duration-base)
+            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);
@@ -13,8 +13,8 @@
         --_dialog-radius: 0;
         display: block;
         z-index: var(--layer-important);
-        animation: close-dialog var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1) forwards;
-        transition: opacity var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1);
+        animation: close-dialog var(--_dialog-transition-duration) var(--easing-exit) forwards;
+        transition: opacity var(--_dialog-transition-duration) var(--easing-exit);
         position: fixed;
         inset: 0;
         border: var(--border-width-thin) solid var(--color-border-base);
@@ -39,7 +39,7 @@
         }
 
         &[open] {
-            animation: open-dialog var(--_dialog-transition-duration) cubic-bezier(0, 0.6, 0.58, 1);
+            animation: open-dialog var(--_dialog-transition-duration) var(--easing-entry);
         }
 
         &:not([open]) {

package/src/styles/components/inputs/base.css

@@ -1,5 +1,5 @@
-@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);
@@ -10,7 +10,7 @@
         align-items: center;
     }
 
-    :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));
@@ -32,7 +32,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;
@@ -73,16 +73,28 @@
         &::placeholder {
             color: var(--color-text-subtle);
         }
+
+        &.-validate:user-valid {
+            outline: var(--_input-outline);
+            outline-offset: 0;
+            outline-color: var(--color-status-success-base);
+        }
+
+        &.-validate:user-invalid {
+            outline: var(--_input-outline);
+            outline-offset: 0;
+            outline-color: var(--color-status-danger-base);
+        }
     }
 
-    :where(select:not([class]), .nc-select) {
+    :where(select, .nc-select) {
         padding-inline-end: 1.75em;
         background-image: var(--triangle-down-url);
         background-position: right 0.5em top 50%;
         background-size: 1em 0.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%);
@@ -93,7 +105,7 @@
         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) {
         inline-size: 1lh;
         block-size: 1lh;
         padding: 0;
@@ -104,11 +116,11 @@
         border: var(--_input-border);
         --current-background: var(--_input-background);
         background: var(--current-background);
-        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);
     }
 
-    :where(input[type="checkbox"]:not([class]), .nc-input-checkbox) {
+    :where(input[type="checkbox"], .nc-input-checkbox) {
         --_transition-duration: 0ms;
         overflow: hidden;
         border-radius: var(--_input-border-radius);
@@ -122,7 +134,7 @@
             block-size: 0.75lh;
             background-color: var(--color-brand-primary-contrast);
             transform: scale(0.8) translateY(2em);
-            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);
             line-height: 1;
@@ -151,7 +163,7 @@
             border-radius: var(--border-radius-round);
             transform: scale(0.8) translateY(2em);
             background-color: var(--color-brand-primary-contrast);
-            transition: transform var(--ease-out-2) var(--transition-duration-short);
+            transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
         }
 
         &:checked {
@@ -166,7 +178,7 @@
     :where(input[type="color"], .nc-input-color) {
         aspect-ratio: 1;
         inline-size: auto;
-        padding: var(--control-spacing-minimal, 0.125em);
+        padding: var(--control-spacing-nearest, 0.125em);
     }
 
     :where(input[type="date"], .nc-input-date) {

package/src/styles/components/inputs/switch.css

@@ -25,7 +25,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);
         }
 

package/src/styles/components/notifications.css

@@ -26,7 +26,7 @@
         backdrop-filter: blur(3px);
         background-color: var(--_notification-center-background);
         transform: translate(100%, 0);
-        transition: transform var(--transition-duration-base) ease-in-out;
+        transition: transform var(--transition-duration-moderate-2) var(--ease-in-out-2);
     }
 
     :where(.nc-notification-output, .nc-notification-center-container) {
@@ -70,7 +70,7 @@
         inline-size: 100%;
         border-radius: var(--border-radius-small);
         box-shadow: var(--shadow-far);
-        animation: pop-in var(--transition-duration-base) cubic-bezier(0, 0.6, 0.58, 1);
+        animation: pop-in var(--transition-duration-moderate-2) var(--easing-entry);
         color: var(--color-text-base);
         pointer-events: all;
     }
@@ -108,7 +108,7 @@
     }
 
     :where(.nc-notification.-closing) {
-        animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1) forwards;
+        animation: remove-notification var(--transition-duration-moderate-2) var(--easing-exit) forwards;
     }
 
     @keyframes pop-in {

package/src/styles/utils/bundle.css

@@ -4,3 +4,4 @@
 @import "./easings.css";
 @import "./layouts.css";
 @import "./theme.css";
+@import "./conditionalRadius.css";

package/src/styles/utils/conditionalRadius.css

@@ -0,0 +1,7 @@
+@layer helpers.conditionalRadius {
+    :where(html) {
+        --border-radius-cond-small: clamp(0px, calc(100vw - 100%) * 1e5, var(--border-radius-small));
+        --border-radius-cond-medium: clamp(0px, calc(100vw - 100%) * 1e5, var(--border-radius-medium));
+        --border-radius-cond-large: clamp(0px, calc(100vw - 100%) * 1e5, var(--border-radius-large));
+    }
+}

package/src/styles/utils/easings.css

@@ -1,17 +1,18 @@
 @layer config.easings {
     :where(html) {
+        /* From https://github.com/argyleink/open-props/blob/main/src/props.easing.css */
         --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
         --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
         --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
         --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
         --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
         --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
-        --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
-        --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
-        --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
+        --ease-in-2: cubic-bezier(0.50, 0, 1, 1);
+        --ease-in-3: cubic-bezier(0.70, 0, 1, 1);
+        --ease-in-4: cubic-bezier(0.90, 0, 1, 1);
         --ease-in-5: cubic-bezier(1, 0, 1, 1);
         --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
-        --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
+        --ease-out-2: cubic-bezier(0, 0, 0.50, 1);
         --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
         --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
         --ease-out-5: cubic-bezier(0, 0, 0, 1);
@@ -26,9 +27,9 @@
         --ease-elastic-out-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
         --ease-elastic-out-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
         --ease-elastic-in-1: cubic-bezier(0.5, -0.25, 0.75, 1);
-        --ease-elastic-in-2: cubic-bezier(0.5, -0.5, 0.75, 1);
+        --ease-elastic-in-2: cubic-bezier(0.5, -0.50, 0.75, 1);
         --ease-elastic-in-3: cubic-bezier(0.5, -0.75, 0.75, 1);
-        --ease-elastic-in-4: cubic-bezier(0.5, -1, 0.75, 1);
+        --ease-elastic-in-4: cubic-bezier(0.5, -1.00, 0.75, 1);
         --ease-elastic-in-5: cubic-bezier(0.5, -1.25, 0.75, 1);
         --ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
         --ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
@@ -363,20 +364,55 @@
             1
         );
 
+        --easing-entry: cubic-bezier(0.1, 0, 0, 1);
+        --easing-exit: cubic-bezier(0.3, 0, 1.0, 0.8);
+
         --transition-duration-instant: 0ms;
-        --transition-duration-short: 100ms;
-        --transition-duration-base: 200ms;
-        --transition-duration-long: 300ms;
+
+        /* Animation duration based on https://design.brainly.com/8adfd5f36/p/091f75-ux-motion */
+
+        --transition-duration-quick-1: 80ms; /* e.g. checkbox, radio, hover */
+        --transition-duration-quick-2: 120ms; /* e.g. toggle, tab, chip, color, fade */
+        --transition-duration-moderate-1: 180ms; /* e.g. dropdown, tooltip */
+        --transition-duration-moderate-2: 260ms; /* e.g. modal, toast, dialog, notification */
+        --transition-duration-gentle-1: 320ms; /* e.g. bottom sheet, card expand */
+        --transition-duration-gentle-2: 420ms; /* e.g. advanced animations */
+
+        --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: 0.9;
 
+        /*
+         * Calculated animation duration based on https://design.brainly.com/8adfd5f36/p/091f75-ux-motion/t/page-091f75-75547432-5018fa-12
+         * Demo: https://codepen.io/T3sT3ro/pen/RNwRLWx
+         * unitless
+         */
+        --animated-element-distance: 0;
+        --animated-element-width: 0;
+        --animated-element-height: 0;
+
+        /* Calculated animation duration in milliseconds */
+        --transition-duration-calculated: calc(
+            (
+                0.5 * var(--animated-element-distance, 0) + 0.35 * var(--animated-element-width, 0) +
+                    0.3 * var(--animated-element-height, 0)
+            ) *
+                1ms
+        );
+
         @media (--motionNotOK) {
+            --transition-duration-quick-1: 80ms;
+            --transition-duration-quick-2: 120ms;
+            --transition-duration-moderate-1: 180ms;
+            --transition-duration-moderate-2: 260ms;
+            --transition-duration-gentle-1: 320ms;
+            --transition-duration-gentle-2: 420ms;
+            --transition-duration-calculated: 0;
             --transition-duration-instant: 0ms;
-            --transition-duration-short: 0ms;
-            --transition-duration-base: 0ms;
-            --transition-duration-long: 0ms;
             --transition-duration-entry: 0s;
             --transition-duration-exit: 0s;
         }

package/src/styles/utils/reset.css

@@ -16,14 +16,8 @@
         background-repeat: no-repeat;
     }
 
-    @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) {

package/transform.js

@@ -3,14 +3,7 @@ import { browserslistToTargets, bundle } from 'lightningcss';
 import fs from 'node:fs';
 
 const browserlistTargtsWidelyAvailable = [
-    'Chrome > 0 and last 2.5 years',
-    'ChromeAndroid > 0 and last 2.5 years',
-    'Edge > 0 and last 2.5 years',
-    'Firefox > 0 and last 2.5 years',
-    'FirefoxAndroid > 0 and last 2.5 years',
-    'Safari > 0 and last 2.5 years',
-    'iOS > 0 and last 2.5 years',
-    'not dead',
+    'extends browserslist-config-baseline',
 ];
 
 const targets = browserslistToTargets(browserslist(browserlistTargtsWidelyAvailable));