@godxjp/ui 29.0.0 → 30.0.0

package/dist/components/data-display/badge.js

@@ -55,7 +55,7 @@ const badgeVariants = cva(
   // `ui-focus-ring` = the system's single focus source (styles/focus-ring.css). It replaces a
   // hand-rolled `focus:ring-2 focus:ring-ring`, which was token-blind (no --focus-ring-* knob
   // reached it) and fired on `:focus`, so a mouse click on an interactive badge lit a ring.
-  "ui-focus-ring inline-flex items-center border font-medium transition-colors",
+  "ui-focus-ring inline-flex items-center font-medium transition-colors",
   {
     variants: {
       variant: {

package/dist/components/data-display/table.js

@@ -69,7 +69,7 @@ const Table = React.forwardRef(
   }
 );
 Table.displayName = "Table";
-const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn(className), ...props }));
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => (
   // "The last row draws no rule" is an idiom, not a service-tunable constant, so it is a CSS

package/dist/components/general/button.js

@@ -29,10 +29,10 @@ const buttonVariants = cva("ui-button", {
       // `bg-background` gone for the same reason (gh#880). The HOVER fill stays a utility: it
       // is the same value `.ui-button--outline:hover` declares, and moving it is a separate
       // decision from making the resting surface reachable.
-      outline: "ui-button--outline border hover:bg-accent hover:text-accent-foreground",
+      outline: "ui-button--outline hover:bg-accent hover:text-accent-foreground",
       // `dashed` is `outline` with a dashed edge, so it shares `--button-outline-background`
       // rather than growing a knob of its own (gh#880).
-      dashed: "ui-button--dashed border border-dashed hover:bg-accent hover:text-accent-foreground",
+      dashed: "ui-button--dashed hover:bg-accent hover:text-accent-foreground",
       secondary: "ui-button--secondary text-secondary-foreground hover:bg-secondary/80",
       ghost: "ui-button--ghost hover:bg-accent hover:text-accent-foreground",
       // `text-primary` gone for the reason `bg-background` went in gh#880 and the checkbox's

package/dist/components/navigation/tabs.js

@@ -554,7 +554,7 @@ const TabsTrigger = React.forwardRef(
           // — Segmented — has been `--segmented-item-selected-background` since gh#848, and these
           // two are documented as the same pair. The card face and the line strip both restate the
           // fill as utilities, which still outrank the new rule, so neither moves.
-          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:text-foreground group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:text-foreground group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
           // The tier the root was given. Without this the compound form ignored `size` outright.
           triggerSizeClassName(size),
           className

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "28.13.0",
+  "version": "29.0.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/styles/alert-layout.css

@@ -11,7 +11,7 @@
       --alert-radius,
       var(--card-radius, calc(var(--radius) * var(--radius-ratio)))
     );
-    border-width: 1px;
+    border-width: var(--stroke-hairline);
     padding: var(--alert-space-inset);
     font-size: var(--font-size-base);
   }
@@ -52,7 +52,7 @@
     border-radius: var(--banner-radius);
     border-block-start-width: 0;
     border-inline-width: 0;
-    border-block-end-width: var(--banner-border-width);
+    border-block-end-width: var(--banner-border-width, var(--stroke-hairline));
     padding-block: var(--banner-space-inset-block);
     padding-inline: var(--banner-space-inset-inline);
   }
@@ -285,7 +285,7 @@
 
   .ui-skeleton-table {
     overflow: hidden;
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     border-radius: var(--skeleton-radius, var(--radius));
   }
 
@@ -307,7 +307,7 @@
   }
 
   .ui-skeleton-table-row + .ui-skeleton-table-row {
-    border-top: 1px solid hsl(var(--border));
+    border-top: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-skeleton-detail {
@@ -317,7 +317,7 @@
   .ui-skeleton-detail-box,
   .ui-skeleton-stat,
   .ui-skeleton-card {
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     border-radius: var(--skeleton-radius, var(--radius));
     padding: var(--skeleton-card-inset);
 

package/dist/styles/badge-layout.css

@@ -12,7 +12,7 @@
     padding: var(--badge-space-y) var(--badge-space-x);
 
     border-radius: var(--badge-radius, calc(var(--radius) / var(--radius-ratio)));
-    border-width: 1px;
+    border-width: var(--stroke-hairline);
     font-size: var(--badge-font-size);
 
     line-height: var(--badge-line-height);

package/dist/styles/card-layout.css

@@ -7,7 +7,7 @@
     display: flex;
     flex-direction: column;
 
-    border-width: 1px;
+    border-width: var(--stroke-hairline);
     border-style: solid;
     border-color: hsl(var(--card-border, var(--border)));
     border-radius: var(--card-radius, calc(var(--radius) * var(--radius-ratio)));
@@ -46,7 +46,7 @@
 
   [data-slot="card"][data-variant="featured"] {
     border-color: var(--card-featured-border-color, hsl(var(--primary)));
-    box-shadow: 0 0 0 var(--card-featured-ring-width)
+    box-shadow: 0 0 0 var(--card-featured-ring-width, var(--stroke-hairline))
       var(--card-featured-border-color, hsl(var(--primary)));
   }
 
@@ -92,14 +92,16 @@
   }
 
   [data-slot="card"][data-accent] {
-    border-inline-start-width: var(--card-accent-rail-width);
+    border-inline-start-width: var(--card-accent-rail-width, var(--stroke-2xl));
     border-inline-start-color: var(--card-accent-color);
   }
 
   [data-slot="card"][data-accent] > [data-slot="card-header"],
   [data-slot="card"][data-accent] > [data-slot="card-content"]:not([data-flush]),
   [data-slot="card"][data-accent] > [data-slot="card-footer"]:not([data-flush]) {
-    padding-inline-start: calc(var(--card-space-inset) - var(--card-accent-rail-width));
+    padding-inline-start: calc(
+      var(--card-space-inset) - var(--card-accent-rail-width, var(--stroke-2xl))
+    );
   }
 
   [data-slot="card"] > [data-slot="card-footer"] {
@@ -107,10 +109,10 @@
   }
 
   [data-slot="card"][data-accent][data-accent-placement="perimeter"] {
-    border-width: var(--card-accent-perimeter-width);
+    border-width: var(--card-accent-perimeter-width, var(--stroke-hairline));
     border-color: var(--card-accent-color);
     box-shadow:
-      0 0 0 var(--card-accent-perimeter-ring-width) var(--card-accent-color),
+      0 0 0 var(--card-accent-perimeter-ring-width, var(--stroke-hairline)) var(--card-accent-color),
       var(--card-shadow, var(--shadow-sm)),
       var(--card-glow);
   }
@@ -155,7 +157,7 @@
     align-items: center;
     gap: var(--space-inline-md);
     padding: var(--card-space-header-y) var(--card-space-inset);
-    border-block: 1px solid hsl(var(--card-border, var(--border)));
+    border-block: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
   }
 
   [data-slot="card-bar"]:first-child {
@@ -401,7 +403,7 @@
   }
 
   [data-slot="card-footer"][data-separated] {
-    border-top: 1px solid hsl(var(--card-border, var(--border)));
+    border-top: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
 
     padding-block: var(--card-space-divided-y);
     justify-content: flex-end;

package/dist/styles/chart-layout.css

@@ -33,7 +33,7 @@
 
 .ui-chart .recharts-default-tooltip {
   border-radius: var(--radius);
-  border: 1px solid hsl(var(--border)) !important;
+  border: var(--stroke-hairline) solid hsl(var(--border)) !important;
   background: hsl(var(--popover) / var(--popover-alpha, 100%)) !important;
   color: hsl(var(--popover-foreground));
   font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
@@ -105,7 +105,10 @@
   inline-size: 100%;
   max-inline-size: var(--chart-trend-bar-max-width);
 
-  block-size: max(var(--chart-trend-bar-min-height), calc(var(--chart-trend-bar-value, 0) * 100%));
+  block-size: max(
+    var(--chart-trend-bar-min-height, var(--stroke-md)),
+    calc(var(--chart-trend-bar-value, 0) * 100%)
+  );
   border-start-start-radius: var(
     --chart-trend-bar-radius,
     calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))

package/dist/styles/control.css

@@ -18,16 +18,16 @@
   }
 
   .ui-toggle-default {
-    border: 1px solid transparent;
+    border: var(--stroke-hairline) solid transparent;
   }
 
   .ui-toggle-outline {
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     background: hsl(var(--background));
   }
 
   .ui-toggle-soft {
-    border: 1px solid transparent;
+    border: var(--stroke-hairline) solid transparent;
     background: var(--toggle-soft-background, hsl(var(--secondary)));
     color: var(--toggle-soft-color, hsl(var(--secondary-foreground)));
   }
@@ -158,6 +158,9 @@
   }
 
   .ui-button--dashed {
+
+    border: var(--stroke-hairline) dashed
+      var(--button-outline-border-color, hsl(var(--input) / var(--input-alpha, 100%)));
     background: var(
       --button-outline-background,
       hsl(var(--background) / var(--button-outline-background-alpha, 100%))
@@ -165,7 +168,7 @@
   }
 
   .ui-button--outline {
-    border: 1px solid
+    border: var(--stroke-hairline) solid
       var(--button-outline-border-color, hsl(var(--input) / var(--input-alpha, 100%)));
     background: var(
       --button-outline-background,
@@ -302,7 +305,7 @@
     padding-inline-start: var(--control-padding-x);
     padding-inline-end: var(--control-padding-x);
     font-size: var(--control-font-size);
-    border-width: var(--control-border-width);
+    border-width: var(--control-border-width, var(--stroke-hairline));
     border-style: solid;
     box-shadow: var(--control-shadow);
   }
@@ -312,7 +315,7 @@
     padding-block: var(--control-multiline-padding-block);
     padding-inline: var(--control-padding-x);
     font-size: var(--control-font-size);
-    border-width: var(--control-border-width);
+    border-width: var(--control-border-width, var(--stroke-hairline));
     border-style: solid;
     box-shadow: var(--control-shadow);
   }
@@ -355,7 +358,7 @@
     padding-block-end: var(--textarea-padding-block-end, var(--control-multiline-padding-block));
     padding-inline-start: var(--textarea-padding-inline-start, var(--control-padding-x));
     padding-inline-end: var(--textarea-padding-inline-end, var(--control-padding-x));
-    border: var(--control-border-width) solid transparent;
+    border: var(--control-border-width, var(--stroke-hairline)) solid transparent;
 
     min-block-size: max(
       var(--control-height),
@@ -491,7 +494,7 @@
     width: var(--checkbox-size);
     height: var(--checkbox-size);
     flex-shrink: 0;
-    border: var(--checkbox-border-width) solid hsl(var(--primary));
+    border: var(--checkbox-border-width, var(--stroke-hairline)) solid hsl(var(--primary));
     color: hsl(var(--text-brand, var(--primary)));
     background: transparent;
   }
@@ -561,7 +564,7 @@
     flex-shrink: 0;
     cursor: pointer;
     align-items: center;
-    border: 2px solid transparent;
+    border: var(--stroke-md) solid transparent;
     border-radius: var(--radius-pill);
     box-shadow: var(--shadow-sm);
     transition-property: color, background-color, border-color, box-shadow;
@@ -677,7 +680,7 @@
     block-size: var(--slider-thumb-size);
     margin-block-start: calc(var(--slider-thumb-size) / -2);
     margin-inline-start: calc(var(--slider-thumb-size) / -2);
-    border: 1px solid hsl(var(--primary) / 0.5);
+    border: var(--stroke-hairline) solid hsl(var(--primary) / 0.5);
     border-radius: var(--radius-pill);
     background: hsl(var(--background));
     box-shadow: var(--shadow-sm);
@@ -710,7 +713,7 @@
   .ui-color-picker-preview {
     width: 100%;
     height: 100%;
-    border: 1px solid hsl(var(--input) / var(--input-alpha, 100%));
+    border: var(--stroke-hairline) solid hsl(var(--input) / var(--input-alpha, 100%));
     border-radius: var(--control-radius);
     box-shadow: var(--shadow-sm);
   }
@@ -754,7 +757,7 @@
   .ui-command-input-wrapper {
     display: flex;
     align-items: center;
-    border-bottom: 1px solid hsl(var(--border));
+    border-bottom: var(--stroke-hairline) solid hsl(var(--border));
     padding-inline: var(--command-input-padding-x);
   }
 
@@ -853,12 +856,12 @@
   }
 
   .ui-command[data-split] .ui-command-item:has(+ .ui-command-item) {
-    border-block-end: var(--command-item-divider-width) solid
+    border-block-end: var(--command-item-divider-width, var(--stroke-hairline)) solid
       hsl(var(--command-item-divider-color, var(--border)));
   }
 
   .ui-command[data-split] .ui-command-group:not([hidden]) ~ .ui-command-group:not([hidden]) {
-    border-block-start: var(--command-item-divider-width) solid
+    border-block-start: var(--command-item-divider-width, var(--stroke-hairline)) solid
       hsl(var(--command-item-divider-color, var(--border)));
   }
 
