@askrjs/themes 0.2.0 → 0.2.2

package/src/components/catalog.tsx

@@ -3,6 +3,8 @@ import { Slot } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 import { DialogContent, DialogDescription, DialogTitle } from "@askrjs/ui";
 import { Block } from "./block";
+import type { BlockDivProps, BlockElement, BlockResponsiveValue, BlockSpace } from "./block";
+import type { BlockLayoutProps } from "./_internal/block-layout";
 import { classes } from "./_internal/classes";
 import { mergeProps } from "./_internal/merge-props";
 
@@ -70,7 +72,71 @@ function buttonPart(props: CatalogComponentProps, slot: string, className?: stri
   );
 }
 
-function normalizeLegacySpace(value: unknown): unknown {
+type LegacySpace = BlockSpace | "none" | "1" | "2" | "3" | "4" | "5" | "6" | "8";
+type LegacyWrap = boolean | "wrap" | "nowrap";
+
+type LegacyLayoutConveniences = {
+  gap?: BlockResponsiveValue<LegacySpace>;
+  p?: BlockResponsiveValue<LegacySpace>;
+  padding?: BlockResponsiveValue<LegacySpace>;
+  wrap?: BlockResponsiveValue<LegacyWrap>;
+};
+
+type LegacyStructuralProps = Partial<
+  Pick<
+    BlockDivProps,
+    | "children"
+    | "class"
+    | "className"
+    | "style"
+    | "ref"
+    | "id"
+    | "title"
+    | "role"
+    | "tabIndex"
+    | "hidden"
+    | "dir"
+    | "lang"
+    | "onAbort"
+    | "onBlur"
+    | "onChange"
+    | "onClick"
+    | "onDblClick"
+    | "onFocus"
+    | "onInput"
+    | "onKeyDown"
+    | "onKeyUp"
+    | "onMouseDown"
+    | "onMouseEnter"
+    | "onMouseLeave"
+    | "onMouseMove"
+    | "onMouseOut"
+    | "onMouseOver"
+    | "onMouseUp"
+    | "onPointerDown"
+    | "onPointerDownCapture"
+    | "onPointerEnter"
+    | "onPointerLeave"
+    | "onPointerMove"
+    | "onPointerUp"
+    | "onScroll"
+    | "onSubmit"
+    | "onTouchEnd"
+    | "onTouchStart"
+    | "onWheel"
+  >
+> & {
+  as?: BlockElement;
+  asChild?: boolean;
+  [attribute: `aria-${string}`]: BlockDivProps[`aria-${string}`];
+  [attribute: `data-${string}`]: BlockDivProps[`data-${string}`];
+};
+
+export type LegacyLayoutProps = Omit<BlockLayoutProps, "gap" | "padding" | "wrap"> &
+  LegacyStructuralProps &
+  LegacyLayoutConveniences;
+
+function normalizeLegacySpace(value: LegacySpace): BlockSpace {
   if (value === "none") return "0";
   if (value === "1") return "xs";
   if (value === "2") return "xs";
@@ -82,63 +148,116 @@ function normalizeLegacySpace(value: unknown): unknown {
   return value;
 }
 
-function layoutAlias(props: CatalogComponentProps, defaults: Record<string, unknown>): JSX.Element {
-  const { gap, p, padding, style, wrap, ...rest } = props as CatalogComponentProps & {
-    gap?: unknown;
-    p?: unknown;
-    padding?: unknown;
-    style?: Record<string, unknown>;
-    wrap?: boolean | string;
-  };
+function normalizeLegacyResponsiveSpace(
+  value: BlockResponsiveValue<LegacySpace> | undefined,
+): BlockResponsiveValue<BlockSpace> | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).map(([breakpoint, space]) => [
+        breakpoint,
+        normalizeLegacySpace(space as LegacySpace),
+      ]),
+    );
+  }
+  return normalizeLegacySpace(value);
+}
+
+function normalizeLegacyWrap(value: LegacyWrap): boolean {
+  if (value === "wrap") return true;
+  if (value === "nowrap") return false;
+  return value;
+}
+
+function normalizeLegacyResponsiveWrap(
+  value: BlockResponsiveValue<LegacyWrap> | undefined,
+): BlockResponsiveValue<boolean> | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).map(([breakpoint, wrap]) => [
+        breakpoint,
+        normalizeLegacyWrap(wrap as LegacyWrap),
+      ]),
+    );
+  }
+  return normalizeLegacyWrap(value);
+}
+
+const warnedLegacyLayouts = new Set<string>();
+
+function warnDeprecatedLayout(component: string, replacement: string) {
+  const metaEnvironment = (import.meta as ImportMeta & { env?: { DEV?: boolean } }).env;
+  const nodeEnvironment = (
+    globalThis as typeof globalThis & { process?: { env?: { NODE_ENV?: string } } }
+  ).process?.env?.NODE_ENV;
+
+  if (metaEnvironment?.DEV !== true && nodeEnvironment !== "development") return;
+  if (warnedLegacyLayouts.has(component)) return;
+  warnedLegacyLayouts.add(component);
+  console.warn(`[askr-themes] ${component} is deprecated. ${replacement}`);
+}
+
+function layoutAlias(
+  component: string,
+  replacement: string,
+  props: LegacyLayoutProps,
+  defaults: Record<string, unknown>,
+): JSX.Element {
+  warnDeprecatedLayout(component, replacement);
+  const { gap, p, padding, wrap, ...rest } = props as LegacyLayoutProps & Record<string, unknown>;
   const BlockComponent = Block as (blockProps: Record<string, unknown>) => JSX.Element;
-  const wrapStyle = wrap
-    ? {
-        ...style,
-        flexWrap: "wrap",
-      }
-    : style;
 
   return (
     <BlockComponent
       {...defaults}
       {...rest}
-      gap={normalizeLegacySpace(gap)}
-      padding={padding ?? normalizeLegacySpace(p)}
-      style={wrapStyle}
+      gap={normalizeLegacyResponsiveSpace(gap)}
+      padding={normalizeLegacyResponsiveSpace(padding ?? p)}
+      wrap={normalizeLegacyResponsiveWrap(wrap)}
     />
   );
 }
 
