@godxjp/ui 19.6.0 → 20.1.0

package/dist/styles/shell-layout.css

@@ -17,7 +17,7 @@
   }
 
   .app-root[data-collapsed="true"] {
-    grid-template-columns: var(--app-shell-rail-width) minmax(0, 1fr);
+    grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
   }
 
   .app-root[data-topbar-span="full"] {
@@ -27,6 +27,31 @@
       "sidebar footer";
   }
 
+  .app-root[data-nav-rail] {
+    grid-template-areas:
+      "navrail sidebar topbar"
+      "navrail sidebar main"
+      "navrail sidebar footer";
+    grid-template-columns:
+      var(--app-shell-nav-rail-width)
+      var(--app-shell-sidebar-width)
+      minmax(0, 1fr);
+  }
+
+  .app-root[data-nav-rail][data-collapsed="true"] {
+    grid-template-columns:
+      var(--app-shell-nav-rail-width)
+      var(--app-shell-sidebar-collapsed-width)
+      minmax(0, 1fr);
+  }
+
+  .app-root[data-nav-rail][data-topbar-span="full"] {
+    grid-template-areas:
+      "topbar  topbar  topbar"
+      "navrail sidebar main"
+      "navrail sidebar footer";
+  }
+
   .app-root[data-topbar="none"] {
     grid-template-rows: auto minmax(0, 1fr) auto;
   }
@@ -53,6 +78,21 @@
     color: hsl(var(--foreground));
   }
 
+  .app-nav-rail {
+    grid-area: navrail;
+    display: flex;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex-direction: column;
+    align-items: center;
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
+    border-inline-end: 1px solid hsl(var(--border));
+    background: hsl(var(--muted));
+    color: hsl(var(--foreground));
+  }
+
   .app-topbar {
     grid-area: topbar;
     display: flex;
@@ -80,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 {
@@ -477,11 +517,45 @@
     }
   }
 
+  .app-sidebar-logo {
+    display: flex;
+    block-size: var(--app-shell-bar-height);
+    min-inline-size: 0;
+    align-items: center;
+    border-block-end: 1px solid hsl(var(--border));
+    padding-inline: var(--space-3);
+  }
+
+  .app-root[data-collapsed="true"] .app-sidebar-logo {
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  .app-root[data-collapsed="true"] .app-sidebar-logo [data-slot="logo-wordmark"] {
+    display: none;
+  }
+
   .app-topbar-rail {
     display: flex;
     min-width: 0;
     flex: 1;
     align-items: center;
+    align-self: stretch;
+    gap: var(--space-3);
+  }
+
+  .app-topbar-logo,
+  .app-topbar-logo > a {
+    display: flex;
+    align-items: center;
+  }
+
+  .app-topbar-custom {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    align-self: stretch;
     gap: var(--space-3);
   }
 
@@ -490,6 +564,7 @@
     display: flex;
     min-width: 0;
     align-items: center;
+    align-self: stretch;
     gap: var(--space-2);
   }
 
@@ -524,20 +599,60 @@
     overscroll-behavior: contain;
   }
 
