@godxjp/ui 23.0.0 → 23.2.0

package/dist/styles/card-layout.css

@@ -4,6 +4,9 @@
   [data-slot="card"] {
     min-width: 0;
 
+    display: flex;
+    flex-direction: column;
+
     border-width: 1px;
     border-style: solid;
     border-color: hsl(var(--card-border, var(--border)));
@@ -25,6 +28,10 @@
     background: transparent;
   }
 
+  [data-slot="card"][data-variant="borderless"] {
+    border-width: 0;
+  }
+
   [data-slot="card"][data-variant="featured"] {
     border-color: var(--card-featured-border-color, hsl(var(--primary)));
     box-shadow: 0 0 0 var(--card-featured-ring-width)
@@ -74,6 +81,11 @@
 
   [data-slot="card"][data-accent] > [data-slot="card-header"],
   [data-slot="card"][data-accent] > [data-slot="card-content"]:not([data-flush]),
+
+  [data-slot="card"] > [data-slot="card-footer"] {
+    margin-block-start: auto;
+  }
+
   [data-slot="card"][data-accent] > [data-slot="card-footer"]:not([data-flush]) {
     padding-inline-start: calc(var(--card-space-inset) - var(--card-accent-rail-width));
   }
@@ -95,6 +107,21 @@
     padding-inline-start: var(--card-space-inset);
   }
 
+  [data-slot="card"][data-hoverable] {
+    cursor: pointer;
+    transition: box-shadow var(--duration-fast) var(--ease-standard);
+  }
+
+  [data-slot="card"][data-hoverable]:hover {
+    --card-shadow: var(--card-hover-shadow);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-slot="card"][data-hoverable] {
+      transition: none;
+    }
+  }
+
   [data-slot="card-header"] {
     display: flex;
     flex-direction: column;
@@ -335,6 +362,27 @@
     justify-content: stretch;
   }
 
+  [data-slot="card-footer"][data-actions] {
+    gap: 0;
+    flex-wrap: nowrap;
+    padding-inline: 0;
+    padding-block: 0;
+    border-top: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
+  }
+
+  [data-slot="card-footer"][data-actions] > * {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 0;
+    align-items: center;
+    justify-content: center;
+    padding-block: var(--card-space-footer-y);
+  }
+
+  [data-slot="card-footer"][data-actions] > * + * {
+    border-inline-start: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
+  }
+
   .ui-card-inset-x {
     padding-inline: var(--card-space-inset);
   }

package/dist/styles/control.css

@@ -177,8 +177,8 @@
     content: "";
     position: absolute;
     inset: 0;
-    min-inline-size: var(--button-bare-target-size);
-    min-block-size: var(--button-bare-target-size);
+    min-inline-size: var(--button-bare-target-size, var(--control-height-xs));
+    min-block-size: var(--button-bare-target-size, var(--control-height-xs));
     margin: auto;
   }
 
@@ -1338,6 +1338,20 @@
     inline-size: 0.75rem;
     block-size: 0.75rem;
   }
+
+  @media (pointer: coarse) {
+    .ui-number-input:not([data-size="xs"]):not([data-size="sm"]) {
+      --control-height: var(--number-input-touch-height);
+    }
+
+    .ui-number-input-steppers {
+      gap: 0;
+    }
+
+    .ui-number-input-step {
+      block-size: calc(var(--control-height) / 2);
+    }
+  }
 }
 
 @layer components {
@@ -1887,6 +1901,22 @@
     transition: opacity 150ms ease;
   }
 
+  .ui-control-inline-affix-action {
+    position: relative;
+  }
+
+  .ui-control-inline-affix-action::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+    min-inline-size: var(--touch-target-min);
+    min-block-size: var(--touch-target-min);
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
   .ui-control-inline-affix-action:hover,
   .ui-control-inline-affix-action:focus-visible {
     color: hsl(var(--foreground));
@@ -2108,6 +2138,8 @@
     background-color: hsl(var(--muted));
 
     border-radius: 0;
+
+    padding-block: var(--calendar-bordered-weekday-padding-block);
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-grid {
@@ -2536,7 +2568,7 @@
   }
 
   .ui-button--xs {
-    height: var(--button-xs-height);
+    height: var(--button-xs-height, var(--control-height-xs));
     gap: var(--button-xs-space-gap);
     padding-inline: var(--button-xs-space-inline);
     font-size: var(--button-xs-font-size);
@@ -2642,8 +2674,8 @@
 
   .ui-control[data-status="warning"],
   .ui-control-multiline[data-status="warning"] {
-    --focus-ring-color: var(--control-status-warning-border-color);
-    --focus-outline-color: var(--control-status-warning-border-color);
+    --focus-ring-color: var(--control-status-warning-outline-color);
+    --focus-outline-color: var(--control-status-warning-outline-color);
     --focus-ring-glow-color: var(--control-status-warning-glow-color);
     --focus-ring-glow-alpha: var(--control-status-warning-glow-alpha);
   }
@@ -2988,6 +3020,10 @@
     justify-content: center;
   }
 
+  .ui-segmented:not([data-orientation="vertical"]) {
+    row-gap: var(--segmented-track-padding);
+  }
+
   .ui-segmented[data-orientation="vertical"] {
     flex-direction: column;
   }

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

@@ -314,6 +314,94 @@
     background: hsl(var(--muted-foreground));
   }
 
