@godxjp/ui 28.13.0 → 30.0.0

package/dist/styles/data-entry-layout.css

@@ -50,7 +50,7 @@
     padding-block: var(--space-3);
     padding-inline: var(--space-4);
     border: var(--stroke-hairline) solid transparent;
-    border-radius: var(--attachments-card-radius);
+    border-radius: var(--attachments-card-radius, var(--radius));
     background-color: hsl(var(--muted));
     overflow: hidden;
   }
@@ -66,7 +66,7 @@
   }
 
   .ui-attachments-card-preview {
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     object-fit: cover;
   }
 
@@ -146,7 +146,7 @@
     inline-size: var(--attachments-card-block-size);
     block-size: var(--attachments-card-block-size);
     border: var(--stroke-hairline) dashed hsl(var(--border));
-    border-radius: var(--attachments-card-radius);
+    border-radius: var(--attachments-card-radius, var(--radius));
     background-color: transparent;
     color: hsl(var(--muted-foreground));
     cursor: pointer;
@@ -157,7 +157,7 @@
 
   .ui-attachments-upload-btn:hover:not(:disabled) {
     border-color: hsl(var(--primary));
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
   }
 
   .ui-attachments-upload-btn:disabled {
@@ -178,7 +178,7 @@
     gap: var(--attachments-placeholder-gap);
     padding: var(--attachments-placeholder-space-inset);
     border: var(--stroke-md) dashed hsl(var(--border));
-    border-radius: var(--attachments-placeholder-radius);
+    border-radius: var(--attachments-placeholder-radius, var(--radius));
     background-color: hsl(var(--muted) / 0.4);
     text-align: center;
     cursor: pointer;
@@ -228,7 +228,7 @@
     inset: 0;
     z-index: 1;
     border: var(--stroke-md) dashed hsl(var(--primary));
-    border-radius: var(--attachments-placeholder-radius);
+    border-radius: var(--attachments-placeholder-radius, var(--radius));
     background: var(
       --attachments-drop-overlay-background,
       color-mix(in srgb, hsl(var(--background)) 85%, transparent)
@@ -247,76 +247,6 @@
     position: fixed;
   }
 
-  .ui-combobox-content {
-    min-width: 14rem;
-    width: min(22rem, 90vw);
-    padding: 0;
-    border: 1px solid hsl(var(--border));
-    background: hsl(var(--popover));
-    color: hsl(var(--popover-foreground));
-  }
-
-  .ui-combobox-command {
-    width: 100%;
-    display: flex;
-    min-height: 0;
-    flex-direction: column;
-  }
-
-  .ui-combobox-search {
-    border: none;
-    border-radius: 0;
-    width: 100%;
-  }
-
-  .ui-combobox-list {
-    min-height: 0;
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--space-1);
-  }
-
-  .ui-combobox-item {
-    position: relative;
-    width: 100%;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    border-radius: var(--radius-sm);
-    padding-inline: var(--space-2);
-    padding-block: var(--space-2);
-    font-size: var(--font-size-base);
-    outline: none;
-  }
-
-  .ui-combobox-item[data-selected="true"] {
-    background: hsl(var(--accent));
-    color: hsl(var(--accent-foreground));
-  }
-
-  .ui-combobox-item:hover,
-  .ui-combobox-item[data-state="active"] {
-    background: hsl(var(--accent));
-    color: hsl(var(--accent-foreground));
-  }
-
-  .ui-combobox-empty {
-    display: block;
-    padding: var(--space-3);
-    text-align: center;
-    color: hsl(var(--muted-foreground));
-  }
-
-  .ui-combobox-caret {
-    width: 0.9rem;
-    height: 0.9rem;
-    border-bottom: 1px solid currentColor;
-    border-inline-end: 1px solid currentColor;
-    transform: rotate(45deg);
-    margin-inline-start: auto;
-    opacity: 0.7;
-  }
-
   .ui-password-strength {
     display: grid;
     gap: var(--space-1);
@@ -330,7 +260,10 @@
 
   .ui-password-strength-segment {
     height: 0.5rem;
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     background: hsl(var(--muted));
   }
 
@@ -394,8 +327,8 @@
   .ui-upload-dropzone {
     cursor: pointer;
     padding: var(--upload-dropzone-space-inset);
-    border-radius: var(--upload-dropzone-radius);
-    border: var(--upload-dropzone-border-width) dashed hsl(var(--border));
+    border-radius: var(--upload-dropzone-radius, var(--radius));
+    border: var(--upload-dropzone-border-width, var(--stroke-md)) dashed hsl(var(--border));
     text-align: center;
     transition: border-color 150ms ease;
   }
@@ -464,8 +397,8 @@
     inline-size: var(--upload-tile-size);
     block-size: var(--upload-tile-size);
     overflow: hidden;
-    border-radius: var(--upload-tile-radius);
-    border: 1px solid hsl(var(--border));
+    border-radius: var(--upload-tile-radius, calc(var(--radius) / var(--radius-ratio)));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     background-color: hsl(var(--muted));
   }
 
