@ember-home/unbound-styleguide 0.0.4 → 0.0.6

package/dist/index.js

@@ -69,14 +69,14 @@ var buttonVariants = cva(
   // Base styles with R2 semantic tokens
   // TODO: focus-visible:border-line-default-active differs from shadcn border-ring (#71717a vs #09090b)
   //       Consider adding a dedicated focus border token if exact visual parity is required
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-line-default-active focus-visible:ring-ring-default/50 focus-visible:ring-[3px] aria-invalid:ring-ring-critical/20 dark:aria-invalid:ring-ring-critical/40 aria-invalid:border-line-critical",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-line-default-active focus-visible:ring-default/50 focus-visible:ring-[3px] aria-invalid:ring-critical/20 dark:aria-invalid:ring-critical/40 aria-invalid:border-line-critical",
   {
     variants: {
       variant: {
         // Default: Brand fill with white text
         default: "bg-fill-brand text-brand-on-bg-fill hover:bg-fill-brand-hover",
         // Destructive: Critical fill with on-fill text
-        destructive: "bg-fill-critical text-critical-on-bg-fill hover:bg-fill-critical-hover focus-visible:ring-ring-critical-secondary dark:focus-visible:ring-ring-critical-secondary dark:bg-fill-critical",
+        destructive: "bg-fill-critical text-critical-on-bg-fill hover:bg-fill-critical-hover focus-visible:ring-critical-secondary dark:focus-visible:ring-critical-secondary dark:bg-fill-critical",
         // Secondary: Surface background with subtle hover
         secondary: "border border-line-default bg-surface-default shadow-xs hover:bg-fill-default-secondary-hover hover:text-default",
         // Tertiary: Secondary fill background
@@ -404,13 +404,13 @@ import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { cva as cva3 } from "class-variance-authority";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var badgeVariants = cva3(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring-default/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-default/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
         default: "border-transparent bg-fill-brand text-brand-on-bg-fill [a&]:hover:bg-primary/90",
         secondary: "border-transparent bg-fill-default-secondary text-default [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-fill-critical text-white [a&]:hover:bg-destructive/90 focus-visible:ring-ring-critical/20 dark:focus-visible:ring-destructive/40 dark:bg-fill-critical/60",
+        destructive: "border-transparent bg-fill-critical text-white [a&]:hover:bg-destructive/90 focus-visible:ring-critical/20 dark:focus-visible:ring-destructive/40 dark:bg-fill-critical/60",
         outline: "text-default [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
       }
     },
@@ -1028,7 +1028,7 @@ function DialogContent({
           DialogPrimitive.Close,
           {
             "data-slot": "dialog-close",
-            className: "ring-offset-background focus:ring-ring-default data-[state=open]:bg-fill-default-secondary data-[state=open]:text-default-tertiary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+            className: "ring-offset-background focus:ring-default data-[state=open]:bg-fill-default-secondary data-[state=open]:text-default-tertiary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
             children: [
               /* @__PURE__ */ jsx14(XIcon, {}),
               /* @__PURE__ */ jsx14("span", { className: "sr-only", children: "Close" })
@@ -1151,7 +1151,7 @@ function PopoverContent({
           PopoverPrimitive.Close,
           {
             "data-slot": "popover-close",
-            className: "ring-offset-background focus:ring-ring-default data-[state=open]:bg-fill-default-secondary data-[state=open]:text-default-tertiary absolute top-2 right-2 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+            className: "ring-offset-background focus:ring-default data-[state=open]:bg-fill-default-secondary data-[state=open]:text-default-tertiary absolute top-2 right-2 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
             children: [
               /* @__PURE__ */ jsx15(XIcon2, {}),
               /* @__PURE__ */ jsx15("span", { className: "sr-only", children: "Close" })
@@ -1260,7 +1260,7 @@ function SheetContent({
       ...props,
       children: [
         children,
-        showCloseButton && /* @__PURE__ */ jsxs7(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring-default data-[state=open]:bg-fill-default-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+        showCloseButton && /* @__PURE__ */ jsxs7(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-default data-[state=open]:bg-fill-default-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
           /* @__PURE__ */ jsx16(XIcon3, { className: "size-4" }),
           /* @__PURE__ */ jsx16("span", { className: "sr-only", children: "Close" })
         ] })
@@ -1671,7 +1671,7 @@ function Checkbox({ className, ...props }) {
     {
       "data-slot": "checkbox",
       className: mergeClasses(
-        "peer border-line-default-tertiary dark:bg-input/30 data-[state=checked]:bg-fill-brand data-[state=checked]:text-brand-on-bg-fill dark:data-[state=checked]:bg-fill-brand data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring-default/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border-line-default-tertiary dark:bg-input/30 data-[state=checked]:bg-fill-brand data-[state=checked]:text-brand-on-bg-fill dark:data-[state=checked]:bg-fill-brand data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-default/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
@@ -1700,7 +1700,7 @@ var Input = React9.forwardRef(
         "data-slot": "input",
         className: mergeClasses(
           "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-line-default-tertiary h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          "focus-visible:border-ring focus-visible:ring-ring-default/50 focus-visible:ring-[3px]",
+          "focus-visible:border-ring focus-visible:ring-default/50 focus-visible:ring-[3px]",
           "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
           className
         ),
@@ -1816,7 +1816,7 @@ var SearchInput = React10.forwardRef(
           tabIndex: -1,
           className: mergeClasses(
             "absolute top-1/2 -translate-y-1/2 text-default-tertiary hover:text-default",
-            "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-default",
+            "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-default",
             config.clearButton
           ),
           "aria-label": "Clear search",
@@ -1876,7 +1876,7 @@ function ToggleGroupItem({
         // Base styles
         "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center rounded-md border border-transparent font-medium whitespace-nowrap transition-[color,box-shadow] cursor-pointer",
         // Focus styles
-        "focus-visible:border-ring focus-visible:ring-ring-default/50 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:outline-1",
+        "focus-visible:border-ring focus-visible:ring-default/50 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:outline-1",
         // Active state
         "data-[state=on]:bg-surface-default data-[state=on]:text-default data-[state=on]:shadow-sm",
         // Inactive state
@@ -1932,7 +1932,7 @@ var Textarea = React12.forwardRef(
         ref,
         "data-slot": "textarea",
         className: mergeClasses(
-          "border-line-default-tertiary placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring-default/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "border-line-default-tertiary placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-default/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         ),
         ...props
@@ -1952,7 +1952,7 @@ function Switch({ className, ...props }) {
       "data-slot": "switch",
       className: mergeClasses(
         "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-default focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-default focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:bg-fill-brand data-[state=unchecked]:bg-input",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
@@ -1998,7 +1998,7 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: mergeClasses(
-        "border-line-default-tertiary data-[placeholder]:text-default-tertiary [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring-default/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-line-default-tertiary data-[placeholder]:text-default-tertiary [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-default/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -2291,7 +2291,7 @@ function Combobox({
         className: mergeClasses(
           // Base styles matching SelectTrigger
           "border-line-default-tertiary data-[placeholder]:text-default-tertiary [&_svg:not([class*='text-'])]:text-muted-foreground",
-          "focus-visible:border-ring focus-visible:ring-ring-default/50 focus-visible:ring-[3px]",
+          "focus-visible:border-ring focus-visible:ring-default/50 focus-visible:ring-[3px]",
           "flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs",
           "transition-[color,box-shadow] outline-none cursor-pointer",
           "disabled:cursor-not-allowed disabled:opacity-50",
@@ -2365,7 +2365,7 @@ function ComboboxTrigger({
       className: mergeClasses(
         // Base styles matching SelectTrigger
         "border-line-default-tertiary data-[placeholder]:text-default-tertiary [&_svg:not([class*='text-'])]:text-muted-foreground",
-        "focus-visible:border-ring focus-visible:ring-ring-default/50 focus-visible:ring-[3px]",
+        "focus-visible:border-ring focus-visible:ring-default/50 focus-visible:ring-[3px]",
         "flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs",
         "transition-[color,box-shadow] outline-none cursor-pointer",
         "disabled:cursor-not-allowed disabled:opacity-50",
@@ -2502,14 +2502,14 @@ function Calendar({
         nav: "flex items-center gap-1",
         button_previous: mergeClasses(
           "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-default focus-visible:ring-offset-2",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-default focus-visible:ring-offset-2",
           "disabled:pointer-events-none disabled:opacity-50",
           "border border-line-default-tertiary bg-surface-default hover:bg-fill-default-secondary-hover hover:text-default",
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
         button_next: mergeClasses(
           "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-default focus-visible:ring-offset-2",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-default focus-visible:ring-offset-2",
           "disabled:pointer-events-none disabled:opacity-50",
           "border border-line-default-tertiary bg-surface-default hover:bg-fill-default-secondary-hover hover:text-default",
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
@@ -2521,7 +2521,7 @@ function Calendar({
         day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day_button: mergeClasses(
           "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-default focus-visible:ring-offset-2",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-default focus-visible:ring-offset-2",
           "hover:bg-surface-default-secondary-hover hover:text-default",
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
         ),
@@ -2750,7 +2750,7 @@ function DatePicker({
             readOnly,
             className: mergeClasses(
               "pr-10",
-              displayError && "border-destructive focus-visible:ring-ring-critical"
+              displayError && "border-destructive focus-visible:ring-critical"
             ),
             "aria-invalid": !!displayError,
             "aria-describedby": displayError ? errorId : void 0
@@ -2763,7 +2763,7 @@ function DatePicker({
             className: mergeClasses(
               "absolute right-0 top-0 h-full px-3 flex items-center justify-center",
               "text-default-tertiary hover:text-default transition-colors",
-              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring-default focus-visible:ring-offset-2 rounded-r-md",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-default focus-visible:ring-offset-2 rounded-r-md",
               (disabled || readOnly) && "opacity-50 cursor-not-allowed hover:text-default-tertiary"
             ),
             tabIndex: -1,
@@ -3405,7 +3405,7 @@ function DateRangePicker({
           placeholder: startPlaceholder,
           className: mergeClasses(
             "h-8 text-sm",
-            startError && "border-destructive focus-visible:ring-ring-critical"
+            startError && "border-destructive focus-visible:ring-critical"
           ),
           "aria-invalid": !!startError,
           "aria-describedby": startError ? startErrorId : void 0
@@ -3436,7 +3436,7 @@ function DateRangePicker({
           placeholder: endPlaceholder,
           className: mergeClasses(
             "h-8 text-sm",
-            endError && "border-destructive focus-visible:ring-ring-critical"
+            endError && "border-destructive focus-visible:ring-critical"
           ),
           "aria-invalid": !!endError,
           "aria-describedby": endError ? endErrorId : void 0
@@ -3453,7 +3453,7 @@ function DateRangePicker({
       className: mergeClasses(
         "text-left px-2 py-1.5 text-sm rounded-md transition-colors",
         "hover:bg-fill-default-secondary-hover hover:text-default",
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring-default",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-default",
         matchingPreset === preset.id && "bg-fill-default-secondary text-default font-medium"
       ),
       children: preset.label
@@ -3967,7 +3967,7 @@ function WeeklyDaysSelect({
           disabled: disabled || isLastSelected,
           className: mergeClasses(
             "size-8 rounded-full text-xs font-medium transition-colors",
-            "border focus:outline-none focus:ring-2 focus:ring-ring-default focus:ring-offset-2",
+            "border focus:outline-none focus:ring-2 focus:ring-default focus:ring-offset-2",
             isSelected ? "bg-fill-brand text-brand-on-bg-fill border-primary" : "bg-surface-default text-default border-line-default-tertiary hover:bg-fill-default-secondary-hover hover:text-default",
             disabled && "opacity-50 cursor-not-allowed",
             isLastSelected && "cursor-not-allowed"
@@ -6163,7 +6163,7 @@ function TabsTrigger({ className, ...props }) {
     {
       "data-slot": "tabs-trigger",
       className: mergeClasses(
-        "data-[state=active]:bg-surface-default dark:data-[state=active]:text-default focus-visible:border-ring focus-visible:ring-ring-default/50 focus-visible:outline-ring dark:data-[state=active]:border-line-default-tertiary dark:data-[state=active]:bg-input/30 text-default dark:text-default-tertiary inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm cursor-pointer data-[state=inactive]:hover:bg-background/50 data-[state=inactive]:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[state=active]:bg-surface-default dark:data-[state=active]:text-default focus-visible:border-ring focus-visible:ring-default/50 focus-visible:outline-ring dark:data-[state=active]:border-line-default-tertiary dark:data-[state=active]:bg-input/30 text-default dark:text-default-tertiary inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm cursor-pointer data-[state=inactive]:hover:bg-background/50 data-[state=inactive]:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props

package/dist/theme.css

@@ -2980,6 +2980,11 @@
       --tw-ring-color: var(--color-ring-critical);
     }
   }
+  .focus\:ring-default {
+    &:focus {
+      --tw-ring-color: var(--color-ring-default);
+    }
+  }
   .focus\:ring-primary {
     &:focus {
       --tw-ring-color: var(--primary);
@@ -3024,6 +3029,37 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:ring-critical {
+    &:focus-visible {
+      --tw-ring-color: var(--color-ring-critical);
+    }
+  }
+  .focus-visible\:ring-critical-secondary {
+    &:focus-visible {
+      --tw-ring-color: var(--color-ring-critical-secondary);
+    }
+  }
+  .focus-visible\:ring-critical\/20 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-ring-critical);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-ring-critical) 20%, transparent);
+      }
+    }
+  }
+  .focus-visible\:ring-default {
+    &:focus-visible {
+      --tw-ring-color: var(--color-ring-default);
+    }
+  }
+  .focus-visible\:ring-default\/50 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-ring-default);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-ring-default) 50%, transparent);
+      }
+    }
+  }
   .focus-visible\:ring-white\/50 {
     &:focus-visible {
       --tw-ring-color: var(--color-ring-white);
@@ -3152,6 +3188,14 @@
       border-color: var(--destructive);
     }
   }
+  .aria-invalid\:ring-critical\/20 {
+    &[aria-invalid="true"] {
+      --tw-ring-color: var(--color-ring-critical);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-ring-critical) 20%, transparent);
+      }
+    }
+  }
   .aria-invalid\:ring-destructive\/20 {
     &[aria-invalid="true"] {
       --tw-ring-color: var(--destructive);
@@ -3966,6 +4010,13 @@
       }
     }
   }
+  .dark\:focus-visible\:ring-critical-secondary {
+    &:is(.dark *) {
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring-critical-secondary);
+      }
+    }
+  }
   .dark\:focus-visible\:ring-destructive\/40 {
     &:is(.dark *) {
       &:focus-visible {
@@ -3976,6 +4027,16 @@
       }
     }
   }
+  .dark\:aria-invalid\:ring-critical\/40 {
+    &:is(.dark *) {
+      &[aria-invalid="true"] {
+        --tw-ring-color: var(--color-ring-critical);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring-critical) 40%, transparent);
+        }
+      }
+    }
+  }
   .dark\:aria-invalid\:ring-destructive\/40 {
     &:is(.dark *) {
       &[aria-invalid="true"] {
@@ -4588,6 +4649,15 @@
   --white: #ffffff;
   --black: #000000;
 }
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--border);
+  }
+}
 :root {
   --color-text-white: var(--white);
   --color-text-default: var(--gray-950);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-home/unbound-styleguide",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "React component library with Tailwind CSS v4 design tokens",
   "keywords": [
     "react",