@askrjs/themes 0.0.3 → 0.0.4

package/templates/theme/styles/shell/header.css

@@ -2,9 +2,24 @@
   :where(.header, [data-slot="header"]) {
     position: relative;
     z-index: var(--ak-z-sticky);
-    border-block-end: 1px solid color-mix(in srgb, var(--ak-color-border) 88%, white 12%);
-    background: color-mix(in srgb, var(--ak-color-surface) 96%, transparent);
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset;
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    padding-block: var(--ak-space-xs);
+    border-block-end: 1px solid
+      color-mix(in srgb, var(--ak-color-border) 88%, var(--ak-color-surface) 12%);
+    background: color-mix(in srgb, var(--ak-color-surface) 90%, transparent);
+    backdrop-filter: saturate(180%) blur(14px);
+    box-shadow: none;
+  }
+
+  :where(.header, [data-slot="header"]) > :where([data-slot="container"]) {
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  :where(.header, [data-slot="header"]) :where(.navbar-brand, [data-slot="navbar-brand"]) {
+    min-block-size: var(--ak-density-control-height-md);
   }
 
   :where(.header, [data-slot="header"])[data-position="static"] {

package/templates/theme/styles/shell/navbar.css

@@ -1,28 +1,75 @@
 @layer components {
   :where(.navbar, [data-slot="navbar"]) {
+    position: relative;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    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, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"]) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  :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(.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(.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(.navbar-brand, [data-slot="navbar-brand"]) :where(a:hover) {
+    background: color-mix(in srgb, var(--ak-color-surface-muted) 76%, transparent);
+  }
+
+  :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(.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(.navbar-group, [data-slot="navbar-group"]) {
@@ -31,6 +78,33 @@
     gap: var(--ak-space-md);
     flex-wrap: wrap;
     min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+
+  :where(.navbar-group[data-has-label="true"], [data-slot="navbar-group"][data-has-label="true"]) {
+    display: grid;
+    gap: var(--ak-space-xs);
+  }
+
+  :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(.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(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
@@ -38,121 +112,408 @@
     margin-inline: auto;
   }
 
-  :where(.navbar, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"])
+  :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(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
+    margin-inline-start: auto;
+    justify-content: flex-end;
+  }
+
+  :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(.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(.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;
+    flex: 1 1 auto;
   }
 
-  :where(.navbar, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"])
+  :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;
+    max-inline-size: 100%;
+    min-inline-size: 0;
   }
 
-  :where(.navbar, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"])
+  :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;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  @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(.navbar-item, [data-slot="nav-item"]) {
+  :where(.navbar-mobile, [data-slot="navbar-mobile"]) {
+    display: none;
+  }
+
+  :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="navbar"][data-responsive-collapsed="true"])
+    > :where(.navbar-shell, [data-slot="navbar-shell"]) {
+    display: none;
+  }
+
+  :where(
+    .navbar-toggle,
+    [data-slot="navbar-toggle"],
+    .navbar-panel-close,
+    [data-slot="navbar-panel-close"]
+  ) {
     display: inline-flex;
     align-items: center;
-    min-block-size: 2.25rem;
-    padding-inline: var(--ak-space-sm);
-    border: 1px solid transparent;
+    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);
-    color: var(--ak-color-text-muted);
+    background: var(--ak-color-surface);
+    color: var(--ak-color-text);
     font-size: var(--ak-font-size-sm);
     font-weight: var(--ak-font-weight-medium);
-    text-decoration: none;
+    cursor: pointer;
     transition:
       color var(--ak-duration-fast) var(--ak-ease-standard),
-      background 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-item:hover, [data-slot="nav-item"]:hover) {
+  :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-surface-muted);
-    border-color: color-mix(in srgb, var(--ak-color-border) 78%, white 22%);
-    box-shadow: var(--ak-shadow-sm);
+    background: var(--ak-color-hover);
+    border-color: var(--ak-color-border-strong);
+  }
+
+  :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);
+  }
+
+  :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(.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(.navbar-item-icon, [data-slot="nav-item"][data-variant="icon"]) {
+  :where(.navbar-toggle, [data-slot="navbar-toggle"]) :where([data-slot="navbar-toggle-icon"]) {
+    display: inline-flex;
+    align-items: center;
     justify-content: center;
-    inline-size: var(--ak-density-control-height-md);
-    min-block-size: var(--ak-density-control-height-md);
-    padding-inline: 0;
-    border: 1px solid transparent;
-    color: var(--ak-color-text);
-    line-height: 1;
+    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);
   }
 
-  :where(.navbar-item-icon, [data-slot="nav-item"][data-variant="icon"])
+  :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;
-    color: currentColor;
+    inline-size: var(--ak-icon-size-sm);
+    block-size: var(--ak-icon-size-sm);
   }
 
-  :where(.navbar-item-icon:hover, [data-slot="nav-item"][data-variant="icon"]:hover) {
-    border-color: transparent;
+  :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(.navbar-item-icon:active, [data-slot="nav-item"][data-variant="icon"]:active) {
-    background: var(--ak-color-active);
-    border-color: transparent;
+  :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(
-    .navbar-item[aria-current="page"],
-    [data-slot="nav-item"][aria-current="page"],
-    .navbar-item[data-active="true"],
-    [data-slot="nav-item"][data-active="true"]
-  ) {
-    color: var(--ak-color-text);
-    background: color-mix(in srgb, var(--ak-color-primary-soft) 22%, var(--ak-color-surface));
-    border-color: color-mix(in srgb, var(--ak-color-primary) 16%, var(--ak-color-border));
-    box-shadow: var(--ak-shadow-sm);
+  :where(.navbar-panel-header, [data-slot="navbar-panel-header"]) {
+    display: flex;
+    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(.navbar-item:focus-visible, [data-slot="nav-item"]:focus-visible) {
-    outline: none;
-    box-shadow:
-      0 0 0 1px var(--ak-color-surface),
-      0 0 0 4px var(--ak-color-focus-ring);
+  :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;
   }
 
-  :where(.navbar-item[data-active="true"]:hover, [data-slot="nav-item"][data-active="true"]:hover) {
-    background: color-mix(in srgb, var(--ak-color-primary-soft) 30%, var(--ak-color-surface-muted));
-    border-color: color-mix(in srgb, var(--ak-color-primary) 22%, var(--ak-color-border-strong));
+  :where(.navbar-panel-header, [data-slot="navbar-panel-header"])
+    > :where(.navbar-brand, [data-slot="navbar-brand"]) {
+    inline-size: auto;
+    padding-inline: 0;
   }
 
-  :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
+  :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;
-    justify-content: flex-end;
+    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);
   }
-  @media (max-width: 48rem) {
-    :where(.navbar, [data-slot="navbar"]) {
-      display: flex;
-      align-items: stretch;
-      flex-wrap: wrap;
+
+  :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(.navbar-panel)
+    > :where(.navbar-group, [data-slot="navbar-group"])
+    > :where(.navbar-group-label, [data-slot="navbar-group-label"]) {
+    padding-inline: 0;
+  }
+
+  :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;
+  }
+
+  :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(.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;
+  }
+
+  @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-group, [data-slot="navbar-group"]) {
-      inline-size: 100%;
+    :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-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
-      justify-content: flex-start;
-      margin-inline: 0;
+    :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(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
-      justify-content: flex-start;
-      margin-inline-start: 0;
+  @keyframes navbar-backdrop-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes navbar-panel-in {
+    from {
+      opacity: 0;
+      transform: translate(0.5rem, -0.75rem);
+    }
+  }
+
+  @keyframes navbar-panel-out {
+    to {
+      opacity: 0;
+      transform: translate(0.5rem, -0.75rem);
+    }
+  }
+
+  @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;
     }
   }
 }