@askrjs/themes 0.0.8 → 0.0.10

package/src/themes/default/styles/shell/navbar.css

@@ -1,519 +1,292 @@
-@layer components {
-  :where(.navbar, [data-slot="navbar"]) {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
-    gap: var(--ak-space-md);
-    inline-size: 100%;
-    max-inline-size: 100%;
-    min-inline-size: 0;
-    min-block-size: var(--ak-layout-navbar-height);
-    overflow: hidden;
-    padding-block: var(--ak-space-xs);
-  }
-
-  :where(.navbar-shell, [data-slot="navbar-shell"]) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--ak-space-sm) var(--ak-space-md);
-    inline-size: 100%;
-    min-inline-size: 0;
-    flex-wrap: wrap;
-    overflow: hidden;
-  }
+:where([data-slot="navbar"]) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--ak-space-md);
+  color: var(--ak-color-text);
+  min-block-size: var(--ak-layout-navbar-height);
+}
 
-  :where(.navbar-brand, [data-slot="navbar-brand"]) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ak-space-sm);
-    max-inline-size: 100%;
-    min-inline-size: 0;
-    flex: 0 1 auto;
-    overflow: hidden;
-  }
+:where([data-slot="navbar-content"]) {
+  flex-wrap: wrap;
+  min-inline-size: 0;
+  justify-content: flex-end;
+}
 
-  :where(.navbar-brand, [data-slot="navbar-brand"]) :where(a) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ak-space-sm);
-    max-inline-size: 100%;
-    min-block-size: var(--ak-density-control-height-md);
-    min-inline-size: 0;
-    padding-inline: var(--ak-density-control-padding-x-sm);
-    border-radius: var(--ak-radius-md);
-    line-height: var(--ak-line-height-tight);
-    overflow: hidden;
-    overflow-wrap: anywhere;
-    color: inherit;
-    font-weight: var(--ak-font-weight-semibold);
-    text-decoration: none;
-    transition:
-      color var(--ak-duration-fast) var(--ak-ease-standard),
-      background var(--ak-duration-fast) var(--ak-ease-standard),
-      box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
-  }
+:where([data-slot="navbar"] [data-slot="nav-group"]) {
+  flex: 0 1 auto;
+  align-items: stretch;
+}
 
-  :where(.navbar-brand, [data-slot="navbar-brand"]) :where(a:hover) {
-    background: color-mix(in srgb, var(--ak-color-surface-muted) 76%, transparent);
-  }
+:where([data-slot="navbar"] > [data-slot="nav-group"]:not([data-align="end"])) {
+  grid-column: 2;
+  justify-self: center;
+}
 
-  :where(.navbar-brand, [data-slot="navbar-brand"]) :where(a:focus-visible) {
-    outline: none;
-    box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
-  }
+:where([data-slot="navbar"] [data-slot="nav-group-body"]) {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ak-space-xs);
+}
 
-  :where(.navbar-brand, [data-slot="navbar-brand"]) :where(a > :not([data-slot="icon"]):not(svg)) {
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+:where([data-slot="navbar"] [data-slot="nav-group"][data-align="end"]) {
+  grid-column: 3;
+  justify-self: end;
+  margin-inline-start: auto;
+}
 
-  :where(.navbar-group, [data-slot="navbar-group"]) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ak-space-md);
-    flex-wrap: wrap;
-    min-inline-size: 0;
-    max-inline-size: 100%;
-  }
+:where([data-slot="navbar-collapse"]) {
+  display: contents;
+}
 
-  :where(.navbar-group[data-has-label="true"], [data-slot="navbar-group"][data-has-label="true"]) {
-    display: grid;
-    gap: var(--ak-space-xs);
-  }
+:where([data-slot="nav-brand"]) {
+  grid-column: 1;
+  justify-self: start;
+  color: var(--ak-color-text);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: var(--ak-line-height-tight);
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-decoration: none;
+}
 