-/** Legacy `Box` layout alias for {@link Block} with no default direction. */
-export function Box(props: CatalogComponentProps): JSX.Element {
-  return layoutAlias(props, {});
+/** @deprecated Use {@link Block} directly. */
+export function Box(props: LegacyLayoutProps): JSX.Element;
+export function Box(props: LegacyLayoutProps): JSX.Element {
+  return layoutAlias("Box", "Use Block directly.", props, {});
 }
 
-/** Legacy `Stack` layout alias for {@link Block} that defaults to a column direction. */
-export function Stack(props: CatalogComponentProps): JSX.Element {
-  return layoutAlias(props, { direction: "column" });
+/** @deprecated Use `<Block direction="column">`. */
+export function Stack(props: LegacyLayoutProps): JSX.Element;
+export function Stack(props: LegacyLayoutProps): JSX.Element {
+  return layoutAlias("Stack", 'Use <Block direction="column">.', props, { direction: "column" });
 }
 
-/** Legacy `Inline` layout alias for {@link Block} that defaults to a row direction. */
-export function Inline(props: CatalogComponentProps): JSX.Element {
-  return layoutAlias(props, { direction: "row" });
+/** @deprecated Use `<Block direction="row">`. */
+export function Inline(props: LegacyLayoutProps): JSX.Element;
+export function Inline(props: LegacyLayoutProps): JSX.Element {
+  return layoutAlias("Inline", 'Use <Block direction="row">.', props, { direction: "row" });
 }
 
-/** Legacy `Shell` layout alias for {@link Block}; the `variant` prop is accepted but ignored. */
-export function Shell(props: CatalogComponentProps & { variant?: unknown }): JSX.Element {
+/** @deprecated Compose semantic {@link Block} primitives instead. */
+export function Shell(props: LegacyLayoutProps & { variant?: string }): JSX.Element;
+export function Shell(props: LegacyLayoutProps & { variant?: string }): JSX.Element {
   const { variant: _variant, ...rest } = props;
   void _variant;
-  return layoutAlias(rest, {});
+  return layoutAlias("Shell", "Compose semantic Block primitives instead.", rest, {});
 }
 
-/** Legacy `ShellNav` layout alias for {@link Block}. */
-export function ShellNav(props: CatalogComponentProps): JSX.Element {
-  return layoutAlias(props, {});
+/** @deprecated Use `<Block as="nav">`. */
+export function ShellNav(props: LegacyLayoutProps): JSX.Element;
+export function ShellNav(props: LegacyLayoutProps): JSX.Element {
+  return layoutAlias("ShellNav", 'Use <Block as="nav">.', props, {});
 }
 
-/** Legacy `ShellMain` layout alias for {@link Block} that renders a growing `<main>` element. */
-export function ShellMain(props: CatalogComponentProps): JSX.Element {
-  return layoutAlias(props, { as: "main", grow: true });
+/** @deprecated Use `<Block as="main" grow>`. */
+export function ShellMain(props: LegacyLayoutProps): JSX.Element;
+export function ShellMain(props: LegacyLayoutProps): JSX.Element {
+  return layoutAlias("ShellMain", 'Use <Block as="main" grow>.', props, {
+    as: "main",
+    grow: true,
+  });
 }
 
 /** Renders the `alert-title` part of the shadcn-compatible catalog primitives. */
@@ -157,7 +276,14 @@ export function AlertDescription(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `breadcrumb` part of the shadcn-compatible catalog primitives. */
 export function Breadcrumb(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "breadcrumb", element: "nav", role: "navigation" });
+  return catalogPart(
+    { "aria-label": "Breadcrumb", ...props },
+    {
+      slot: "breadcrumb",
+      element: "nav",
+      role: "navigation",
+    },
+  );
 }
 
 /** Renders the `breadcrumb-list` part of the shadcn-compatible catalog primitives. */
@@ -252,12 +378,12 @@ export function CalendarNextButton(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `calendar-grid` part of the shadcn-compatible catalog primitives. */
 export function CalendarGrid(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "calendar-grid", role: "grid" });
+  return catalogPart(props, { slot: "calendar-grid" });
 }
 
 /** Renders the `calendar-head` part of the shadcn-compatible catalog primitives. */
 export function CalendarHead(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "calendar-head", role: "row" });
+  return catalogPart(props, { slot: "calendar-head" });
 }
 
 /** Renders the `calendar-body` part of the shadcn-compatible catalog primitives. */
@@ -267,12 +393,12 @@ export function CalendarBody(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `calendar-row` part of the shadcn-compatible catalog primitives. */
 export function CalendarRow(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "calendar-row", role: "row" });
+  return catalogPart(props, { slot: "calendar-row" });
 }
 
 /** Renders the `calendar-cell` part of the shadcn-compatible catalog primitives. */
 export function CalendarCell(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "calendar-cell", role: "gridcell" });
