@godxjp/ui 20.0.0 → 20.1.0

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);

package/dist/styles/shell-layout.css

@@ -120,7 +120,7 @@
     background-image: var(--gradient-glow);
 
     contain: paint;
-    background-color: var(--app-shell-main-background);
+    background-color: var(--app-shell-main-background, var(--surface-recessed));
   }
 
   .app-main:focus-visible {
@@ -544,6 +544,12 @@
     gap: var(--space-3);
   }
 
+  .app-topbar-logo,
+  .app-topbar-logo > a {
+    display: flex;
+    align-items: center;
+  }
+
   .app-topbar-custom {
     display: flex;
     min-width: 0;
@@ -633,6 +639,14 @@
     font-size: var(--font-size-base);
   }
 
+  .app-root:where([data-sidebar="none"])[data-nav-rail] {
+    grid-template-columns: var(--app-shell-nav-rail-width) minmax(0, 1fr);
+    grid-template-areas: "navrail topbar" "navrail main" "navrail footer";
+  }
+  .app-root:where([data-sidebar="none"])[data-nav-rail][data-topbar-span="full"] {
+    grid-template-areas: "topbar topbar" "navrail main" "navrail footer";
+  }
+
   @media (width <= 56.25rem) {
     .app-root,
     .app-root[data-collapsed="true"],
@@ -712,6 +726,14 @@
       display: flex;
     }
 
+    .app-root[data-sidebar="none"][data-nav-rail][data-responsive-navigation="docked"] {
+      grid-template-columns: var(--app-shell-nav-rail-width) minmax(0, 1fr);
+      grid-template-areas: "navrail topbar" "navrail main" "navrail footer";
+    }
+    .app-root[data-sidebar="none"][data-nav-rail][data-responsive-navigation="docked"][data-topbar-span="full"] {
+      grid-template-areas: "topbar topbar" "navrail main" "navrail footer";
+    }
+
     .app-root[data-responsive-navigation="docked"] .app-mobile-nav-trigger {
       display: none;
     }