-  :where(.navbar-group-body, [data-slot="navbar-group-body"]) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ak-space-xs);
-    flex-wrap: wrap;
-    min-inline-size: 0;
-  }
+:where([data-slot="nav-brand"] [href]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-block-size: var(--ak-density-control-height-md);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow: hidden;
+  color: inherit;
+  font-weight: var(--ak-font-weight-semibold);
+  text-decoration: none;
+}
 
-  :where(.navbar-group-label, [data-slot="navbar-group-label"]) {
-    color: var(--ak-color-text-muted);
-    font-size: var(--ak-font-size-xs);
-    font-weight: var(--ak-font-weight-semibold);
-    letter-spacing: 0.08em;
-    line-height: var(--ak-line-height-tight);
-    overflow: hidden;
-    padding-inline: var(--ak-space-sm);
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-    white-space: nowrap;
-  }
+:where([data-slot="nav-brand"] [href] > [aria-hidden="true"]) {
+  flex: 0 0 auto;
+}
 
-  :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
-    justify-content: center;
-    margin-inline: auto;
-  }
+:where([data-slot="nav-brand"] [href] > [data-nav-brand-label]) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"])
-    > :where(.navbar-group-body, [data-slot="navbar-group-body"]) {
-    justify-content: center;
-  }
+:where([data-slot="nav-brand"] [href]:hover) {
+  color: inherit;
+  text-decoration: none;
+}
 
-  :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
-    margin-inline-start: auto;
-    justify-content: flex-end;
-  }
+:where([data-slot="navbar-toggle"]) {
+  display: none;
+  grid-column: 3;
+  justify-self: end;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-block-size: var(--ak-density-control-height-md);
+  min-inline-size: 0;
+  margin-inline-start: auto;
+  padding-inline: var(--ak-density-control-padding-x-sm);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 78%, var(--ak-color-surface) 22%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  font: inherit;
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-medium);
+  cursor: pointer;
+  transition:
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+}
 
-  :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"])
-    > :where(.navbar-group-body, [data-slot="navbar-group-body"]) {
-    justify-content: flex-end;
-  }
+:where([data-slot="navbar-toggle"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  color: var(--ak-color-text);
+}
 
-  :where(.navbar-shell, [data-slot="navbar-shell"]):has(
-    > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"])
-  ) {
-    justify-content: flex-start;
-  }
+:where([data-slot="navbar-toggle"]:focus-visible) {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}
 
-  :where(.navbar-shell, [data-slot="navbar-shell"]):has(
-      > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"])
-    )
-    > :where(.navbar-brand, [data-slot="navbar-brand"]) {
-    flex: 1 1 auto;
-  }
+:where([data-slot="navbar-toggle"]::-webkit-details-marker) {
+  display: none;
+}
 
-  :where(.navbar-shell, [data-slot="navbar-shell"]):has(
-      > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"])
-    )
-    > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
-    max-inline-size: 100%;
-    min-inline-size: 0;
-  }
+:where([data-slot="navbar"][data-collapse-at]) {
+  flex-wrap: wrap;
+}
 
-  :where(.navbar-shell, [data-slot="navbar-shell"]):has(
-      > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"])
-    )
-    > :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
-    margin-inline-start: 0;
-    max-inline-size: 100%;
-    min-inline-size: 0;
-  }
+:where([data-slot="navbar"][data-collapse-at]) :where([data-slot="navbar-content"]) {
+  display: none;
+  grid-column: 1 / -1;
+  flex-basis: 100%;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--ak-space-xs);
+  width: 100%;
+  padding-block-start: var(--ak-space-sm);
+}
 