@@ -476,8 +409,8 @@
     justify-content: center;
     inline-size: var(--upload-tile-size);
     block-size: var(--upload-tile-size);
-    border-radius: var(--upload-tile-radius);
-    border: 1px dashed hsl(var(--border));
+    border-radius: var(--upload-tile-radius, calc(var(--radius) / var(--radius-ratio)));
+    border: var(--stroke-hairline) dashed hsl(var(--border));
     color: hsl(var(--muted-foreground));
     transition:
       border-color 150ms ease,
@@ -486,7 +419,7 @@
 
   .ui-upload-tile-add:hover {
     border-color: hsl(var(--primary));
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
   }
 
   .ui-upload-tile-add-icon {
@@ -549,8 +482,8 @@
   .ui-upload-picture-frame {
     position: relative;
     overflow: hidden;
-    border-radius: var(--upload-picture-radius);
-    border: 1px solid hsl(var(--border));
+    border-radius: var(--upload-picture-radius, calc(var(--radius) / var(--radius-ratio)));
+    border: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-upload-picture-img {
@@ -569,7 +502,7 @@
     inset-inline-start: var(--upload-picture-badge-offset);
     padding-inline: var(--upload-picture-badge-space-inline);
     padding-block: var(--upload-picture-badge-space-block);
-    border-radius: var(--upload-picture-badge-radius);
+    border-radius: var(--upload-picture-badge-radius, calc(var(--radius) / var(--radius-ratio)));
     background-color: hsl(var(--warning));
     color: hsl(var(--warning-foreground));
     font-size: var(--upload-picture-badge-font-size);
@@ -582,8 +515,8 @@
     justify-content: center;
     inline-size: 100%;
     block-size: var(--upload-picture-empty-height);
-    border-radius: var(--upload-picture-radius);
-    border: 1px dashed hsl(var(--border));
+    border-radius: var(--upload-picture-radius, calc(var(--radius) / var(--radius-ratio)));
+    border: var(--stroke-hairline) dashed hsl(var(--border));
     color: hsl(var(--muted-foreground));
   }
 
@@ -607,7 +540,7 @@
     block-size: var(--upload-avatar-size);
     overflow: hidden;
     border-radius: var(--radius-pill);
-    border: var(--upload-avatar-border-width) solid hsl(var(--border));
+    border: var(--upload-avatar-border-width, var(--stroke-md)) solid hsl(var(--border));
     background-color: hsl(var(--muted));
   }
 
@@ -651,7 +584,7 @@
     inset-inline-end: calc(var(--upload-remove-offset) * -1);
     padding: var(--upload-remove-space-inset);
     border-radius: var(--radius-pill);
-    border: 1px solid hsl(var(--border));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     background-color: hsl(var(--background));
     box-shadow: var(--shadow-sm);
   }
