@nordcode/ui 2.0.5 → 2.1.0

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
 
@@ -61,7 +50,6 @@ All components heavily rely on `@nordcode/ui/colors` for their default styles, b
 - `@norcode/ui/badges.css` depends on `@nordcode/ui/utils/theme.css`.
 - `@norcode/ui/inputs/*.css` all depend on `@nordcode/ui/inputs/base.css`. Be sure to import that first.
 
-
 ## Using Components
 
 For the components, there is recommended markup, previews and usage information here: [https://design-ui.nordcode.agency/components/](https://design-ui.nordcode.agency/components/)
@@ -82,7 +70,6 @@ They are not strictly part of the design system, but can be useful for your proj
 
 **Note**: They may be removed in the future. Use them at your own risk.
 
-
 ---
 
 Thanks for checking this out, we hope you like it!

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

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;