-  @media (min-width: 48rem) {
-    :where(.navbar-shell, [data-slot="navbar-shell"]):has(
-      > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"])
-    ) {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-      align-items: center;
-      column-gap: var(--ak-space-md);
-      overflow: hidden;
-    }
-
-    :where(.navbar-shell, [data-slot="navbar-shell"]):has(
-        > :where(
-          .navbar-group[data-align="center"],
-          [data-slot="navbar-group"][data-align="center"]
-        )
-      )
-      > :where(.navbar-brand, [data-slot="navbar-brand"]) {
-      grid-column: 1;
-      justify-self: start;
-    }
-
-    :where(.navbar-shell, [data-slot="navbar-shell"]):has(
-        > :where(
-          .navbar-group[data-align="center"],
-          [data-slot="navbar-group"][data-align="center"]
-        )
-      )
-      > :where(
-        .navbar-group[data-align="center"],
-        [data-slot="navbar-group"][data-align="center"]
-      ) {
-      grid-column: 2;
-      justify-self: center;
-      margin-inline: 0;
-    }
-
-    :where(.navbar-shell, [data-slot="navbar-shell"]):has(
-        > :where(
-          .navbar-group[data-align="center"],
-          [data-slot="navbar-group"][data-align="center"]
-        )
-      )
-      > :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
-      grid-column: 3;
-      justify-self: end;
-      margin-inline-start: 0;
-    }
-  }
+:where([data-slot="navbar"][data-collapse-at]) :where([data-slot="navbar-toggle"]) {
+  display: inline-flex;
+}
 
-  :where(.navbar-mobile, [data-slot="navbar-mobile"]) {
-    display: none;
-  }
+:where([data-slot="navbar"][data-collapse-at])
+  :where([data-slot="navbar-collapse"][open] [data-slot="navbar-content"]) {
+  display: flex;
+}
 
-  :where([data-slot="navbar"][data-responsive-collapsed="true"])
-    > :where(.navbar-mobile, [data-slot="navbar-mobile"]) {
-    display: flex;
-    justify-content: flex-end;
-    min-inline-size: 0;
-  }
+:where([data-slot="nav-dropdown-content"]) {
+  min-inline-size: min(14rem, calc(100vw - 1rem));
+}
 
-  :where([data-slot="navbar"][data-responsive-collapsed="true"])
-    > :where(.navbar-shell, [data-slot="navbar-shell"]) {
-    display: none;
-  }
+:where([data-slot="navbar"][data-collapse-at])
+  :where([data-slot="navbar-content"] [data-slot="nav-item"]) {
+  inline-size: 100%;
+  justify-content: flex-start;
+}
 
-  :where(
-    .navbar-toggle,
-    [data-slot="navbar-toggle"],
-    .navbar-panel-close,
-    [data-slot="navbar-panel-close"]
-  ) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--ak-space-sm);
-    max-inline-size: 100%;
-    min-inline-size: var(--ak-density-control-height-md);
-    min-block-size: var(--ak-density-control-height-md);
-    padding-inline: var(--ak-density-control-padding-x-sm);
-    border: 1px solid var(--ak-color-border);
-    border-radius: var(--ak-radius-md);
-    background: var(--ak-color-surface);
-    color: var(--ak-color-text);
-    font-size: var(--ak-font-size-sm);
-    font-weight: var(--ak-font-weight-medium);
-    cursor: pointer;
-    transition:
-      color var(--ak-duration-fast) var(--ak-ease-standard),
-      background var(--ak-duration-fast) var(--ak-ease-standard),
-      border-color var(--ak-duration-fast) var(--ak-ease-standard),
-      box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
-  }
+:where([data-slot="navbar"][data-collapse-at])
+  :where([data-slot="navbar-content"] [data-slot="nav-group-body"]) {
+  flex-direction: column;
+  align-items: stretch;
+}
 
-  :where(
-    .navbar-toggle:hover,
-    [data-slot="navbar-toggle"]:hover,
-    .navbar-panel-close:hover,
-    [data-slot="navbar-panel-close"]:hover
-  ) {
-    color: var(--ak-color-text);
-    background: var(--ak-color-hover);
-    border-color: var(--ak-color-border-strong);
-  }
+:where([data-slot="nav-dropdown-trigger"]) {
+  white-space: nowrap;
+}
 