@@ -668,9 +601,12 @@
     gap: var(--upload-draft-space-gap);
     padding-inline: var(--upload-draft-space-inline);
     padding-block: var(--upload-draft-space-block);
-    border-radius: var(--upload-draft-radius);
-    border: 1px dashed hsl(var(--destructive) / 0.4);
-    background-color: hsl(var(--destructive) / 0.05);
+    border-radius: var(--upload-draft-radius, calc(var(--radius) / var(--radius-ratio)));
+    border: var(--stroke-hairline) dashed hsl(var(--destructive) / 0.4);
+    background-color: var(
+      --surface-destructive,
+      hsl(var(--destructive) / var(--surface-destructive-alpha, 0.05))
+    );
     font-size: var(--upload-draft-font-size);
   }
 
@@ -696,8 +632,8 @@
     gap: var(--upload-row-space-gap);
     padding-inline: var(--upload-row-space-inline);
     padding-block: var(--upload-row-space-block);
-    border-radius: var(--upload-row-radius);
-    border: 1px solid hsl(var(--border));
+    border-radius: var(--upload-row-radius, calc(var(--radius) / var(--radius-ratio)));
+    border: var(--stroke-hairline) solid hsl(var(--border));
     font-size: var(--upload-row-font-size);
   }
 
@@ -756,7 +692,7 @@
     flex-direction: column;
     gap: var(--branch-scope-picker-subset-gap);
     padding-inline-start: var(--branch-scope-picker-subset-padding-inline);
-    border-inline-start-width: var(--branch-scope-picker-subset-border-width);
+    border-inline-start-width: var(--branch-scope-picker-subset-border-width, var(--stroke-md));
   }
 
   .ui-branch-scope-picker-list {
@@ -771,7 +707,7 @@
     inline-size: 100%;
     padding-block: var(--chat-composer-padding-block);
     padding-inline: var(--chat-composer-padding-inline);
-    border-width: var(--control-border-width);
+    border-width: var(--control-border-width, var(--stroke-hairline));
     border-style: solid;
     border-radius: var(--chat-composer-radius, var(--control-radius));
   }
@@ -785,7 +721,7 @@
     padding-block-end: var(--chat-composer-gap);
     border-block-end: var(
       --chat-composer-header-border,
-      var(--control-border-width) solid hsl(var(--border))
+      var(--control-border-width, var(--stroke-hairline)) solid hsl(var(--border))
     );
   }
 

package/dist/styles/dialog-layout.css