+  .ui-swatch {
+    display: inline-block;
+    flex: none;
+
+    vertical-align: middle;
+    inline-size: var(--swatch-size);
+    block-size: var(--swatch-size);
+    border-radius: var(--swatch-radius);
+    background: var(--swatch-color);
+    box-shadow: inset 0 0 0 var(--swatch-border-width)
+      var(--swatch-border-color, hsl(var(--border)));
+    forced-color-adjust: none;
+  }
+
+  .ui-feature-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--feature-list-space-gap);
+  }
+
+  .ui-feature-list-item {
+    display: grid;
+    align-items: start;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: var(--feature-list-space-inline);
+    font-size: var(--feature-list-font-size);
+    line-height: var(--line-height-body);
+  }
+
+  .ui-feature-list-mark {
+    display: grid;
+    block-size: 1lh;
+    place-items: center;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-feature-list-mark > svg {
+    inline-size: var(--feature-list-mark-icon-size);
+    block-size: var(--feature-list-mark-icon-size);
+  }
+
+  .ui-feature-list-item[data-state="included"] .ui-feature-list-mark {
+    color: hsl(var(--mark-success));
+  }
+
+  .ui-feature-list-item[data-state="limited"] .ui-feature-list-mark {
+    color: hsl(var(--mark-warning));
+  }
+
+  .ui-feature-list-item[data-state="excluded"] .ui-feature-list-label {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-feature-list-body {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+
+    overflow-wrap: anywhere;
+  }
+
+  .ui-feature-list-description {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--feature-list-description-font-size);
+  }
+
+  .ui-thumbnail {
+    display: block;
+
+    inline-size: auto;
+
+    max-inline-size: 100%;
+    block-size: var(--thumbnail-block-size);
+    border: var(--thumbnail-border-width) solid hsl(var(--border));
+    border-radius: var(--thumbnail-radius);
+
+    background: hsl(var(--muted));
+    object-fit: contain;
+  }
+
+  .ui-thumbnail[data-size="sm"] {
+    block-size: var(--thumbnail-block-size-sm);
+  }
+
+  .ui-thumbnail[data-size="lg"] {
+    block-size: var(--thumbnail-block-size-lg);
+  }
+
   .ui-timeline {
     display: flex;
     flex-direction: column;

package/dist/styles/focus-ring.css

@@ -13,6 +13,19 @@
     .ui-toggle,
     .ui-checkbox,
     .ui-radio,
+    .ui-slider-thumb,
+    .ui-control-affix-action,
+    .ui-control-inline-affix-action,
+    .ui-search-input-clear,
+    .ui-tag-input-remove,
+    .ui-color-picker-input,
+    .ui-upload-tile-add,
+    .ui-upload-picture-empty,
+    .ui-upload-dropzone,
+    .ui-tabs-add,
+    .ui-steps-control,
+    .ui-carousel-previous,
+    .ui-carousel-next,
     .ui-steps-inline-control,
     .ui-pagination-link,
     .ui-legal-document-toc-link,
@@ -28,6 +41,7 @@
   ):focus-visible,
 
   .ui-checkbox[data-focus-visible],
+  .ui-radio[data-focus-visible],
   .ui-switch[data-focus-visible],
   .ui-slider-thumb[data-focus-visible],
   .ui-focus-ring[data-focus-visible],
@@ -59,6 +73,19 @@
       .ui-toggle,
       .ui-checkbox,
       .ui-radio,
+      .ui-slider-thumb,
+      .ui-control-affix-action,
+      .ui-control-inline-affix-action,
+      .ui-search-input-clear,
+      .ui-tag-input-remove,
+      .ui-color-picker-input,
+      .ui-upload-tile-add,
+      .ui-upload-picture-empty,
+      .ui-upload-dropzone,
+      .ui-tabs-add,
+      .ui-steps-control,
+      .ui-carousel-previous,
+      .ui-carousel-next,
       .ui-steps-inline-control,
       .ui-pagination-link,
       .ui-legal-document-toc-link,
@@ -74,6 +101,7 @@
     ):focus-visible,
 
   :root[data-focus-outline="on"] .ui-checkbox[data-focus-visible],