+  return catalogPart(props, { slot: "calendar-cell" });
 }
 
 /** Renders a single selectable day cell in the calendar grid, with selection/range/today state exposed as data attributes. */
@@ -292,7 +418,6 @@ export function CalendarDay(
     {
       disabled,
       "aria-disabled": disabled ? "true" : undefined,
-      "aria-selected": selected ? "true" : undefined,
       "data-disabled": disabled ? "" : undefined,
       "data-outside": outside ? "true" : undefined,
       "data-range-end": rangeEnd ? "true" : undefined,
@@ -338,14 +463,13 @@ export function Combobox(props: CatalogComponentProps): JSX.Element {
   return catalogPart(props, { slot: "combobox" });
 }
 
-/** Renders the combobox's text input, wired up with `role="combobox"`. */
+/** Styling-only combobox input; consumers supplying behavior also own its complete ARIA contract. */
 export function ComboboxInput(props: CatalogComponentProps): JSX.Element {
   const { ref, class: className, ...rest } = props;
   const finalProps = mergeProps(rest, {
     ref,
     class: classes("input", className),
     "data-slot": "combobox-input",
-    role: "combobox",
   });
 
   return <input {...finalProps} />;
@@ -353,12 +477,12 @@ export function ComboboxInput(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `combobox-list` part of the shadcn-compatible catalog primitives. */
 export function ComboboxList(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "combobox-list", role: "listbox" });
+  return catalogPart(props, { slot: "combobox-list" });
 }
 
 /** Renders the `combobox-option` part of the shadcn-compatible catalog primitives. */
 export function ComboboxOption(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "combobox-option", role: "option" });
+  return catalogPart(props, { slot: "combobox-option" });
 }
 
 /** Renders the `command` part of the shadcn-compatible catalog primitives. */
