@godxjp/ui 28.13.0 → 30.0.0

package/dist/styles/control.css

@@ -6,7 +6,7 @@
     align-items: center;
     justify-content: center;
     gap: var(--space-inline-xs);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     color: hsl(var(--foreground));
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
@@ -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)));
   }
@@ -60,7 +60,10 @@
   }
 
   .ui-toggle-soft:hover {
-    background: var(--toggle-soft-hover-background, hsl(var(--secondary-hover)));
+    background: var(
+      --toggle-soft-hover-background,
+      hsl(var(--secondary-hover) / var(--secondary-hover-alpha, 100%))
+    );
     color: var(--toggle-soft-color, hsl(var(--secondary-foreground)));
   }
 
@@ -124,8 +127,13 @@
     flex-shrink: 0;
   }
 
+  .ui-button {
+    backdrop-filter: blur(var(--button-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
+  }
+
   .ui-button--default {
-    background: hsl(var(--primary));
+    background: var(--button-default-background, hsl(var(--primary)));
     color: hsl(var(--primary-foreground));
 
     box-shadow: var(--shadow-sm), var(--shadow-glow);
@@ -136,7 +144,7 @@
   }
 
   .ui-button--destructive {
-    background: hsl(var(--destructive));
+    background: var(--button-destructive-background, hsl(var(--destructive)));
     color: hsl(var(--destructive-foreground));
     box-shadow: var(--shadow-sm);
   }
@@ -149,9 +157,23 @@
     background: hsl(var(--destructive-active));
   }
 
+  .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%))
+    );
+  }
+
   .ui-button--outline {
-    border: 1px solid hsl(var(--input));
-    background: hsl(var(--background));
+    border: var(--stroke-hairline) solid
+      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%))
+    );
     color: hsl(var(--foreground));
 
     box-shadow: var(--shadow-sm);
@@ -168,7 +190,10 @@
   }
 
   .ui-button--secondary {
-    background: hsl(var(--secondary));
+    background: var(
+      --button-secondary-background,
+      hsl(var(--secondary) / var(--button-secondary-background-alpha, 100%))
+    );
     color: hsl(var(--secondary-foreground));
   }
 
@@ -177,7 +202,7 @@
   }
 
   .ui-button--link {
-    color: hsl(var(--primary));
+    color: var(--button-link-foreground, hsl(var(--text-link, var(--primary))));
     text-underline-offset: 4px;
   }
 
@@ -232,7 +257,10 @@
     [data-slot="badge"] {
     --badge-space-y: 0;
     --badge-line-height: var(--line-height-tight);
-    --badge-radius: var(--radius-sm);
+    --badge-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
   }
 
   .ui-button--lg {
@@ -277,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);
   }
@@ -287,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);
   }
@@ -330,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),
@@ -466,8 +494,8 @@
     width: var(--checkbox-size);
     height: var(--checkbox-size);
     flex-shrink: 0;
-    border: var(--checkbox-border-width) solid hsl(var(--primary));
-    color: hsl(var(--primary));
+    border: var(--checkbox-border-width, var(--stroke-hairline)) solid hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
     background: transparent;
   }
 
@@ -536,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;
@@ -555,7 +583,7 @@
   }
 
   .ui-switch[data-state="unchecked"] {
-    background: var(--switch-unchecked-background, hsl(var(--input)));
+    background: var(--switch-unchecked-background, hsl(var(--input) / var(--input-alpha, 100%)));
   }
 
   .ui-switch-thumb {
@@ -652,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);
@@ -685,7 +713,7 @@
   .ui-color-picker-preview {
     width: 100%;
     height: 100%;
-    border: 1px solid hsl(var(--input));
+    border: var(--stroke-hairline) solid hsl(var(--input) / var(--input-alpha, 100%));
     border-radius: var(--control-radius);
     box-shadow: var(--shadow-sm);
   }
@@ -722,14 +750,14 @@
     overflow: clip;
     overflow-clip-margin: var(--focus-ring-clip-margin);
     border-radius: var(--control-radius);
-    background: hsl(var(--popover));
+    background: hsl(var(--popover) / var(--popover-alpha, 100%));
     color: hsl(var(--popover-foreground));
   }
 
   .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);
   }
 
@@ -828,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)));
   }
 
@@ -847,7 +875,7 @@
     transform: translateX(-50%);
     gap: 0;
     padding: 0;
-    background: hsl(var(--popover));
+    background: hsl(var(--popover) / var(--popover-alpha, 100%));
   }
 
   .ui-command-palette-trigger {
@@ -876,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);
@@ -1030,24 +1058,24 @@
     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-start-start-radius: var(--radius-md);