+  :root[data-focus-outline="on"] .ui-radio[data-focus-visible],
   :root[data-focus-outline="on"] .ui-switch[data-focus-visible],
   :root[data-focus-outline="on"] .ui-slider-thumb[data-focus-visible],
   :root[data-focus-outline="on"] .ui-focus-ring[data-focus-visible],

package/dist/styles/form-layout.css

@@ -2,6 +2,10 @@
 
 @layer components {
 
+  .ui-form-field-note {
+    word-break: auto-phrase;
+  }
+
   .ui-form-field-required {
     margin-inline-start: var(--space-inline-xs);
     color: hsl(var(--destructive));

package/dist/styles/layout.css

@@ -997,7 +997,8 @@
     flex-wrap: nowrap;
     min-width: 0;
     align-items: center;
-    justify-content: flex-end;
+
+    justify-content: safe flex-end;
     gap: var(--pagination-gap);
   }
 

package/dist/styles/navigation-layout.css

@@ -53,22 +53,67 @@
     position: absolute;
     background: var(--tabs-indicator-background, hsl(var(--primary)));
     opacity: 0;
-    transition: opacity var(--duration-fast) var(--ease-standard);
+
+    transition: opacity var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
     pointer-events: none;
   }
 
   [data-slot="tabs-list"][data-variant="line"][data-orientation="horizontal"]
     [data-slot="tabs-trigger"]::after {
-    inset-inline: 0;
     inset-block-end: calc(-1 * var(--tabs-indicator-offset));
     block-size: var(--tabs-indicator-size);
+    inline-size: calc(100% - 2 * var(--tabs-indicator-inset));
+    inset-inline-start: var(--tabs-indicator-inset);
+  }
+
+  [data-slot="tabs"][data-indicator-align="start"]
+    [data-slot="tabs-list"][data-variant="line"][data-orientation="horizontal"]
+    [data-slot="tabs-trigger"]::after {
+    inset-inline-start: 0;
+  }
+
+  [data-slot="tabs"][data-indicator-align="end"]
+    [data-slot="tabs-list"][data-variant="line"][data-orientation="horizontal"]
+    [data-slot="tabs-trigger"]::after {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
   }
 
   [data-slot="tabs-list"][data-variant="line"][data-orientation="vertical"]
     [data-slot="tabs-trigger"]::after {
-    inset-block: 0;
     inset-inline-end: calc(-1 * var(--tabs-indicator-offset));
     inline-size: var(--tabs-indicator-size);
+    block-size: calc(100% - 2 * var(--tabs-indicator-inset));
+    inset-block-start: var(--tabs-indicator-inset);
+  }
+
+  [data-slot="tabs"][data-indicator-align="start"]
+    [data-slot="tabs-list"][data-variant="line"][data-orientation="vertical"]
+    [data-slot="tabs-trigger"]::after {
+    inset-block-start: 0;
+  }
+
+  [data-slot="tabs"][data-indicator-align="end"]
+    [data-slot="tabs-list"][data-variant="line"][data-orientation="vertical"]
+    [data-slot="tabs-trigger"]::after {
+    inset-block-start: auto;
+    inset-block-end: 0;
+  }
+
+  [data-slot="tabs"][data-indicator-size="label"][data-orientation="horizontal"][data-size="sm"] {
+    --tabs-indicator-inset: var(--tabs-trigger-padding-x-sm);
+  }
+
+  [data-slot="tabs"][data-indicator-size="label"][data-orientation="horizontal"][data-size="md"] {
+    --tabs-indicator-inset: var(--tabs-trigger-padding-x-md);
+  }
+
+  [data-slot="tabs"][data-indicator-size="label"][data-orientation="horizontal"][data-size="lg"] {
+    --tabs-indicator-inset: var(--tabs-trigger-padding-x-lg);
+  }
+
+  [data-slot="tabs"][data-indicator-size="label"][data-orientation="vertical"] {
+    --tabs-indicator-inset: var(--tabs-trigger-line-padding-y);
   }
 
   [data-slot="tabs-list"][data-variant="line"]
