@urbicon-ui/blocks 6.24.0 → 6.26.0

package/dist/primitives/Slider/Slider.svelte

@@ -35,6 +35,7 @@
     slotClasses: slotClassesProp = {},
     preset,
     'aria-describedby': ariaDescribedby,
+    'aria-labelledby': ariaLabelledby,
     ...restProps
   }: SliderProps = $props();
 
@@ -53,6 +54,8 @@
     disabled
   }));
   const statusId = `${uid}-status`;
+  const minLabelId = `${uid}-min-label`;
+  const maxLabelId = `${uid}-max-label`;
 
   let trackRef = $state<HTMLDivElement>();
   let dragging = $state<'single' | 'start' | 'end' | null>(null);
@@ -251,6 +254,17 @@
       .join(' ') || undefined
   );
 
+  // `aria-labelledby` has the same reach problem as `aria-describedby` above:
+  // restProps land on the roleless wrapper div, so an external visible label
+  // would never name the focusable thumbs. On the range arm one external label
+  // would name both thumbs identically ("Padding" / "Padding"), so it is
+  // composed with a visually-hidden minimum/maximum qualifier —
+  // aria-labelledby concatenates its references in order, yielding
+  // "Padding Minimum" / "Padding Maximum" and preserving the distinction the
+  // `label`-prop arm gets for free.
+  const startLabelledBy = $derived(ariaLabelledby ? `${ariaLabelledby} ${minLabelId}` : undefined);
+  const endLabelledBy = $derived(ariaLabelledby ? `${ariaLabelledby} ${maxLabelId}` : undefined);
+
   $effect(() => {
     if (trackRef && mint && mint !== 'none' && !disabled) {
       return mintRegistry.apply(trackRef, mint);
@@ -429,13 +443,22 @@
     {/if}
 
     {#if range}
+      {#if ariaLabelledby}
+        <span id={minLabelId} class="sr-only">{bt('accessibility.minimum') || 'Minimum'}</span>
+        <span id={maxLabelId} class="sr-only">{bt('accessibility.maximum') || 'Maximum'}</span>
+      {/if}
       <div
         role="slider"
         tabindex={disabled ? -1 : 0}
         aria-valuemin={min}
         aria-valuemax={rangeValue[1]}
         aria-valuenow={rangeValue[0]}
-        aria-label={label ? `${label} minimum` : bt('accessibility.minimum') || 'Minimum'}
+        aria-labelledby={startLabelledBy}
+        aria-label={startLabelledBy
+          ? undefined
+          : label
+            ? `${label} minimum`
+            : bt('accessibility.minimum') || 'Minimum'}
         aria-describedby={describedBy}
         aria-disabled={disabled || undefined}
         class={unstyled ? (slotClasses?.thumb ?? '') : styles.thumb({ class: slotClasses?.thumb })}
@@ -449,7 +472,12 @@
         aria-valuemin={rangeValue[0]}
         aria-valuemax={max}
         aria-valuenow={rangeValue[1]}
-        aria-label={label ? `${label} maximum` : bt('accessibility.maximum') || 'Maximum'}
+        aria-labelledby={endLabelledBy}
+        aria-label={endLabelledBy
+          ? undefined
+          : label
+            ? `${label} maximum`
+            : bt('accessibility.maximum') || 'Maximum'}
         aria-describedby={describedBy}
         aria-disabled={disabled || undefined}
         class={unstyled ? (slotClasses?.thumb ?? '') : styles.thumb({ class: slotClasses?.thumb })}
@@ -464,7 +492,8 @@
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={singleValue}
-        aria-label={label || bt('accessibility.slider') || 'Slider'}
+        aria-labelledby={ariaLabelledby}
+        aria-label={ariaLabelledby ? undefined : label || bt('accessibility.slider') || 'Slider'}
         aria-describedby={describedBy}
         aria-disabled={disabled || undefined}
         class={unstyled ? (slotClasses?.thumb ?? '') : styles.thumb({ class: slotClasses?.thumb })}

package/dist/primitives/Spinner/spinner.variants.d.ts

@@ -2,13 +2,13 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const spinnerVariants: ((props?: {
     variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
     size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-    intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+    intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
     speed?: "fast" | "slow" | "normal" | undefined;
 } | undefined) => {
     base: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -16,7 +16,7 @@ export declare const spinnerVariants: ((props?: {
     svg: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -24,7 +24,7 @@ export declare const spinnerVariants: ((props?: {
     svgCircle: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -32,7 +32,7 @@ export declare const spinnerVariants: ((props?: {
     svgPath: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -40,7 +40,7 @@ export declare const spinnerVariants: ((props?: {
     dots: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -48,7 +48,7 @@ export declare const spinnerVariants: ((props?: {
     dot: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -56,7 +56,7 @@ export declare const spinnerVariants: ((props?: {
     pulse: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -64,7 +64,7 @@ export declare const spinnerVariants: ((props?: {
     pulseCenter: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -72,7 +72,7 @@ export declare const spinnerVariants: ((props?: {
     pulseRing: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -80,7 +80,7 @@ export declare const spinnerVariants: ((props?: {
     ring: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -88,7 +88,7 @@ export declare const spinnerVariants: ((props?: {
     ringElement: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -96,7 +96,7 @@ export declare const spinnerVariants: ((props?: {
     bars: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -104,7 +104,7 @@ export declare const spinnerVariants: ((props?: {
     bar: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -112,7 +112,7 @@ export declare const spinnerVariants: ((props?: {
     content: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -120,7 +120,7 @@ export declare const spinnerVariants: ((props?: {
     srOnly: (props?: ({
         variant?: "pulse" | "default" | "ring" | "bars" | "dots" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
-        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | "current" | undefined;
+        intent?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         speed?: "fast" | "slow" | "normal" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;

package/dist/primitives/Stepper/stepper.variants.d.ts

@@ -4,7 +4,7 @@ export declare const stepperVariants: ((props?: {
     orientation?: "horizontal" | "vertical" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "default" | "outlined" | "minimal" | undefined;
-    stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
+    stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
     clickable?: boolean | undefined;
     stepDisabled?: boolean | undefined;
     separatorComplete?: boolean | undefined;
@@ -14,7 +14,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
+        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -26,7 +26,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
+        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -38,7 +38,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
+        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -50,7 +50,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
+        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -62,7 +62,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
+        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -74,7 +74,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
+        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -86,7 +86,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
+        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -98,7 +98,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
+        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -110,7 +110,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
+        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -122,7 +122,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
+        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;

package/dist/primitives/Stepper/stepper.variants.js

@@ -68,7 +68,7 @@ export const stepperVariants = tv({
                 indicator: 'size-7 text-xs',
                 step: 'gap-2',
                 label: 'text-xs',
-                description: 'text-[11px]',
+                description: 'text-2xs',
                 content: 'text-sm',
                 indicatorColumn: 'w-7'
             },
@@ -122,7 +122,7 @@ export const stepperVariants = tv({
                 label: 'text-danger'
             },
             warning: {
-                indicator: 'border-warning bg-warning text-text-on-surface',
+                indicator: 'border-warning bg-warning text-text-on-warning',
                 label: 'text-warning-emphasis'
             }
         },

package/dist/primitives/Textarea/Textarea.svelte

@@ -29,6 +29,7 @@
     slotClasses: slotClassesProp = {},
     preset,
     oninput: userOnInput,
+    id: idProp,
     'aria-describedby': ariaDescribedby,
     ...restProps
   }: TextareaProps = $props();
@@ -42,9 +43,12 @@
   let textareaRef = $state<HTMLTextAreaElement>();
 
   // ARIA wiring is shared with every form primitive — see XC-2.
+  // A consumer-supplied `id` wins over the generated one, so an external
+  // `<label for>` can address the `<textarea>` (mirrors the Input role model).
   const propsId = $props.id();
+  const fieldId = $derived(idProp ?? `textarea-${propsId}`);
   const ff = useFormField(() => ({
-    fieldId: `textarea-${propsId}`,
+    fieldId,
     helper,
     error,
     required,

package/dist/primitives/Toast/toast.variants.d.ts

@@ -1,70 +1,70 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const toastVariants: ((props?: {
-    intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+    intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
     placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
 } | undefined) => {
     container: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     toast: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     icon: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     content: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     title: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     description: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     actions: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     actionButton: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     cancelButton: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     dismissButton: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     progress: (props?: ({
-        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;

package/dist/primitives/Tooltip/tooltip.variants.d.ts

@@ -1,19 +1,19 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const tooltipVariants: ((props?: {
     open?: boolean | undefined;
-    intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+    intent?: "info" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
 } | undefined) => {
     base: (props?: ({
         open?: boolean | undefined;
-        intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     arrow: (props?: ({
         open?: boolean | undefined;
-        intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;

package/dist/primitives/Tooltip/tooltip.variants.js

@@ -26,7 +26,16 @@ export const tooltipVariants = tv({
             // guards the inline-override path (an inline duration bypasses the token that
             // reduced-motion collapses to 1ms). The default easing token resolves to
             // Tailwind's implicit transition curve, so the resting fade is unchanged.
-            'transition-opacity duration-[var(--blocks-tooltip-duration)] ease-[var(--blocks-tooltip-easing)]',
+            //
+            // display/overlay + `transition-discrete` and the `starting:` before-state
+            // are what make the fade actually PLAY in top-layer mode (same mechanism
+            // as popoverMotion): without them, showPopover() reveals the chip with no
+            // before-state (enter pops to opacity 1) and hidePopover() yanks it to
+            // display:none in the same recalc (exit never paints). Verified 2026-07-14
+            // — the original transition-opacity fade only ever ran in the rare
+            // in-dialog fallback, where visibility is purely opacity-driven.
+            'transition-[opacity,display,overlay] transition-discrete',
+            'duration-[var(--blocks-tooltip-duration)] ease-[var(--blocks-tooltip-easing)]',
             'motion-reduce:duration-[1ms]',
             'bg-surface-inverted text-text-inverted'
         ],
@@ -34,7 +43,9 @@ export const tooltipVariants = tv({
     },
     variants: {
         open: {
-            true: { base: 'opacity-100' },
+            // `starting:` supplies the @starting-style before-state for the frame
+            // showPopover() first renders the chip — the enter half of the fade.
+            true: { base: 'opacity-100 starting:opacity-0' },
             false: { base: 'opacity-0' }
         },
         intent: {
@@ -42,7 +53,7 @@ export const tooltipVariants = tv({
             secondary: { base: 'bg-secondary text-text-on-primary' },
             info: { base: 'bg-info text-text-on-primary' },
             success: { base: 'bg-success text-text-on-primary' },
-            warning: { base: 'bg-warning text-text-on-surface' },
+            warning: { base: 'bg-warning text-text-on-warning' },
             danger: { base: 'bg-danger text-text-on-primary' },
             neutral: { base: 'bg-surface-inverted text-text-inverted' }
         },