+  .app-mobile-nav-columns {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    gap: var(--space-2);
+  }
+
+  .app-mobile-nav-rail {
+    display: flex;
+    min-height: 0;
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-inline-end: 1px solid hsl(var(--border));
+    inline-size: var(--app-shell-nav-rail-width);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .app-mobile-nav-sections {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
   .app-topbar-spacer {
     flex: 1;
   }
 
   .app-breadcrumb {
     border-bottom: 1px solid hsl(var(--border));
-    padding: var(--space-2) var(--space-4);
+
+    padding: var(--space-2) var(--space-page-active-x);
     color: hsl(var(--muted-foreground));
     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"] {
+    .app-root[data-collapsed="true"],
+    .app-root[data-nav-rail],
+    .app-root[data-nav-rail][data-collapsed="true"],
+    .app-root[data-nav-rail][data-topbar-span="full"] {
       grid-template-areas:
         "topbar"
         "main"
@@ -545,7 +660,8 @@
       grid-template-columns: minmax(0, 1fr);
     }
 
-    .app-sidebar {
+    .app-sidebar,
+    .app-nav-rail {
       display: none;
     }
 
@@ -570,7 +686,7 @@
     }
 
     .app-root[data-responsive-navigation="docked"][data-collapsed="true"] {
-      grid-template-columns: var(--app-shell-rail-width) minmax(0, 1fr);
+      grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
     }
 
     .app-root[data-responsive-navigation="docked"][data-topbar-span="full"] {
@@ -580,10 +696,44 @@
         "sidebar footer";
     }
 
-    .app-root[data-responsive-navigation="docked"] > .app-sidebar {
+    .app-root[data-responsive-navigation="docked"][data-nav-rail] {
+      grid-template-areas:
+        "navrail sidebar topbar"
+        "navrail sidebar main"
+        "navrail sidebar footer";
+      grid-template-columns:
+        var(--app-shell-nav-rail-width)
+        var(--app-shell-sidebar-width)
+        minmax(0, 1fr);
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-collapsed="true"] {
+      grid-template-columns:
+        var(--app-shell-nav-rail-width)
+        var(--app-shell-sidebar-collapsed-width)
+        minmax(0, 1fr);
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-topbar-span="full"] {
+      grid-template-areas:
+        "topbar  topbar  topbar"
+        "navrail sidebar main"
+        "navrail sidebar footer";
+    }
+
+    .app-root[data-responsive-navigation="docked"] > .app-sidebar,
+    .app-root[data-responsive-navigation="docked"] > .app-nav-rail {
       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;
     }
@@ -652,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;
   }
@@ -670,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;
   }
 
@@ -685,11 +836,24 @@
   }
 
   .ui-org-switcher-popover {
-    width: min(var(--org-switcher-menu-width), calc(100vw - var(--space-4)));
-    padding: 0;
+    --popover-surface-inline-size: min(
+      var(--org-switcher-menu-width),
+      calc(100vw - var(--space-4))
+    );
+    --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);
@@ -697,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 {
@@ -715,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;
@@ -1170,6 +1483,7 @@
 
   @supports not (overflow-clip-margin: 1px) {
     .app-sidebar,
+    .app-nav-rail,
     .app-topbar,
     .ui-topbar,
     .ui-topbar-start,
@@ -1242,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);
@@ -1661,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";
+  }
+}

package/dist/styles/table-layout.css

@@ -22,7 +22,8 @@
     vertical-align: middle;
     background: var(--table-header-background, hsl(var(--muted)));
     font-size: var(--table-head-font-size);
-    font-weight: var(--font-weight-medium);
+
+    font-weight: var(--table-head-font-weight);
     color: var(--table-header-foreground, hsl(var(--muted-foreground)));
     white-space: nowrap;
   }
@@ -46,6 +47,27 @@
     padding-inline-end: 0;
   }
 
