@maxsteinwender/sort-ui 1.4.0 → 1.4.1

package/README.md

@@ -67,10 +67,10 @@ Sort UI supports 4 themes built on two color schemes:
 
 | Theme | Base | Accent | Mode |
 |-------|------|--------|------|
-| Theme 1 Light | Zinc | Blue | `light` |
-| Theme 1 Dark | Zinc | Blue | `dark` |
-| Theme 2 Light | Neutral | Orange | `theme-2` |
-| Theme 2 Dark | Neutral | Orange | `theme-2-dark` |
+| Default Blue Light | Zinc | Blue | `light` |
+| Default Blue Dark | Zinc | Blue | `dark` |
+| Neutral Violet Light | Neutral | Violet | `theme-2` |
+| Neutral Violet Dark | Neutral | Violet | `theme-2-dark` |
 
 Themes are applied via CSS classes on the root element. Switch between them in Storybook using the theme toolbar.
 

package/dist/index.js

@@ -294,7 +294,7 @@ var buttonVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         // Primary — Sort UI: bg/state/primary, text/on-primary, icon/on-primary
-        // (on-primary is theme-aware: white everywhere except Theme 2 Dark, where the button inverts to near-white and needs dark text)
+        // (on-primary is theme-aware: white everywhere except Neutral Violet Dark, where the button inverts to near-white and needs dark text)
         default: "bg-sui-bg-state-primary text-sui-text-on-primary [text-shadow:var(--shadow-text)] [&_i]:text-icon-on-primary [&_i]:[text-shadow:none] [&_svg]:text-icon-on-primary [&_svg]:[text-shadow:none] shadow-button-default active:shadow-button-press [@media(hover:hover)]:hover:bg-sui-bg-state-primary-hover active:bg-sui-bg-state-primary-press disabled:bg-sui-bg-state-disabled disabled:[text-shadow:none]",
         // Soft — Sort UI: bg/state/soft, text/subtle, icon/default-muted
         secondary: "bg-sui-bg-state-soft text-sui-text-subtle [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted [@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover active:bg-sui-bg-state-soft-press disabled:bg-sui-bg-state-disabled",
@@ -351,7 +351,7 @@ var buttonBadgeVariants = classVarianceAuthority.cva(
       color: {
         inverse: "bg-[rgba(255,255,255,0.1)] border-[rgba(255,255,255,0.2)] text-sui-text-white-default group-disabled:bg-transparent group-disabled:border-transparent group-disabled:text-sui-text-hint",
         // Same visual treatment as `inverse`, but theme-aware — used on the Primary
-        // (default) button only, since that's the one that inverts in Theme 2 Dark.
+        // (default) button only, since that's the one that inverts in Neutral Violet Dark.
         // Destructive keeps `inverse` because its red background never inverts.
         "on-primary": "bg-[var(--overlay-on-primary)] border-[var(--overlay-on-primary-border)] text-sui-text-on-primary group-disabled:bg-transparent group-disabled:border-transparent group-disabled:text-sui-text-hint",
         neutral: "bg-transparent border-sui-border-default text-sui-text-muted group-disabled:text-sui-text-hint"
@@ -2285,6 +2285,19 @@ var LinkButton = React80__namespace.forwardRef(
     );
     const iconColor = disabled ? "text-icon-default-disabled" : variant === "informative" ? "text-icon-informative" : "text-icon-default-muted";
     const underlineColor = disabled ? "var(--border-darker)" : variant === "informative" ? "var(--border-informative)" : "var(--border-darker)";
+    const underlineClassName = cn(
+      "relative",
+      "after:content-[''] after:absolute after:inset-x-0 after:h-px",
+      "after:bg-[repeating-linear-gradient(90deg,var(--link-ul)_0_2px,transparent_2px_4px)]",
+      underlineOffsetMap[resolvedSize]
+    );
+    const underlineStyle = { "--link-ul": underlineColor };
+    const asChildTarget = asChild && React80__namespace.isValidElement(children) ? children : null;
+    const content = asChildTarget ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children: React80__namespace.cloneElement(
+      asChildTarget,
+      void 0,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: underlineClassName, style: underlineStyle, children: asChildTarget.props.children })
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: underlineClassName, style: underlineStyle, children });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
       __spreadProps(__spreadValues({
@@ -2304,19 +2317,7 @@ var LinkButton = React80__namespace.forwardRef(
       }, props), {
         children: [
           leadIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: cn("shrink-0 text-md leading-none [&_svg]:size-4", iconColor), children: leadIcon }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "relative",
-                "after:content-[''] after:absolute after:inset-x-0 after:h-px",
-                "after:bg-[repeating-linear-gradient(90deg,var(--link-ul)_0_2px,transparent_2px_4px)]",
-                underlineOffsetMap[resolvedSize]
-              ),
-              style: { "--link-ul": underlineColor },
-              children
-            }
-          ),
+          content,
           tailIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: cn("shrink-0 text-md leading-none [&_svg]:size-4", iconColor), children: tailIcon })
         ]
       })