@@ -76,10 +121,38 @@
     opacity: 1;
   }
 
+  [data-slot="tabs"][data-animated-ink-bar="false"]
+    [data-slot="tabs-list"][data-variant="line"]
+    [data-slot="tabs-trigger"]::after {
+    transition: none;
+  }
+
+  @keyframes ui-tabs-pane-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  [data-slot="tabs"][data-animated-tab-pane="true"] [data-slot="tabs-panel"][data-state="active"],
+  [data-slot="tabs"][data-animated-tab-pane="true"]
+    [data-slot="tabs-content"][data-state="active"] {
+    animation: ui-tabs-pane-in var(--duration-base, 250ms)
+      var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
   @media (prefers-reduced-motion: reduce) {
     [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
       transition: none;
     }
+
+    [data-slot="tabs"][data-animated-tab-pane="true"] [data-slot="tabs-panel"][data-state="active"],
+    [data-slot="tabs"][data-animated-tab-pane="true"]
+      [data-slot="tabs-content"][data-state="active"] {
+      animation: none;
+    }
   }
 
   .ui-tabs-bar {
@@ -103,6 +176,11 @@
     flex: 1 1 auto;
   }
 
+  [data-slot="tabs"][data-orientation="vertical"] > [data-slot="tabs-list"],
+  [data-slot="tabs"][data-orientation="vertical"] > .ui-tabs-bar {
+    flex-shrink: 0;
+  }
+
   .ui-tabs-extra {
     display: flex;
     flex: 0 0 auto;
@@ -194,6 +272,12 @@
     block-size: var(--tabs-add-icon-size);
   }
 
+  .ui-pagination {
+    max-inline-size: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
   .ui-pagination .ui-button svg,
   .ui-pagination .ui-pagination-link svg {
     inline-size: var(--pagination-icon-size);
@@ -205,11 +289,11 @@
   }
 
   .ui-pagination[data-align="center"] {
-    justify-content: center;
+    justify-content: safe center;
   }
 
   .ui-pagination[data-align="end"] {
-    justify-content: flex-end;
+    justify-content: safe flex-end;
   }
 
   .ui-pagination[data-size="sm"] {

package/dist/styles/shell-layout.css

@@ -1692,6 +1692,22 @@
     color: var(--sidebar-badge-destructive-foreground, hsl(var(--destructive-foreground)));
   }
 
+  .sb-trailing-icon {
+    display: grid;
+    width: var(--sidebar-nav-icon-size);
+    height: var(--sidebar-nav-icon-size);
+    flex: 0 0 auto;
+    line-height: 0;
+    place-items: center;
+  }
+
+  .sb-trailing-icon svg {
+    display: block;
+    width: var(--sidebar-nav-icon-size);
+    height: var(--sidebar-nav-icon-size);
+    flex: 0 0 auto;
+  }
+
   .sb-footer {
     margin-top: auto;
     border-top: 1px solid hsl(var(--border));
@@ -1894,6 +1910,8 @@
   :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
     .sb-section-label,
   :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"]) .sb-label,
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
+    .sb-trailing-icon,
   :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"]) .sb-badge {
     display: none;
   }
@@ -2322,6 +2340,10 @@
   .ui-mobile-shell {
     --control-height: var(--mobile-shell-control-height);
 
+    --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
+    --control-height-lg: calc(var(--control-height) + calc(0.25rem * var(--scaling)));
+    --control-height-xs: calc(var(--control-height) - calc(0.5rem * var(--scaling)));
+
     --mobile-shell-padding-inline: calc(
       var(--mobile-shell-inset-inline) + var(--mobile-shell-safe-inset-inline)
     );

package/dist/styles/table-layout.css

@@ -44,8 +44,7 @@
   }
 
   .ui-table-row[data-tone] > [data-slot="table-cell"]:first-child {
-    border-inline-start: var(--table-row-tone-rail-width) solid
-      hsl(var(--table-row-tone-color));
+    border-inline-start: var(--table-row-tone-rail-width) solid hsl(var(--table-row-tone-color));
     padding-inline-start: calc(var(--table-cell-space-x) - var(--table-row-tone-rail-width));
   }
 
@@ -206,6 +205,10 @@
   }
 
   .ui-data-table-empty {
+    padding: var(--empty-state-space-y) var(--empty-state-space-x);
+  }
+
+  .ui-data-table-empty .ui-empty-state {
     padding: 0;
   }
 

package/dist/tokens/components/card.css

@@ -36,6 +36,8 @@
 
   --card-glow: 0 0 0 0 transparent;
 
+  --card-hover-shadow: var(--shadow-md);
+
   --card-tint: transparent;
 
   --card-accent-rail-width: var(--stroke-2xl);

package/dist/tokens/components/control.css

@@ -32,6 +32,8 @@
   --control-status-warning-glow-color: var(--warning);
   --control-status-warning-glow-alpha: var(--control-outline-error-alpha);
 
+  --number-input-touch-height: var(--band-height-2xl);
+
   --control-variant-filled-background: var(--muted);
   --control-variant-filled-hover-background: var(--accent);
 
@@ -286,6 +288,8 @@
   --calendar-footer-space-block-start: var(--space-2);
   --calendar-footer-border-width: var(--stroke-hairline);
 
+  --calendar-bordered-weekday-padding-block: var(--space-1);
+
   --transfer-pane-min-height: 14rem;
   --transfer-pane-radius: var(--radius-md);
   --transfer-panes-space-gap: var(--space-3);
@@ -317,9 +321,9 @@
   --month-picker-icon-size: var(--icon-size-md);
   --month-picker-separator-icon-size: var(--icon-size-sm);
 
-  --button-xs-height: var(--control-height-xs);
+  --button-xs-height: initial;
 
-  --button-bare-target-size: var(--control-height-xs);
+  --button-bare-target-size: initial;
   --button-xs-space-inline: var(--space-2);
   --button-xs-space-gap: var(--space-1);
   --button-xs-font-size: var(--font-size-xs);
@@ -369,7 +373,8 @@
 
   --control-status-error-border-color: hsl(var(--destructive));
   --control-status-warning-border-color: hsl(var(--text-warning));
-  --control-status-warning-outline-color: var(--warning);
+
+  --control-status-warning-outline-color: var(--text-warning);
 }
 
 @media (pointer: coarse) {

package/dist/tokens/components/data-display.css

@@ -82,6 +82,29 @@
 
   --legend-color: initial;
 
+  --swatch-size: 1rem;
+  --swatch-radius: 0.125rem;
+
+  --swatch-border-width: var(--stroke-hairline);
+
+  --swatch-border-color: initial;
+
+  --swatch-color: hsl(var(--muted));
+
+  --feature-list-space-gap: var(--space-stack-sm);
+
+  --feature-list-space-inline: var(--space-inline-sm);
+  --feature-list-font-size: var(--font-size-sm);
+  --feature-list-description-font-size: var(--font-size-xs);
+
+  --feature-list-mark-icon-size: var(--icon-size-md);
+
+  --thumbnail-block-size-sm: 4rem;
+  --thumbnail-block-size: 6rem;
+  --thumbnail-block-size-lg: 10rem;
+  --thumbnail-border-width: var(--stroke-hairline);
+  --thumbnail-radius: var(--radius);
+
   --timeline-dot-done-background: initial;
   --timeline-dot-current-background: initial;
   --timeline-line-completed-background: initial;

package/dist/tokens/components/feedback.css

@@ -94,6 +94,24 @@
   --skeleton-stat-value-width: 8rem;
   --skeleton-stat-caption-width: 5rem;
 
+  --skeleton-element-radius: var(--radius-sm);
+  --skeleton-button-width-ratio: 2;
+  --skeleton-input-width-ratio: 5;
+
+  --skeleton-node-size: calc(var(--control-height) * 3);
+  --skeleton-image-glyph-size: var(--icon-size-4xl);
+
+  --skeleton-image-glyph-color: initial;
+
+  --skeleton-article-avatar-gap: var(--space-inline-lg);
+  --skeleton-article-avatar-title-offset: var(--space-3);
+  --skeleton-article-title-gap: var(--space-stack-lg);
+  --skeleton-article-line-gap: var(--space-stack-md);
+
+  --skeleton-paragraph-last-width: 61%;
+
+  --skeleton-sweep-gradient: initial;
+
   --query-load-more-space-block-start: var(--space-stack-md);
   --query-loading-more-space-block-start: var(--space-stack-sm);
 

package/dist/tokens/components/navigation.css

@@ -41,10 +41,14 @@
   --tabs-list-max-inline-size: 100%;
   --tabs-list-overflow: auto;
 
+  --tabs-placement-responsive-breakpoint-width: 48rem;
+
   --tabs-indicator-background: initial;
   --tabs-indicator-size: 2px;
   --tabs-indicator-offset: 0px;
 
+  --tabs-indicator-inset: 0px;
+
   --tabs-root-gap: 0.5rem;
 
   --tabs-list-line-space-inset: 0px;