-    border-end-start-radius: var(--radius-md);
+    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)));
   }
   .ui-otp-group .ui-otp-slot:last-child {
-    border-start-end-radius: var(--radius-md);
-    border-end-end-radius: var(--radius-md);
+    border-start-end-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+    border-end-end-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
   }
   .ui-otp-group[data-appearance="grouped"] {
     overflow: hidden;
-    border: var(--control-border-width) solid hsl(var(--border));
-    border-radius: var(--radius-md);
+    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));
   }
   .ui-otp-group[data-appearance="grouped"] .ui-otp-slot {
@@ -1093,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;
@@ -1147,21 +1175,29 @@
     fill: currentColor;
   }
   .ui-rating-star:focus-visible {
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
   }
 
   .ui-segmented {
 
     --segmented-item-height: calc(var(--control-height) - var(--segmented-track-padding) * 2);
     display: inline-flex;
+
+    inline-size: fit-content;
     max-width: 100%;
 
     flex-wrap: wrap;
     align-items: stretch;
     padding: var(--segmented-track-padding);
-    border-radius: var(--segmented-track-radius);
-    background: hsl(var(--segmented-track-background, var(--muted)));
-    color: hsl(var(--segmented-item-color));
+    border-radius: var(--segmented-track-radius, var(--radius));
+    background: hsl(
+      var(--segmented-track-background, var(--muted)) /
+        var(--segmented-track-background-alpha, 100%)
+    );
+    color: hsl(var(--segmented-item-color, var(--muted-foreground)));
     font-size: var(--font-size-base);
   }
 
@@ -1176,7 +1212,7 @@
     gap: var(--segmented-item-gap);
     padding-inline: var(--segmented-item-padding-inline);
     border: 0;
-    border-radius: var(--segmented-item-radius);
+    border-radius: var(--segmented-item-radius, calc(var(--radius) / var(--radius-ratio)));
     background: transparent;
     color: inherit;
     cursor: pointer;
@@ -1188,20 +1224,29 @@
   }
 
   .ui-segmented-item:not([data-state="checked"]):not([data-disabled]):hover {
-    background: hsl(var(--segmented-item-hover-background, var(--accent)));
-    color: hsl(var(--segmented-item-hover-color));
+    background: hsl(
+      var(--segmented-item-hover-background, var(--accent)) /
+        var(--segmented-item-hover-background-alpha, 100%)
+    );
+    color: hsl(var(--segmented-item-hover-color, var(--foreground)));
   }
   .ui-segmented-item:not([data-state="checked"]):not([data-disabled]):active {
-    background: hsl(var(--segmented-item-active-background));
+    background: hsl(
+      var(--segmented-item-active-background) / var(--segmented-item-active-background-alpha, 100%)
+    );
   }
 
   .ui-segmented-item[data-state="checked"] {
-    background: hsl(var(--segmented-item-selected-background, var(--background)));
+    background: hsl(
+      var(--segmented-item-selected-background, var(--background)) /
+        var(--segmented-item-selected-background-alpha, 100%)
+    );
 
     box-shadow:
-      var(--segmented-item-selected-shadow),
-      inset 0 0 0 1px hsl(var(--segmented-item-selected-border-color, var(--input)));
-    color: hsl(var(--segmented-item-selected-color));
+      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, var(--foreground)));
 
     font-weight: var(--segmented-item-selected-font-weight);
   }
@@ -1252,9 +1297,13 @@
     min-height: var(--control-height);
     padding: var(--space-1) var(--control-padding-x);
 
-    border: var(--control-border-width) solid var(--control-surface-border-color, hsl(var(--input)));
+    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(--control-surface-background, hsl(var(--background)));
+    background: var(
+      --control-surface-background,
+      hsl(var(--background) / var(--control-surface-background-alpha, 100%))
+    );
     box-shadow: var(--control-shadow);
   }
   .ui-tag-input-disabled {
@@ -1277,7 +1326,10 @@
     gap: var(--space-1);
     font-size: var(--tag-input-chip-font-size);
     padding: 0.0625rem var(--space-2);
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     background: hsl(var(--secondary));
     color: hsl(var(--secondary-foreground));
   }
@@ -1314,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;
@@ -1374,8 +1429,11 @@
   }
 
   .ui-control-surface {
-    border-color: var(--control-surface-border-color, hsl(var(--input)));
-    background: var(--control-surface-background, hsl(var(--background)));
+    border-color: var(--control-surface-border-color, hsl(var(--input) / var(--input-alpha, 100%)));
+    background: var(
+      --control-surface-background,
+      hsl(var(--background) / var(--control-surface-background-alpha, 100%))
+    );
   }
 
   .ui-control-surface[data-variant="filled"] {
@@ -1510,7 +1568,10 @@
     block-size: var(--control-affix-action-size);
     align-items: center;
     justify-content: center;
-    border-radius: var(--control-affix-action-radius);
+    border-radius: var(
+      --control-affix-action-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     opacity: var(--control-affix-rest-alpha);
   }
 
@@ -1570,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 {
@@ -1623,7 +1684,10 @@
     max-inline-size: 100%;
     align-items: center;
     overflow: hidden;
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     background: hsl(var(--secondary));
     padding: 0.0625rem var(--space-2);
     color: hsl(var(--secondary-foreground));
@@ -1683,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));
   }
 }
 