@@ -901,7 +904,7 @@
     display: flex;
     flex-wrap: wrap;
     gap: var(--command-palette-hint-gap);
-    border-top: 1px solid hsl(var(--border));
+    border-top: var(--stroke-hairline) solid hsl(var(--border));
     padding: var(--command-palette-hint-padding-y) var(--command-palette-hint-padding-x);
     color: hsl(var(--muted-foreground));
     font-family: var(--font-mono);
@@ -1055,13 +1058,13 @@
     align-items: center;
     justify-content: center;
     font-size: var(--font-size-base);
-    border: var(--control-border-width) solid hsl(var(--border));
+    border: var(--control-border-width, var(--stroke-hairline)) solid hsl(var(--border));
     border-inline-start-width: 0;
     background: hsl(var(--background));
     transition: box-shadow 0.15s ease;
   }
   .ui-otp-group .ui-otp-slot:first-child {
-    border-inline-start-width: var(--control-border-width);
+    border-inline-start-width: var(--control-border-width, var(--stroke-hairline));
     border-start-start-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     border-end-start-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
   }
@@ -1071,7 +1074,7 @@
   }
   .ui-otp-group[data-appearance="grouped"] {
     overflow: hidden;
-    border: var(--control-border-width) solid hsl(var(--border));
+    border: var(--control-border-width, var(--stroke-hairline)) solid hsl(var(--border));
     border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     background: hsl(var(--background));
   }
