@bitbaum/sitekit 0.5.1 → 0.7.0

package/README.md

@@ -73,6 +73,23 @@ design tokens. Existing document sites keep their utility-class appearance.
   links={[{ href: '/roadmap', label: 'Roadmap' }]} extra="Beta" />
 ```
 
+For a grouped application menu, pass `navGroups` alongside `navItems`. Each
+group has a `label` and `items` containing `path`, `label` and an optional
+`description`. Import `SiteNavGroup` from `@bitbaum/sitekit/react` for typed
+configuration. Nonempty groups replace the flat application navigation with
+one native disclosure and a responsive panel; omitted or empty groups retain
+the flat API. Group labels, destinations and descriptions belong to the host.
+
+```tsx
+navGroups={[{ label: 'Create', items: [
+  { path: 'write', label: 'Write', description: 'Start an article.' }
+] }]}
+```
+
+Run `pnpm exec playwright install --with-deps chromium` before `pnpm run verify`.
+An existing Chromium can be selected with `PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH`.
+The browser regression uses the public renderer and stylesheet at four widths.
+
 The package owns the responsive menu, its native no-JavaScript fallback,
 Escape/outside/route dismissal, skip link, active states, touch targets and
 footer layout. Products supply labels, navigation data, identity and account
@@ -166,3 +183,14 @@ can configure `--sk-header-height`, `--sk-mobile-header-height`,
 `SiteTabBar` renders a fixed bottom navigation for small screens (hidden from
 48rem up, where the masthead nav takes over). Pass 3–5 `{ path, label, icon }`
 items and the current path; it renders its own spacer so content is not hidden.
+
+Use `SiteIcon` for the icons — `{ icon: <SiteIcon name="write" /> }` — not a
+unicode glyph: the set is drawn on `currentColor`, so icon and label take one
+colour and the current tab is one rule. Names: `SITE_ICON_NAMES`. Pass
+`tabBar` to `SiteMasthead` on the same page so the masthead drops its menu
+button on phones instead of repeating the tab bar's destinations:
+
+```tsx
+<SiteMasthead appearance="application" tabBar navItems={nav} … />
+<SiteTabBar items={nav.map((n) => ({ ...n, icon: <SiteIcon name={n.icon} /> }))} … />
+```

package/dist/react/SiteChrome.d.ts

@@ -1,9 +1,12 @@
 import type { ReactNode } from 'react';
 import type { SiteChrome as SiteChromeSpec, SiteNavItem } from '../schema.js';
 import { type LinkLike } from './link.js';
+import { type SiteNavGroup } from './SiteNav.js';
 interface Props {
     chrome: SiteChromeSpec;
     navItems: SiteNavItem[];
+    /** Descriptive application navigation; product-owned group configuration. */
+    navGroups?: SiteNavGroup[];
     currentPath: string;
     /** Framework link component (e.g. next/link). Defaults to a plain anchor. */
     Link?: LinkLike;
@@ -15,8 +18,15 @@ interface Props {
     skipLabel?: string;
     navLabel?: string;
     menuLabel?: string;
+    /**
+     * The page also renders a `SiteTabBar` with these destinations. On phones
+     * the tab bar is then the navigation, and the masthead's menu button is
+     * dropped below the tab bar breakpoint instead of repeating it — one way to
+     * each place, not two. The account actions stay in the masthead.
+     */
+    tabBar?: boolean;
 }
-export declare function SiteMasthead({ chrome, navItems, currentPath, Link, appearance, brand, actions, mainId, skipLabel, navLabel, menuLabel, }: Props): import("react").JSX.Element;
+export declare function SiteMasthead({ chrome, navItems, navGroups, currentPath, Link, appearance, brand, actions, mainId, skipLabel, navLabel, menuLabel, tabBar, }: Props): import("react").JSX.Element;
 export declare function SiteFooter({ chrome, appearance, links, groups, Link, label, extra, }: {
     chrome: SiteChromeSpec;
     appearance?: 'application';

package/dist/react/SiteChrome.js

@@ -13,9 +13,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { href } from '../model.js';
 import { DefaultLink } from './link.js';
 import { SiteNav } from './SiteNav.js';
-export function SiteMasthead({ chrome, navItems, currentPath, Link = DefaultLink, appearance, brand, actions, mainId, skipLabel = 'Skip to content', navLabel = 'Main navigation', menuLabel = 'Menu', }) {
+export function SiteMasthead({ chrome, navItems, navGroups, currentPath, Link = DefaultLink, appearance, brand, actions, mainId, skipLabel = 'Skip to content', navLabel = 'Main navigation', menuLabel = 'Menu', tabBar = false, }) {
     if (appearance === 'application')
-        return (_jsxs(_Fragment, { children: [mainId && (_jsx("a", { className: "sk-skip", href: '#' + mainId, children: skipLabel })), _jsx("header", { className: "sk-masthead", children: _jsxs("div", { className: "sk-shell-frame sk-masthead-row", children: [_jsx(Link, { href: "/", className: "sk-brand", children: brand ?? chrome.name }), _jsx(SiteNav, { items: navItems, currentPath: currentPath, Link: Link, appearance: "application", label: navLabel, menuLabel: menuLabel, menuActions: actions }), actions && _jsx("div", { className: "sk-account-actions", children: actions })] }) })] }));
+        return (_jsxs(_Fragment, { children: [mainId && (_jsx("a", { className: "sk-skip", href: '#' + mainId, children: skipLabel })), _jsx("header", { className: tabBar ? 'sk-masthead sk-masthead--tabbar' : 'sk-masthead', children: _jsxs("div", { className: "sk-shell-frame sk-masthead-row", children: [_jsx(Link, { href: "/", className: "sk-brand", children: brand ?? chrome.name }), _jsx(SiteNav, { items: navItems, groups: navGroups, currentPath: currentPath, Link: Link, appearance: "application", label: navLabel, menuLabel: menuLabel, menuActions: actions }), actions && _jsx("div", { className: "sk-account-actions", children: actions })] }) })] }));
     return (_jsx("header", { className: "sticky top-0 z-30 border-b border-subtle bg-surface-page/85 backdrop-blur", children: _jsx("div", { className: "mx-auto max-w-shell px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-6 py-2", children: [_jsx(Link, { href: href(), className: "inline-flex min-h-11 shrink-0 items-center rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", children: _jsx("span", { className: "font-heading text-lg font-semibold tracking-display text-fg-primary", children: chrome.name }) }), _jsx(SiteNav, { items: navItems, currentPath: currentPath, Link: Link })] }) }) }));
 }
 export function SiteFooter({ chrome, appearance, links = [], groups, Link = DefaultLink, label = 'Footer navigation', extra, }) {

package/dist/react/SiteNav.d.ts

@@ -9,6 +9,12 @@
 import type { ReactNode } from 'react';
 import type { SiteNavItem } from '../schema.js';
 import { type LinkLike } from './link.js';
+export interface SiteNavGroup {
+    label: string;
+    items: Array<SiteNavItem & {
+        description?: string;
+    }>;
+}
 interface Props {
     /**
      * Deliberately NOT `SitePage[]`. Everything the nav receives ends up in the
@@ -16,6 +22,8 @@ interface Props {
      */
     items: SiteNavItem[];
     currentPath: string;
+    /** Opt-in grouped application menu. Flat items remain unchanged when omitted. */
+    groups?: SiteNavGroup[];
     /** Framework link component (e.g. next/link). Defaults to a plain anchor. */
     Link?: LinkLike;
     appearance?: 'application';
@@ -28,5 +36,5 @@ interface Props {
      */
     menuActions?: ReactNode;
 }
-export declare function SiteNav({ items, currentPath, Link, appearance, label, menuLabel, menuActions, }: Props): import("react").JSX.Element | null;
+export declare function SiteNav({ items, groups, currentPath, Link, appearance, label, menuLabel, menuActions, }: Props): import("react").JSX.Element | null;
 export {};

package/dist/react/SiteNav.js

@@ -3,8 +3,12 @@ import { href } from '../model.js';
 import { DefaultLink } from './link.js';
 import { MenuDismiss } from './MenuDismiss.js';
 import { NavAutoScroll } from './NavAutoScroll.js';
-export function SiteNav({ items, currentPath, Link = DefaultLink, appearance, label = 'Sections', menuLabel = 'Menu', menuActions, }) {
+export function SiteNav({ items, groups, currentPath, Link = DefaultLink, appearance, label = 'Sections', menuLabel = 'Menu', menuActions, }) {
     if (appearance === 'application') {
+        const populatedGroups = groups?.filter((group) => group.items.length > 0);
+        if (populatedGroups?.length) {
+            return (_jsxs(_Fragment, { children: [_jsxs("details", { className: "sk-grouped-menu", "data-sitekit-menu": true, children: [_jsxs("summary", { children: [menuLabel, _jsx("span", { "aria-hidden": "true", children: "\u2630" })] }), _jsxs("nav", { className: "sk-grouped-panel", "aria-label": label, children: [_jsx("div", { className: "sk-nav-groups", children: populatedGroups.map((group) => (_jsxs("section", { className: "sk-nav-group", "aria-label": group.label, children: [_jsx("h2", { children: group.label }), group.items.map((item) => (_jsxs(Link, { href: href(item.path), "aria-current": item.path === currentPath ? 'page' : undefined, children: [_jsx("span", { className: "sk-nav-link-label", children: item.label }), item.description && (_jsx("span", { className: "sk-nav-description", children: item.description }))] }, item.path)))] }, group.label))) }), menuActions && _jsx("div", { className: "sk-grouped-actions", children: menuActions })] })] }), _jsx(MenuDismiss, { currentPath: currentPath })] }));
+        }
         if (items.length === 0)
             return null;
         const links = () => items.map((item) => (_jsx(Link, { href: href(item.path), "aria-current": item.path === currentPath ? 'page' : undefined, children: item.label }, item.path)));

package/dist/react/icons.d.ts

@@ -0,0 +1,19 @@
+/**
+ * One small icon set for the shell: the tab bar and the account actions.
+ *
+ * Products used to pass unicode glyphs (◎ ✎ ⌕ ⇄ ★) as tab icons, which
+ * render differently on every phone and never look like an interface. These
+ * are 24-unit stroke outlines on `currentColor`, so a tab's icon and label
+ * take the same colour and the active state is one rule. Decorative only:
+ * every one is `aria-hidden`, the label beside it is what is read out.
+ */
+import type { SVGProps } from 'react';
+export type SiteIconName = 'home' | 'write' | 'search' | 'compass' | 'star' | 'user' | 'chat' | 'bell' | 'settings' | 'list' | 'globe' | 'book' | 'heart' | 'plus' | 'menu' | 'calendar' | 'wallet' | 'chart';
+export interface SiteIconProps extends Omit<SVGProps<SVGSVGElement>, 'name'> {
+    name: SiteIconName;
+    /** Rendered size in CSS pixels; the tab bar sets its own. */
+    size?: number | string;
+}
+/** A shell icon on `currentColor`. Decorative: hidden from assistive tech. */
+export declare function SiteIcon({ name, size, className, ...rest }: SiteIconProps): import("react").JSX.Element;
+export declare const SITE_ICON_NAMES: SiteIconName[];

package/dist/react/icons.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const PATHS = {
+    home: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 11.5 12 4l9 7.5" }), _jsx("path", { d: "M5.5 10.5V20h13v-9.5" }), _jsx("path", { d: "M10 20v-5h4v5" })] })),
+    write: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17z" }), _jsx("path", { d: "M13.5 8.5 16.5 11.5" })] })),
+    search: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), _jsx("path", { d: "M20 20l-4.5-4.5" })] })),
+    compass: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "m15.5 8.5-2 5-5 2 2-5z" })] })),
+    star: _jsx("path", { d: "m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1.1 5.9L12 16.9l-5.3 2.8 1.1-5.9-4.3-4.1 5.9-.8z" }),
+    user: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "8.5", r: "4" }), _jsx("path", { d: "M4.5 20.5c.8-4 4-6 7.5-6s6.7 2 7.5 6" })] })),
+    chat: _jsx("path", { d: "M4 5.5h16v10H9.5L5.5 19v-3.5H4z" }),
+    bell: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z" }), _jsx("path", { d: "M10 20.5a2 2 0 0 0 4 0" })] })),
+    settings: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8" })] })),
+    list: _jsx("path", { d: "M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" }),
+    globe: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18" })] })),
+    book: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z" }), _jsx("path", { d: "M4 18A2.5 2.5 0 0 1 6.5 15.5H20" })] })),
+    heart: (_jsx("path", { d: "M12 20s-7.5-4.6-7.5-10A4.2 4.2 0 0 1 12 7.7 4.2 4.2 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z" })),
+    plus: _jsx("path", { d: "M12 5v14M5 12h14" }),
+    menu: _jsx("path", { d: "M4 7h16M4 12h16M4 17h16" }),
+    calendar: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "4", y: "5", width: "16", height: "15", rx: "2" }), _jsx("path", { d: "M4 10h16M8 3v4M16 3v4" })] })),
+    wallet: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 7.5h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("path", { d: "M3 7.5V6a2 2 0 0 1 2-2h11" }), _jsx("circle", { cx: "16.5", cy: "14", r: "1.2" })] })),
+    chart: _jsx("path", { d: "M4 20V4M4 20h16M8 16v-5M12 16V8M16 16v-3M20 16V6" }),
+};
+/** A shell icon on `currentColor`. Decorative: hidden from assistive tech. */
+export function SiteIcon({ name, size, className, ...rest }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", className: className ? `sk-icon ${className}` : 'sk-icon', "data-icon": name, ...rest, children: PATHS[name] }));
+}
+export const SITE_ICON_NAMES = Object.keys(PATHS);

package/dist/react/index.d.ts

@@ -8,8 +8,9 @@
  */
 export { SiteSections } from './SiteSections.js';
 export { SiteMasthead, SiteFooter } from './SiteChrome.js';
-export { SiteNav } from './SiteNav.js';
+export { SiteNav, type SiteNavGroup } from './SiteNav.js';
 export { SiteTabBar, type SiteTabItem } from './SiteTabBar.js';
+export { SiteIcon, SITE_ICON_NAMES, type SiteIconName, type SiteIconProps } from './icons.js';
 export { NavAutoScroll } from './NavAutoScroll.js';
 export { DefaultLink, type LinkLike, type LinkProps } from './link.js';
 export { SectionHeading, Blurb, SectionBody } from './sections/Primitives.js';

package/dist/react/index.js

@@ -10,6 +10,7 @@ export { SiteSections } from './SiteSections.js';
 export { SiteMasthead, SiteFooter } from './SiteChrome.js';
 export { SiteNav } from './SiteNav.js';
 export { SiteTabBar } from './SiteTabBar.js';
+export { SiteIcon, SITE_ICON_NAMES } from './icons.js';
 export { NavAutoScroll } from './NavAutoScroll.js';
 export { DefaultLink } from './link.js';
 export { SectionHeading, Blurb, SectionBody } from './sections/Primitives.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitbaum/sitekit",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "A website as data: a closed union of section shapes validated at runtime, one set of React renderers, and per-field provenance so a generated site can prove it fabricated nothing.",
   "license": "MIT",
   "author": "Mao Nakamoto",
@@ -67,8 +67,10 @@
     "@eslint/js": "^10.0.1",
     "@types/node": "^26.4.1",
     "@types/react": "^19.0.0",
+    "esbuild": "^0.28.2",
     "eslint": "^10.9.1",
     "globals": "^17.12.0",
+    "playwright": "^1.64.1",
     "prettier": "3.9.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/styles.css

@@ -339,37 +339,51 @@
     gap: 1.5rem;
   }
 }
-/* Mobile bottom tab bar (SiteTabBar). Hidden from --sk-tabbar-breakpoint up. */
+/* Mobile bottom tab bar (SiteTabBar). Hidden from --sk-tabbar-breakpoint up.
+   One row of equal cells; the current one carries a short rule above its icon
+   and the full text colour, so the active state reads without a fill. */
 .sk-tabbar {
   position: fixed;
   inset: auto 0 0 0;
   z-index: 45;
-  display: flex;
-  justify-content: space-around;
-  gap: 2px;
-  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  padding: 0 4px calc(0px + env(safe-area-inset-bottom));
   background: var(--sk-bg, Canvas);
   border-top: 1px solid var(--sk-line, #d6d6d6);
   font-family: var(--sk-font, system-ui, sans-serif);
 }
 .sk-tab {
-  flex: 1;
+  position: relative;
   min-width: 0;
+  min-height: 56px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2px;
-  padding: 6px 2px;
-  border-radius: 10px;
+  justify-content: center;
+  gap: 3px;
+  padding: 8px 4px 6px;
   color: var(--sk-muted, #555);
   font-size: 11px;
   font-weight: 600;
+  letter-spacing: 0.01em;
   text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
 }
 .sk-tab-icon {
-  font-size: 20px;
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
   line-height: 1;
 }
+.sk-tab-icon > svg {
+  width: 24px;
+  height: 24px;
+}
 .sk-tab-label {
   white-space: nowrap;
   overflow: hidden;
@@ -378,14 +392,36 @@
 }
 .sk-tab[aria-current='page'] {
   color: var(--sk-fg, CanvasText);
-  background: var(--sk-tab-active, color-mix(in srgb, currentColor 8%, transparent));
+}
+.sk-tab[aria-current='page']::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 50%;
+  width: 28px;
+  height: 3px;
+  transform: translateX(-50%);
+  border-radius: 0 0 3px 3px;
+  background: var(--sk-tab-active, currentColor);
 }
 .sk-tab:focus-visible {
   outline: 2px solid var(--sk-focus, Highlight);
-  outline-offset: 2px;
+  outline-offset: -4px;
+  border-radius: 10px;
 }
 .sk-tabbar-spacer {
-  height: var(--sk-tabbar-height, 68px);
+  height: calc(var(--sk-tabbar-height, 56px) + env(safe-area-inset-bottom));
+}
+/* Below the tab bar breakpoint the tab bar IS the navigation: a masthead that
+   says so (`tabBar`) drops its menu button rather than offering the same five
+   places twice. */
+@media (max-width: 47.999rem) {
+  .sk-masthead--tabbar .sk-mobile-menu {
+    display: none;
+  }
+  .sk-masthead--tabbar .sk-masthead-row:has(.sk-mobile-menu) > .sk-account-actions {
+    display: flex;
+  }
 }
 @media (min-width: 48rem) {
   .sk-tabbar,
@@ -393,3 +429,111 @@
     display: none;
   }
 }
+.sk-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+/* One native disclosure and one link tree for grouped application navigation. */
+.sk-masthead-row:has(.sk-grouped-menu) {
+  position: relative;
+}
+.sk-grouped-menu {
+  margin-inline-start: auto;
+}
+.sk-grouped-menu summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 44px;
+  padding: 0.65rem 0.85rem;
+  list-style: none;
+  cursor: pointer;
+  border: 1px solid var(--sk-line, #d6d6d6);
+  border-radius: var(--sk-radius, 0.5rem);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.sk-grouped-menu summary::-webkit-details-marker {
+  display: none;
+}
+.sk-grouped-panel {
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline-end: var(--sk-gutter, 1rem);
+  width: min(54rem, calc(100% - 2 * var(--sk-gutter, 1rem)));
+  box-sizing: border-box;
+  max-height: 75dvh;
+  overflow-y: auto;
+  padding: 1rem;
+  background: var(--sk-bg, Canvas);
+  border: 1px solid var(--sk-line, #d6d6d6);
+  border-radius: var(--sk-radius, 0.5rem);
+  box-shadow: 0 18px 40px #00000014;
+}
+.sk-nav-groups {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+  gap: 1rem;
+}
+.sk-nav-group {
+  min-width: 0;
+}
+.sk-nav-group h2 {
+  margin: 0 0 0.5rem;
+  font-size: 0.875rem;
+  color: var(--sk-muted, #555);
+}
+.sk-grouped-actions > a,
+.sk-nav-group a {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  min-height: 44px;
+  padding: 0.75rem;
+  border-radius: var(--sk-radius, 0.5rem);
+  color: var(--sk-fg, CanvasText);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+.sk-nav-group a:hover,
+.sk-nav-group a[aria-current='page'] {
+  background: var(--sk-raised, #f0f0f0);
+}
+.sk-nav-link-label {
+  font-weight: 600;
+}
+.sk-nav-description {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--sk-muted, #555);
+}
+.sk-grouped-actions {
+  display: none;
+}
+@media (max-width: 600px) {
+  .sk-nav-groups {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+@media (max-width: 380px) {
+  /* Give host account popovers the full narrow viewport, including padding. */
+  .sk-grouped-panel {
+    inset-inline: 0;
+    width: 100%;
+  }
+  .sk-masthead-row:has(.sk-grouped-menu) > .sk-account-actions {
+    display: none;
+  }
+  .sk-grouped-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    border-top: 1px solid var(--sk-line, #d6d6d6);
+    padding-top: 0.75rem;
+    margin-top: 0.75rem;
+  }
+}