@nordcode/ui 2.0.6 → 2.1.1

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 2.1.1 (2025-11-15)
+
+### changes
+
+- properly disable animations for users who prefer reduced motion
+
+## 2.1.0 (2025-11-15)
+
+### changes
+
+- remove not([class]) from buttons and inputs to slim down CSS, increase CSS performance and simplify stylings
+
+### improvements
+
+- add `-validate` class to automatically style inputs using :user-valid & :user-invalid pseudo classes
+- Add `--border-radius-cond-*` tokens for conditional border-radius
+- Update transition timings
+
 ## 2.0.5 (2025-10-11)
 
 ### fixes

package/README.md

@@ -8,18 +8,7 @@ It's a collection of base styles, components and utilities, that can be imported
 **Note**: We only processed the exported in `/compiled`. The other files may use cutting edge CSS features, so be sure to process them to your desired target.
 You can use this browserlist config to target the Baseline Widely Adapted standard:
 
-```json
-[
-    "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"
-]
-```
+https://github.com/web-platform-dx/browserslist-config-baseline
 
 ## Usecase examples
 

package/out/bundle.css

@@ -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;

package/out/bundle_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;