@@ -3176,7 +3177,7 @@ var CheckboxCard = React80__namespace.forwardRef(
       selected || isDefault ? "bg-sui-bg-card" : "bg-sui-bg-state-soft",
       // Border — always 1px border, use inset ring for selected highlight (no layout shift)
       "border",
-      selected ? "border-primary ring-1 ring-inset ring-primary" : disabled ? isDefault ? "border-sui-border-default" : "border-transparent" : isDefault ? "border-sui-border-darker" : "border-transparent",
+      selected ? "border-informative ring-1 ring-inset ring-informative" : disabled ? isDefault ? "border-sui-border-default" : "border-transparent" : isDefault ? "border-sui-border-darker" : "border-transparent",
       // Shadow (only for default or selected)
       selected || isDefault ? disabled ? "" : "shadow-card-base" : "",
       // Disabled
@@ -3392,7 +3393,7 @@ var unselectedStyles = {
   ].join(" ")
 };
 var selectedStyles = {
-  // default, soft, ghost → informative accent selected (shifts blue → orange in Theme 2; bg-badge-blue has no theme-adaptive equivalent yet)
+  // default, soft, ghost → informative accent selected (shifts blue → orange in Neutral Violet; bg-badge-blue has no theme-adaptive equivalent yet)
   default: "bg-sui-bg-badge-blue border-sui-border-blue text-sui-text-informative [&_i]:text-sui-text-informative",
   soft: "bg-sui-bg-badge-blue text-sui-text-informative [&_i]:text-sui-text-informative",
   ghost: "bg-sui-bg-badge-blue text-sui-text-informative [&_i]:text-sui-text-informative",
@@ -4430,7 +4431,7 @@ var DataRangeSlider = React80__namespace.forwardRef(
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: "absolute top-1/2 h-1 -translate-y-1/2 bg-sui-bg-basic-gray-accent",
+                      className: "absolute top-1/2 h-1 -translate-y-1/2 bg-informative",
                       style: { left: `${pctMin}%`, right: `${100 - pctMax}%` }
                     }
                   ),
@@ -6611,7 +6612,7 @@ var FileUploadArea = React80__namespace.forwardRef(
                     "span",
                     {
                       className: cn(
-                        disabled ? "text-sui-text-hint" : "text-primary"
+                        disabled ? "text-sui-text-hint" : "text-sui-text-informative"
                       ),
                       children: linkText
                     }
@@ -6711,7 +6712,7 @@ var ProgressBar = React80__namespace.forwardRef(
                   {
                     className: cn(
                       "h-1 min-h-px min-w-px flex-[1_0_0] rounded-full",
-                      i < filledSegments ? "bg-sui-bg-basic-gray-accent" : "bg-sui-bg-basic-gray-alpha-10"
+                      i < filledSegments ? "bg-informative" : "bg-sui-bg-basic-gray-alpha-10"
                     )
                   },
                   i
@@ -6731,7 +6732,7 @@ var ProgressBar = React80__namespace.forwardRef(
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   ProgressPrimitive2__namespace.Indicator,
                   {
-                    className: "h-full rounded-full bg-sui-bg-basic-gray-accent transition-all duration-300 ease-out",
+                    className: "h-full rounded-full bg-informative transition-all duration-300 ease-out",
                     style: { width: `${clampedValue}%` }
                   }
                 )
@@ -7741,17 +7742,23 @@ var textBlockVariants = classVarianceAuthority.cva("flex w-full flex-col gap-1",
     align: "left"
   }
 });
