@godxjp/ui 19.6.0 → 20.1.0

package/dist/styles/layout.css

@@ -115,6 +115,15 @@
     flex-wrap: wrap;
   }
 
+  .ui-flex[data-fill] {
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+
+  .ui-flex[data-width-raw] {
+    flex: none;
+  }
+
   .ui-flex[data-align="start"] {
     align-items: flex-start;
   }
@@ -163,6 +172,50 @@
     gap: 0;
   }
 
+  .ui-flex-gap-1 {
+    gap: var(--space-1);
+  }
+  .ui-flex-gap-2 {
+    gap: var(--space-2);
+  }
+  .ui-flex-gap-3 {
+    gap: var(--space-3);
+  }
+  .ui-flex-gap-4 {
+    gap: var(--space-4);
+  }
+  .ui-flex-gap-5 {
+    gap: var(--space-5);
+  }
+  .ui-flex-gap-6 {
+    gap: var(--space-6);
+  }
+  .ui-flex-gap-8 {
+    gap: var(--space-8);
+  }
+  .ui-flex-gap-10 {
+    gap: var(--space-10);
+  }
+  .ui-flex-gap-12 {
+    gap: var(--space-12);
+  }
+
+  .ui-flex[data-direction="row"].ui-flex-gap-xs {
+    gap: var(--space-inline-xs);
+  }
+  .ui-flex[data-direction="row"].ui-flex-gap-sm {
+    gap: var(--space-inline-sm);
+  }
+  .ui-flex[data-direction="row"].ui-flex-gap-md {
+    gap: var(--space-inline-md);
+  }
+  .ui-flex[data-direction="row"].ui-flex-gap-lg {
+    gap: var(--space-inline-lg);
+  }
+  .ui-flex[data-direction="row"].ui-flex-gap-xl {
+    gap: var(--space-inline-xl);
+  }
+
   .ui-flex-gap-xs {
     gap: var(--space-stack-xs);
   }
@@ -243,6 +296,13 @@
     grid-template-columns: repeat(var(--responsive-grid-base, 1), minmax(0, 1fr));
   }
 
+  .ui-responsive-grid[data-flow="columns"] {
+    grid-template-columns: none;
+    grid-auto-flow: column;
+    grid-auto-columns: var(--responsive-grid-column-width);
+    align-items: start;
+  }
+
   .ui-responsive-grid[data-gap="none"] {
     gap: 0;
   }
@@ -262,6 +322,37 @@
     gap: var(--space-stack-xl);
   }
 
+  .ui-responsive-grid[data-gap="0"] {
+    gap: 0;
+  }
+  .ui-responsive-grid[data-gap="1"] {
+    gap: var(--space-1);
+  }
+  .ui-responsive-grid[data-gap="2"] {
+    gap: var(--space-2);
+  }
+  .ui-responsive-grid[data-gap="3"] {
+    gap: var(--space-3);
+  }
+  .ui-responsive-grid[data-gap="4"] {
+    gap: var(--space-4);
+  }
+  .ui-responsive-grid[data-gap="5"] {
+    gap: var(--space-5);
+  }
+  .ui-responsive-grid[data-gap="6"] {
+    gap: var(--space-6);
+  }
+  .ui-responsive-grid[data-gap="8"] {
+    gap: var(--space-8);
+  }
+  .ui-responsive-grid[data-gap="10"] {
+    gap: var(--space-10);
+  }
+  .ui-responsive-grid[data-gap="12"] {
+    gap: var(--space-12);
+  }
+
   .ui-responsive-grid > * {
     min-width: 0;
   }
@@ -390,6 +481,23 @@
     gap: 0;
   }
 