@@ -1696,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 {
@@ -1753,7 +1817,10 @@
     display: flex;
     inline-size: 100%;
     align-items: center;
-    border-radius: var(--cascader-result-radius);
+    border-radius: var(
+      --cascader-result-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     padding-inline: var(--cascader-result-space-inline);
     padding-block: var(--cascader-result-space-block);
     font-size: var(--cascader-option-font-size);
@@ -1806,10 +1873,14 @@
       var(--trigger-width, var(--menu-content-min-width))
     );
     overflow: hidden;
-    border-radius: var(--radius-md);
-    border: 1px solid hsl(var(--border));
-    background: hsl(var(--popover));
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+    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));
+
+    backdrop-filter: blur(var(--select-content-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
     box-shadow: var(--shadow-md);
   }
 
@@ -1840,7 +1911,10 @@
 
   .ui-select-item,
   .ui-select-label {
-    border-radius: var(--menu-item-radius);
+    border-radius: var(
+      --menu-item-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     padding-inline: var(--menu-item-space-inline);
     height: var(--menu-item-height);
     display: flex;
@@ -1851,7 +1925,10 @@
 
   .ui-select-item,
   .ui-select-label {
-    border-radius: var(--menu-item-radius);
+    border-radius: var(
+      --menu-item-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     padding-inline: var(--menu-item-space-inline);
     height: var(--menu-item-height);
     display: flex;
@@ -1947,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);
@@ -1968,7 +2045,7 @@
     inline-size: 100%;
     align-items: center;
     justify-content: center;
-    border-radius: var(--time-picker-option-radius);
+    border-radius: var(--time-picker-option-radius, calc(var(--radius) / var(--radius-ratio)));
     padding-block: var(--time-picker-option-space-block);
     font-size: var(--time-picker-option-font-size);
     font-variant-numeric: tabular-nums;
@@ -2002,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 {
@@ -2042,7 +2119,10 @@
     block-size: var(--control-inline-affix-size);
     align-items: center;
     justify-content: center;
-    border-radius: var(--control-affix-action-radius);
+    border-radius: var(
+      --control-affix-action-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     color: hsl(var(--muted-foreground));
     opacity: var(--control-inline-affix-rest-alpha);
     transition: opacity 150ms ease;
@@ -2174,7 +2254,10 @@
   .ui-tree-select-row {
     display: flex;
     align-items: center;
-    border-radius: var(--tree-select-row-radius);
+    border-radius: var(
+      --tree-select-row-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     padding-block: var(--tree-select-row-space-block);
     padding-inline-end: var(--tree-select-row-space-inline-end);
     padding-inline-start: calc(
@@ -2207,7 +2290,10 @@
     align-items: center;
     justify-content: center;
     margin-inline-end: var(--tree-select-toggle-space-inline-end);
-    border-radius: var(--tree-select-row-radius);
+    border-radius: var(
+      --tree-select-row-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
   }
 
   .ui-tree-select-toggle[data-leaf] {
@@ -2243,7 +2329,10 @@
     block-size: var(--control-affix-action-size);
     align-items: center;
     justify-content: center;
-    border-radius: var(--control-affix-action-radius);
+    border-radius: var(
+      --control-affix-action-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     opacity: var(--control-affix-rest-alpha);
   }
 
@@ -2279,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 {
@@ -2297,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 {
@@ -2318,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 {
@@ -2427,7 +2522,7 @@
 
   .ui-calendar-weekday {
     inline-size: var(--control-height);
-    border-radius: var(--calendar-weekday-radius);
+    border-radius: var(--calendar-weekday-radius, calc(var(--radius) / var(--radius-ratio)));
     font-size: var(--calendar-weekday-font-size);
     font-weight: var(--font-weight-normal);
     color: hsl(var(--muted-foreground));
@@ -2458,7 +2553,7 @@
     block-size: var(--control-height);
     padding: 0;
     font-weight: var(--font-weight-normal);
-    border-radius: var(--calendar-day-radius);
+    border-radius: var(--calendar-day-radius, calc(var(--radius) / var(--radius-ratio)));
   }
 
   .ui-calendar .ui-calendar-day-button[aria-selected] {
@@ -2505,7 +2600,7 @@
     box-shadow: inset 0 0 0 1px hsl(var(--primary));
     color: hsl(var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels)));
     font-weight: var(--font-weight-medium);
-    border-radius: var(--calendar-day-radius);
+    border-radius: var(--calendar-day-radius, calc(var(--radius) / var(--radius-ratio)));
   }
 
   .ui-calendar .ui-calendar-day.day-outside:not(:has(button)) {
@@ -2515,7 +2610,7 @@
   .ui-calendar .ui-calendar-day.day-selected:not(:has(button)) {
     background-color: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
-    border-radius: var(--calendar-day-radius);
+    border-radius: var(--calendar-day-radius, calc(var(--radius) / var(--radius-ratio)));
   }
 
   .ui-calendar-day-disabled {
@@ -2533,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 {
@@ -2555,8 +2651,8 @@
     min-block-size: var(--transfer-pane-min-height);
     flex: 1 1 0%;
     flex-direction: column;
-    border-radius: var(--transfer-pane-radius);
-    border: 1px solid hsl(var(--border));
+    border-radius: var(--transfer-pane-radius, calc(var(--radius) / var(--radius-ratio)));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     background: hsl(var(--background));
   }
 
@@ -2566,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);
   }
 
@@ -2580,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] {
@@ -2604,7 +2700,10 @@
     cursor: pointer;
     align-items: flex-start;
     gap: var(--transfer-row-space-gap);
-    border-radius: var(--transfer-row-radius);
+    border-radius: var(
+      --transfer-row-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     padding-inline: var(--transfer-row-space-inline);
     padding-block: var(--transfer-row-space-block);
     font-size: var(--transfer-row-font-size);
@@ -2645,7 +2744,7 @@
     align-items: center;
     gap: var(--control-composite-field-space-gap);
     border-radius: var(--control-radius);
-    border-color: hsl(var(--input));
+    border-color: hsl(var(--input) / var(--input-alpha, 100%));
     background: hsl(var(--background));
     outline: none;
     transition:
@@ -2821,13 +2920,24 @@
 
 @layer components {
 
+  .ui-control-outlined-surface {
+    border-color: var(--control-surface-border-color, hsl(var(--input) / var(--input-alpha, 100%)));
+    background-color: var(
+      --control-surface-background,
+      hsl(var(--background) / var(--control-surface-background-alpha, 100%))
+    );
+  }
+
   .ui-control--filled {
     border-color: transparent;
     background-color: hsl(var(--control-variant-filled-background));
   }
 
   .ui-control--filled:hover:not(:disabled):not([readonly]):not([data-disabled]) {
-    background-color: hsl(var(--control-variant-filled-hover-background, var(--accent)));
+    background-color: hsl(
+      var(--control-variant-filled-hover-background, var(--accent)) /
+        var(--control-variant-filled-hover-background-alpha, 100%)
+    );
   }
 
   .ui-control--borderless {
@@ -2859,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);
   }
@@ -2888,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));
+    border: var(--control-border-width, var(--stroke-hairline)) solid
+      hsl(var(--input) / var(--input-alpha, 100%));
     white-space: nowrap;
   }
 
@@ -2945,7 +3056,7 @@
   .ui-switch-spinner {
     inline-size: var(--switch-spinner-size);
     block-size: var(--switch-spinner-size);
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
     animation: spin 1s linear infinite;
   }
 
@@ -2961,7 +3072,10 @@
   }
 
   .ui-switch:has(.ui-switch-content)[data-state="unchecked"] {
-    background: var(--switch-unchecked-background, hsl(var(--muted-foreground)));
+    background: var(
+      --switch-unchecked-background,
+      hsl(var(--muted-foreground) / var(--switch-unchecked-background-alpha, 100%))
+    );
   }
 
   .ui-switch[data-state="unchecked"] .ui-switch-content {
@@ -3022,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;
   }
@@ -3046,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 {
@@ -3105,7 +3220,10 @@
 
   .ui-slider-tooltip-content {
     padding-inline: var(--slider-tooltip-padding-inline);
-    border-radius: var(--slider-tooltip-radius);
+    border-radius: var(
+      --slider-tooltip-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     background: hsl(var(--slider-tooltip-background));
     color: hsl(var(--slider-tooltip-color));
     font-size: var(--slider-tooltip-font-size);
@@ -3153,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);
   }
@@ -3172,8 +3291,11 @@
   }
 
   .ui-radio-button[data-state="checked"] {
-    color: hsl(var(--choice-button-selected-color, var(--primary)));
-    border-color: hsl(var(--choice-button-selected-border-color, var(--primary)));
+    color: hsl(var(--choice-button-selected-color, var(--text-brand, var(--primary))));
+    border-color: hsl(
+      var(--choice-button-selected-border-color, var(--primary)) /
+        var(--choice-button-selected-border-color-alpha, 100%)
+    );
   }
 
   .ui-radio-button-bar[data-button-style="solid"] .ui-radio-button[data-state="checked"] {