@@ -780,7 +802,8 @@
   .ui-org-switcher-name,
   .ui-org-switcher-meta {
     overflow: hidden;
-    line-height: 1.25;
+
+    line-height: var(--line-height-tight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -798,8 +821,8 @@
   .ui-org-switcher-chevron,
   .ui-org-switcher-check,
   .ui-org-switcher-spinner {
-    width: 1rem;
-    height: 1rem;
+    width: var(--icon-size-md);
+    height: var(--icon-size-md);
     flex: 0 0 auto;
   }
 
@@ -820,7 +843,17 @@
     --popover-space-inset: 0;
   }
 
-  .ui-org-switcher-sheet {
+  [data-slot="dialog-content"].ui-org-switcher-dialog {
+
+    --dialog-space-inset: var(--dialog-space-y) var(--org-switcher-sheet-inset);
+    --org-switcher-list-offset: var(--org-switcher-sheet-inset);
+    max-inline-size: var(--org-switcher-dialog-width);
+  }
+
+  [data-slot="sheet-content"].ui-org-switcher-sheet {
+    --sheet-pad-x: var(--org-switcher-sheet-inset);
+
+    --org-switcher-list-offset: var(--org-switcher-sheet-inset);
     max-height: var(--org-switcher-sheet-max-height);
     border-start-start-radius: var(--radius-lg);
     border-start-end-radius: var(--radius-lg);
@@ -828,6 +861,31 @@
 
   .ui-org-switcher-command {
     width: 100%;
+    padding-inline: calc(var(--org-switcher-list-inset) - var(--org-switcher-list-offset));
+  }
+
+  .ui-org-switcher-command .ui-command-group {
+    padding: 0;
+  }
+
+  .ui-org-switcher-command .ui-command-input-wrapper {
+
+    border: 1px solid hsl(var(--input));
+    border-radius: var(--control-radius);
+
+    margin-block: var(--org-switcher-search-space-block);
+    margin-inline: 0;
+    background: hsl(var(--background));
+  }
+
+  .ui-org-switcher-command .ui-command-item {
+    border-radius: 0;
+    margin-inline: 0;
+    padding-inline: var(--command-input-padding-x);
+  }
+
+  .ui-org-switcher-command .ui-command-item + .ui-command-item {
+    border-block-start: 1px solid hsl(var(--border));
   }
 
   .ui-org-switcher-state {
@@ -846,6 +904,130 @@
     animation: spin 1s linear infinite;
   }
 
+  .ui-app-launcher-popover {
+
+    --popover-surface-inline-size: min(
+      var(--app-launcher-panel-width),
+      calc(100vw - var(--space-4))
+    );
+    --popover-space-inset: var(--space-2);
+  }
+
+  .ui-app-launcher-sheet {
+    max-height: var(--app-launcher-sheet-max-height);
+    border-start-start-radius: var(--radius-lg);
+    border-start-end-radius: var(--radius-lg);
+  }
+
+  .ui-app-launcher-panel {
+
+    --app-launcher-columns: 3;
+
+    display: grid;
+    max-height: var(--app-launcher-panel-max-height);
+    gap: var(--app-launcher-panel-gap);
+    overflow-y: auto;
+  }
+
+  .ui-app-launcher-grid {
+    display: grid;
+
+    grid-template-columns: repeat(var(--app-launcher-columns), minmax(0, 1fr));
+    margin: 0;
+    padding: 0;
+    gap: var(--app-launcher-grid-gap);
+    list-style: none;
+  }
+
+  .ui-app-launcher-cell {
+    display: flex;
+  }
+
+  .ui-app-launcher-tile {
+    display: flex;
+    min-width: 0;
+    min-height: var(--app-launcher-tile-min-height);
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--app-launcher-tile-gap);
+    padding: var(--app-launcher-tile-padding);
+    border-radius: var(--app-launcher-tile-radius);
+    color: hsl(var(--app-launcher-tile-color));
+    text-align: center;
+    text-decoration: none;
+    transition:
+      background-color var(--duration-fast),
+      color var(--duration-fast);
+  }
+
+  .ui-app-launcher-tile:hover {
+    background: hsl(var(--app-launcher-tile-hover-background));
+    color: hsl(var(--app-launcher-tile-hover-color));
+  }
+
+  .ui-app-launcher-tile[aria-current="page"] {
+    background: var(--app-launcher-tile-current-background, hsl(var(--secondary)));
+  }
+
+  .ui-app-launcher-mark {
+    display: grid;
+    width: var(--app-launcher-mark-size);
+    height: var(--app-launcher-mark-size);
+    flex: 0 0 auto;
+    place-items: center;
+    overflow: hidden;
+    border-radius: var(--app-launcher-mark-radius);
+    background: hsl(var(--app-launcher-mark-background));
+    color: hsl(var(--app-launcher-mark-foreground));
+    font-size: var(--app-launcher-mark-font-size);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .ui-app-launcher-mark > * {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ui-app-launcher-name {
+    max-width: 100%;
+    font-size: var(--app-launcher-name-font-size);
+    line-height: var(--line-height-tight);
+    overflow-wrap: anywhere;
+  }
+
+  .ui-app-launcher-group {
+    display: grid;
+    gap: var(--app-launcher-grid-gap);
+  }
+
+  .ui-app-launcher-group-label {
+    padding-inline: var(--app-launcher-tile-padding);
+    color: hsl(var(--app-launcher-group-label-color));
+    font-size: var(--app-launcher-group-label-font-size);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-app-launcher-state {
+    display: flex;
+    min-height: var(--app-launcher-state-min-height);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-3);
+    padding: var(--space-5);
+    color: hsl(var(--muted-foreground));
+    text-align: center;
+  }
+
+  .ui-app-launcher-spinner {
+    width: var(--icon-size-md);
+    height: var(--icon-size-md);
+    flex: 0 0 auto;
+    animation: spin 1s linear infinite;
+  }
+
   .sb-product,
   .sb-brand {
     display: flex;
@@ -1374,6 +1556,40 @@
     cursor: not-allowed;
   }
 
+  .ui-topbar-item:has(> [data-slot="topbar-item-badge"]) {
+    position: relative;
+  }
+
+  .ui-topbar-item-badge {
+    position: absolute;
+
+    inset-block-start: calc(
+      50% - var(--topbar-icon-size) / 2 - var(--topbar-item-badge-offset-block)
+    );
+    inset-inline-end: calc(
+      50% - var(--topbar-icon-size) / 2 - var(--topbar-item-badge-offset-inline)
+    );
+    display: inline-flex;
+    min-inline-size: var(--topbar-item-badge-size);
+    block-size: var(--topbar-item-badge-size);
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--topbar-item-badge-padding-inline);
+    border-radius: var(--radius-pill);
+    background: var(--topbar-item-badge-background, hsl(var(--secondary)));
+    color: var(--topbar-item-badge-foreground, hsl(var(--muted-foreground)));
+    font-size: var(--topbar-item-badge-font-size);
+    font-weight: var(--font-weight-medium);
+    line-height: 1;
+
+    pointer-events: none;
+  }
+
+  .ui-topbar-item-badge[data-tone="destructive"] {
+    background: var(--topbar-item-badge-destructive-background, hsl(var(--destructive)));
+    color: var(--topbar-item-badge-destructive-foreground, hsl(var(--destructive-foreground)));
+  }
+
   .ui-topbar-item > svg {
     width: var(--topbar-icon-size);
     height: var(--topbar-icon-size);
@@ -1793,3 +2009,11 @@
     }
   }
 }
+
+@layer components {
+
+  .app-root[data-sidebar="none"]:not([data-nav-rail]) {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "topbar" "main" "footer";
+  }
+}