@godxjp/ui 20.1.0 → 20.2.0

package/dist/styles/shell-layout.css

@@ -27,7 +27,7 @@
       "sidebar footer";
   }
 
-  .app-root[data-nav-rail] {
+  .app-root[data-nav-rail][data-nav-rail-position="start"] {
     grid-template-areas:
       "navrail sidebar topbar"
       "navrail sidebar main"
@@ -38,18 +38,94 @@
       minmax(0, 1fr);
   }
 
-  .app-root[data-nav-rail][data-collapsed="true"] {
+  .app-root[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
+    grid-template-areas:
+      "topbar  topbar  topbar"
+      "navrail sidebar main"
+      "navrail sidebar footer";
+  }
+
+  .app-root[data-nav-rail][data-nav-rail-position="end"] {
+    grid-template-areas:
+      "sidebar topbar  navrail"
+      "sidebar main    navrail"
+      "sidebar footer  navrail";
+    grid-template-columns:
+      var(--app-shell-sidebar-width)
+      minmax(0, 1fr)
+      var(--app-shell-nav-rail-width);
+  }
+
+  .app-root[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
+    grid-template-areas:
+      "topbar  topbar  topbar"
+      "sidebar main    navrail"
+      "sidebar footer  navrail";
+  }
+
+  .app-root[data-nav-rail][data-nav-rail-position="top"] {
+    grid-template-areas:
+      "navrail navrail"
+      "sidebar topbar"
+      "sidebar main"
+      "sidebar footer";
+    grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
+    grid-template-rows:
+      var(--app-shell-nav-rail-height)
+      var(--app-shell-bar-height)
+      minmax(0, 1fr)
+      auto;
+  }
+
+  .app-root[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
+    grid-template-areas:
+      "navrail navrail"
+      "topbar  topbar"
+      "sidebar main"
+      "sidebar footer";
+  }
+
+  .app-root[data-nav-rail][data-nav-rail-position="bottom"] {
+    grid-template-areas:
+      "sidebar topbar"
+      "sidebar main"
+      "sidebar footer"
+      "navrail navrail";
+    grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
+    grid-template-rows:
+      var(--app-shell-bar-height)
+      minmax(0, 1fr)
+      auto
+      var(--app-shell-nav-rail-height);
+  }
+
+  .app-root[data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
+    grid-template-areas:
+      "topbar  topbar"
+      "sidebar main"
+      "sidebar footer"
+      "navrail navrail";
+  }
+
+  .app-root[data-nav-rail][data-nav-rail-position="start"][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-nav-rail][data-nav-rail-position="end"][data-collapsed="true"] {
+    grid-template-columns:
+      var(--app-shell-sidebar-collapsed-width)
+      minmax(0, 1fr)
+      var(--app-shell-nav-rail-width);
+  }
+
+  .app-root[data-nav-rail]:is(
+      [data-nav-rail-position="top"],
+      [data-nav-rail-position="bottom"]
+    )[data-collapsed="true"] {
+    grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
   }
 
   .app-root[data-topbar="none"] {
@@ -91,6 +167,75 @@
     border-inline-end: 1px solid hsl(var(--border));
     background: hsl(var(--muted));
     color: hsl(var(--foreground));
+    padding-block: var(--app-shell-nav-rail-inset);
+  }
+
+  .app-nav-rail > .app-nav-rail-end,
+  .app-mobile-nav-rail > .app-nav-rail-end {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-1);
+    margin-block-start: auto;
+  }
+
+  .app-nav-rail[data-orientation="horizontal"] > .app-nav-rail-end {
+    flex-direction: row;
+    margin-block-start: 0;
+    margin-inline-start: auto;
+  }
+
+  .app-nav-rail,
+  .app-mobile-nav-rail {
+    --org-switcher-trigger-height: var(--app-shell-nav-rail-item-size);
+
+    --control-height-sm: var(--app-shell-nav-rail-item-size);
+  }
+
+  .app-nav-rail[data-edge="end"] {
+    border-inline-start: 1px solid hsl(var(--border));
+    border-inline-end: 0;
+  }
+
+  .app-nav-rail[data-orientation="horizontal"] {
+    flex-direction: row;
+    width: 100%;
+    height: auto;
+    border-inline-end: 0;
+    padding-block: 0;
+    padding-inline: var(--app-shell-nav-rail-inset);
+  }
+
+  .app-nav-rail[data-orientation="horizontal"] > .ui-org-switcher {
+    inline-size: auto;
+  }
+
+  .app-nav-rail[data-edge="top"] {
+    border-block-end: 1px solid hsl(var(--border));
+  }
+
+  .app-nav-rail[data-edge="bottom"] {
+    border-block-start: 1px solid hsl(var(--border));
+  }
+
+  .app-root:not([data-topbar-span="full"]):is(
+      [data-nav-rail-position="start"],
+      [data-nav-rail-position="end"]
+    )
+    > .app-nav-rail {
+    padding-block-start: 0;
+  }
+
+  .app-root:not([data-topbar-span="full"]):is(
+      [data-nav-rail-position="start"],
+      [data-nav-rail-position="end"]
+    )
+    > .app-nav-rail
+    > :first-child {
+    min-block-size: var(--app-shell-bar-height);
+
+    align-items: center;
   }
 
   .app-topbar {
@@ -275,11 +420,37 @@
     --auth-shell-card-stack-gap: var(--auth-shell-registration-card-stack-gap);
   }
 
+  .ui-auth-shell[data-preset="registration"] .ui-auth-shell-card {
+    margin-block: auto;
+  }
+
   .ui-auth-shell[data-preset="registration"] .ui-auth-shell-card > .ui-auth-identity {
     block-size: var(--auth-shell-registration-identity-slot-block-size);
     justify-content: flex-end;
   }
 
+  .ui-auth-shell[data-align="center"] {
+    --auth-shell-main-align: center;
+  }
+
+  .ui-auth-shell[data-align="anchored"] {
+    --auth-shell-main-align: flex-start;
+  }
+
+  .ui-auth-shell[data-preset="login"][data-align="center"] {
+    --auth-shell-login-flow-offset-block: var(--auth-shell-login-main-padding-block-end);
+    --auth-shell-login-flow-offset-block-mobile: var(--auth-shell-login-main-padding-block-end);
+  }
+
+  .ui-auth-shell[data-preset="registration"][data-align="center"] {
+    --auth-shell-registration-main-padding-block-start: var(
+      --auth-shell-registration-main-padding-block-end
+    );
+    --auth-shell-registration-main-padding-block-start-mobile: var(
+      --auth-shell-registration-main-padding-block-end-mobile
+    );
+  }
+
   .ui-auth-identity {
     display: flex;
     flex-direction: column;
@@ -372,6 +543,12 @@
     gap: var(--auth-footer-content-gap);
   }
 
+  .ui-auth-legal-footer :is(a, button) {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: var(--auth-footer-target-min-size);
+  }
+
   .ui-auth-stack {
     display: flex;
     flex-direction: column;
@@ -639,13 +816,44 @@
     font-size: var(--font-size-base);
   }
 
-  .app-root:where([data-sidebar="none"])[data-nav-rail] {
+  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="start"] {
     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"] {
+  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
     grid-template-areas: "topbar topbar" "navrail main" "navrail footer";
   }
+  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="end"] {
+    grid-template-columns: minmax(0, 1fr) var(--app-shell-nav-rail-width);
+    grid-template-areas: "topbar navrail" "main navrail" "footer navrail";
+  }
+  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
+    grid-template-areas: "topbar topbar" "main navrail" "footer navrail";
+  }
+
+  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="top"] {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "navrail" "topbar" "main" "footer";
+    grid-template-rows:
+      var(--app-shell-nav-rail-height)
+      var(--app-shell-bar-height)
+      minmax(0, 1fr)
+      auto;
+  }
+  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
+    grid-template-areas: "navrail" "topbar" "main" "footer";
+  }
+  .app-root:where([data-sidebar="none"])[data-nav-rail]:is(
+      [data-nav-rail-position="bottom"]
+    ) {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "topbar" "main" "footer" "navrail";
+    grid-template-rows:
+      var(--app-shell-bar-height)
+      minmax(0, 1fr)
+      auto
+      var(--app-shell-nav-rail-height);
+  }
 
   @media (width <= 56.25rem) {
     .app-root,
@@ -665,6 +873,13 @@
       display: none;
     }
 