-  :where(.navbar-toggle[data-state="open"], [data-slot="navbar-toggle"][data-state="open"]) {
-    border-color: var(--ak-color-primary);
-    background: var(--ak-color-primary-soft);
-    color: var(--ak-color-primary-ink);
+@media (max-width: 40rem) {
+  :where([data-slot="navbar"]) {
+    gap: var(--ak-space-sm);
   }
 
-  :where(
-    .navbar-toggle:focus-visible,
-    [data-slot="navbar-toggle"]:focus-visible,
-    .navbar-panel-close:focus-visible,
-    [data-slot="navbar-panel-close"]:focus-visible
-  ) {
-    outline: none;
-    box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+  :where([data-slot="navbar"] [data-slot="nav-group-body"]) {
+    gap: 0;
   }
 
-  :where(.navbar-toggle, [data-slot="navbar-toggle"]) :where([data-slot="navbar-toggle-label"]) {
-    display: inline-flex;
-    align-items: center;
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  :where([data-slot="nav-brand"] [href]:has(> [aria-hidden="true"]) > [data-nav-brand-label]) {
+    display: none;
   }
+}
 
-  :where(.navbar-toggle, [data-slot="navbar-toggle"]) :where([data-slot="navbar-toggle-icon"]) {
-    display: inline-flex;
+@media (min-width: 40rem) {
+  :where([data-slot="navbar"][data-collapse-at="sm"]) :where([data-slot="navbar-content"]) {
+    display: flex;
+    grid-column: 2;
+    justify-self: center;
+    flex-basis: auto;
+    flex-direction: row;
     align-items: center;
-    justify-content: center;
-    flex: none;
-    inline-size: var(--ak-icon-size-sm);
-    block-size: var(--ak-icon-size-sm);
-    line-height: 0;
-  }
-
-  :where(.navbar-toggle-glyph, [data-slot="navbar-toggle-glyph"]) {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.16rem;
-    inline-size: var(--ak-icon-size-sm);
-    block-size: var(--ak-icon-size-sm);
+    width: auto;
   }
 
-  :where(.navbar-toggle-glyph, [data-slot="navbar-toggle-glyph"]) > span {
-    display: block;
-    block-size: 1.5px;
-    inline-size: 100%;
-    border-radius: 999px;
-    background: currentColor;
-  }
-
-  :where(.navbar-toggle, [data-slot="navbar-toggle"])
-    :where([data-slot="navbar-toggle-icon"])
-    > :where([data-slot="icon"], svg) {
-    flex: none;
-    inline-size: var(--ak-icon-size-sm);
-    block-size: var(--ak-icon-size-sm);
+  :where([data-slot="navbar"][data-collapse-at="sm"])
+    :where([data-slot="navbar-content"] [data-slot="nav-item"]) {
+    inline-size: auto;
   }
 
-  :where(.navbar-panel, [data-slot="navbar-panel"]) {
-    position: static;
-    z-index: var(--ak-z-modal);
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    box-sizing: border-box;
-    gap: var(--ak-space-xs);
-    overflow: auto;
-    overscroll-behavior: contain;
-    inline-size: 100%;
-    min-inline-size: 0;
-    max-inline-size: 100%;
-    padding: var(--ak-space-md);
-    border: 1px solid var(--ak-color-border);
-    background: var(--ak-color-surface-raised);
-    box-shadow: var(--ak-shadow-lg);
+  :where([data-slot="navbar"][data-collapse-at="sm"])
+    :where([data-slot="navbar-content"] [data-slot="nav-group-body"]) {
+    flex-direction: row;
+    align-items: center;
   }
 
-  :where([data-slot="navbar"][data-responsive-collapsed="true"])
-    > :where(.navbar-panel, [data-slot="navbar-panel"]) {
-    position: fixed;
-    inset-block-start: calc(var(--ak-layout-navbar-height) + var(--ak-space-sm));
-    inset-inline: max(var(--ak-space-sm), env(safe-area-inset-left))
-      max(var(--ak-space-sm), env(safe-area-inset-right));
-    inline-size: auto;
-    min-inline-size: 0;
-    max-inline-size: calc(
-      100vw - max(var(--ak-space-sm), env(safe-area-inset-left)) -
-        max(var(--ak-space-sm), env(safe-area-inset-right))
-    );
-    max-block-size: calc(
-      100dvh - var(--ak-layout-navbar-height) - var(--ak-space-md) - env(safe-area-inset-bottom)
-    );
-    border-radius: var(--ak-radius-lg);
-    box-shadow: var(--ak-shadow-xl, var(--ak-shadow-lg));
-    transform-origin: top right;
+  :where([data-slot="navbar"][data-collapse-at="sm"]) :where([data-slot="navbar-toggle"]) {
+    display: none;
   }
+}
 
-  :where(.navbar-panel-header, [data-slot="navbar-panel-header"]) {
+@media (min-width: 48rem) {
+  :where([data-slot="navbar"][data-collapse-at="md"]) :where([data-slot="navbar-content"]) {
     display: flex;
+    grid-column: 2;
+    justify-self: center;
+    flex-basis: auto;
+    flex-direction: row;
     align-items: center;
-    justify-content: space-between;
-    flex: none;
-    gap: var(--ak-space-md);
-    min-inline-size: 0;
-    padding-block-end: var(--ak-space-sm);
-    border-block-end: 1px solid var(--ak-color-border);
-  }
-
-  :where([data-slot="navbar"][data-responsive-collapsed="true"])
-    > :where(.navbar-panel, [data-slot="navbar-panel"])
-    > :where(.navbar-panel-header, [data-slot="navbar-panel-header"]) {
-    position: sticky;
-    inset-block-start: calc(-1 * var(--ak-space-md));
-    z-index: 1;
-    padding-block-start: var(--ak-space-md);
-    background: inherit;
+    width: auto;
   }
 
-  :where(.navbar-panel-header, [data-slot="navbar-panel-header"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"]) {
+  :where([data-slot="navbar"][data-collapse-at="md"])
+    :where([data-slot="navbar-content"] [data-slot="nav-item"]) {
     inline-size: auto;
-    padding-inline: 0;
   }
 
-  :where(.navbar-panel-header, [data-slot="navbar-panel-header"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"])
-    :where(a) {
-    color: var(--ak-color-text);
-    font-size: var(--ak-font-size-lg);
-    font-weight: var(--ak-font-weight-semibold);
-    letter-spacing: 0;
-    overflow-wrap: anywhere;
-  }
-
-  :where(.navbar-panel-close, [data-slot="navbar-panel-close"]) {
-    flex: none;
-    inline-size: var(--ak-density-control-height-md);
-    block-size: var(--ak-density-control-height-md);
-    margin-inline-start: auto;
-    padding-inline: 0;
-  }
-
-  :where(.navbar-panel) > :where(.navbar-group, [data-slot="navbar-group"]) {
-    display: grid;
-    align-items: stretch;
-    align-content: start;
-    flex: none;
-    gap: var(--ak-space-xs);
-    inline-size: 100%;
-    min-inline-size: 0;
-    margin-inline: 0;
-  }
-
-  :where(.navbar-panel)
-    > :where(
-      .navbar-group[data-has-label="true"],
-      [data-slot="navbar-group"][data-has-label="true"]
-    ) {
-    gap: var(--ak-space-xs);
-  }
-
-  :where(.navbar-panel)
-    > :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
-    margin-block-start: auto;
-  }
-
-  :where(.navbar-panel)
-    > :where(.navbar-group, [data-slot="navbar-group"])
-    > :where(.navbar-group-body, [data-slot="navbar-group-body"]) {
-    display: grid;
-    align-content: start;
-    gap: var(--ak-space-xs);
-    min-inline-size: 0;
+  :where([data-slot="navbar"][data-collapse-at="md"])
+    :where([data-slot="navbar-content"] [data-slot="nav-group-body"]) {
+    flex-direction: row;
+    align-items: center;
   }
 
-  :where(.navbar-panel)
-    > :where(.navbar-group, [data-slot="navbar-group"])
-    > :where(.navbar-group-label, [data-slot="navbar-group-label"]) {
-    padding-inline: 0;
+  :where([data-slot="navbar"][data-collapse-at="md"]) :where([data-slot="navbar-toggle"]) {
+    display: none;
   }
+}
 
-  :where(.navbar-panel) :where(.navbar-item, [data-slot="nav-item"], [data-slot="nav-link"]) {
-    inline-size: 100%;
-    overflow: hidden;
-    text-align: start;
-    white-space: nowrap;
+@media (min-width: 64rem) {
+  :where([data-slot="navbar"][data-collapse-at="lg"]) :where([data-slot="navbar-content"]) {
+    display: flex;
+    grid-column: 2;
+    justify-self: center;
+    flex-basis: auto;
+    flex-direction: row;
+    align-items: center;
+    width: auto;
   }
 
-  :where(.navbar-panel)
-    :where(.navbar-item, [data-slot="nav-item"], [data-slot="nav-link"])
-    > :where(:not([data-slot="icon"]):not(svg)) {
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  :where([data-slot="navbar"][data-collapse-at="lg"])
+    :where([data-slot="navbar-content"] [data-slot="nav-item"]) {
+    inline-size: auto;
   }
 
-  :where(.navbar-backdrop, [data-slot="navbar-backdrop"]) {
-    position: fixed;
-    inset: 0;
-    z-index: var(--ak-z-modal-backdrop);
-    border: 0;
-    background: color-mix(in srgb, var(--ak-color-backdrop) 88%, transparent);
-    backdrop-filter: blur(2px);
-    cursor: default;
+  :where([data-slot="navbar"][data-collapse-at="lg"])
+    :where([data-slot="navbar-content"] [data-slot="nav-group-body"]) {
+    flex-direction: row;
+    align-items: center;
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    :where(.navbar-backdrop[data-state="open"], [data-slot="navbar-backdrop"][data-state="open"]) {
-      animation: navbar-backdrop-in var(--ak-duration-fast) var(--ak-ease-standard);
-    }
-
-    :where(.navbar-panel[data-state="open"], [data-slot="navbar-panel"][data-state="open"]) {
-      animation: navbar-panel-in var(--ak-duration-normal) var(--ak-ease-standard);
-    }
-
-    :where(.navbar-panel[data-state="closed"], [data-slot="navbar-panel"][data-state="closed"]) {
-      animation: navbar-panel-out var(--ak-duration-fast) var(--ak-ease-standard);
-      pointer-events: none;
-    }
+  :where([data-slot="navbar"][data-collapse-at="lg"]) :where([data-slot="navbar-toggle"]) {
+    display: none;
   }
+}
 
-  @keyframes navbar-backdrop-in {
-    from {
-      opacity: 0;
-    }
+@media (min-width: 80rem) {
+  :where([data-slot="navbar"][data-collapse-at="xl"]) :where([data-slot="navbar-content"]) {
+    display: flex;
+    grid-column: 2;
+    justify-self: center;
+    flex-basis: auto;
+    flex-direction: row;
+    align-items: center;
+    width: auto;
   }
 
-  @keyframes navbar-panel-in {
-    from {
-      opacity: 0;
-      transform: translate(0.5rem, -0.75rem);
-    }
+  :where([data-slot="navbar"][data-collapse-at="xl"])
+    :where([data-slot="navbar-content"] [data-slot="nav-item"]) {
+    inline-size: auto;
   }
 
-  @keyframes navbar-panel-out {
-    to {
-      opacity: 0;
-      transform: translate(0.5rem, -0.75rem);
-    }
+  :where([data-slot="navbar"][data-collapse-at="xl"])
+    :where([data-slot="navbar-content"] [data-slot="nav-group-body"]) {
+    flex-direction: row;
+    align-items: center;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    :where(.navbar-backdrop, [data-slot="navbar-backdrop"]),
-    :where(.navbar-panel, [data-slot="navbar-panel"]) {
-      animation: none;
-    }
-
-    :where(.navbar-backdrop, [data-slot="navbar-backdrop"]) {
-      backdrop-filter: none;
-    }
+  :where([data-slot="navbar"][data-collapse-at="xl"]) :where([data-slot="navbar-toggle"]) {
+    display: none;
   }
 }