@@ -390,7 +514,7 @@ export function CommandHeader(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `command-list` part of the shadcn-compatible catalog primitives. */
 export function CommandList(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "command-list", role: "listbox" });
+  return catalogPart(props, { slot: "command-list" });
 }
 
 /** Renders the `command-empty` part of the shadcn-compatible catalog primitives. */
@@ -416,12 +540,11 @@ export function CommandItem(
   return catalogPart(
     {
       "aria-disabled": disabled ? "true" : undefined,
-      "aria-selected": selected || active ? "true" : undefined,
       "data-disabled": disabled ? "" : undefined,
       "data-selected": selected || active ? "true" : undefined,
       ...rest,
     },
-    { slot: "command-item", role: "option" },
+    { slot: "command-item" },
   );
 }
 
@@ -682,7 +805,14 @@ export function NavigationMenuIndicator(props: CatalogComponentProps): JSX.Eleme
 
 /** Renders the `pagination` part of the shadcn-compatible catalog primitives. */
 export function Pagination(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "pagination", element: "nav", role: "navigation" });
+  return catalogPart(
+    { "aria-label": "Pagination", ...props },
+    {
+      slot: "pagination",
+      element: "nav",
+      role: "navigation",
+    },
+  );
 }
 
 /** Renders the `pagination-content` part of the shadcn-compatible catalog primitives. */
@@ -747,12 +877,12 @@ export function ResizablePanel(props: CatalogComponentProps): JSX.Element {
 
 /** Styling-only separator slot; it does not implement resizing, pointer dragging, or keyboard controls. */
 export function ResizableHandle(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "resizable-handle", role: "separator" });
+  return catalogPart(props, { slot: "resizable-handle" });
 }
 
 /** Renders the `tabs-list` part of the shadcn-compatible catalog primitives. */
 export function TabsList(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "tabs-list", role: "tablist" });
+  return catalogPart(props, { slot: "tabs-list" });
 }
 
 /** Renders the `tabs-content` part of the shadcn-compatible catalog primitives. */
@@ -762,7 +892,7 @@ export function TabsTrigger(props: CatalogComponentProps): JSX.Element {
 
 /** Renders the `tabs-content` part of the shadcn-compatible catalog primitives. */
 export function TabsContent(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "tabs-content", role: "tabpanel" });
+  return catalogPart(props, { slot: "tabs-content" });
 }
 
 /** Sheet variant of the dialog content part; defaults to sliding in from the right. */

package/src/themes/default/styles/base/reset.css

@@ -22,6 +22,10 @@
   display: block;
 }
 