+  :is([data-slot="table-head"], [data-slot="table-cell"])[data-numeric] {
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+
+  :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="start"] {
+    text-align: start;
+  }
+
+  :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="center"] {
+    text-align: center;
+  }
+
+  :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="end"] {
+    text-align: end;
+  }
+
+  :is([data-slot="table-head"], [data-slot="table-cell"])[data-wrap] {
+    white-space: normal;
+  }
+
   [data-slot="table-cell"][data-indent] {
     padding-inline-start: calc(
       var(--table-cell-space-x) + var(--table-cell-indent-level, 0) *
@@ -241,34 +263,100 @@
 
   .ui-data-table-pin-end {
     position: sticky;
-    inset-inline-end: 0;
+
+    inset-inline-end: calc(var(--table-fixed-offset, 0) * 1px);
     z-index: 2;
     background-color: hsl(var(--background));
     box-shadow: var(--table-pin-shadow);
   }
 
-  th.ui-data-table-pin-end {
+  .ui-data-table-pin-start {
+    position: sticky;
+    inset-inline-start: calc(var(--table-fixed-offset, 0) * 1px);
+    z-index: 2;
+    background-color: hsl(var(--background));
+    box-shadow: var(--table-fixed-shadow-start);
+  }
+
+  th.ui-data-table-pin-end,
+  th.ui-data-table-pin-start {
     background-color: hsl(var(--secondary));
   }
 
+  [dir="rtl"] .ui-data-table-pin-start {
+    box-shadow: var(--table-fixed-shadow-start-rtl);
+  }
+
   [dir="rtl"] .ui-data-table-pin-end {
     box-shadow: 6px 0 6px -5px hsl(var(--foreground) / 0.12);
   }
 
-  .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end {
+  .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end,
+  .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-start {
     background-image: linear-gradient(
       var(--table-row-hover-background, hsl(var(--muted) / 0.5)),
       var(--table-row-hover-background, hsl(var(--muted) / 0.5))
     );
   }
 
-  .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end {
+  .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end,
+  .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-start {
     background-image: linear-gradient(
       var(--table-row-selected-background, hsl(var(--muted) / 0.3)),
       var(--table-row-selected-background, hsl(var(--muted) / 0.3))
     );
   }
 
+  .ui-data-table-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-data-table-surface[data-table-layout="fixed"] [data-slot="table"] {
+    table-layout: fixed;
+  }
+
+  .ui-data-table-scroll[data-scroll-y] {
+    overflow-y: auto;
+    max-block-size: var(--table-scroll-block-size, none);
+  }
+
+  .ui-data-table-scroll[data-scroll-x] :is(.ui-data-table-surface, [data-slot="table"]) {
+    min-inline-size: var(--table-scroll-inline-size, auto);
+  }
+
+  .ui-data-table-expand-column {
+    inline-size: var(--table-expand-column-width);
+  }
+
+  .ui-data-table-expanded-row > [data-slot="table-cell"] {
+    background-color: var(--table-row-expanded-background, hsl(var(--muted) / 0.3));
+  }
+
+  .ui-data-table-summary {
+    background-color: var(--table-summary-background, hsl(var(--muted)));
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-data-table-summary > tr > [data-slot="table-cell"] {
+    border-block-start: var(--table-summary-border-width) solid hsl(var(--border));
+  }
+
+  .ui-data-table-filter-trigger[data-filtered] {
+    color: hsl(var(--primary));
+  }
+
+  .ui-data-table-selection-menu {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--table-selection-menu-gap);
+  }
+
+  .ui-data-table-surface .ui-table-bordered {
+    border-width: 0;
+  }
+
   .ui-table-bordered {
     border: 1px solid var(--table-border-color, hsl(var(--border)));
   }
@@ -354,7 +442,8 @@
 
   .ui-data-table-sticky-header {
     position: sticky;
-    inset-block-start: 0;
+
+    inset-block-start: var(--table-sticky-offset, 0);
     z-index: 10;
   }
 

package/dist/styles/text-layout.css

@@ -62,21 +62,22 @@
   [data-slot="heading"][data-tone="primary"] {
     color: hsl(var(--primary));
   }
+
   [data-slot="text"][data-tone="success"],
   [data-slot="heading"][data-tone="success"] {
-    color: hsl(var(--success));
+    color: hsl(var(--text-success));
   }
   [data-slot="text"][data-tone="warning"],
   [data-slot="heading"][data-tone="warning"] {
-    color: hsl(var(--warning));
+    color: hsl(var(--text-warning));
   }
   [data-slot="text"][data-tone="destructive"],
   [data-slot="heading"][data-tone="destructive"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
   [data-slot="text"][data-tone="info"],
   [data-slot="heading"][data-tone="info"] {
-    color: hsl(var(--info));
+    color: hsl(var(--text-info));
   }
 
   [data-slot="text"][data-align="start"],
@@ -99,6 +100,11 @@
     min-width: 0;
   }
 
+  [data-slot="text"][data-whitespace="pre-wrap"] {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
   [data-slot="text"][data-clamp] {
     display: -webkit-box;
     -webkit-box-orient: vertical;