@godxjp/ui 28.12.0 → 29.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);
@@ -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,20 @@
     background: hsl(var(--destructive-active));
   }
 
+  .ui-button--dashed {
+    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: 1px 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 +187,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 +199,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 +254,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 {
@@ -467,7 +492,7 @@
     height: var(--checkbox-size);
     flex-shrink: 0;
     border: var(--checkbox-border-width) solid hsl(var(--primary));
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
     background: transparent;
   }
 
@@ -555,7 +580,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 {
@@ -685,7 +710,7 @@
   .ui-color-picker-preview {
     width: 100%;
     height: 100%;
-    border: 1px solid hsl(var(--input));
+    border: 1px solid hsl(var(--input) / var(--input-alpha, 100%));
     border-radius: var(--control-radius);
     box-shadow: var(--shadow-sm);
   }
@@ -722,7 +747,7 @@
     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));
   }
 
@@ -847,7 +872,7 @@
     transform: translateX(-50%);
     gap: 0;
     padding: 0;
-    background: hsl(var(--popover));
+    background: hsl(var(--popover) / var(--popover-alpha, 100%));
   }
 
   .ui-command-palette-trigger {
@@ -1037,17 +1062,17 @@
   }
   .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-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-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     background: hsl(var(--background));
   }
   .ui-otp-group[data-appearance="grouped"] .ui-otp-slot {
@@ -1147,20 +1172,28 @@
     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)));
+    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));
     font-size: var(--font-size-base);
   }
@@ -1176,7 +1209,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,19 +1221,28 @@
   }
 
   .ui-segmented-item:not([data-state="checked"]):not([data-disabled]):hover {
-    background: hsl(var(--segmented-item-hover-background, var(--accent)));
+    background: hsl(
+      var(--segmented-item-hover-background, var(--accent)) /
+        var(--segmented-item-hover-background-alpha, 100%)
+    );
     color: hsl(var(--segmented-item-hover-color));
   }
   .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)));
+      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));
 
     font-weight: var(--segmented-item-selected-font-weight);
@@ -1252,9 +1294,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) 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 +1323,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));
   }
@@ -1374,8 +1423,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 +1562,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);
   }
 
@@ -1623,7 +1678,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));
@@ -1753,7 +1811,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 +1867,14 @@
       var(--trigger-width, var(--menu-content-min-width))
     );
     overflow: hidden;
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     border: 1px solid hsl(var(--border));
-    background: hsl(var(--popover));
+
+    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 +1905,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 +1919,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;
@@ -1968,7 +2039,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;
@@ -2042,7 +2113,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 +2248,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 +2284,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 +2323,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);
   }
 
@@ -2427,7 +2510,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 +2541,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 +2588,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 +2598,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 {
@@ -2555,7 +2638,7 @@
     min-block-size: var(--transfer-pane-min-height);
     flex: 1 1 0%;
     flex-direction: column;
-    border-radius: var(--transfer-pane-radius);
+    border-radius: var(--transfer-pane-radius, calc(var(--radius) / var(--radius-ratio)));
     border: 1px solid hsl(var(--border));
     background: hsl(var(--background));
   }
@@ -2604,7 +2687,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 +2731,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 +2907,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 {
@@ -2890,7 +2987,7 @@
     font-size: var(--control-font-size);
     color: hsl(var(--input-addon-color));
     background-color: hsl(var(--input-addon-background));
-    border: var(--control-border-width) solid hsl(var(--input));
+    border: var(--control-border-width) solid hsl(var(--input) / var(--input-alpha, 100%));
     white-space: nowrap;
   }
 
@@ -2945,7 +3042,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 +3058,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 {
@@ -3105,7 +3205,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);
@@ -3172,8 +3275,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"] {