+:where([data-askr-native-control="true"]) {
+  font: inherit;
+}
+
 ::selection {
   background: color-mix(in srgb, var(--ak-color-primary-soft) 84%, transparent);
   color: var(--ak-color-text);

package/src/themes/default/styles/display/table.css

@@ -3,13 +3,12 @@
   min-inline-size: 0;
   border-collapse: collapse;
   border-spacing: 0;
-  table-layout: fixed;
+  table-layout: auto;
   border: 0;
   border-radius: 0;
   background: transparent;
   color: var(--ak-color-text);
   box-shadow: none;
-  overflow: hidden;
 }
 
 :where([data-slot="data-table"]) {
@@ -19,16 +18,16 @@
 }
 
 :where([data-slot="table-caption"]) {
-  padding: 0 0 var(--ak-space-sm);
+  padding-block-start: var(--ak-space-md);
   color: var(--ak-color-text-muted);
   font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
   text-align: start;
-  caption-side: top;
+  caption-side: bottom;
 }
 
 :where([data-slot="table-head"]) {
-  background: var(--ak-color-surface-muted);
+  background: transparent;
 }
 
 :where([data-slot="table-body"]) {
@@ -36,58 +35,60 @@
 }
 
 :where([data-slot="table-foot"]) {
-  background: transparent;
+  border-block-start: 1px solid var(--ak-color-border);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
+  font-weight: var(--ak-font-weight-medium);
 }
 
 :where([data-slot="table-row"]) {
   background: inherit;
+  border-block-end: 1px solid var(--ak-color-border);
   transition: background var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="table-row"]:hover) {
-  background: var(--ak-color-hover);
+:where(
+  [data-slot="table-row"]:hover,
+  [data-slot="table-row"][aria-expanded="true"],
+  [data-slot="table-row"][data-state="selected"]
+) {
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
 }
 
 :where([data-slot="table-header-cell"]),
 :where([data-slot="table-cell"]) {
-  padding: var(--ak-space-sm);
-  border-block-end: 1px solid var(--ak-color-border);
+  padding: var(--ak-space-sm) var(--ak-space-xs);
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
   text-align: start;
-  vertical-align: top;
-  overflow-wrap: anywhere;
+  vertical-align: middle;
+  white-space: normal;
 }
 
-:where([data-slot="table-body"] [data-slot="table-row"]:last-child [data-slot="table-cell"]) {
+:where([data-slot="table-body"] [data-slot="table-row"]:last-child),
+:where([data-slot="table-foot"] [data-slot="table-row"]:last-child) {
   border-block-end: 0;
 }
 
 :where([data-slot="table-header-cell"]) {
-  color: var(--ak-color-text-muted);
-  font-weight: var(--ak-font-weight-semibold);
-  letter-spacing: 0;
-  overflow-wrap: normal;
-  text-transform: none;
-  word-break: normal;
-  white-space: normal;
+  block-size: 2.5rem;
+  font-weight: var(--ak-font-weight-medium);
 }
 
 :where([data-slot="table-cell"]) {
   font-weight: var(--ak-font-weight-regular);
 }
 
-@media (max-width: 30rem) {
-  :where([data-slot="table-header-cell"]),
-  :where([data-slot="table-cell"]) {
-    padding: var(--ak-space-sm) var(--ak-space-xs);
-    font-size: var(--ak-font-size-xs);
-    line-height: var(--ak-line-height-tight);
-  }
+:where(
+  [data-slot="table-header-cell"]:has([role="checkbox"]),
+  [data-slot="table-cell"]:has([role="checkbox"])
+) {
+  padding-inline-end: 0;
+}
 
-  :where([data-slot="table-header-cell"]) {
-    letter-spacing: 0;
-    overflow-wrap: anywhere;
-  }
+:where(
+  [data-slot="table-header-cell"] > [role="checkbox"],
+  [data-slot="table-cell"] > [role="checkbox"]
+) {
+  transform: translateY(2px);
 }

package/src/themes/default/styles/display/virtual-table.css

@@ -30,11 +30,11 @@
 }
 
 :where([data-slot="virtual-table-head"]) {
-  background: var(--ak-color-surface-muted);
+  background: var(--ak-color-surface);
 }
 
 :where([data-slot="virtual-table-header-row"]) {
-  background: inherit;
+  background: var(--ak-color-surface);
 }
 
 :where([data-slot="virtual-table-body"]) {
@@ -42,7 +42,7 @@
 }
 
 :where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
-  padding: var(--ak-space-sm);
+  padding: var(--ak-space-sm) var(--ak-space-xs);
   border-block-end: 1px solid var(--ak-color-border);
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-sm);
@@ -55,10 +55,8 @@
 }
 
 :where([data-slot="virtual-table-header-cell"]) {
-  color: var(--ak-color-text-muted);
-  font-weight: var(--ak-font-weight-semibold);
-  letter-spacing: 0;
-  text-transform: none;
+  block-size: 2.5rem;
+  font-weight: var(--ak-font-weight-medium);
 }
 
 :where([data-slot="virtual-table-row"]) {
@@ -69,11 +67,11 @@
 }
 
 :where([data-slot="virtual-table-row"]:hover) {
-  background: var(--ak-color-hover);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
 }
 
 :where([data-slot="virtual-table-row"][data-selected="true"]) {
-  background: var(--ak-color-selected);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
   color: var(--ak-color-text);
 }
 