@@ -1118,7 +1121,7 @@
     justify-content: center;
   }
   .ui-otp-caret {
-    width: var(--otp-caret-inline-size);
+    width: var(--otp-caret-inline-size, var(--stroke-hairline));
     height: var(--otp-caret-block-size);
     background: hsl(var(--foreground));
     animation: ui-otp-blink 1s step-end infinite;
@@ -1194,7 +1197,7 @@
       var(--segmented-track-background, var(--muted)) /
         var(--segmented-track-background-alpha, 100%)
     );
-    color: hsl(var(--segmented-item-color));
+    color: hsl(var(--segmented-item-color, var(--muted-foreground)));
     font-size: var(--font-size-base);
   }
 
@@ -1225,7 +1228,7 @@
       var(--segmented-item-hover-background, var(--accent)) /
         var(--segmented-item-hover-background-alpha, 100%)
     );
-    color: hsl(var(--segmented-item-hover-color));
+    color: hsl(var(--segmented-item-hover-color, var(--foreground)));
   }
   .ui-segmented-item:not([data-state="checked"]):not([data-disabled]):active {
     background: hsl(
@@ -1243,7 +1246,7 @@
       var(--segmented-item-selected-shadow, var(--shadow-md)),
       inset 0 0 0 1px
         hsl(var(--segmented-item-selected-border-color, var(--input)) / var(--input-alpha, 100%));
-    color: hsl(var(--segmented-item-selected-color));
+    color: hsl(var(--segmented-item-selected-color, var(--foreground)));
 
     font-weight: var(--segmented-item-selected-font-weight);
   }
@@ -1294,7 +1297,7 @@
     min-height: var(--control-height);
     padding: var(--space-1) var(--control-padding-x);
 
-    border: var(--control-border-width) solid
+    border: var(--control-border-width, var(--stroke-hairline)) solid
       var(--control-surface-border-color, hsl(var(--input) / var(--input-alpha, 100%)));
     border-radius: var(--control-radius);
     background: var(
@@ -1363,7 +1366,10 @@
   .ui-tag-input-field {
     flex: 1;
     min-width: 6rem;
-    block-size: calc(var(--control-height) - var(--space-1) * 2 - var(--control-border-width) * 2);
+    block-size: calc(
+      var(--control-height) - var(--space-1) * 2 -
+        var(--control-border-width, var(--stroke-hairline)) * 2
+    );
     border: 0;
     outline: none;
     background: transparent;
@@ -1625,7 +1631,7 @@
 
   .ui-search-select-search {
     flex-shrink: 0;
-    border-block-end: 1px solid hsl(var(--border));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-search-select-search-input {
@@ -1741,7 +1747,7 @@
   .ui-search-select-footer {
     flex-shrink: 0;
     padding: var(--search-select-footer-space-inset);
-    border-block-start: 1px solid hsl(var(--border));
+    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
   }
 }
 
@@ -1754,7 +1760,7 @@
 
   .ui-cascader-column {
     min-inline-size: var(--cascader-column-min-width);
-    border-inline-end: 1px solid hsl(var(--border));
+    border-inline-end: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-cascader-column:last-child {
@@ -1868,7 +1874,7 @@
     );
     overflow: hidden;
     border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
 
     background: var(--select-content-background, hsl(var(--popover) / var(--popover-alpha, 100%)));
     color: hsl(var(--popover-foreground));
@@ -2018,7 +2024,7 @@
   .ui-time-picker-column-heading {
     padding-inline: var(--time-picker-heading-space-inline);
     padding-block: var(--time-picker-heading-space-block);
-    border-block-end: 1px solid hsl(var(--border));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
     text-align: center;
     font-size: var(--time-picker-heading-font-size);
     font-weight: var(--font-weight-medium);
@@ -2073,7 +2079,7 @@
     flex-direction: column;
     gap: var(--time-picker-footer-space-gap);
     padding: var(--time-picker-footer-space-inset);
-    border-block-start: 1px solid hsl(var(--border));
+    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-time-picker-footer-actions {
@@ -2362,13 +2368,16 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
-    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
-    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
+    border-inline-start: var(--stroke-hairline) solid
+      var(--calendar-grid-border-color, hsl(var(--border)));
+    border-block-start: var(--stroke-hairline) solid
+      var(--calendar-grid-border-color, hsl(var(--border)));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekdays {
-    border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
+    border-inline-end: var(--stroke-hairline) solid
+      var(--calendar-grid-border-color, hsl(var(--border)));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
@@ -2380,7 +2389,8 @@
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-grid {
-    border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
+    border-block-end: var(--stroke-hairline) solid
+      var(--calendar-grid-border-color, hsl(var(--border)));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day.invisible {
@@ -2401,8 +2411,10 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number,
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number-header {
-    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
-    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
+    border-inline-start: var(--stroke-hairline) solid
+      var(--calendar-grid-border-color, hsl(var(--border)));
+    border-block-start: var(--stroke-hairline) solid
+      var(--calendar-grid-border-color, hsl(var(--border)));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day {
@@ -2616,7 +2628,8 @@
     gap: var(--calendar-footer-space-gap);
     margin-block-start: var(--calendar-footer-space-block-start);
     padding-block-start: var(--calendar-footer-space-block-start);
-    border-block-start: var(--calendar-footer-border-width) solid hsl(var(--border));
+    border-block-start: var(--calendar-footer-border-width, var(--stroke-hairline)) solid
+      hsl(var(--border));
   }
 
   .ui-calendar-footer-today {
@@ -2639,7 +2652,7 @@
     flex: 1 1 0%;
     flex-direction: column;
     border-radius: var(--transfer-pane-radius, calc(var(--radius) / var(--radius-ratio)));
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     background: hsl(var(--background));
   }
 
@@ -2649,7 +2662,7 @@
     justify-content: space-between;
     padding-inline: var(--transfer-header-space-inline);
     padding-block: var(--transfer-header-space-block);
-    border-block-end: 1px solid hsl(var(--border));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
     font-size: var(--transfer-header-font-size);
   }
 
@@ -2663,7 +2676,7 @@
 
   .ui-transfer-search {
     padding: var(--transfer-search-space-inset);
-    border-block-end: 1px solid hsl(var(--border));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-transfer-search[data-disabled] {
@@ -2956,7 +2969,7 @@
   .ui-control-count {
     flex-shrink: 0;
     font-size: var(--control-count-font-size);
-    color: hsl(var(--control-count-color));
+    color: hsl(var(--control-count-color, var(--muted-foreground)));
     font-variant-numeric: tabular-nums;
     padding-inline-end: var(--control-count-space-inline);
   }
@@ -2985,9 +2998,10 @@
     block-size: var(--control-height);
     padding-inline: var(--input-addon-padding-inline);
     font-size: var(--control-font-size);
-    color: hsl(var(--input-addon-color));
+    color: hsl(var(--input-addon-color, var(--muted-foreground)));
     background-color: hsl(var(--input-addon-background));
-    border: var(--control-border-width) solid hsl(var(--input) / var(--input-alpha, 100%));
+    border: var(--control-border-width, var(--stroke-hairline)) solid
+      hsl(var(--input) / var(--input-alpha, 100%));
     white-space: nowrap;
   }
 
@@ -3122,7 +3136,7 @@
     justify-content: center;
     inline-size: 0;
     font-size: var(--slider-mark-font-size);
-    color: hsl(var(--slider-mark-color));
+    color: hsl(var(--slider-mark-color, var(--muted-foreground)));
     white-space: nowrap;
     cursor: pointer;
   }
@@ -3146,7 +3160,8 @@
     margin-inline-start: calc(var(--slider-dot-size) / -2);
     border-radius: var(--radius-pill);
     background: hsl(var(--slider-dot-background));
-    border: var(--control-border-width) solid hsl(var(--slider-dot-border-color));
+    border: var(--control-border-width, var(--stroke-hairline)) solid
+      hsl(var(--slider-dot-border-color));
   }
 
   .ui-slider[data-orientation="vertical"] .ui-slider-dot {
@@ -3256,15 +3271,16 @@
     block-size: var(--control-height);
     padding-inline: var(--control-padding-x);
     font-size: var(--control-font-size);
-    color: hsl(var(--choice-button-color));
+    color: hsl(var(--choice-button-color, var(--foreground)));
     background: hsl(var(--choice-button-background));
-    border: var(--control-border-width) solid hsl(var(--choice-button-border-color));
+    border: var(--control-border-width, var(--stroke-hairline)) solid
+      hsl(var(--choice-button-border-color));
     border-inline-start-width: 0;
     cursor: pointer;
   }
 
   .ui-radio-button:first-child {
-    border-inline-start-width: var(--control-border-width);
+    border-inline-start-width: var(--control-border-width, var(--stroke-hairline));
     border-start-start-radius: var(--control-radius);
     border-end-start-radius: var(--control-radius);
   }