-var horizontalStepperItemVariants = classVarianceAuthority.cva("flex w-full flex-col gap-4", {
-  variants: {
-    position: {
-      top: "",
-      bottom: ""
+var horizontalStepperItemVariants = classVarianceAuthority.cva(
+  [
+    "flex w-full flex-col gap-4",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default focus-visible:rounded-sm"
+  ].join(" "),
+  {
+    variants: {
+      position: {
+        top: "",
+        bottom: ""
+      }
+    },
+    defaultVariants: {
+      position: "top"
     }
-  },
-  defaultVariants: {
-    position: "top"
   }
-});
+);
 function ConnectorLine({ success }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -8397,7 +8404,7 @@ var pageItemVariants = classVarianceAuthority.cva(
 );
 var activeDefaultClasses = [
   "bg-sui-bg-state-ghost",
-  // Semantic accent tokens — shift blue → orange in Theme 2, matching the theme's accent color
+  // Semantic accent tokens — shift blue → orange in Neutral Violet, matching the theme's accent color
   "text-sui-text-informative",
   "border border-sui-border-informative",
   "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost [@media(hover:hover)]:hover:text-sui-text-informative"
@@ -8996,7 +9003,7 @@ var Progress = React80__namespace.forwardRef((_a, ref) => {
       children: /* @__PURE__ */ jsxRuntime.jsx(
         ProgressPrimitive2__namespace.Indicator,
         {
-          className: "h-full w-full flex-1 bg-primary transition-all",
+          className: "h-full w-full flex-1 bg-informative transition-all",
           style: { transform: `translateX(-${100 - (value || 0)}%)` }
         }
       )
@@ -9022,13 +9029,13 @@ var radialProgressBarVariants = classVarianceAuthority.cva("relative inline-flex
   }
 });
 var textVariantMap = {
-  default: "text-sui-text-default",
+  default: "text-sui-text-informative",
   success: "text-sui-text-success",
   failed: "text-sui-text-destructive"
 };
 var trackStrokeVar = "var(--border-default)";
 var arcStrokeVarMap = {
-  default: "var(--text-subtle)",
+  default: "hsl(var(--informative))",
   success: "var(--text-success)",
   failed: "var(--text-destructive)"
 };
@@ -9281,7 +9288,7 @@ var radioButtonCardVariants = classVarianceAuthority.cva(
           // Shadow
           "shadow-card-base",
           // Selected: highlight border + ring
-          "data-[state=checked]:border-primary data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-primary",
+          "data-[state=checked]:border-informative data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-informative",
           // Disabled
           "disabled:border-sui-border-default disabled:shadow-none"
         ],
@@ -9289,7 +9296,7 @@ var radioButtonCardVariants = classVarianceAuthority.cva(
           // Background — soft bg when unchecked, card bg when selected
           "bg-sui-bg-state-soft border border-transparent",
           // Selected: card bg + highlight border + ring
-          "data-[state=checked]:bg-sui-bg-card data-[state=checked]:border-primary data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-primary",
+          "data-[state=checked]:bg-sui-bg-card data-[state=checked]:border-informative data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-informative",
           "data-[state=checked]:shadow-card-base",
           // Disabled
           "disabled:border-transparent disabled:shadow-none"
@@ -11812,7 +11819,7 @@ var Slider = React80__namespace.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: "absolute left-0 top-1/2 h-1 -translate-y-1/2 bg-sui-bg-basic-gray-accent",
+                    className: "absolute left-0 top-1/2 h-1 -translate-y-1/2 bg-informative",
                     style: { width: `${pct}%` }
                   }
                 ),
@@ -12159,7 +12166,7 @@ var SliderRange = React80__namespace.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: "absolute top-1/2 h-1 -translate-y-1/2 bg-sui-bg-basic-gray-accent",
+                    className: "absolute top-1/2 h-1 -translate-y-1/2 bg-informative",
                     style: { left: `${pctMin}%`, right: `${100 - pctMax}%` }
                   }
                 ),
@@ -14005,7 +14012,7 @@ var ToggleGroupItem = React80__namespace.forwardRef(
             "bg-sui-bg-state-ghost text-sui-text-muted [&_svg]:text-icon-default-muted",
             "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-subtle [@media(hover:hover)]:hover:[&_svg]:text-icon-default-subtle",
             "active:bg-sui-bg-state-ghost-press",
-            // Selected state — bg-badge-blue has no theme-adaptive equivalent yet (stays a light-blue tint in Theme 2); text/icon use the semantic informative token so they shift blue → orange
+            // Selected state — bg-badge-blue has no theme-adaptive equivalent yet (stays a light-blue tint in Neutral Violet); text/icon use the semantic informative token so they shift blue → orange
             active && "bg-sui-bg-badge-blue text-sui-text-informative [&_svg]:text-sui-text-informative",
             // Disabled
             disabled && "opacity-50 cursor-not-allowed pointer-events-none",
@@ -14373,7 +14380,10 @@ var VerticalStepper = React80__namespace.forwardRef(
             "li",
             {
               "aria-current": state === "current" ? "step" : void 0,
-              className: onStepClick ? "cursor-pointer" : void 0,
+              className: cn(
+                onStepClick && "cursor-pointer",
+                onStepClick && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default focus-visible:rounded-sm"
+              ),
               onClick: onStepClick ? () => onStepClick(index) : void 0,
               onKeyDown: onStepClick ? (e) => {
                 if (e.key === "Enter" || e.key === " ") {

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { Slot } from '@radix-ui/react-slot';
+import { Slot, Slottable } from '@radix-ui/react-slot';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import * as RechartsPrimitive from 'recharts';
@@ -251,7 +251,7 @@ var buttonVariants = cva(
     variants: {
       variant: {
         // Primary — Sort UI: bg/state/primary, text/on-primary, icon/on-primary
-        // (on-primary is theme-aware: white everywhere except Theme 2 Dark, where the button inverts to near-white and needs dark text)
+        // (on-primary is theme-aware: white everywhere except Neutral Violet Dark, where the button inverts to near-white and needs dark text)
         default: "bg-sui-bg-state-primary text-sui-text-on-primary [text-shadow:var(--shadow-text)] [&_i]:text-icon-on-primary [&_i]:[text-shadow:none] [&_svg]:text-icon-on-primary [&_svg]:[text-shadow:none] shadow-button-default active:shadow-button-press [@media(hover:hover)]:hover:bg-sui-bg-state-primary-hover active:bg-sui-bg-state-primary-press disabled:bg-sui-bg-state-disabled disabled:[text-shadow:none]",
         // Soft — Sort UI: bg/state/soft, text/subtle, icon/default-muted
         secondary: "bg-sui-bg-state-soft text-sui-text-subtle [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted [@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover active:bg-sui-bg-state-soft-press disabled:bg-sui-bg-state-disabled",
@@ -308,7 +308,7 @@ var buttonBadgeVariants = cva(
       color: {
         inverse: "bg-[rgba(255,255,255,0.1)] border-[rgba(255,255,255,0.2)] text-sui-text-white-default group-disabled:bg-transparent group-disabled:border-transparent group-disabled:text-sui-text-hint",
         // Same visual treatment as `inverse`, but theme-aware — used on the Primary
-        // (default) button only, since that's the one that inverts in Theme 2 Dark.
+        // (default) button only, since that's the one that inverts in Neutral Violet Dark.
         // Destructive keeps `inverse` because its red background never inverts.
         "on-primary": "bg-[var(--overlay-on-primary)] border-[var(--overlay-on-primary-border)] text-sui-text-on-primary group-disabled:bg-transparent group-disabled:border-transparent group-disabled:text-sui-text-hint",
         neutral: "bg-transparent border-sui-border-default text-sui-text-muted group-disabled:text-sui-text-hint"
@@ -2242,6 +2242,19 @@ var LinkButton = React80.forwardRef(
     );
     const iconColor = disabled ? "text-icon-default-disabled" : variant === "informative" ? "text-icon-informative" : "text-icon-default-muted";
     const underlineColor = disabled ? "var(--border-darker)" : variant === "informative" ? "var(--border-informative)" : "var(--border-darker)";
+    const underlineClassName = cn(
+      "relative",
+      "after:content-[''] after:absolute after:inset-x-0 after:h-px",
+      "after:bg-[repeating-linear-gradient(90deg,var(--link-ul)_0_2px,transparent_2px_4px)]",
+      underlineOffsetMap[resolvedSize]
+    );
+    const underlineStyle = { "--link-ul": underlineColor };
+    const asChildTarget = asChild && React80.isValidElement(children) ? children : null;
+    const content = asChildTarget ? /* @__PURE__ */ jsx(Slottable, { children: React80.cloneElement(
+      asChildTarget,
+      void 0,
+      /* @__PURE__ */ jsx("span", { className: underlineClassName, style: underlineStyle, children: asChildTarget.props.children })
+    ) }) : /* @__PURE__ */ jsx("span", { className: underlineClassName, style: underlineStyle, children });
     return /* @__PURE__ */ jsxs(
       Comp,
       __spreadProps(__spreadValues({
@@ -2261,19 +2274,7 @@ var LinkButton = React80.forwardRef(
       }, props), {
         children: [
           leadIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0 text-md leading-none [&_svg]:size-4", iconColor), children: leadIcon }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "relative",
-                "after:content-[''] after:absolute after:inset-x-0 after:h-px",
-                "after:bg-[repeating-linear-gradient(90deg,var(--link-ul)_0_2px,transparent_2px_4px)]",
-                underlineOffsetMap[resolvedSize]
-              ),
-              style: { "--link-ul": underlineColor },
-              children
-            }
-          ),
+          content,
           tailIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0 text-md leading-none [&_svg]:size-4", iconColor), children: tailIcon })
         ]
       })
@@ -3133,7 +3134,7 @@ var CheckboxCard = React80.forwardRef(
       selected || isDefault ? "bg-sui-bg-card" : "bg-sui-bg-state-soft",
       // Border — always 1px border, use inset ring for selected highlight (no layout shift)
       "border",
-      selected ? "border-primary ring-1 ring-inset ring-primary" : disabled ? isDefault ? "border-sui-border-default" : "border-transparent" : isDefault ? "border-sui-border-darker" : "border-transparent",
+      selected ? "border-informative ring-1 ring-inset ring-informative" : disabled ? isDefault ? "border-sui-border-default" : "border-transparent" : isDefault ? "border-sui-border-darker" : "border-transparent",
       // Shadow (only for default or selected)
       selected || isDefault ? disabled ? "" : "shadow-card-base" : "",
       // Disabled
@@ -3349,7 +3350,7 @@ var unselectedStyles = {
   ].join(" ")
 };
 var selectedStyles = {
-  // default, soft, ghost → informative accent selected (shifts blue → orange in Theme 2; bg-badge-blue has no theme-adaptive equivalent yet)
+  // default, soft, ghost → informative accent selected (shifts blue → orange in Neutral Violet; bg-badge-blue has no theme-adaptive equivalent yet)
   default: "bg-sui-bg-badge-blue border-sui-border-blue text-sui-text-informative [&_i]:text-sui-text-informative",
   soft: "bg-sui-bg-badge-blue text-sui-text-informative [&_i]:text-sui-text-informative",
   ghost: "bg-sui-bg-badge-blue text-sui-text-informative [&_i]:text-sui-text-informative",
@@ -4387,7 +4388,7 @@ var DataRangeSlider = React80.forwardRef(
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: "absolute top-1/2 h-1 -translate-y-1/2 bg-sui-bg-basic-gray-accent",
+                      className: "absolute top-1/2 h-1 -translate-y-1/2 bg-informative",
                       style: { left: `${pctMin}%`, right: `${100 - pctMax}%` }
                     }
                   ),
@@ -6568,7 +6569,7 @@ var FileUploadArea = React80.forwardRef(
                     "span",
                     {
                       className: cn(
-                        disabled ? "text-sui-text-hint" : "text-primary"
+                        disabled ? "text-sui-text-hint" : "text-sui-text-informative"
                       ),
                       children: linkText
                     }
@@ -6668,7 +6669,7 @@ var ProgressBar = React80.forwardRef(
                   {
                     className: cn(
                       "h-1 min-h-px min-w-px flex-[1_0_0] rounded-full",
-                      i < filledSegments ? "bg-sui-bg-basic-gray-accent" : "bg-sui-bg-basic-gray-alpha-10"
+                      i < filledSegments ? "bg-informative" : "bg-sui-bg-basic-gray-alpha-10"
                     )
                   },
                   i
@@ -6688,7 +6689,7 @@ var ProgressBar = React80.forwardRef(
                 children: /* @__PURE__ */ jsx(
                   ProgressPrimitive2.Indicator,
                   {
-                    className: "h-full rounded-full bg-sui-bg-basic-gray-accent transition-all duration-300 ease-out",
+                    className: "h-full rounded-full bg-informative transition-all duration-300 ease-out",
                     style: { width: `${clampedValue}%` }
                   }
                 )
@@ -7698,17 +7699,23 @@ var textBlockVariants = cva("flex w-full flex-col gap-1", {
     align: "left"
   }
 });
-var horizontalStepperItemVariants = cva("flex w-full flex-col gap-4", {
-  variants: {
-    position: {
-      top: "",
-      bottom: ""
+var horizontalStepperItemVariants = cva(
+  [
+    "flex w-full flex-col gap-4",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default focus-visible:rounded-sm"
+  ].join(" "),
+  {
+    variants: {
+      position: {
+        top: "",
+        bottom: ""
+      }
+    },
+    defaultVariants: {
+      position: "top"
     }
-  },
-  defaultVariants: {
-    position: "top"
   }
-});
+);
 function ConnectorLine({ success }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -8354,7 +8361,7 @@ var pageItemVariants = cva(
 );
 var activeDefaultClasses = [
   "bg-sui-bg-state-ghost",
-  // Semantic accent tokens — shift blue → orange in Theme 2, matching the theme's accent color
+  // Semantic accent tokens — shift blue → orange in Neutral Violet, matching the theme's accent color
   "text-sui-text-informative",
   "border border-sui-border-informative",
   "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost [@media(hover:hover)]:hover:text-sui-text-informative"
@@ -8953,7 +8960,7 @@ var Progress = React80.forwardRef((_a, ref) => {
       children: /* @__PURE__ */ jsx(
         ProgressPrimitive2.Indicator,
         {
-          className: "h-full w-full flex-1 bg-primary transition-all",
+          className: "h-full w-full flex-1 bg-informative transition-all",
           style: { transform: `translateX(-${100 - (value || 0)}%)` }
         }
       )
@@ -8979,13 +8986,13 @@ var radialProgressBarVariants = cva("relative inline-flex items-center justify-c
   }
 });
 var textVariantMap = {
-  default: "text-sui-text-default",
+  default: "text-sui-text-informative",
   success: "text-sui-text-success",
   failed: "text-sui-text-destructive"
 };
 var trackStrokeVar = "var(--border-default)";
 var arcStrokeVarMap = {
-  default: "var(--text-subtle)",
+  default: "hsl(var(--informative))",
   success: "var(--text-success)",
   failed: "var(--text-destructive)"
 };
@@ -9238,7 +9245,7 @@ var radioButtonCardVariants = cva(
           // Shadow
           "shadow-card-base",
           // Selected: highlight border + ring
-          "data-[state=checked]:border-primary data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-primary",
+          "data-[state=checked]:border-informative data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-informative",
           // Disabled
           "disabled:border-sui-border-default disabled:shadow-none"
         ],
@@ -9246,7 +9253,7 @@ var radioButtonCardVariants = cva(
           // Background — soft bg when unchecked, card bg when selected
           "bg-sui-bg-state-soft border border-transparent",
           // Selected: card bg + highlight border + ring
-          "data-[state=checked]:bg-sui-bg-card data-[state=checked]:border-primary data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-primary",
+          "data-[state=checked]:bg-sui-bg-card data-[state=checked]:border-informative data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-informative",
           "data-[state=checked]:shadow-card-base",
           // Disabled
           "disabled:border-transparent disabled:shadow-none"
@@ -11769,7 +11776,7 @@ var Slider = React80.forwardRef(
                 /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: "absolute left-0 top-1/2 h-1 -translate-y-1/2 bg-sui-bg-basic-gray-accent",
+                    className: "absolute left-0 top-1/2 h-1 -translate-y-1/2 bg-informative",
                     style: { width: `${pct}%` }
                   }
                 ),
@@ -12116,7 +12123,7 @@ var SliderRange = React80.forwardRef(
                 /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: "absolute top-1/2 h-1 -translate-y-1/2 bg-sui-bg-basic-gray-accent",
+                    className: "absolute top-1/2 h-1 -translate-y-1/2 bg-informative",
                     style: { left: `${pctMin}%`, right: `${100 - pctMax}%` }
                   }
                 ),
@@ -13962,7 +13969,7 @@ var ToggleGroupItem = React80.forwardRef(
             "bg-sui-bg-state-ghost text-sui-text-muted [&_svg]:text-icon-default-muted",
             "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-subtle [@media(hover:hover)]:hover:[&_svg]:text-icon-default-subtle",
             "active:bg-sui-bg-state-ghost-press",
-            // Selected state — bg-badge-blue has no theme-adaptive equivalent yet (stays a light-blue tint in Theme 2); text/icon use the semantic informative token so they shift blue → orange
+            // Selected state — bg-badge-blue has no theme-adaptive equivalent yet (stays a light-blue tint in Neutral Violet); text/icon use the semantic informative token so they shift blue → orange
             active && "bg-sui-bg-badge-blue text-sui-text-informative [&_svg]:text-sui-text-informative",
             // Disabled
             disabled && "opacity-50 cursor-not-allowed pointer-events-none",
@@ -14330,7 +14337,10 @@ var VerticalStepper = React80.forwardRef(
             "li",
             {
               "aria-current": state === "current" ? "step" : void 0,
-              className: onStepClick ? "cursor-pointer" : void 0,
+              className: cn(
+                onStepClick && "cursor-pointer",
+                onStepClick && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default focus-visible:rounded-sm"
+              ),
               onClick: onStepClick ? () => onStepClick(index) : void 0,
               onKeyDown: onStepClick ? (e) => {
                 if (e.key === "Enter" || e.key === " ") {

package/dist/styles.css

@@ -13621,7 +13621,7 @@ video {
   display: none;
 }
 
-/* ===== Sort UI Theme 1 — Light ===== */
+/* ===== Sort UI Default Blue — Light ===== */
 
 :root {
   --background: 0 0% 100%;
@@ -13930,7 +13930,7 @@ video {
   --sidebar-accent-foreground: 240 10.5% 7.5%;
   --sidebar-border: 240 5.9% 90%;
   --sidebar-ring: 221 96.9% 62.5%;
-  /* === GENERATED TOKENS START === Theme-1-Light */
+  /* === GENERATED TOKENS START === Default-Blue-Light */
   /* icon tokens */
   --icon-default: #111115;
   --icon-default-subtle: #4e4e55;
@@ -14191,7 +14191,7 @@ video {
   --focus-ring-offset: 1px;
 }
 
-/* ===== Sort UI Theme 1 — Dark ===== */
+/* ===== Sort UI Default Blue — Dark ===== */
 
 .dark {
   --background: 240 5.9% 10%;
@@ -14246,7 +14246,7 @@ video {
   --sidebar-accent-foreground: 0 0% 100%;
   --sidebar-border: 240 3.7% 20%;
   --sidebar-ring: 225 89.3% 56.1%;
-  /* === GENERATED TOKENS START === Theme-1-Dark */
+  /* === GENERATED TOKENS START === Default-Blue-Dark */
   /* icon tokens */
   --icon-default: #ffffff;
   --icon-default-subtle: rgba(255, 255, 255, 0.7);
@@ -14488,9 +14488,9 @@ video {
   /* === GENERATED TOKENS END === */
 }
 
-/* ===== Sort UI Theme 2 — Light ===== */
+/* ===== Sort UI Neutral Violet — Light ===== */
 
-/* Structurally identical to Theme 1 Light — see docs/superpowers/specs/2026-07-06-theme-2-neutral-violet-redesign-design.md.
+/* Structurally identical to Default Blue Light — see docs/superpowers/specs/2026-07-06-theme-2-neutral-violet-redesign-design.md.
      Only two deviations: Primary Button is zinc/black (Group A), accent is violet instead of blue (Group B). */
 
 .theme-2 {
@@ -14533,7 +14533,7 @@ video {
   --text-subtle: 240 4.2% 26%;
   --text-muted: 240 3.5% 45.1%;
   --text-hint: 240 2.5% 62%;
-  /* Chart Colors — same palette as Theme 1, chart-1 swapped to violet */
+  /* Chart Colors — same palette as Default Blue, chart-1 swapped to violet */
   --chart-1: 258 90% 66%;
   --chart-2: 129 51.1% 54.3%;
   --chart-3: 26 89.6% 51.2%;
@@ -14548,7 +14548,7 @@ video {
   --sidebar-accent-foreground: 240 10.5% 7.5%;
   --sidebar-border: 240 5.9% 90%;
   --sidebar-ring: 258 90% 66%;
-  /* === GENERATED TOKENS START === Theme-2-Light */
+  /* === GENERATED TOKENS START === Neutral-Violet-Light */
   /* icon tokens */
   --icon-default: #111115;
   --icon-default-subtle: #4e4e55;
@@ -14788,9 +14788,9 @@ video {
   /* === GENERATED TOKENS END === */
 }
 
-/* ===== Sort UI Theme 2 — Dark ===== */
+/* ===== Sort UI Neutral Violet — Dark ===== */
 
-/* Structurally identical to Theme 1 Dark — see docs/superpowers/specs/2026-07-06-theme-2-neutral-violet-redesign-design.md.
+/* Structurally identical to Default Blue Dark — see docs/superpowers/specs/2026-07-06-theme-2-neutral-violet-redesign-design.md.
      Group A — Primary Button is INVERTED (near-white bg, dark text via --text-on-primary/--icon-on-primary).
      Group B — accent is violet instead of orange. */
 
@@ -14832,7 +14832,7 @@ video {
   --text-subtle: 240 3% 75%;
   --text-muted: 240 5% 64.9%;
   --text-hint: 240 3% 50%;
-  /* Chart Colors — same palette as Theme 1, chart-1 swapped to violet */
+  /* Chart Colors — same palette as Default Blue, chart-1 swapped to violet */
   --chart-1: 252 89% 71%;
   --chart-2: 132 62.8% 63.1%;
   --chart-3: 28 88.7% 58.2%;
@@ -14847,7 +14847,7 @@ video {
   --sidebar-accent-foreground: 0 0% 100%;
   --sidebar-border: 240 3.7% 20%;
   --sidebar-ring: 252 89% 71%;
-  /* === GENERATED TOKENS START === Theme-2-Dark */
+  /* === GENERATED TOKENS START === Neutral-Violet-Dark */
   /* icon tokens */
   --icon-default: #ffffff;
   --icon-default-subtle: rgba(255, 255, 255, 0.7);
@@ -15089,7 +15089,7 @@ video {
 
 /* ===== Sort UI Font Family Mode — Font B ===== */
 
-/* Independent of color theme — combine freely with Theme-1 or Theme-2 */
+/* Independent of color theme — combine freely with Default Blue or Neutral Violet */
 
 .font-b {
   --font-headline: var(--font-geist-sans);
@@ -17542,8 +17542,8 @@ button,
   border-color: hsl(var(--destructive) / 0.5);
 }
 
-.border-primary {
-  border-color: hsl(var(--primary));
+.border-informative {
+  border-color: hsl(var(--informative));
 }
 
 .border-sidebar-border {
@@ -19621,6 +19621,10 @@ button,
   --tw-ring-inset: inset;
 }
 
+.ring-informative {
+  --tw-ring-color: hsl(var(--informative));
+}
+
 .ring-primary {
   --tw-ring-color: hsl(var(--primary));
 }
@@ -21226,8 +21230,8 @@ button,
   border-color: var(--border-accent);
 }
 
-.data-\[state\=checked\]\:border-primary[data-state="checked"] {
-  border-color: hsl(var(--primary));
+.data-\[state\=checked\]\:border-informative[data-state="checked"] {
+  border-color: hsl(var(--informative));
 }
 
 .data-\[state\=checked\]\:border-sui-bg-checkbox-active[data-state="checked"] {
@@ -21473,8 +21477,8 @@ button,
   --tw-ring-inset: inset;
 }
 
-.data-\[state\=checked\]\:ring-primary[data-state="checked"] {
-  --tw-ring-color: hsl(var(--primary));
+.data-\[state\=checked\]\:ring-informative[data-state="checked"] {
+  --tw-ring-color: hsl(var(--informative));
 }
 
 .data-\[swipe\=move\]\:transition-none[data-swipe="move"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxsteinwender/sort-ui",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A coded design system based on Sort UI Kit — Figma components as production-ready Next.js/Tailwind components",
   "author": "Max Steinwender",
   "license": "UNLICENSED",