@godxjp/ui 20.0.0 → 20.2.0

package/dist/styles/navigation-layout.css

@@ -14,7 +14,7 @@
 
   [data-slot="auth-legal-footer"] .ui-app-setting-picker-inline {
     width: auto;
-    min-height: 0;
+    min-block-size: var(--auth-footer-target-min-size);
     height: auto;
     border-width: 0;
     border-radius: 0;
@@ -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,13 @@
     box-shadow: none;
   }
 
+  .ui-app-setting-picker-icon[data-appearance="bar"] {
+    min-inline-size: var(--topbar-item-min-width);
+    padding-inline: var(--topbar-item-padding-inline);
+    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);