@godxjp/ui 28.13.0 → 29.0.0

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

@@ -11,7 +11,7 @@
     border-radius: var(--radius-pill);
     background:
       linear-gradient(var(--avatar-tint), var(--avatar-tint)),
-      var(--avatar-background, hsl(var(--muted)));
+      var(--avatar-background, hsl(var(--muted) / var(--avatar-background-alpha, 100%)));
     color: hsl(var(--muted-foreground));
     font-size: var(--avatar-font-size);
     font-weight: var(--font-weight-medium);
@@ -20,14 +20,14 @@
   .ui-avatar[data-shape="square"] {
     inline-size: var(--avatar-square-size);
     block-size: var(--avatar-square-size);
-    border-radius: var(--avatar-square-radius);
+    border-radius: var(--avatar-square-radius, var(--radius));
     --avatar-background: var(--avatar-square-background, hsl(var(--primary)));
     color: var(--avatar-square-foreground, hsl(var(--primary-foreground)));
   }
 
   .ui-avatar[data-appearance="tinted"] {
     --avatar-background: var(--avatar-tinted-background, hsl(var(--primary) / 0.1));
-    color: var(--avatar-tinted-foreground, hsl(var(--primary)));
+    color: var(--avatar-tinted-foreground, hsl(var(--text-brand, var(--primary))));
   }
 
   .ui-avatar[data-appearance="tinted"] svg {
@@ -78,7 +78,7 @@
     height: 100%;
     align-items: center;
     justify-content: center;
-    background: var(--avatar-background, hsl(var(--muted)));
+    background: var(--avatar-background, hsl(var(--muted) / var(--avatar-background-alpha, 100%)));
   }
 
   .ui-avatar[data-presence] {
@@ -176,7 +176,10 @@
     height: var(--progress-meter-block-size);
     overflow: hidden;
     border-radius: var(--radius-pill);
-    background: var(--progress-track-background, hsl(var(--secondary)));
+    background: var(
+      --progress-track-background,
+      hsl(var(--secondary) / var(--progress-track-background-alpha, 100%))
+    );
   }
 
   .ui-progress-bar {
@@ -207,7 +210,7 @@
   .ui-progress[data-breakdown] .ui-progress-track {
     display: flex;
     height: var(--progress-breakdown-block-size);
-    border-radius: var(--progress-breakdown-radius);
+    border-radius: var(--progress-breakdown-radius, var(--radius));
   }
 
   .ui-progress[data-size="sm"] .ui-progress-track {
@@ -269,7 +272,10 @@
   }
 
   .ui-progress-ring-track {
-    stroke: var(--progress-track-background, hsl(var(--secondary)));
+    stroke: var(
+      --progress-track-background,
+      hsl(var(--secondary) / var(--progress-track-background-alpha, 100%))
+    );
   }
 
   .ui-progress-ring-indicator {
@@ -446,7 +452,7 @@
     max-inline-size: 100%;
     block-size: var(--thumbnail-block-size);
     border: var(--thumbnail-border-width) solid hsl(var(--border));
-    border-radius: var(--thumbnail-radius);
+    border-radius: var(--thumbnail-radius, var(--radius));
 
     background: hsl(var(--muted));
     object-fit: contain;
@@ -557,7 +563,7 @@
   }
 
   .ui-timeline-title[data-current="true"] {
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
     font-weight: var(--font-weight-semibold);
   }
 
@@ -595,7 +601,7 @@
   text-decoration: underline;
 }
 .ui-accordion-trigger:focus-visible {
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-sm, calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio)));
 }
 .ui-accordion-trigger:disabled,
 .ui-accordion-trigger[data-disabled] {
@@ -624,9 +630,9 @@
 .ui-hover-card-content {
   z-index: 50;
   width: 16rem;
-  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: hsl(var(--popover) / var(--popover-alpha, 100%));
   color: hsl(var(--popover-foreground));
   padding: var(--space-4);
   box-shadow: var(--shadow-md);
@@ -653,10 +659,18 @@
   padding-inline: var(--space-4);
 }
 
+.ui-carousel:has(.ui-carousel-dots) {
+  --carousel-dots-block-size: calc(var(--space-4) + var(--touch-target-min));
+}
+
 .ui-carousel-previous,
 .ui-carousel-next {
   position: absolute;
-  top: 50%;
+
+  inset-block-start: var(
+    --carousel-arrow-inset-block-start,
+    calc(50% - var(--carousel-dots-block-size) / 2)
+  );
   z-index: 20;
   display: grid;
   width: 2rem;
@@ -685,8 +699,15 @@
 }
 
 .ui-carousel-arrow {
+  display: grid;
   width: var(--carousel-arrow-icon-size);
   height: var(--carousel-arrow-icon-size);
+  place-items: center;
+}
+
+.ui-carousel-arrow > * {
+  width: 100%;
+  height: 100%;
 }
 
 .ui-carousel-dots {
@@ -938,12 +959,51 @@
     inset-inline-start: 0;
 
     z-index: 20;
-    background-color: inherit;
+    background-color: hsl(var(--card) / var(--card-alpha, 100%));
     border-inline-end: 1px solid hsl(var(--border));
     inline-size: var(--permission-matrix-label-width);
     min-inline-size: var(--permission-matrix-label-width);
   }
 
+  .ui-permission-matrix .ui-table-row[data-tone] > .ui-permission-matrix-pin {
+    background-image: linear-gradient(
+      var(
+        --table-row-tone-surface,
+        hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
+      ),
+      var(
+        --table-row-tone-surface,
+        hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
+      )
+    );
+  }
+
+  .ui-permission-matrix tbody tr:hover > .ui-permission-matrix-pin {
+    background-image: linear-gradient(
+      var(
+        --table-row-hover-background,
+        hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
+      ),
+      var(
+        --table-row-hover-background,
+        hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
+      )
+    );
+  }
+
+  .ui-permission-matrix tbody tr[data-state="selected"] > .ui-permission-matrix-pin {
+    background-image: linear-gradient(
+      var(
+        --table-row-selected-background,
+        hsl(var(--primary) / var(--table-row-selected-background-alpha, 0.06))
+      ),
+      var(
+        --table-row-selected-background,
+        hsl(var(--primary) / var(--table-row-selected-background-alpha, 0.06))
+      )
+    );
+  }
+
   .ui-permission-matrix-role {
     display: inline-flex;
     align-items: center;
@@ -1016,7 +1076,7 @@
   :is(.ui-code-block, .ui-prose pre) {
     margin: 0;
     overflow: auto;
-    border-radius: var(--code-block-radius);
+    border-radius: var(--code-block-radius, calc(var(--radius) / var(--radius-ratio)));
     background: hsl(var(--muted));
     padding: var(--code-block-space-inset);
     color: var(--code-block-foreground, hsl(var(--foreground)));
@@ -1062,7 +1122,7 @@
 
   .ui-code-block [data-code-token="keyword"],
   .ui-prose pre [data-code-token="keyword"] {
-    color: var(--code-block-token-keyword-color, hsl(var(--primary)));
+    color: var(--code-block-token-keyword-color, hsl(var(--text-brand, var(--primary))));
   }
 
   .ui-code-block [data-code-token="string"],
@@ -1217,11 +1277,14 @@
     font-size: var(--prose-code-font-size);
     background: hsl(var(--muted));
     padding-inline: var(--prose-code-space-inline);
-    border-radius: var(--prose-code-radius);
+    border-radius: var(
+      --prose-code-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
   }
 
   .ui-prose a {
-    color: hsl(var(--prose-link-color, var(--primary)));
+    color: hsl(var(--prose-link-color, var(--text-link, var(--primary))));
     text-decoration-line: var(--prose-link-decoration-line);
   }
 
@@ -1245,7 +1308,7 @@
   .ui-prose img {
     max-inline-size: 100%;
     block-size: auto;
-    border-radius: var(--prose-image-radius);
+    border-radius: var(--prose-image-radius, calc(var(--radius) / var(--radius-ratio)));
   }
 
   .ui-prose[data-image-size="original"] img {
@@ -1360,7 +1423,10 @@
     padding: var(--timeline-grid-event-space-inset);
     border-inline-start: var(--timeline-grid-event-border-width) solid
       var(--timeline-grid-event-color, hsl(var(--primary)));
-    border-radius: var(--timeline-grid-event-radius);
+    border-radius: var(
+      --timeline-grid-event-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
 
     background-color: color-mix(
       in srgb,
@@ -1451,7 +1517,7 @@
   .ui-range-timeline {
     overflow: auto;
     border: 1px solid hsl(var(--range-timeline-border-color));
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
   }
   .ui-range-timeline-canvas {
     min-inline-size: calc(
@@ -1472,7 +1538,7 @@
     position: sticky;
     inset-inline-start: 0;
     z-index: 1;
-    background: hsl(var(--card));
+    background: hsl(var(--card) / var(--card-alpha, 100%));
     padding: var(--space-2);
     border-inline-end: 1px solid hsl(var(--range-timeline-border-color));
   }
@@ -1563,7 +1629,10 @@
     inset-block-start: 50%;
     transform: translateY(-50%);
     block-size: var(--range-timeline-bar-height);
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     background: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
   }
@@ -1648,7 +1717,7 @@
     gap: 0;
     border-inline-end: var(--descriptions-border-width) solid hsl(var(--border));
     border-block-end: var(--descriptions-border-width) solid hsl(var(--border));
-    border-radius: var(--descriptions-border-radius);
+    border-radius: var(--descriptions-border-radius, calc(var(--radius) / var(--radius-ratio)));
     overflow: hidden;
   }
 
@@ -1771,7 +1840,10 @@
   }
   .ui-text[data-chip] {
     background: hsl(var(--muted));
-    border-radius: var(--prose-code-radius);
+    border-radius: var(
+      --prose-code-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     padding-inline: var(--prose-code-space-inline);
     font-size: var(--prose-code-font-size);
   }
@@ -1816,7 +1888,7 @@
 
   .ui-chat-bubble-body {
     min-inline-size: 0;
-    border-radius: var(--chat-bubble-radius);
+    border-radius: var(--chat-bubble-radius, var(--radius));
     padding-block: var(--chat-bubble-padding-block);
     padding-inline: var(--chat-bubble-padding-inline);
     background: var(--chat-bubble-background, hsl(var(--muted)));
@@ -1860,23 +1932,32 @@
 
   .ui-chat-bubble[data-tone="info"] .ui-chat-bubble-body {
     border: var(--stroke-hairline) solid hsl(var(--info) / var(--chat-bubble-tone-border-alpha));
-    background: hsl(var(--info) / var(--chat-bubble-tone-background-alpha));
+    background: var(--surface-info, hsl(var(--info) / var(--chat-bubble-tone-background-alpha)));
   }
 
   .ui-chat-bubble[data-tone="success"] .ui-chat-bubble-body {
     border: var(--stroke-hairline) solid hsl(var(--success) / var(--chat-bubble-tone-border-alpha));
-    background: hsl(var(--success) / var(--chat-bubble-tone-background-alpha));
+    background: var(
+      --surface-success,
+      hsl(var(--success) / var(--chat-bubble-tone-background-alpha))
+    );
   }
 
   .ui-chat-bubble[data-tone="warning"] .ui-chat-bubble-body {
     border: var(--stroke-hairline) solid hsl(var(--warning) / var(--chat-bubble-tone-border-alpha));
-    background: hsl(var(--warning) / var(--chat-bubble-tone-background-alpha));
+    background: var(
+      --surface-warning,
+      hsl(var(--warning) / var(--chat-bubble-tone-background-alpha))
+    );
   }
 
   .ui-chat-bubble[data-tone="destructive"] .ui-chat-bubble-body {
     border: var(--stroke-hairline) solid
       hsl(var(--destructive) / var(--chat-bubble-tone-border-alpha));
-    background: hsl(var(--destructive) / var(--chat-bubble-tone-background-alpha));
+    background: var(
+      --surface-destructive,
+      hsl(var(--destructive) / var(--chat-bubble-tone-background-alpha))
+    );
   }
 
   .ui-chat-bubble-caret {
@@ -1951,7 +2032,10 @@
     gap: var(--tree-node-gap);
 
     min-block-size: var(--tree-node-height, var(--control-height));
-    border-radius: var(--tree-node-radius);
+    border-radius: var(
+      --tree-node-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     padding-inline: var(--tree-node-padding-inline);
 
     padding-inline-start: calc(
@@ -1961,11 +2045,17 @@
   }
 
   .ui-tree-node:hover {
-    background: var(--tree-node-hover-background, hsl(var(--accent)));
+    background: var(
+      --tree-node-hover-background,
+      hsl(var(--accent) / var(--tree-node-hover-background-alpha, 100%))
+    );
   }
 
   .ui-tree-node[data-selected="true"] {
-    background: var(--tree-node-selected-background, hsl(var(--accent)));
+    background: var(
+      --tree-node-selected-background,
+      hsl(var(--accent) / var(--tree-node-selected-background-alpha, 100%))
+    );
     color: var(--tree-node-selected-foreground, hsl(var(--accent-foreground)));
     font-weight: var(--font-weight-medium);
   }
@@ -2086,7 +2176,10 @@
   }
 
   .ui-tree[data-variant="directory"] .ui-tree-node[data-selected="true"] {
-    background: var(--tree-node-selected-background, hsl(var(--primary) / 0.12));
+    background: var(
+      --tree-node-selected-background,
+      hsl(var(--primary) / var(--tree-node-selected-background-alpha, 0.12))
+    );
   }
 }
 
@@ -2097,7 +2190,7 @@
     min-inline-size: 0;
     align-items: flex-start;
     gap: var(--welcome-gap);
-    border-radius: var(--welcome-radius);
+    border-radius: var(--welcome-radius, var(--radius));
   }
 
   .ui-welcome[data-variant="filled"] {
@@ -2292,7 +2385,7 @@
     padding-block: var(--thought-chain-item-padding-block);
     padding-inline: var(--thought-chain-item-padding-inline);
     border: 0;
-    border-radius: var(--thought-chain-item-radius);
+    border-radius: var(--thought-chain-item-radius, var(--radius));
     background: transparent;
     color: inherit;
     font: inherit;

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,7 +327,7 @@
   .ui-upload-dropzone {
     cursor: pointer;
     padding: var(--upload-dropzone-space-inset);
-    border-radius: var(--upload-dropzone-radius);
+    border-radius: var(--upload-dropzone-radius, var(--radius));
     border: var(--upload-dropzone-border-width) dashed hsl(var(--border));
     text-align: center;
     transition: border-color 150ms ease;
@@ -464,7 +397,7 @@
     inline-size: var(--upload-tile-size);
     block-size: var(--upload-tile-size);
     overflow: hidden;
-    border-radius: var(--upload-tile-radius);
+    border-radius: var(--upload-tile-radius, calc(var(--radius) / var(--radius-ratio)));
     border: 1px solid hsl(var(--border));
     background-color: hsl(var(--muted));
   }
@@ -476,7 +409,7 @@
     justify-content: center;
     inline-size: var(--upload-tile-size);
     block-size: var(--upload-tile-size);
-    border-radius: var(--upload-tile-radius);
+    border-radius: var(--upload-tile-radius, calc(var(--radius) / var(--radius-ratio)));
     border: 1px dashed hsl(var(--border));
     color: hsl(var(--muted-foreground));
     transition:
@@ -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,7 +482,7 @@
   .ui-upload-picture-frame {
     position: relative;
     overflow: hidden;
-    border-radius: var(--upload-picture-radius);
+    border-radius: var(--upload-picture-radius, calc(var(--radius) / var(--radius-ratio)));
     border: 1px solid hsl(var(--border));
   }
 
@@ -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,7 +515,7 @@
     justify-content: center;
     inline-size: 100%;
     block-size: var(--upload-picture-empty-height);
-    border-radius: var(--upload-picture-radius);
+    border-radius: var(--upload-picture-radius, calc(var(--radius) / var(--radius-ratio)));
     border: 1px dashed hsl(var(--border));
     color: hsl(var(--muted-foreground));
   }
@@ -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-radius: var(--upload-draft-radius, calc(var(--radius) / var(--radius-ratio)));
     border: 1px dashed hsl(var(--destructive) / 0.4);
-    background-color: hsl(var(--destructive) / 0.05);
+    background-color: var(
+      --surface-destructive,
+      hsl(var(--destructive) / var(--surface-destructive-alpha, 0.05))
+    );
     font-size: var(--upload-draft-font-size);
   }
 
@@ -696,7 +632,7 @@
     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-radius: var(--upload-row-radius, calc(var(--radius) / var(--radius-ratio)));
     border: 1px solid hsl(var(--border));
     font-size: var(--upload-row-font-size);
   }