+    .app-root[data-nav-rail]:is(
+        [data-nav-rail-position="top"],
+        [data-nav-rail-position="bottom"]
+      ) {
+      grid-template-rows: var(--app-shell-bar-height) minmax(0, 1fr) auto;
+    }
+
     .app-root[data-topbar="none"] > .app-topbar {
       display: flex;
     }
@@ -696,7 +911,7 @@
         "sidebar footer";
     }
 
-    .app-root[data-responsive-navigation="docked"][data-nav-rail] {
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="start"] {
       grid-template-areas:
         "navrail sidebar topbar"
         "navrail sidebar main"
@@ -707,20 +922,96 @@
         minmax(0, 1fr);
     }
 
-    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-collapsed="true"] {
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="start"][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"] {
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
       grid-template-areas:
         "topbar  topbar  topbar"
         "navrail sidebar main"
         "navrail sidebar footer";
     }
 
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="end"] {
+      grid-template-areas:
+        "sidebar topbar  navrail"
+        "sidebar main    navrail"
+        "sidebar footer  navrail";
+      grid-template-columns:
+        var(--app-shell-sidebar-width)
+        minmax(0, 1fr)
+        var(--app-shell-nav-rail-width);
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="end"][data-collapsed="true"] {
+      grid-template-columns:
+        var(--app-shell-sidebar-collapsed-width)
+        minmax(0, 1fr)
+        var(--app-shell-nav-rail-width);
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
+      grid-template-areas:
+        "topbar  topbar  topbar"
+        "sidebar main    navrail"
+        "sidebar footer  navrail";
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="top"] {
+      grid-template-areas:
+        "navrail navrail"
+        "sidebar topbar"
+        "sidebar main"
+        "sidebar footer";
+      grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
+      grid-template-rows:
+        var(--app-shell-nav-rail-height)
+        var(--app-shell-bar-height)
+        minmax(0, 1fr)
+        auto;
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
+      grid-template-areas:
+        "navrail navrail"
+        "topbar  topbar"
+        "sidebar main"
+        "sidebar footer";
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="bottom"] {
+      grid-template-areas:
+        "sidebar topbar"
+        "sidebar main"
+        "sidebar footer"
+        "navrail navrail";
+      grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
+      grid-template-rows:
+        var(--app-shell-bar-height)
+        minmax(0, 1fr)
+        auto
+        var(--app-shell-nav-rail-height);
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-nav-rail]:is(
+        [data-nav-rail-position="top"],
+        [data-nav-rail-position="bottom"]
+      )[data-collapsed="true"] {
+      grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
+      grid-template-areas:
+        "topbar  topbar"
+        "sidebar main"
+        "sidebar footer"
+        "navrail navrail";
+    }
+
     .app-root[data-responsive-navigation="docked"] > .app-sidebar,
     .app-root[data-responsive-navigation="docked"] > .app-nav-rail {
       display: flex;
@@ -800,10 +1091,10 @@
   }
 
   .ui-org-switcher-name,
