@kinetixui/ui 0.16.0 → 0.17.0

package/dist/index.d.ts

@@ -86,7 +86,7 @@ declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.Re
  */
 declare const inputVariants: (props?: ({
     state?: "Default" | "Focus" | "Disabled" | "Error" | null | undefined;
-    corners?: "sharp" | "default" | "pill" | "rounded" | null | undefined;
+    corners?: "rounded" | "sharp" | "default" | "pill" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
 }
@@ -337,7 +337,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -1303,7 +1303,7 @@ declare const ButtonGroupText: React$1.ForwardRefExoticComponent<React$1.HTMLAtt
  */
 declare const nativeSelectVariants: (props?: ({
     state?: "Default" | "Focus" | "Disabled" | "Error" | null | undefined;
-    corners?: "sharp" | "default" | "pill" | "rounded" | null | undefined;
+    corners?: "rounded" | "sharp" | "default" | "pill" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface NativeSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "size">, VariantProps<typeof nativeSelectVariants> {
 }
@@ -1617,7 +1617,7 @@ interface DataGridColumn<TData> {
     /** fixed to this side, not draggable, and excluded from the reorder sequence */
     pinned?: "left" | "right";
     sortable?: boolean;
-    /** double-click swaps the cell for a text input; commit fires on Enter/blur, Escape cancels */
+    /** double-click — or Enter / F2 on the focused cell — swaps it for a text input; commit fires on Enter/blur, Escape cancels */
     editable?: boolean;
     onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
 }

package/dist/index.js

@@ -7,7 +7,35 @@ import { cva } from "class-variance-authority";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-lg",
+            "display-md",
+            "display-sm",
+            "headline-lg",
+            "headline-md",
+            "headline-sm",
+            "title-lg",
+            "title-md",
+            "title-sm",
+            "title-dialog",
+            "label-lg",
+            "label-md",
+            "label-sm",
+            "body-lg",
+            "body-md",
+            "body-sm"
+          ]
+        }
+      ]
+    }
+  }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -28,12 +56,16 @@ var buttonVariants = cva(
       variant: {
         // bg primary / text on-primary; hover+active step down the blue ramp; disabled -> border grey
         // rest = --primary; hover/active dim it via opacity so it works in BOTH themes.
+        // Alphas are bounded by contrast, not taste: text on the dimmed fill must stay >= 4.5:1
+        // (light: 90% = 5.05, 85% = 4.54, 80% = 4.11 fails) — enforced by check:contrast.
         // (the old hover:bg-[--color-blue-600] was a hard-coded dark navy — on dark mode,
         //  where --primary is light, it inverted the button into the near-black background.)
-        Primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 disabled:bg-border disabled:text-muted-foreground",
+        Primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/85 disabled:bg-border disabled:text-muted-foreground",
         // rest = --secondary; hover/active promote to the --secondary-foreground fill with
-        //  inverted text — theme-aware, unlike the previous hard-coded green primitives
-        Secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary active:bg-secondary-foreground/90 active:text-secondary focus-visible:bg-secondary disabled:bg-border disabled:text-muted-foreground",
+        //  inverted text — theme-aware, unlike the previous hard-coded green primitives.
+        //  Active is solid like hover: dimming it (90% was 3.97:1) drops the text under AA,
+        //  and anything above ~97% is imperceptible. Enforced by check:contrast.
+        Secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary active:bg-secondary-foreground active:text-secondary focus-visible:bg-secondary disabled:bg-border disabled:text-muted-foreground",
         // 1px outline; hover fills with accent + strengthens the edge to --ring so the
         // state stays visible on the darkest surfaces (WCAG 2.2 SC 1.4.11); active pins primary
         Outline: "border border-input bg-transparent text-foreground hover:border-ring hover:bg-accent active:border-primary active:bg-accent active:text-primary disabled:border-input disabled:text-muted-foreground disabled:bg-transparent",
@@ -45,11 +77,11 @@ var buttonVariants = cva(
       },
       size: {
         // padding = Figma spacing/3 + spacing/2 ; type = Label Small (11/16, +0.5 tracking)
-        sm: "px-3 py-2 text-[11px] leading-4 tracking-[0.5px]",
+        sm: "px-3 py-2 text-label-sm",
         // spacing/4 + spacing/3 ; Label Medium (12/16, +0.5)
-        md: "px-4 py-3 text-[12px] leading-4 tracking-[0.5px]",
+        md: "px-4 py-3 text-label-md",
         // spacing/6 + spacing/3 ; Label Large (14/20, +0.1)
-        lg: "px-6 py-3 text-[14px] leading-5 tracking-[0.1px]",
+        lg: "px-6 py-3 text-label-lg",
         // spacing/3 all round, square
         icon: "p-3 [&>*:not(svg)]:sr-only"
       },
@@ -71,9 +103,9 @@ var buttonVariants = cva(
     compoundVariants: [
       { variant: "Destructive", class: "focus-visible:shadow-focus-destructive" },
       { variant: "Primary", state: "Hover", class: "bg-primary/90" },
-      { variant: "Primary", state: "Active", class: "bg-primary/80" },
+      { variant: "Primary", state: "Active", class: "bg-primary/85" },
       { variant: "Secondary", state: "Hover", class: "bg-secondary-foreground text-secondary" },
-      { variant: "Secondary", state: "Active", class: "bg-secondary-foreground/90 text-secondary" },
+      { variant: "Secondary", state: "Active", class: "bg-secondary-foreground text-secondary" },
       { variant: "Outline", state: "Hover", class: "border-ring bg-accent" },
       { variant: "Outline", state: "Active", class: "border-primary bg-accent text-primary" },
       { variant: "Ghost", state: "Hover", class: "bg-accent ring-1 ring-inset ring-ring" },
@@ -110,7 +142,7 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var inputVariants = cva2(
   [
     "flex w-full border border-input bg-background px-3 py-3",
-    "font-sans text-[14px] leading-5 tracking-[0.25px] text-foreground",
+    "font-sans text-body-md text-foreground",
     "placeholder:text-muted-foreground",
     "outline-none transition-colors",
     "focus-visible:border-primary focus-visible:shadow-focus",
@@ -160,7 +192,7 @@ import { jsx as jsx3 } from "react/jsx-runtime";
 var textareaVariants = cva3(
   [
     "flex w-full min-h-[100px] resize-y rounded-sm border border-input bg-background px-3 py-3",
-    "font-sans text-[14px] leading-5 tracking-[0.25px] text-foreground",
+    "font-sans text-body-md text-foreground",
     "placeholder:text-muted-foreground",
     "outline-none transition-colors",
     "focus-visible:border-primary focus-visible:shadow-focus",
@@ -393,7 +425,7 @@ import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { cva as cva5 } from "class-variance-authority";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var badgeVariants = cva5(
-  "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium font-sans tracking-[0.5px] transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full px-2.5 py-1 text-label-md font-sans transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
@@ -856,7 +888,7 @@ var SelectTrigger = React21.forwardRef(({ className, children, ...props }, ref)
     ref,
     className: cn(
       "flex min-h-[44px] w-full items-center justify-between rounded-sm border border-input bg-background px-3 py-3",
-      "font-sans text-[14px] leading-5 tracking-[0.25px] text-foreground",
+      "font-sans text-body-md text-foreground",
       "data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
       "outline-none transition-colors",
       "focus:border-primary focus:shadow-focus",
@@ -1041,7 +1073,7 @@ function Modal({
           ),
           children: [
             /* @__PURE__ */ jsxs11("header", { className: "flex items-center justify-between px-6 pb-3 pt-5", children: [
-              /* @__PURE__ */ jsx25(DialogPrimitive2.Title, { className: "min-w-0 flex-1 text-[18px] font-semibold leading-6 text-foreground", children: title }),
+              /* @__PURE__ */ jsx25(DialogPrimitive2.Title, { className: "min-w-0 flex-1 text-title-dialog text-foreground", children: title }),
               /* @__PURE__ */ jsx25(
                 DialogPrimitive2.Close,
                 {
@@ -1053,7 +1085,7 @@ function Modal({
             ] }),
             /* @__PURE__ */ jsx25("div", { className: "h-px w-full bg-border" }),
             /* @__PURE__ */ jsxs11("div", { className: "px-6 py-5", children: [
-              description && /* @__PURE__ */ jsx25(DialogPrimitive2.Description, { className: "text-[14px] leading-5 tracking-[0.25px] text-muted-foreground", children: description }),
+              description && /* @__PURE__ */ jsx25(DialogPrimitive2.Description, { className: "text-body-md text-muted-foreground", children: description }),
               children
             ] }),
             /* @__PURE__ */ jsx25("div", { className: "h-px w-full bg-border" }),
@@ -1086,7 +1118,7 @@ function Skeleton({ className, ...props }) {
 import * as React24 from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
-var Slider = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs12(
+var Slider = React24.forwardRef(({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => /* @__PURE__ */ jsxs12(
   SliderPrimitive.Root,
   {
     ref,
@@ -1094,7 +1126,14 @@ var Slider = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ...props,
     children: [
       /* @__PURE__ */ jsx27(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx27(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ jsx27(SliderPrimitive.Thumb, { className: "block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled" })
+      /* @__PURE__ */ jsx27(
+        SliderPrimitive.Thumb,
+        {
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          className: "block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled"
+        }
+      )
     ]
   }
 ));
@@ -1158,7 +1197,7 @@ import { cva as cva8 } from "class-variance-authority";
 import { X as X4 } from "lucide-react";
 import { jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
 var tagVariants = cva8(
-  "inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium font-sans tracking-[0.5px]",
+  "inline-flex items-center gap-1 rounded-sm px-2 py-1 text-label-md font-sans",
   {
     variants: {
       variant: {
@@ -2984,7 +3023,7 @@ var informVariants = cva14(
   {
     variants: {
       variant: {
-        information: "bg-info/10 text-info",
+        information: "bg-info/10 text-info-on-container",
         warning: "bg-warning/15 text-warning",
         success: "bg-success/15 text-success",
         error: "bg-destructive/10 text-destructive",
@@ -3890,7 +3929,7 @@ var Kbd = React66.forwardRef(({ className, asChild = false, ...props }, ref) =>
     {
       ref,
       className: cn(
-        "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-input bg-muted px-1.5 font-sans text-[11px] font-medium text-muted-foreground",
+        "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-input bg-muted px-1.5 font-sans text-label-sm text-muted-foreground",
         className
       ),
       ...props
@@ -4003,7 +4042,7 @@ import { jsx as jsx75, jsxs as jsxs41 } from "react/jsx-runtime";
 var nativeSelectVariants = cva19(
   [
     "flex w-full appearance-none border border-input bg-background px-3 py-3 pe-9",
-    "font-sans text-[14px] leading-5 tracking-[0.25px] text-foreground",
+    "font-sans text-body-md text-foreground",
     "outline-none transition-colors",
     "focus-visible:border-primary focus-visible:shadow-focus",
     "disabled:cursor-not-allowed disabled:opacity-disabled",
@@ -4104,7 +4143,7 @@ var bannerVariants = cva20(
   {
     variants: {
       variant: {
-        information: "border-info/20 bg-info/10 text-info",
+        information: "border-info/20 bg-info/10 text-info-on-container",
         warning: "border-warning/25 bg-warning/15 text-warning",
         success: "border-success/25 bg-success/15 text-success",
         error: "border-destructive/20 bg-destructive/10 text-destructive",
@@ -4627,6 +4666,12 @@ var MultiSelect = React79.forwardRef(
     const current = value ?? internal;
     const [open, setOpen] = React79.useState(false);
     const [query, setQuery] = React79.useState("");
+    const anchorRef = React79.useRef(null);
+    const setRefs = (node) => {
+      anchorRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
     const set = (next) => {
       setInternal(next);
       onValueChange?.(next);
@@ -4641,7 +4686,7 @@ var MultiSelect = React79.forwardRef(
       /* @__PURE__ */ jsx85(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs50(
         "div",
         {
-          ref,
+          ref: setRefs,
           role: "combobox",
           "aria-expanded": open,
           "aria-haspopup": "listbox",
@@ -4671,7 +4716,10 @@ var MultiSelect = React79.forwardRef(
         {
           align: "start",
           className: "w-[var(--radix-popover-trigger-width)] p-0",
-          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => {
+            e.preventDefault();
+            anchorRef.current?.focus();
+          },
           children: /* @__PURE__ */ jsxs50(Command, { shouldFilter: !creatable, children: [
             /* @__PURE__ */ jsx85(CommandInput, { placeholder: "Search\u2026", value: query, onValueChange: setQuery }),
             /* @__PURE__ */ jsxs50(CommandList, { children: [
@@ -4778,6 +4826,36 @@ var Tour = ({
   const [rect, setRect] = React81.useState(null);
   const step = steps[stepIndex];
   React81.useEffect(() => setMounted(true), []);
+  const titleId = React81.useId();
+  const dialogRef = React81.useRef(null);
+  const returnFocusRef = React81.useRef(null);
+  React81.useEffect(() => {
+    if (!open) return;
+    returnFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    return () => returnFocusRef.current?.focus();
+  }, [open]);
+  React81.useEffect(() => {
+    if (open && mounted) dialogRef.current?.focus();
+  }, [open, mounted, stepIndex]);
+  const trapTab = (e) => {
+    if (e.key !== "Tab") return;
+    const dialog = e.currentTarget;
+    const focusable = Array.from(dialog.querySelectorAll("button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex='-1'])"));
+    if (focusable.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (e.shiftKey && (active === first || active === dialog)) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
   React81.useEffect(() => {
     if (!open || !step) return;
     const update = () => {
@@ -4832,12 +4910,16 @@ var Tour = ({
       /* @__PURE__ */ jsxs52(
         "div",
         {
+          ref: dialogRef,
           role: "dialog",
           "aria-modal": "true",
-          className: "fixed z-overlay w-80 rounded-lg border border-border bg-popover p-4 font-sans text-popover-foreground shadow-lg transition-all duration-fast",
+          "aria-labelledby": titleId,
+          tabIndex: -1,
+          onKeyDown: trapTab,
+          className: "fixed z-overlay w-80 rounded-lg border border-border bg-popover p-4 font-sans text-popover-foreground shadow-lg outline-none transition-all duration-fast",
           style: cardStyle,
           children: [
-            /* @__PURE__ */ jsx87("p", { className: "text-title-sm font-medium text-foreground", children: step.title }),
+            /* @__PURE__ */ jsx87("p", { id: titleId, className: "text-title-sm font-medium text-foreground", children: step.title }),
             /* @__PURE__ */ jsx87("div", { className: "mt-1.5 text-body-sm text-muted-foreground", children: step.content }),
             /* @__PURE__ */ jsxs52("div", { className: "mt-4 flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs52("span", { className: "text-label-sm text-muted-foreground", children: [
@@ -5032,10 +5114,21 @@ function DataGrid({
     window.addEventListener("pointermove", handleMove);
     window.addEventListener("pointerup", handleUp);
   }
-  function commitEdit(column, row, rowIndex, value) {
-    column.onCellEdit?.(row, rowIndex, value);
+  const restoreFocusRef = React83.useRef(null);
+  React83.useEffect(() => {
+    const target = restoreFocusRef.current;
+    if (editing || !target) return;
+    restoreFocusRef.current = null;
+    containerRef.current?.querySelector(`[data-cell="${target.rowIndex}:${target.columnId}"]`)?.focus();
+  }, [editing]);
+  function endEdit(restoreFocus) {
+    if (restoreFocus && editing) restoreFocusRef.current = { rowIndex: editing.rowIndex, columnId: editing.columnId };
     setEditing(null);
   }
+  function commitEdit(column, row, rowIndex, value, restoreFocus = false) {
+    column.onCellEdit?.(row, rowIndex, value);
+    endEdit(restoreFocus);
+  }
   return /* @__PURE__ */ jsx89(
     "div",
     {
@@ -5074,9 +5167,16 @@ function DataGrid({
                 });
               },
               onClick: () => column.sortable && toggleSort(column.id),
+              tabIndex: column.sortable ? 0 : void 0,
+              onKeyDown: (e) => {
+                if (column.sortable && e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+                  e.preventDefault();
+                  toggleSort(column.id);
+                }
+              },
               className: cn(
                 "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground",
-                column.sortable && "cursor-pointer hover:text-foreground",
+                column.sortable && "cursor-pointer outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
                 column.pinned && "bg-background"
               ),
               style: { width, ...pinnedStyle },
@@ -5114,8 +5214,20 @@ function DataGrid({
                   "div",
                   {
                     role: "gridcell",
+                    "data-cell": `${rowIndex}:${column.id}`,
                     onDoubleClick: () => column.editable && setEditing({ rowIndex, columnId: column.id }),
-                    className: cn("flex shrink-0 items-center px-2", column.pinned && "bg-background"),
+                    tabIndex: column.editable ? 0 : void 0,
+                    onKeyDown: (e) => {
+                      if (column.editable && e.target === e.currentTarget && (e.key === "Enter" || e.key === "F2")) {
+                        e.preventDefault();
+                        setEditing({ rowIndex, columnId: column.id });
+                      }
+                    },
+                    className: cn(
+                      "flex shrink-0 items-center px-2",
+                      column.editable && "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                      column.pinned && "bg-background"
+                    ),
                     style: { width, ...pinnedStyle },
                     children: isEditing ? /* @__PURE__ */ jsx89(
                       "input",
@@ -5124,8 +5236,8 @@ function DataGrid({
                         defaultValue: column.value ? String(column.value(row)) : "",
                         className: "h-7 w-full rounded-sm border-0 bg-transparent px-1 text-sm outline-none ring-1 ring-inset ring-ring",
                         onKeyDown: (e) => {
-                          if (e.key === "Enter") commitEdit(column, row, rowIndex, e.currentTarget.value);
-                          else if (e.key === "Escape") setEditing(null);
+                          if (e.key === "Enter") commitEdit(column, row, rowIndex, e.currentTarget.value, true);
+                          else if (e.key === "Escape") endEdit(true);
                         },
                         onBlur: (e) => commitEdit(column, row, rowIndex, e.currentTarget.value)
                       }
@@ -5540,7 +5652,6 @@ var ColorPicker = React86.forwardRef(
           max: 360,
           step: 1,
           onValueChange: ([nh]) => commit(nh ?? h, s, v, a),
-          "aria-label": "Hue",
           className: "relative flex h-4 w-full touch-none select-none items-center",
           children: [
             /* @__PURE__ */ jsx92(
@@ -5552,7 +5663,7 @@ var ColorPicker = React86.forwardRef(
                 }
               }
             ),
-            /* @__PURE__ */ jsx92(SliderPrimitive3.Thumb, { className: "block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })
+            /* @__PURE__ */ jsx92(SliderPrimitive3.Thumb, { "aria-label": "Hue", className: "block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })
           ]
         }
       ),
@@ -5564,7 +5675,6 @@ var ColorPicker = React86.forwardRef(
           max: 100,
           step: 1,
           onValueChange: ([na]) => commit(h, s, v, (na ?? a * 100) / 100),
-          "aria-label": "Alpha",
           className: "relative flex h-4 w-full touch-none select-none items-center",
           children: [
             /* @__PURE__ */ jsx92(
@@ -5584,7 +5694,7 @@ var ColorPicker = React86.forwardRef(
                 )
               }
             ),
-            /* @__PURE__ */ jsx92(SliderPrimitive3.Thumb, { className: "block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })
+            /* @__PURE__ */ jsx92(SliderPrimitive3.Thumb, { "aria-label": "Alpha", className: "block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })
           ]
         }
       ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -44,7 +44,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.9.1",
-    "@kinetixui/tokens": "0.16.0",
+    "@kinetixui/tokens": "0.17.0",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",
@@ -101,6 +101,7 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
+    "axe-core": "4.13.0",
     "jsdom": "^30.0.1",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",

package/src/components/badge.tsx

@@ -15,7 +15,7 @@ import { cn } from "../lib/utils";
  * container. Hence the swapped bg/text on that one variant.
  */
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium font-sans tracking-[0.5px] transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full px-2.5 py-1 text-label-md font-sans transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {

package/src/components/banner.tsx

@@ -20,7 +20,7 @@ const bannerVariants = cva(
   {
     variants: {
       variant: {
-        information: "border-info/20 bg-info/10 text-info",
+        information: "border-info/20 bg-info/10 text-info-on-container",
         warning: "border-warning/25 bg-warning/15 text-warning",
         success: "border-success/25 bg-success/15 text-success",
         error: "border-destructive/20 bg-destructive/10 text-destructive",

package/src/components/button.tsx

@@ -36,14 +36,18 @@ const buttonVariants = cva(
       variant: {
         // bg primary / text on-primary; hover+active step down the blue ramp; disabled -> border grey
         // rest = --primary; hover/active dim it via opacity so it works in BOTH themes.
+        // Alphas are bounded by contrast, not taste: text on the dimmed fill must stay >= 4.5:1
+        // (light: 90% = 5.05, 85% = 4.54, 80% = 4.11 fails) — enforced by check:contrast.
         // (the old hover:bg-[--color-blue-600] was a hard-coded dark navy — on dark mode,
         //  where --primary is light, it inverted the button into the near-black background.)
         Primary:
-          "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 disabled:bg-border disabled:text-muted-foreground",
+          "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/85 disabled:bg-border disabled:text-muted-foreground",
         // rest = --secondary; hover/active promote to the --secondary-foreground fill with
-        //  inverted text — theme-aware, unlike the previous hard-coded green primitives
+        //  inverted text — theme-aware, unlike the previous hard-coded green primitives.
+        //  Active is solid like hover: dimming it (90% was 3.97:1) drops the text under AA,
+        //  and anything above ~97% is imperceptible. Enforced by check:contrast.
         Secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary active:bg-secondary-foreground/90 active:text-secondary focus-visible:bg-secondary disabled:bg-border disabled:text-muted-foreground",
+          "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary active:bg-secondary-foreground active:text-secondary focus-visible:bg-secondary disabled:bg-border disabled:text-muted-foreground",
         // 1px outline; hover fills with accent + strengthens the edge to --ring so the
         // state stays visible on the darkest surfaces (WCAG 2.2 SC 1.4.11); active pins primary
         Outline:
@@ -58,11 +62,11 @@ const buttonVariants = cva(
       },
       size: {
         // padding = Figma spacing/3 + spacing/2 ; type = Label Small (11/16, +0.5 tracking)
-        sm: "px-3 py-2 text-[11px] leading-4 tracking-[0.5px]",
+        sm: "px-3 py-2 text-label-sm",
         // spacing/4 + spacing/3 ; Label Medium (12/16, +0.5)
-        md: "px-4 py-3 text-[12px] leading-4 tracking-[0.5px]",
+        md: "px-4 py-3 text-label-md",
         // spacing/6 + spacing/3 ; Label Large (14/20, +0.1)
-        lg: "px-6 py-3 text-[14px] leading-5 tracking-[0.1px]",
+        lg: "px-6 py-3 text-label-lg",
         // spacing/3 all round, square
         icon: "p-3 [&>*:not(svg)]:sr-only",
       },
@@ -84,9 +88,9 @@ const buttonVariants = cva(
     compoundVariants: [
       { variant: "Destructive", class: "focus-visible:shadow-focus-destructive" },
       { variant: "Primary", state: "Hover", class: "bg-primary/90" },
-      { variant: "Primary", state: "Active", class: "bg-primary/80" },
+      { variant: "Primary", state: "Active", class: "bg-primary/85" },
       { variant: "Secondary", state: "Hover", class: "bg-secondary-foreground text-secondary" },
-      { variant: "Secondary", state: "Active", class: "bg-secondary-foreground/90 text-secondary" },
+      { variant: "Secondary", state: "Active", class: "bg-secondary-foreground text-secondary" },
       { variant: "Outline", state: "Hover", class: "border-ring bg-accent" },
       { variant: "Outline", state: "Active", class: "border-primary bg-accent text-primary" },
       { variant: "Ghost", state: "Hover", class: "bg-accent ring-1 ring-inset ring-ring" },

package/src/components/color-picker.tsx

@@ -220,7 +220,6 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
           max={360}
           step={1}
           onValueChange={([nh]) => commit(nh ?? h, s, v, a)}
-          aria-label="Hue"
           className="relative flex h-4 w-full touch-none select-none items-center"
         >
           <SliderPrimitive.Track
@@ -230,7 +229,7 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
                 "linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))",
             }}
           />
-          <SliderPrimitive.Thumb className="block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+          <SliderPrimitive.Thumb aria-label="Hue" className="block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
         </SliderPrimitive.Root>
 
         {alpha && (
@@ -240,7 +239,6 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
             max={100}
             step={1}
             onValueChange={([na]) => commit(h, s, v, (na ?? a * 100) / 100)}
-            aria-label="Alpha"
             className="relative flex h-4 w-full touch-none select-none items-center"
           >
             <SliderPrimitive.Track
@@ -256,7 +254,7 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
                 style={{ backgroundImage: `linear-gradient(to right, transparent, hsl(${h} ${s}% ${v}%))` }}
               />
             </SliderPrimitive.Track>
-            <SliderPrimitive.Thumb className="block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+            <SliderPrimitive.Thumb aria-label="Alpha" className="block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
           </SliderPrimitive.Root>
         )}