+  .ui-split-pane-scope[data-fill="true"] {
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  .ui-split-pane[data-fill="true"] {
+    grid-template-rows: minmax(0, 1fr);
+    min-block-size: 0;
+  }
+
+  .ui-split-pane[data-fill="true"] > .ui-split-pane-main,
+  .ui-split-pane[data-fill="true"] > .ui-split-pane-aside {
+    min-block-size: 0;
+  }
+
   .ui-resizable-panel-group {
     display: flex;
     min-height: 0;
@@ -817,6 +925,11 @@
     padding: var(--empty-state-space-y) var(--empty-state-space-x);
   }
 
+  .ui-empty-state[data-variant="page"] {
+    min-block-size: 100%;
+    justify-content: center;
+  }
+
   .ui-empty-state-title {
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
@@ -1302,25 +1415,29 @@
 @layer components {
 
   @media (width < 40rem) {
-    .ui-flex[data-hide-below="sm"] {
+    .ui-flex[data-hide-below="sm"],
+    .ui-topbar-item[data-hide-below="sm"] {
       display: none;
     }
   }
 
   @media (width < 48rem) {
-    .ui-flex[data-hide-below="md"] {
+    .ui-flex[data-hide-below="md"],
+    .ui-topbar-item[data-hide-below="md"] {
       display: none;
     }
   }
 
   @media (width < 64rem) {
-    .ui-flex[data-hide-below="lg"] {
+    .ui-flex[data-hide-below="lg"],
+    .ui-topbar-item[data-hide-below="lg"] {
       display: none;
     }
   }
 
   @media (width < 80rem) {
-    .ui-flex[data-hide-below="xl"] {
+    .ui-flex[data-hide-below="xl"],
+    .ui-topbar-item[data-hide-below="xl"] {
       display: none;
     }
   }
@@ -1384,3 +1501,209 @@
     margin-block-end: var(--space-3);
   }
 }
+
+@layer components {
+  .ui-flex[data-grow] {
+    flex-grow: 1;
+  }
+  .ui-flex[data-shrink="false"] {
+    flex-shrink: 0;
+  }
+  .ui-flex[data-direction="responsive"] {
+    flex-direction: var(--flex-direction-base, row);
+  }
+  .ui-flex[data-list] {
+    list-style-position: outside;
+    padding-inline-start: var(--space-5);
+  }
+  .ui-flex[data-list="disc"] {
+    list-style-type: disc;
+  }
+  .ui-flex[data-list="decimal"] {
+    list-style-type: decimal;
+  }
+  .ui-flex[data-list] > li {
+    display: list-item;
+  }
+  .ui-flex[data-surface] {
+    border-radius: var(--flex-surface-radius, var(--radius-md));
+  }
+  .ui-flex[data-surface="muted"] {
+    background: var(--flex-surface-background, hsl(var(--muted)));
+  }
+  .ui-flex[data-surface="warning"] {
+    background: var(
+      --flex-surface-background,
+      hsl(var(--warning) / var(--flex-surface-warning-alpha))
+    );
+  }
+  .ui-flex[data-surface="popover"] {
+    background: var(--flex-surface-background, hsl(var(--popover)));
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    box-shadow: var(--shadow-sm);
+  }
+  .ui-flex:has(> .ui-flex[data-reveal="hover"]) {
+    position: relative;
+  }
+  .ui-flex[data-reveal="hover"] {
+    position: absolute;
+    inset-block-start: var(--flex-actions-offset-block, 0);
+    inset-inline-end: var(--flex-actions-offset-inline, 0);
+    opacity: 0;
+    pointer-events: none;
+  }
+  .ui-flex:hover > .ui-flex[data-reveal="hover"],
+  .ui-flex:focus-within > .ui-flex[data-reveal="hover"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  @media (hover: none) {
+    .ui-flex[data-reveal="hover"] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  .ui-master-detail[data-rail-width="narrow"] {
+    --master-detail-rail-size: var(--master-detail-rail-narrow);
+  }
+  .ui-master-detail[data-rail-width="wide"] {
+    --master-detail-rail-size: var(--master-detail-rail-wide);
+  }
+  .ui-responsive-grid-item {
+    grid-column: span min(var(--responsive-grid-base, 1), var(--responsive-grid-item-base, 1));
+  }
+  @container responsive-grid (min-width: 40rem) {
+    .ui-responsive-grid-item {
+      grid-column: span min(var(--responsive-grid-sm, 1), var(--responsive-grid-item-sm, 1));
+    }
+  }
+  @container responsive-grid (min-width: 48rem) {
+    .ui-responsive-grid-item {
+      grid-column: span min(var(--responsive-grid-md, 1), var(--responsive-grid-item-md, 1));
+    }
+  }
+  @container responsive-grid (min-width: 64rem) {
+    .ui-responsive-grid-item {
+      grid-column: span min(var(--responsive-grid-lg, 1), var(--responsive-grid-item-lg, 1));
+    }
+  }
+  .ui-separator[data-label-size="2xs"] .ui-separator-label {
+    font-size: var(--font-size-2xs);
+  }
+  .ui-separator[data-label-size="xs"] .ui-separator-label {
+    font-size: var(--font-size-xs);
+  }
+  .ui-separator[data-label-size="sm"] .ui-separator-label {
+    font-size: var(--font-size-sm);
+  }
+  .ui-separator[data-label-size="md"] .ui-separator-label {
+    font-size: var(--font-size-base);
+  }
+}
+@layer components {
+  @media (min-width: 40rem) {
+    .ui-flex[data-direction="responsive"] {
+      flex-direction: var(--flex-direction-sm, var(--flex-direction-base, row));
+    }
+    .ui-separator[data-hide-from="sm"] {
+      display: none;
+    }
+  }
+  @media (width < 40rem) {
+    .ui-separator[data-hide-below="sm"] {
+      display: none;
+    }
+  }
+}
+@layer components {
+  @media (min-width: 48rem) {
+    .ui-flex[data-direction="responsive"] {
+      flex-direction: var(
+        --flex-direction-md,
+        var(--flex-direction-sm, var(--flex-direction-base, row))
+      );
+    }
+    .ui-separator[data-hide-from="md"] {
+      display: none;
+    }
+  }
+  @media (width < 48rem) {
+    .ui-separator[data-hide-below="md"] {
+      display: none;
+    }
+  }
+}
+@layer components {
+  @media (min-width: 64rem) {
+    .ui-flex[data-direction="responsive"] {
+      flex-direction: var(
+        --flex-direction-lg,
+        var(--flex-direction-md, var(--flex-direction-sm, var(--flex-direction-base, row)))
+      );
+    }
+    .ui-separator[data-hide-from="lg"] {
+      display: none;
+    }
+  }
+  @media (width < 64rem) {
+    .ui-separator[data-hide-below="lg"] {
+      display: none;
+    }
+  }
+}
+@layer components {
+  @media (min-width: 80rem) {
+    .ui-flex[data-direction="responsive"] {
+      flex-direction: var(
+        --flex-direction-xl,
+        var(
+          --flex-direction-lg,
+          var(--flex-direction-md, var(--flex-direction-sm, var(--flex-direction-base, row)))
+        )
+      );
+    }
+    .ui-separator[data-hide-from="xl"] {
+      display: none;
+    }
+  }
+  @media (width < 80rem) {
+    .ui-separator[data-hide-below="xl"] {
+      display: none;
+    }
+  }
+}
+
+@layer components {
+  .ui-topbar[data-height="bar"] {
+    min-block-size: var(--app-shell-bar-height);
+    padding-inline: var(--app-shell-bar-inset);
+  }
+}
+
+@layer components {
+  .ui-flex[data-direction="responsive"].ui-flex-gap-xs,
+  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-xs {
+    row-gap: var(--space-stack-xs);
+    column-gap: var(--space-inline-xs);
+  }
+  .ui-flex[data-direction="responsive"].ui-flex-gap-sm,
+  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-sm {
+    row-gap: var(--space-stack-sm);
+    column-gap: var(--space-inline-sm);
+  }
+  .ui-flex[data-direction="responsive"].ui-flex-gap-md,
+  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-md {
+    row-gap: var(--space-stack-md);
+    column-gap: var(--space-inline-md);
+  }
+  .ui-flex[data-direction="responsive"].ui-flex-gap-lg,
+  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-lg {
+    row-gap: var(--space-stack-lg);
+    column-gap: var(--space-inline-lg);
+  }
+  .ui-flex[data-direction="responsive"].ui-flex-gap-xl,
+  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-xl {
+    row-gap: var(--space-stack-xl);
+    column-gap: var(--space-inline-xl);
+  }
+}

package/dist/styles/navigation-layout.css

@@ -82,12 +82,132 @@
     }
   }
 
+  .ui-tabs-bar {
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--tabs-bar-gap);
+  }
+
+  [data-slot="tabs"][data-orientation="vertical"] .ui-tabs-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .ui-tabs-bar > [data-slot="tabs-list"] {
+    min-inline-size: 0;
+    flex: 1 1 auto;
+  }
+
+  .ui-tabs-extra {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--tabs-extra-gap);
+  }
+
+  .ui-tabs-trigger-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ui-tabs-trigger-icon svg {
+    inline-size: var(--tabs-trigger-icon-size);
+    block-size: var(--tabs-trigger-icon-size);
+  }
+
+  [data-slot="tabs"][data-variant="card"] [data-slot="tabs-list"],
+  [data-slot="tabs"][data-variant="editable-card"] [data-slot="tabs-list"] {
+    box-shadow: inset 0 calc(-1 * var(--tabs-card-rail-border-width)) 0 hsl(var(--border));
+  }
+
+  .ui-tabs-tab-remove {
+    display: inline-flex;
+    flex: 0 0 auto;
+    inline-size: var(--tabs-tab-remove-size);
+    block-size: var(--tabs-tab-remove-size);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--tabs-tab-remove-radius);
+    margin-inline-start: var(--tabs-tab-remove-space-inline-end);
+    margin-inline-end: calc(-1 * var(--tabs-tab-remove-space-inline-end));
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+  }
+
+  .ui-tabs-tab-remove:hover {
+    background: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .ui-tabs-tab-remove-icon {
+    inline-size: var(--tabs-tab-remove-icon-size);
+    block-size: var(--tabs-tab-remove-icon-size);
+  }
+
+  .ui-tabs-add {
+    display: inline-flex;
+    flex: 0 0 auto;
+    inline-size: var(--tabs-add-size);
+    block-size: var(--tabs-add-size);
+    align-items: center;
+    justify-content: center;
+    border: var(--tabs-card-rail-border-width) solid hsl(var(--border));
+    border-radius: var(--tabs-add-radius);
+    background: hsl(var(--tabs-card-background, var(--muted)));
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-tabs-add:hover {
+    background: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .ui-tabs-add-icon {
+    inline-size: var(--tabs-add-icon-size);
+    block-size: var(--tabs-add-icon-size);
+  }
+
   .ui-pagination .ui-button svg,
   .ui-pagination .ui-pagination-link svg {
     inline-size: var(--pagination-icon-size);
     block-size: var(--pagination-icon-size);
   }
 
+  .ui-pagination[data-align="start"] {
+    justify-content: flex-start;
+  }
+
+  .ui-pagination[data-align="center"] {
+    justify-content: center;
+  }
+
+  .ui-pagination[data-align="end"] {
+    justify-content: flex-end;
+  }
+
+  .ui-pagination[data-size="sm"] {
+    --control-height: var(--pagination-control-height-sm);
+  }
+
+  .ui-pagination-jumper {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--pagination-jumper-gap);
+  }
+
+  .ui-pagination-jumper-label {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--pagination-jumper-font-size);
+    white-space: nowrap;
+  }
+
+  .ui-pagination-jumper-input {
+    text-align: center;
+  }
+
   .ui-context-menu-content {
     z-index: var(--overlay-z-index);
     min-width: var(--menu-content-min-width);
@@ -485,16 +605,67 @@
     box-shadow: var(--shadow-md), var(--shadow-glow);
   }
 
+  .ui-dropdown-menu-content [role="menu"],
+  .ui-dropdown-menu-sub-content [role="menu"] {
+    outline: none;
+  }
+
   .ui-dropdown-menu-content {
     max-height: var(--radix-dropdown-menu-content-available-height);
     overflow-x: hidden;
     overflow-y: auto;
   }
 
+  .ui-dropdown-menu-content[data-width="auto"] {
+    --menu-content-min-width: 0;
+  }
+
+  .ui-dropdown-menu-content[data-width="trigger"] {
+    --menu-content-min-width: var(--trigger-width, var(--dropdown-content-min-width));
+  }
+
+  .ui-dropdown-menu-content[data-width="sm"] {
+    --menu-content-min-width: var(--menu-content-width-sm);
+  }
+
+  .ui-dropdown-menu-content[data-width="md"] {
+    --menu-content-min-width: var(--menu-content-width-md);
+  }
+
+  .ui-dropdown-menu-content[data-width="lg"] {
+    --menu-content-min-width: var(--menu-content-width-lg);
+  }
+
   .ui-dropdown-menu-sub-content {
     overflow: hidden;
   }
 
+  .ui-breadcrumb-separator {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+
+  .ui-breadcrumb-menu-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--breadcrumb-menu-trigger-gap);
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+
+  .ui-breadcrumb-menu-trigger:hover {
+    color: hsl(var(--foreground));
+  }
+
+  .ui-dropdown-menu-arrow {
+    inline-size: var(--dropdown-arrow-width);
+    block-size: var(--dropdown-arrow-height);
+    fill: hsl(var(--dropdown-arrow-background, var(--popover)));
+  }
+
   .ui-dropdown-menu-indicator-slot {
     pointer-events: none;
     position: absolute;
@@ -729,6 +900,57 @@
     background: hsl(var(--border));
   }
 
+  .ui-steps-progress {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-pill);
+    padding: var(--steps-progress-ring-width);
+    background: conic-gradient(
+      hsl(var(--primary)) calc(var(--steps-progress-ratio, 0) * 360deg),
+      hsl(var(--steps-progress-track-color, var(--muted))) 0
+    );
+  }
+
+  .ui-steps-list[data-type="navigation"] .ui-steps-item[data-direction="horizontal"] {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--steps-nav-space-gap);
+    text-align: start;
+  }
+
+  .ui-steps-list[data-type="navigation"] .ui-steps-control[data-direction="horizontal"] {
+    flex: 1 1 auto;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--steps-nav-space-gap);
+    padding-inline: var(--steps-nav-space-inline);
+    padding-block: var(--steps-nav-space-block);
+    border-radius: var(--steps-nav-radius);
+    background: hsl(var(--muted));
+  }
+
+  .ui-steps-list[data-type="navigation"]
+    .ui-steps-item[data-status="process"]
+    .ui-steps-control[data-direction="horizontal"] {
+    background: hsl(var(--accent));
+  }
+
+  .ui-steps-list[data-type="navigation"]
+    .ui-steps-item[data-direction="horizontal"]
+    .ui-steps-text {
+    margin-block-start: 0;
+    padding-inline: 0;
+    text-align: start;
+  }
+
+  .ui-steps-nav-separator {
+    flex: 0 0 auto;
+    inline-size: var(--steps-nav-separator-size);
+    block-size: var(--steps-nav-separator-size);
+    color: hsl(var(--muted-foreground));
+  }
+
   .ui-app-setting-picker-icon {
     inline-size: var(--control-height);
     justify-content: center;
@@ -738,6 +960,11 @@
     box-shadow: none;
   }
 
+  .ui-app-setting-picker-icon[data-appearance="bar"] {
+    border-width: var(--app-setting-picker-bar-border-width);
+    box-shadow: var(--app-setting-picker-bar-shadow);
+  }
+
   .ui-app-setting-picker-glyph {
     inline-size: var(--app-setting-picker-icon-size);
     block-size: var(--app-setting-picker-icon-size);