@godxjp/ui 20.0.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 {
@@ -120,7 +265,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 {
@@ -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;
@@ -544,6 +721,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 +816,45 @@
     font-size: var(--font-size-base);
   }
 
+  .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-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,
     .app-root[data-collapsed="true"],
@@ -651,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;
     }
@@ -682,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"
@@ -693,25 +922,109 @@
         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;
     }
 
+    .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;
     }
@@ -778,9 +1091,10 @@
   }
 
   .ui-org-switcher-name,
+
   .ui-org-switcher-meta {
     overflow: hidden;
-    line-height: 1.25;
+    line-height: var(--line-height-normal);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -798,8 +1112,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 +1134,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 +1152,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 +1195,268 @@
     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);
+  }
+
+  [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;
+
+    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;
@@ -900,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;
   }
@@ -915,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;
@@ -1209,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;
   }
@@ -1218,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;
   }
@@ -1314,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;
@@ -1374,6 +1989,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);
@@ -1458,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;
@@ -1478,6 +2130,10 @@
     height: var(--topbar-icon-size);
   }
 
+  .tb-search .kbd {
+    margin-inline-start: auto;
+  }
+
   .kbd {
     display: inline-flex;
     align-items: center;
@@ -1531,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);
     }
 
@@ -1793,3 +2454,11 @@
     }
   }
 }
+
+@layer components {
+
+  .app-root[data-sidebar="none"]:not([data-nav-rail]) {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "topbar" "main" "footer";
+  }
+}