+
   .ui-org-switcher-meta {
     overflow: hidden;
-
-    line-height: var(--line-height-tight);
+    line-height: var(--line-height-normal);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -919,6 +1210,144 @@
     border-start-end-radius: var(--radius-lg);
   }
 
+  [data-slot="dialog-overlay"].ui-app-launcher-launchpad-overlay {
+
+    container: app-launcher-launchpad / inline-size;
+
+    background-color: var(
+      --app-launcher-launchpad-backdrop-background,
+      color-mix(
+        in srgb,
+        var(--overlay-background) var(--app-launcher-launchpad-backdrop-alpha),
+        transparent
+      )
+    );
+    backdrop-filter: blur(var(--app-launcher-launchpad-backdrop-blur-size));
+
+    display: grid;
+    place-items: center;
+  }
+
+  [data-slot="dialog-content"].ui-app-launcher-launchpad {
+    position: relative;
+    inset: auto;
+    display: grid;
+    width: auto;
+    max-width: min(
+      var(--app-launcher-launchpad-panel-max-width),
+      calc(100vw - 2 * var(--app-launcher-launchpad-space-inset))
+    );
+    max-height: calc(100dvh - 2 * var(--app-launcher-launchpad-space-inset));
+    justify-items: center;
+    transform: none;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    padding: var(--app-launcher-launchpad-space-inset);
+    overflow: auto;
+    box-shadow: none;
+  }
+
+  .ui-app-launcher-launchpad .ui-app-launcher-panel {
+    --app-launcher-columns: 3;
+
+    max-height: none;
+    gap: var(--app-launcher-launchpad-panel-gap);
+    overflow: visible;
+  }
+
+  @container app-launcher-launchpad (min-width: 40rem) {
+    .ui-app-launcher-launchpad .ui-app-launcher-panel {
+      --app-launcher-columns: 4;
+    }
+  }
+
+  @container app-launcher-launchpad (min-width: 48rem) {
+    .ui-app-launcher-launchpad .ui-app-launcher-panel {
+      --app-launcher-columns: 5;
+    }
+  }
+
+  @container app-launcher-launchpad (min-width: 64rem) {
+    .ui-app-launcher-launchpad .ui-app-launcher-panel {
+      --app-launcher-columns: 6;
+    }
+  }
+
+  .ui-app-launcher-launchpad .ui-app-launcher-grid {
+    grid-template-columns: repeat(
+      auto-fit,
+      var(--app-launcher-launchpad-tile-inline-size)
+    );
+    max-width: calc(
+      var(--app-launcher-columns) *
+        (
+          var(--app-launcher-launchpad-tile-inline-size) +
+            var(--app-launcher-launchpad-grid-gap)
+        ) - var(--app-launcher-launchpad-grid-gap)
+    );
+    justify-content: center;
+    justify-self: center;
+    gap: var(--app-launcher-launchpad-grid-gap);
+  }
+
+  .ui-app-launcher-launchpad .ui-app-launcher-tile {
+    justify-content: flex-start;
+    gap: var(--app-launcher-launchpad-tile-gap);
+    padding: var(--app-launcher-launchpad-tile-padding);
+    border-radius: var(--app-launcher-launchpad-tile-radius);
+  }
+
+  .ui-app-launcher-launchpad .ui-app-launcher-tile:hover,
+  .ui-app-launcher-launchpad .ui-app-launcher-tile[aria-current="page"] {
+    background: var(--app-launcher-launchpad-tile-hover-background);
+    color: hsl(var(--app-launcher-tile-color));
+  }
+
+  .ui-app-launcher-launchpad .ui-app-launcher-mark {
+    width: var(--app-launcher-launchpad-mark-size);
+    height: var(--app-launcher-launchpad-mark-size);
+    border: 1px solid var(--app-launcher-launchpad-mark-border-color);
+    border-radius: var(--app-launcher-launchpad-mark-radius);
+    background: var(--app-launcher-launchpad-mark-background);
+    box-shadow: var(--app-launcher-launchpad-mark-shadow);
+    color: hsl(var(--foreground));
+    font-size: var(--app-launcher-launchpad-mark-font-size);
+    backdrop-filter: blur(var(--app-launcher-launchpad-backdrop-blur-size));
+  }
+
+  .ui-app-launcher-launchpad .ui-app-launcher-group {
+    justify-items: center;
+  }
+
+  .ui-app-launcher-launchpad .ui-app-launcher-group-label {
+    text-align: center;
+  }
+
+  .ui-app-launcher-launchpad .ui-app-launcher-name {
+    font-size: var(--app-launcher-launchpad-name-font-size);
+  }
+
+  .ui-app-launcher-launchpad [data-slot="dialog-header"] {
+    align-items: center;
+  }
+
+  .ui-app-launcher-launchpad [data-slot="dialog-close"] {
+    position: fixed;
+
+    padding: var(--app-launcher-launchpad-close-space-padding);
+    inset-block-start: var(--app-launcher-launchpad-space-inset);
+    inset-inline-end: var(--app-launcher-launchpad-space-inset);
+  }
+
+  .ui-app-launcher-launchpad [data-slot="dialog-title"] {
+    color: hsl(var(--foreground));
+    font-size: var(--app-launcher-launchpad-title-font-size);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--app-launcher-launchpad-title-letter-spacing);
+    text-transform: uppercase;
+  }
+
   .ui-app-launcher-panel {
 
     --app-launcher-columns: 3;
@@ -1082,7 +1511,8 @@
     overflow: hidden;
     font-size: var(--font-size-base);
     font-weight: 700;
-    line-height: 1.2;
+
+    line-height: var(--line-height-normal);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -1097,7 +1527,8 @@
     font-size: var(--sidebar-product-tenant-font-size);
     font-weight: 700;
     letter-spacing: 0.08em;
-    line-height: 1.2;
+
+    line-height: var(--line-height-normal);
     text-overflow: ellipsis;
     text-transform: uppercase;
     white-space: nowrap;
@@ -1391,7 +1822,8 @@
     overflow: hidden;
     font-size: var(--sidebar-user-name-font-size);
     font-weight: 500;
-    line-height: 1.3;
+
+    line-height: var(--line-height-normal);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -1400,7 +1832,8 @@
     overflow: hidden;
     color: hsl(var(--muted-foreground));
     font-size: var(--sidebar-user-role-font-size);
-    line-height: 1.3;
+
+    line-height: var(--line-height-normal);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -1496,7 +1929,7 @@
     flex: 0 1 auto;
   }
 