@@ -87,6 +85,20 @@
   min-inline-size: 0;
 }
 
+:where(
+  [data-slot="virtual-table-header-cell"]:has([role="checkbox"]),
+  [data-slot="virtual-table-cell"]:has([role="checkbox"])
+) {
+  padding-inline-end: 0;
+}
+
+:where(
+  [data-slot="virtual-table-header-cell"] > [role="checkbox"],
+  [data-slot="virtual-table-cell"] > [role="checkbox"]
+) {
+  transform: translateY(2px);
+}
+
 @media (max-width: 30rem) {
   :where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
     padding: var(--ak-space-sm) var(--ak-space-xs);

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

@@ -18,7 +18,7 @@
   align-items: stretch;
 }
 
-:where([data-slot="navbar"] > [data-slot="nav-group"]:not([data-align="end"])) {
+:where([data-slot="navbar"] [data-slot="nav-group"]:not([data-align="end"])) {
   grid-column: 2;
   justify-self: center;
 }
@@ -187,14 +187,15 @@
 }
 
 @media (min-width: 40rem) {
+  :where([data-slot="navbar"][data-collapse-at="sm"]) :where([data-slot="navbar-collapse"]) {
+    display: block;
+    grid-column: 2 / -1;
+    width: 100%;
+  }
+
   :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;
-    width: auto;
+    width: 100%;
   }
 
   :where([data-slot="navbar"][data-collapse-at="sm"])
@@ -214,14 +215,15 @@
 }
 
 @media (min-width: 48rem) {
+  :where([data-slot="navbar"][data-collapse-at="md"]) :where([data-slot="navbar-collapse"]) {
+    display: block;
+    grid-column: 2 / -1;
+    width: 100%;
+  }
+
   :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;
-    width: auto;
+    width: 100%;
   }
 
   :where([data-slot="navbar"][data-collapse-at="md"])
@@ -241,14 +243,15 @@
 }
 
 @media (min-width: 64rem) {
+  :where([data-slot="navbar"][data-collapse-at="lg"]) :where([data-slot="navbar-collapse"]) {
+    display: block;
+    grid-column: 2 / -1;
+    width: 100%;
+  }
+
   :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;
+    width: 100%;
   }
 
   :where([data-slot="navbar"][data-collapse-at="lg"])
@@ -268,14 +271,15 @@
 }
 
 @media (min-width: 80rem) {
+  :where([data-slot="navbar"][data-collapse-at="xl"]) :where([data-slot="navbar-collapse"]) {
+    display: block;
+    grid-column: 2 / -1;
+    width: 100%;
+  }
+
   :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;
+    width: 100%;
   }
 
   :where([data-slot="navbar"][data-collapse-at="xl"])