@@ -8,11 +8,11 @@
   }
 
   [data-slot="sheet-content"]:has([data-slot="sheet-body"]) [data-slot="sheet-header"] {
-    border-bottom: 1px solid hsl(var(--border));
+    border-bottom: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   [data-slot="sheet-content"]:has([data-slot="sheet-body"]) [data-slot="sheet-footer"] {
-    border-top: 1px solid hsl(var(--border));
+    border-top: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-dialog-overlay {
@@ -20,6 +20,9 @@
       --dialog-overlay-background,
       color-mix(in srgb, var(--overlay-background) var(--dialog-overlay-alpha), transparent)
     );
+
+    backdrop-filter: blur(var(--dialog-overlay-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
   }
 
   [data-slot="sheet-overlay"] {
@@ -27,6 +30,9 @@
       --sheet-overlay-background,
       color-mix(in srgb, var(--overlay-background) var(--sheet-overlay-alpha), transparent)
     );
+
+    backdrop-filter: blur(var(--sheet-overlay-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
   }
 
   .ui-dialog-overlay {
@@ -45,8 +51,11 @@
     max-width: none;
     transform: translate(-50%, -50%);
     gap: var(--dialog-space-gap);
-    border: 1px solid hsl(var(--border));
-    background-color: hsl(var(--background));
+    border: var(--stroke-hairline) solid hsl(var(--border));
+
+    background-color: var(--dialog-surface-background, hsl(var(--background)));
+
+    color: hsl(var(--foreground));
     padding: var(--dialog-space-inset);
 
     overflow: hidden;
@@ -55,7 +64,7 @@
 
   @media (min-width: 640px) {
     [data-slot="dialog-content"] {
-      border-radius: var(--radius-lg);
+      border-radius: var(--radius-lg, var(--radius));
     }
   }
 
@@ -128,25 +137,28 @@
     margin-inline: calc(-1 * var(--dialog-space-x));
     margin-block-start: calc(-1 * var(--dialog-space-y));
     padding: var(--dialog-space-y) var(--dialog-space-x);
-    border-bottom: 1px solid hsl(var(--border));
+    border-bottom: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   [data-slot="dialog-content"]:has([data-slot="dialog-body"]) [data-slot="dialog-footer"] {
     margin-inline: calc(-1 * var(--dialog-space-x));
     margin-block-end: calc(-1 * var(--dialog-space-y));
     padding: var(--dialog-space-y) var(--dialog-space-x);
-    border-top: 1px solid hsl(var(--border));
+    border-top: var(--stroke-hairline) solid hsl(var(--border));
   }
 
-  [data-slot="dialog-close"] {
+  .ui-dialog-close {
     position: absolute;
+    inset-block-start: var(--dialog-close-space-offset);
     inset-inline-end: var(--dialog-close-space-offset);
-    top: var(--dialog-close-space-offset);
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     opacity: var(--dialog-close-rest-alpha);
   }
 
-  :is([data-slot="dialog-close"], [data-slot="sheet-close"])::after {
+  :is(.ui-dialog-close, .ui-sheet-close)::after {
     content: "";
     position: absolute;
     inset-block-start: 50%;
@@ -158,7 +170,7 @@
     block-size: 100%;
   }
 
-  [data-slot="dialog-close"]:hover {
+  .ui-dialog-close:hover {
     opacity: 1;
   }
 
@@ -209,8 +221,8 @@
   }
 
   .ui-two-factor-setup-notice {
-    border: 1px dashed hsl(var(--border));
-    border-radius: var(--radius-md);
+    border: var(--stroke-hairline) dashed hsl(var(--border));
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     padding: var(--space-2) var(--space-3);
   }
 
@@ -219,8 +231,8 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--space-2);
     padding: var(--space-3);
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-md);
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     background: hsl(var(--muted) / 0.4);
   }
 
@@ -281,12 +293,16 @@
     max-width: var(--tooltip-max-width);
     padding-inline: var(--tooltip-space-inline);
     padding-block: var(--tooltip-space-block);
-    border-radius: var(--tooltip-radius);
-    border: 1px solid var(--tooltip-border-color, hsl(var(--border)));
-    background-color: var(--tooltip-background, hsl(var(--popover)));
+    border-radius: var(--tooltip-radius, var(--radius));
+    border: var(--stroke-hairline) solid
+      var(--tooltip-border-color, hsl(var(--border) / var(--tooltip-border-color-alpha, 100%)));
+    background-color: var(--tooltip-background, hsl(var(--popover) / var(--popover-alpha, 100%)));
     color: var(--tooltip-foreground, hsl(var(--popover-foreground)));
     font-size: var(--tooltip-font-size);
-    box-shadow: var(--tooltip-shadow);
+    backdrop-filter: blur(var(--tooltip-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
+
+    box-shadow: var(--tooltip-shadow, var(--shadow-md));
     outline: none;
   }
 
@@ -295,11 +311,20 @@
 
     width: var(--popover-surface-inline-size, var(--popover-width));
     padding: var(--popover-space-inset);
-    border-radius: var(--popover-radius);
-    border: 1px solid var(--popover-surface-border-color, hsl(var(--border)));
-    background-color: var(--popover-surface-background, hsl(var(--popover)));
+    border-radius: var(--popover-radius, var(--radius));
+    border: var(--stroke-hairline) solid
+      var(
+        --popover-surface-border-color,
+        hsl(var(--border) / var(--popover-surface-border-color-alpha, 100%))
+      );
+    background-color: var(
+      --popover-surface-background,
+      hsl(var(--popover) / var(--popover-alpha, 100%))
+    );
     color: var(--popover-surface-foreground, hsl(var(--popover-foreground)));
-    box-shadow: var(--popover-shadow);
+    backdrop-filter: blur(var(--popover-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
+    box-shadow: var(--popover-shadow, var(--shadow-md));
     outline: none;
   }
 
@@ -369,7 +394,10 @@
     position: absolute;
     inset-block-start: var(--sheet-close-offset);
     inset-inline-end: var(--sheet-close-offset);
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     opacity: var(--sheet-close-rest-alpha);
     transition: opacity 150ms ease;
   }
@@ -393,17 +421,19 @@
   }
 
   .ui-sheet-panel {
-    box-shadow: var(--sheet-shadow);
+
+    background-color: var(--sheet-surface-background, hsl(var(--background)));
+    box-shadow: var(--sheet-shadow, var(--shadow-lg));
   }
 
   .ui-sheet-panel[data-side="top"] {
     inset-block-start: 0;
-    border-block-end: 1px solid hsl(var(--border));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-sheet-panel[data-side="bottom"] {
     inset-block-end: 0;
-    border-block-start: 1px solid hsl(var(--border));
+    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-sheet-body-space {

package/dist/styles/float-button-layout.css

@@ -85,7 +85,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--float-button-group-gap);
-    border-radius: var(--float-button-group-radius);
+    border-radius: var(--float-button-group-radius, var(--radius));
   }
 
   .ui-float-button-group:not([data-individual]) .ui-float-button-list {
@@ -99,13 +99,13 @@
   }
 
   .ui-float-button-group:not([data-individual]) .ui-float-button-list > :first-child {
-    border-start-start-radius: var(--float-button-group-radius);
-    border-start-end-radius: var(--float-button-group-radius);
+    border-start-start-radius: var(--float-button-group-radius, var(--radius));
+    border-start-end-radius: var(--float-button-group-radius, var(--radius));
   }
 
   .ui-float-button-group:not([data-individual]) .ui-float-button-list > :last-child {
-    border-end-start-radius: var(--float-button-group-radius);
-    border-end-end-radius: var(--float-button-group-radius);
+    border-end-start-radius: var(--float-button-group-radius, var(--radius));
+    border-end-end-radius: var(--float-button-group-radius, var(--radius));
   }
 
   .ui-float-button-group[data-menu-mode] .ui-float-button-list {

package/dist/styles/focus-ring.css

@@ -55,11 +55,13 @@
   .ui-control-composite-field[data-state="open"],
   .ui-otp-slot[data-active="true"],
   .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
-    outline: var(--focus-ring-width) solid
-      hsl(
-        var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
-          var(--focus-ring-opacity, 1)
-      );
+
+    outline-width: var(--focus-ring-width-component, var(--focus-ring-width));
+    outline-style: solid;
+    outline-color: hsl(
+      var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
+        var(--focus-ring-opacity, 1)
+    );
     outline-offset: var(--focus-ring-offset);
 
     transition:
@@ -163,7 +165,8 @@
   }
 
   .ui-toggle {
-    --focus-ring-weight: var(--toggle-focus-ring-width);
+    --focus-ring-weight: var(--toggle-focus-ring-width, var(--stroke-lg));
+    --focus-ring-width-component: calc(var(--focus-ring-weight) * var(--focus-outline));
     --focus-ring-opacity: var(--toggle-focus-ring-alpha);
   }
 
@@ -197,7 +200,8 @@
     .ui-app-setting-picker-icon,
     .ui-app-setting-picker-inline
   ) {
-    --focus-ring-weight: var(--control-focus-ring-width);
+    --focus-ring-weight: var(--control-focus-ring-width, var(--stroke-hairline));
+    --focus-ring-width-component: calc(var(--focus-ring-weight) * var(--focus-outline));
   }
 
   .ui-command-input:focus-visible {