-  .ui-topbar-start > :last-child {
+  .ui-topbar-start > :last-child:not(:is(button, a, [role="button"], .ui-button)) {
     max-width: 100%;
     min-width: 0;
     flex: 0 1 auto;
@@ -1674,6 +2107,9 @@
     display: flex;
 
     width: 100%;
+
+    flex: 0 1 var(--topbar-search-width);
+    min-inline-size: 0;
     max-width: var(--topbar-search-max-width);
     height: var(--control-height-sm);
     align-items: center;
@@ -1694,6 +2130,10 @@
     height: var(--topbar-icon-size);
   }
 
+  .tb-search .kbd {
+    margin-inline-start: auto;
+  }
+
   .kbd {
     display: inline-flex;
     align-items: center;
@@ -1747,12 +2187,17 @@
 
   @media (max-width: 768px) {
     .tb-chip-sep,
-    .tb-search .kbd {
+    .tb-search .kbd,
+
+    .tb-search .tb-search-label {
       display: none;
     }
 
     .tb-search {
       width: auto;
+
+      flex: 0 0 auto;
+      min-inline-size: var(--control-height);
       min-width: var(--control-height);
     }
 

package/dist/tokens/components/control.css

@@ -345,7 +345,8 @@
   --button-count-secondary-color: initial;
 
   --control-label-font-size: var(--font-size-sm);
-  --control-label-line-height: 1;
+
+  --control-label-line-height: var(--line-height-normal);
 
   --control-label-space-gap: 0.5rem;