@akonwi/mica 0.10.0 → 0.11.0

package/README.md

@@ -62,8 +62,9 @@ Every component states where its behavior comes from
   tooltips, toasts. Delete the stylesheet and everything still works.
 - **JS-enhanced — script, honestly.** Where accessibility genuinely requires
   JS: `tabs.js`, `combobox.js`, `field.js` (declarative validation),
-  `select.js`, `toast.js`. Each is a tiny standalone module that enhances
-  working markup — never renders it. There is no shared runtime.
+  `select.js`, `toast.js`, `header.js`, `sidebar.js` (responsive navigation). Each is a tiny
+  standalone module that enhances working markup — never renders it. There
+  is no shared runtime.
 
 `m-avatar` accepts authored initials or a direct native `img`, both CSS-only.
 `avatar.js` is a separate opt-in visual enhancement: importing it locally
@@ -96,3 +97,27 @@ Read [VISION.md](VISION.md) for the philosophy and
 ## License
 
 [MIT](LICENSE)
+
+Nested header navigation uses `nav[data-navigation-menu]` with native
+`details`/`summary` groups and authored `[data-nav-panel]` content. Import
+`header.js` for floating desktop panels and inline mobile disclosures. See
+[the navigation menu docs](https://akonwi.io/mica/docs/navigation-menu.html).
+
+Bottom navigation uses `nav[data-bottom-nav]` and native links, with optional
+consumer-authored icons. No JavaScript module is needed. See the
+[bottom navigation docs](https://akonwi.io/mica/docs/bottom-navigation.html)
+for a shell that keeps content clear of the bar.
+
+Breadcrumbs use `nav[data-breadcrumbs]` with an ordered list of links and a
+current-page label. Optional `breadcrumbs.js` enhances an authored ancestor
+disclosure. See [the breadcrumbs docs](https://akonwi.io/mica/docs/breadcrumbs.html).
+
+Data collections compose native `table[data-table]`, a stable filter/selection
+toolbar, and `nav[data-pagination]`. The app owns all data operations; optional
+`table.js` only adds overflow indicators to `m-table-scroll`. See the
+[data table](https://akonwi.io/mica/docs/data-table.html) and
+[pagination](https://akonwi.io/mica/docs/pagination.html) docs.
+
+Inline alerts and guidance use CSS-only `m-callout` with neutral, success,
+warning, and danger treatments. Icons and actions are optional authored
+content; see [callout docs](https://akonwi.io/mica/docs/callout.html).

package/breadcrumbs.d.ts

@@ -0,0 +1,5 @@
+/* Optional ancestor-disclosure enhancement; native details is the fallback. */
+declare global {
+  interface HTMLElementTagNameMap { "m-breadcrumb-overflow": HTMLElement; }
+}
+export {};

package/breadcrumbs.js

@@ -0,0 +1,74 @@
+/* Optional enhancement for authored breadcrumb ancestor disclosures.
+ * Native details works without this module. No content or roles are generated. */
+class MBreadcrumbOverflow extends HTMLElement {
+  #cleanup;
+  connectedCallback() {
+    queueMicrotask(() => {
+      if (!this.isConnected || this.#cleanup) return;
+      const details = this.querySelector(':scope > details');
+      const summary = details?.firstElementChild;
+      const menu = details?.querySelector(':scope > [data-breadcrumb-menu]');
+      if (!summary?.matches('summary') || !menu || !this.closest('nav[data-breadcrumbs]')) return;
+      const controller = new AbortController();
+      const { signal } = controller;
+      let frame = 0;
+      const close = () => { details.open = false; };
+      const position = () => {
+        frame = 0;
+        if (!details.open) return;
+        const r = summary.getBoundingClientRect();
+        const v = window.visualViewport;
+        const left = v?.offsetLeft ?? 0, top = v?.offsetTop ?? 0;
+        const width = v?.width ?? document.documentElement.clientWidth, height = v?.height ?? innerHeight;
+        const css = getComputedStyle(menu);
+        const gutter = parseFloat(css.paddingLeft) || 8;
+        const gap = parseFloat(css.marginTop) || 0;
+        const w = menu.getBoundingClientRect().width;
+        const start = getComputedStyle(this).direction === 'rtl' ? r.right - w : r.left;
+        const below = Math.max(0, top + height - r.bottom - gap - gutter);
+        const above = Math.max(0, r.top - top - gap - gutter);
+        const desired = menu.scrollHeight + 2 * (parseFloat(css.borderTopWidth) || 0);
+        const flip = below < Math.min(desired, above);
+        menu.style.setProperty('--m-breadcrumb-left', `${Math.max(left + gutter, Math.min(start, left + width - w - gutter))}px`);
+        menu.style.setProperty('--m-breadcrumb-height', `${flip ? above : below}px`);
+        menu.style.setProperty('--m-breadcrumb-top', `${flip ? r.top - Math.min(desired, above) - 2 * gap : r.bottom}px`);
+      };
+      const schedule = () => { if (!frame) frame = requestAnimationFrame(position); };
+      details.addEventListener('toggle', schedule, { signal });
+      details.addEventListener('keydown', event => {
+        if (event.key === 'Escape' && details.open) {
+          event.preventDefault(); event.stopPropagation(); close(); summary.focus();
+        }
+      }, { signal });
+      document.addEventListener('click', event => { if (!this.contains(event.target)) close(); }, { signal });
+      details.addEventListener('focusout', event => {
+        if (event.relatedTarget) { if (!this.contains(event.relatedTarget)) close(); }
+        else requestAnimationFrame(() => { if (!signal.aborted && !this.contains(document.activeElement)) close(); });
+      }, { signal });
+      menu.addEventListener('click', event => {
+        if (!event.target.closest('a[href]') || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+        queueMicrotask(() => {
+          if (event.defaultPrevented) return;
+          const focused = menu.contains(document.activeElement);
+          close();
+          if (focused) summary.focus();
+        });
+      }, { signal });
+      window.addEventListener('resize', schedule, { signal, passive: true });
+      window.addEventListener('scroll', schedule, { signal, passive: true, capture: true });
+      window.visualViewport?.addEventListener('resize', schedule, { signal });
+      window.visualViewport?.addEventListener('scroll', schedule, { signal });
+      const observer = new ResizeObserver(schedule);
+      observer.observe(menu); observer.observe(summary);
+      this.setAttribute('data-m-breadcrumb-ready', '');
+      schedule();
+      this.#cleanup = () => {
+        controller.abort(); observer.disconnect(); cancelAnimationFrame(frame); close();
+        this.removeAttribute('data-m-breadcrumb-ready');
+        for (const name of ['left', 'top', 'height']) menu.style.removeProperty(`--m-breadcrumb-${name}`);
+      };
+    });
+  }
+  disconnectedCallback() { this.#cleanup?.(); this.#cleanup = undefined; }
+}
+if (!customElements.get('m-breadcrumb-overflow')) customElements.define('m-breadcrumb-overflow', MBreadcrumbOverflow);

package/header.d.ts

@@ -0,0 +1,7 @@
+/* Side-effect module: optional responsive navigation for <m-header>. */
+declare global {
+  interface HTMLElementTagNameMap {
+    "m-header": HTMLElement;
+  }
+}
+export {};

package/header.js

@@ -0,0 +1,172 @@
+/* Optional responsive enhancement for <m-header>.
+ * Authored nav stays inline without this module. At narrow container widths,
+ * the same nav becomes a native popover invoked by button[data-menu].
+ * No generated links, routing, shared runtime, or menu keyboard emulation.
+ */
+class MHeader extends HTMLElement {
+  #cleanup;
+
+  connectedCallback() {
+    queueMicrotask(() => {
+      if (!this.isConnected || this.#cleanup) return;
+      const nav = this.querySelector(':scope > nav');
+      const button = this.querySelector(':scope > button[data-menu]');
+      if (!nav || nav.hasAttribute('popover')) return;
+      const canCollapse = Boolean(button && nav.id && button.getAttribute('popovertarget') === nav.id && 'showPopover' in nav);
+
+      const controller = new AbortController();
+      const { signal } = controller;
+      let frame = 0;
+      const groups = nav.hasAttribute('data-navigation-menu')
+        ? [...nav.querySelectorAll(':scope > details')].filter(d => d.firstElementChild?.matches('summary') && d.querySelector(':scope > [data-nav-panel]'))
+        : [];
+      const closeGroups = () => { for (const group of groups) group.open = false; };
+      const positionGroups = () => {
+        if (this.hasAttribute('data-m-header-collapsed')) return;
+        const viewport = window.visualViewport;
+        const left = viewport?.offsetLeft ?? 0;
+        const top = viewport?.offsetTop ?? 0;
+        const width = viewport?.width ?? document.documentElement.clientWidth;
+        const height = viewport?.height ?? innerHeight;
+        for (const group of groups) {
+          if (!group.open) continue;
+          const panel = group.querySelector(':scope > [data-nav-panel]');
+          const r = group.firstElementChild.getBoundingClientRect();
+          // A computed length resolves rem/calc tokens to pixels, unlike reading
+          // the raw custom property. Gap is inert on the block panel itself.
+          const gap = Math.max(0, parseFloat(getComputedStyle(panel).rowGap) || 0);
+          panel.style.setProperty('--m-nav-max-width', `${Math.max(0, width - 2 * gap)}px`);
+          const panelWidth = panel.getBoundingClientRect().width;
+          const start = getComputedStyle(nav).direction === 'rtl' ? r.right - panelWidth : r.left;
+          panel.style.setProperty('--m-nav-left', `${Math.max(left + gap, Math.min(start, left + width - gap - panelWidth))}px`);
+          const below = Math.max(0, top + height - r.bottom - 2 * gap);
+          const above = Math.max(0, r.top - top - 2 * gap);
+          const desired = panel.scrollHeight + 2 * (parseFloat(getComputedStyle(panel).borderTopWidth) || 0);
+          const flip = below < Math.min(desired, above);
+          panel.style.setProperty('--m-nav-height', `${flip ? above : below}px`);
+          panel.style.setProperty('--m-nav-top', `${flip ? r.top - gap - Math.min(desired, above) : r.bottom + gap}px`);
+        }
+      };
+      const close = () => { if (nav.matches(':popover-open')) nav.hidePopover(); };
+      const position = () => {
+        frame = 0;
+        positionGroups();
+        if (!nav.matches(':popover-open')) return;
+        const r = this.getBoundingClientRect();
+        const viewport = window.visualViewport;
+        const left = viewport?.offsetLeft ?? 0;
+        const top = viewport?.offsetTop ?? 0;
+        const width = viewport?.width ?? document.documentElement.clientWidth;
+        const height = viewport?.height ?? window.innerHeight;
+        const gutter = parseFloat(getComputedStyle(nav).paddingTop) || 8;
+        const available = Math.max(0, width - 2 * gutter);
+        const menuWidth = Math.min(r.width, available);
+        nav.style.setProperty('--m-header-menu-width', `${menuWidth}px`);
+        nav.style.setProperty('--m-header-menu-left', `${Math.max(left + gutter, Math.min(r.left, left + width - gutter - menuWidth))}px`);
+        // Measure the rendered links: labels may wrap, fonts may be enlarged,
+        // and compact-only actions need not have the same height as links.
+        // Measure content without expanding the scroll container: changing its
+        // height during a scroll event resets scrollTop and strands lower links.
+        const rows = [...nav.children].map(e => e.getBoundingClientRect()).filter(r => r.height);
+        const css = getComputedStyle(nav);
+        const desired = (rows.length ? Math.max(...rows.map(r => r.bottom)) - Math.min(...rows.map(r => r.top)) : 0)
+          + parseFloat(css.paddingTop) + parseFloat(css.paddingBottom)
+          + parseFloat(css.borderTopWidth) + parseFloat(css.borderBottomWidth);
+        const below = Math.max(0, top + height - r.bottom - 2 * gutter);
+        const above = Math.max(0, r.top - top - 2 * gutter);
+        const flip = below < Math.min(desired, above);
+        const menuHeight = Math.min(desired, flip ? above : below);
+        nav.style.setProperty('--m-header-menu-height', `${menuHeight}px`);
+        nav.style.setProperty('--m-header-menu-top', `${flip ? Math.max(top + gutter, r.top - gutter - menuHeight) : Math.max(top + gutter, r.bottom + gutter)}px`);
+      };
+      const schedule = () => {
+        if (!frame) frame = requestAnimationFrame(position);
+      };
+      const measure = () => {
+        const collapsed = canCollapse && getComputedStyle(button).getPropertyValue('--m-header-collapse').trim() === '1';
+        if (collapsed !== this.hasAttribute('data-m-header-collapsed')) {
+          const active = document.activeElement;
+          const hidingFocus = collapsed && (nav.contains(active) || this.querySelector(':scope > [data-actions]')?.contains(active));
+          const triggerFocus = !collapsed && active === button;
+          close();
+          closeGroups();
+          if (collapsed) nav.setAttribute('popover', 'auto');
+          else nav.removeAttribute('popover');
+          this.toggleAttribute('data-m-header-collapsed', collapsed);
+          if (hidingFocus) button.focus();
+          else if (!collapsed && nav.contains(active)) {
+            const group = groups.find(d => d.contains(active));
+            (group ? group.firstElementChild : active).focus();
+          }
+          else if (triggerFocus) nav.querySelector('a[href], summary')?.focus();
+        }
+        schedule();
+      };
+      // beforetoggle fires while the popover is still hidden. Measuring in
+      // toggle gives actual link geometry, before the next paint.
+      nav.addEventListener('toggle', event => { if (event.target !== nav) return; if (nav.matches(':popover-open')) position(); else closeGroups(); }, { signal });
+      nav.addEventListener('click', event => {
+        const link = event.target.closest('a[href]');
+        if (link && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) queueMicrotask(() => { if (!event.defaultPrevented) { closeGroups(); close(); } });
+      }, { signal });
+      window.addEventListener('scroll', schedule, { signal, capture: true, passive: true });
+      window.addEventListener('resize', measure, { signal, passive: true });
+      window.visualViewport?.addEventListener('resize', schedule, { signal, passive: true });
+      window.visualViewport?.addEventListener('scroll', schedule, { signal, passive: true });
+      const observer = new ResizeObserver(measure);
+      observer.observe(this);
+      for (const group of groups) {
+        group.addEventListener('toggle', () => {
+          if (group.open) for (const other of groups) if (other !== group) other.open = false;
+          schedule();
+        }, { signal });
+        observer.observe(group.querySelector(':scope > [data-nav-panel]'));
+      }
+      if (groups.length) {
+        nav.setAttribute('data-m-navigation-ready', '');
+        nav.addEventListener('keydown', event => {
+          if (event.key !== 'Escape') return;
+          const group = groups.find(d => d.open);
+          if (!group) return;
+          event.preventDefault();
+          event.stopPropagation();
+          group.open = false;
+          group.firstElementChild.focus();
+        }, { signal });
+        document.addEventListener('click', event => {
+          if (!nav.contains(event.target)) closeGroups();
+        }, { signal });
+        nav.addEventListener('focusout', event => {
+          if (event.relatedTarget) {
+            if (!nav.contains(event.relatedTarget)) closeGroups();
+          } else requestAnimationFrame(() => {
+            if (!signal.aborted && !nav.contains(document.activeElement)) closeGroups();
+          });
+        }, { signal });
+      }
+      this.#cleanup = () => {
+        controller.abort();
+        observer.disconnect();
+        cancelAnimationFrame(frame);
+        close();
+        closeGroups();
+        nav.removeAttribute('data-m-navigation-ready');
+        for (const group of groups) {
+          const panel = group.querySelector(':scope > [data-nav-panel]');
+          for (const name of ['left', 'top', 'height', 'max-width']) panel.style.removeProperty(`--m-nav-${name}`);
+        }
+        nav.removeAttribute('popover');
+        this.removeAttribute('data-m-header-collapsed');
+        for (const name of ['width', 'left', 'height', 'top']) nav.style.removeProperty(`--m-header-menu-${name}`);
+      };
+      measure();
+    });
+  }
+
+  disconnectedCallback() {
+    this.#cleanup?.();
+    this.#cleanup = undefined;
+  }
+}
+
+if (!customElements.get('m-header')) customElements.define('m-header', MHeader);

package/mica.css

@@ -764,6 +764,68 @@
     --m-badge-color: var(--color-danger-text);
   }
 
+  /* Callouts are CSS-only content. Variants never imply role=alert.
+     Optional icons and dismissal controls are authored, not generated.
+     For a neutral panel with colored emphasis, override --callout-background
+     and --callout-border to the shared surface and border roles. */
+  :where(m-callout) {
+    --callout-background: var(--color-surface-raised);
+    --callout-border: var(--color-border);
+    --callout-emphasis: var(--color-text);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--callout-gap, var(--space-sm));
+    padding: var(--callout-padding, var(--space-md));
+    border: 1px solid var(--callout-border);
+    border-radius: var(--radius-md);
+    background: var(--callout-background);
+    color: var(--color-text);
+    font-size: var(--callout-font-size, .875rem);
+    line-height: var(--callout-line-height, 1.5);
+  }
+  :where(m-callout[variant="success"]) {
+    --callout-background: var(--color-success-surface);
+    --callout-border: var(--color-success-border);
+    --callout-emphasis: var(--color-success-text);
+  }
+  :where(m-callout[variant="warning"]) {
+    --callout-background: var(--color-warn-surface);
+    --callout-border: var(--color-warn-border);
+    --callout-emphasis: var(--color-warn-text);
+  }
+  :where(m-callout[variant="danger"]) {
+    --callout-background: var(--color-danger-surface);
+    --callout-border: var(--color-danger-border);
+    --callout-emphasis: var(--color-danger-text);
+  }
+  :where(m-callout[hidden]) { display: none; }
+  :where(m-callout > [data-callout-body]) { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
+  :where(m-callout [data-callout-title]) {
+    margin: 0 0 var(--space-2xs);
+    color: var(--callout-emphasis);
+    font: inherit;
+    font-weight: var(--callout-title-weight, 600);
+  }
+  :where(m-callout > [data-callout-body] > p:not([data-callout-title])) { margin: 0; }
+  :where(m-callout > [data-callout-body] > p + p) { margin-block-start: var(--space-xs); }
+  :where(m-callout a) { color: var(--callout-emphasis); }
+  :where(m-callout > [data-callout-icon]) {
+    inline-size: var(--callout-icon-size, 1.125rem);
+    block-size: var(--callout-icon-size, 1.125rem);
+    flex: 0 0 auto;
+    margin-block-start: var(--callout-icon-offset, .125rem);
+    color: var(--callout-emphasis);
+  }
+  :where(m-callout [data-callout-actions]) { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-sm); }
+  :where(m-callout > button[data-callout-dismiss]) {
+    flex: 0 0 auto;
+    inline-size: var(--callout-dismiss-size, 2rem);
+    block-size: var(--callout-dismiss-size, 2rem);
+    padding: 0;
+    margin-block-start: calc(-1 * var(--space-2xs));
+    margin-inline-end: calc(-1 * var(--space-2xs));
+  }
+
   :where(m-badge[count]) {
     --m-badge-min-width: 1.5rem;
     --m-badge-padding: var(--space-2xs);
@@ -2011,6 +2073,556 @@
     display: block;
   }
 
+  /* --- header navigation: native links + optional header.js collapse --- */
+  :where(m-header) {
+    container: m-header / inline-size;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--header-gap, var(--space-md));
+    padding: var(--header-pad, var(--space-sm)) var(--header-gutter, var(--space-md));
+    border-block-end: 1px solid var(--color-border);
+    background: var(--color-surface);
+    color: var(--color-text);
+  }
+  :where(m-header > [data-brand]) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    min-block-size: var(--control-height);
+    color: var(--color-text);
+    font-weight: var(--header-strong-weight, 650);
+    text-decoration: none;
+    overflow-wrap: anywhere;
+  }
+  :where(m-header > nav) {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2xs);
+    min-inline-size: 0;
+    justify-content: var(--header-nav-align, start);
+  }
+  :where(m-header[align="end"]) { --header-nav-align: end; }
+  :where(m-header > nav > a) {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: var(--control-height);
+    padding: var(--space-2xs) var(--space-sm);
+    border-radius: var(--radius-md);
+    color: var(--color-text-muted);
+    font-size: var(--header-font-size, .875rem);
+    font-weight: var(--header-font-weight, 500);
+    text-decoration: none;
+    overflow-wrap: anywhere;
+  }
+  :where(m-header > nav > a):hover:not([aria-disabled="true"]) { background: var(--color-surface-raised); color: var(--color-text); }
+  :where(m-header > nav > a)[aria-current="page"]{ background: var(--color-surface-raised); color: var(--color-text); font-weight: var(--header-strong-weight, 650); }
+  :where(m-header > nav > a)[aria-disabled="true"]{ color: var(--color-text-muted); opacity: .5; }
+  :where(m-header > [data-actions]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-inline-start: auto; }
+  /* A small enhancement switches the same nav between inline and native
+     popover. Without script, all links stay visible in the wrapping header. */
+  :where(m-header > [data-menu]) { display: none; }
+  :where(m-header > nav > [data-compact]) { display: none; }
+  :where(m-header[data-m-header-collapsed]) { flex-wrap: nowrap; }
+  :where(m-header[data-m-header-collapsed] > [data-brand]) { min-inline-size: 0; }
+  :where(m-header[data-m-header-collapsed] > [data-actions]) { display: none; }
+  :where(m-header[data-m-header-collapsed] > [data-menu]) { display: inline-flex; margin-inline-start: auto; flex: none; }
+  :where(m-header > nav[popover]):not(:popover-open) { display: none; }
+  :where(m-header > nav[popover]):popover-open{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: start;
+    align-items: stretch;
+    gap: var(--space-2xs);
+    position: fixed;
+    position-area: none;
+    max-inline-size: none;
+    scale: 1;
+    inset: auto;
+    top: var(--m-header-menu-top);
+    left: var(--m-header-menu-left);
+    width: var(--m-header-menu-width);
+    max-block-size: var(--m-header-menu-height);
+    overflow-y: auto;
+    margin: 0;
+    padding: var(--space-xs);
+    border: 1px solid var(--color-border-strong);
+    border-radius: var(--radius-md);
+    background: var(--color-surface-overlay);
+    color: var(--color-text);
+    box-shadow: none;
+    opacity: 1;
+    transform: none;
+    transition: none;
+    animation: none;
+  }
+  :where(m-header > nav[popover] > a) { min-block-size: var(--header-target-height, 2.75rem); flex-shrink: 0; }
+  :where(m-header > nav[popover] > [data-compact]) { display: inline-flex; }
+  :where(m-header > nav[popover] > :not([data-compact]) + [data-compact]) { border-block-start: 1px solid var(--color-border); }
+  :where(m-header > [data-menu] svg) { inline-size: 1rem; block-size: 1rem; }
+
+
+  :where(m-header > [data-menu]) { --m-header-collapse: 0; }
+  @container m-header (inline-size < 40rem) {
+    :where(m-header > [data-menu]) { --m-header-collapse: 1; }
+  }
+
+
+  /* Navigation disclosures: native details remain usable without header.js.
+     Enhancement adds floating placement; mobile keeps content in flow.
+     Panel contents are authored links and layouts, never ARIA menu widgets. */
+  :where(m-header > nav[data-navigation-menu]) {
+    --nav-panel-width: 34rem;
+    --nav-panel-gap: var(--space-xs);
+    --nav-panel-pad: var(--space-xs);
+    --nav-panel-link-pad: var(--space-sm);
+    --nav-panel-description-size: .8125rem;
+    --nav-panel-heading-size: .6875rem;
+    --nav-panel-z: 10;
+  }
+  :where(m-header > nav[data-navigation-menu] > details) { margin: 0; padding: 0; border: 0; background: none; max-inline-size: 100%; }
+  :where(m-header > nav[data-navigation-menu] > details)::details-content { transition: none; overflow: visible; }
+  :where(m-header > nav[data-navigation-menu] > details > summary) {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    min-block-size: var(--control-height);
+    padding: var(--space-2xs) var(--space-sm);
+    font-size: var(--header-font-size, .875rem);
+    font-weight: var(--header-font-weight, 500);
+    color: var(--color-text-muted);
+    border-radius: var(--radius-md);
+  }
+  :where(m-header > nav[data-navigation-menu] > details > summary):hover {
+    text-decoration: none; color: var(--color-text); background: var(--color-surface-raised);
+  }
+  :where(m-header > nav[data-navigation-menu] > details)[open] > :where(summary) {
+    color: var(--color-text); background: var(--color-surface-raised);
+  }
+  :where(m-header > nav[data-navigation-menu] [data-nav-panel]) {
+    inline-size: min(var(--nav-panel-width), var(--m-nav-max-width, calc(100vw - 2 * var(--nav-panel-gap))));
+    max-inline-size: 100%;
+    max-block-size: var(--m-nav-height, none);
+    margin: 0;
+    padding: var(--nav-panel-pad);
+    row-gap: var(--nav-panel-gap);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface-overlay);
+    overflow: auto;
+  }
+  :where(m-header > nav[data-m-navigation-ready] > details > [data-nav-panel]) {
+    position: fixed; z-index: var(--nav-panel-z);
+    left: var(--m-nav-left); top: var(--m-nav-top);
+  }
+  :where(m-header > nav[data-navigation-menu] [data-nav-panel] a) {
+    display: block;
+    padding: var(--nav-panel-link-pad);
+    border-radius: var(--radius-md);
+    color: var(--color-text);
+    text-decoration: none;
+    font-size: var(--header-font-size, .875rem);
+    overflow-wrap: anywhere;
+  }
+  :where(m-header > nav[data-navigation-menu] [data-nav-panel] a):hover:not([aria-disabled="true"]),
+  :where(m-header > nav[data-navigation-menu] [data-nav-panel] a)[aria-current="page"] { background: var(--color-surface-raised); }
+  :where(m-header > nav[data-navigation-menu] [data-nav-panel] a)[aria-disabled="true"] { opacity: .5; }
+  :where(m-header > nav[data-navigation-menu] [data-nav-panel] strong) { display: block; font-weight: var(--header-strong-weight, 650); }
+  :where(m-header > nav[data-navigation-menu] [data-nav-panel] small) {
+    display: block; margin-block-start: var(--space-2xs);
+    font-size: var(--nav-panel-description-size); color: var(--color-text-muted);
+  }
+  :where(m-header > nav[data-navigation-menu] [data-nav-panel] h2) {
+    margin: 0; padding: var(--nav-panel-link-pad);
+    font-size: var(--nav-panel-heading-size); font-weight: var(--header-font-weight, 500); color: var(--color-text-muted);
+  }
+  :where(m-header[data-m-header-collapsed] > nav[data-navigation-menu] > details) { flex-shrink: 0; }
+  :where(m-header[data-m-header-collapsed] > nav[data-navigation-menu] > details > summary) { min-block-size: var(--header-target-height, 2.75rem); }
+  :where(m-header[data-m-header-collapsed] > nav[data-navigation-menu] > details > [data-nav-panel]) {
+    position: static; inline-size: auto; max-block-size: none;
+    margin: var(--space-xs) var(--space-sm); padding: 0 0 0 var(--space-xs);
+    padding-inline: var(--space-xs) 0;
+    border: 0; border-inline-start: 1px solid var(--color-border);
+    border-radius: 0; background: transparent; overflow: visible;
+  }
+
+  /* Data collections: application-owned rows and state, native table semantics.
+     Column widths and sticky offsets are authored for the application's schema.
+     Selection actions replace filters; keep filters inert while selection is active.
+     For a taller action set, increase --table-toolbar-min-height to reserve space. */
+  :where(:root) {
+    --table-font-size: .8125rem;
+    --table-padding: var(--space-lg);
+    --table-cell-padding: var(--space-sm);
+    --table-min-width: 54rem;
+    --table-toolbar-min-height: 0px;
+    --table-selected-background: var(--color-surface-raised);
+    --table-edge-width: var(--space-md);
+    --table-edge-color: color-mix(in oklch, var(--color-text) 14%, transparent);
+    --table-state-padding: var(--space-2xl);
+  }
+  :where([data-data-table]) { container: mica-table / inline-size; background: var(--color-surface); border: 1px solid var(--color-border); min-inline-size: 0; }
+  :where([data-table-heading]) { display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); padding:var(--table-padding) var(--table-padding) var(--space-sm); }
+  :where([data-table-heading] > button) { flex-shrink:0; white-space:nowrap; }
+  :where([data-table-heading] h2) { margin:0; font-size:var(--table-heading-size, 1.375rem); }
+  :where([data-table-heading] p) { margin:var(--space-2xs) 0 0; color:var(--color-text-muted); font-size:var(--table-font-size); }
+  :where([data-table-toolbar]) { position:relative; min-block-size:var(--table-toolbar-min-height); }
+  :where([data-table-filters], [data-table-selection]) { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-xs); padding:var(--space-sm) var(--table-padding); }
+  :where([data-table-filters] [data-table-search]) { flex:1; min-inline-size:12rem; }
+  :where([data-table-search] input) { inline-size:100%; }
+  :where([data-table-filters] select) { max-inline-size:11rem; }
+  :where([data-table-filters] button) { white-space:nowrap; }
+  :where([data-table-selection]) { position:absolute; inset:0; align-content:center; gap:var(--space-sm); font-size:var(--table-font-size); }
+  :where([data-table-toolbar]):has(> [data-table-selection]:not([hidden])) > :where([data-table-filters]) { visibility:hidden; }
+  :where([data-table-selection] [data-table-clear]) { margin-inline-start:auto; }
+  :where([data-data-table] [hidden], [data-pagination] [hidden], [data-table-selection][hidden], [data-table-filters] [hidden], [data-table] [hidden]) { display:none; }
+  :where(m-table-scroll) { display:block; position:relative; min-inline-size:0; }
+  :where(m-table-scroll)::before, :where(m-table-scroll)::after { content:''; position:absolute; inset-block:1px; inline-size:var(--table-edge-width); z-index:4; pointer-events:none; opacity:0; }
+  :where(m-table-scroll)::before { left:var(--m-table-edge-left, 0px); background:linear-gradient(to right,var(--table-edge-color),transparent); }
+  :where(m-table-scroll)::after { right:var(--m-table-edge-right, 0px); background:linear-gradient(to left,var(--table-edge-color),transparent); }
+  :where(m-table-scroll[data-m-overflow-left])::before, :where(m-table-scroll[data-m-overflow-right])::after { opacity:1; }
+  :where([data-table-region]) { position:relative; overflow:auto; overscroll-behavior:contain; border-block:1px solid var(--color-border); }
+  :where(table[data-table]) { margin:0; inline-size:100%; min-inline-size:var(--table-min-width, 54rem); border-collapse:separate; border-spacing:0; table-layout:fixed; }
+  :where([data-table] th, [data-table] td) { padding:var(--table-cell-padding, var(--space-sm)); vertical-align:middle; font-size:var(--table-font-size, .8125rem); }
+  :where([data-table] thead th) { background:var(--color-surface-raised); color:var(--color-text-muted); font-weight:500; border-block-end:1px solid var(--color-border); }
+  :where([data-table] th button) { display:inline-flex; align-items:center; gap:var(--space-xs); padding:0; min-block-size:var(--table-sort-target, 2rem); border:0; background:none; color:inherit; font:inherit; text-align:inherit; white-space:nowrap; }
+  :where([data-table] th[aria-sort]) button { color:var(--color-text); }
+  :where([data-table] td a) { color:var(--color-text); font-weight:600; text-decoration:none; }
+  :where([data-table] td) a:hover { text-decoration:underline; }
+  :where([data-table-description]) { display:block; color:var(--color-text-muted); margin-block-start:var(--space-2xs); font-size:var(--table-description-size, .75rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  :where([data-table] tbody tr:last-child td) { border-block-end:0; }
+  :where([data-table] tbody tr[data-selected]) > td { background:var(--table-selected-background, var(--color-surface-raised)); }
+  :where([data-table-state]) { padding:var(--table-state-padding, var(--space-2xl)) var(--table-padding, var(--space-lg)); text-align:center; white-space:normal; }
+  :where([data-table-state] strong) { display:block; color:var(--color-text); font-size:var(--table-state-font-size, 1rem); }
+  :where([data-table-state] p) { margin-block:var(--space-xs) var(--space-md); color:var(--color-text-muted); }
+  :where([data-table-region][data-state] table) { min-inline-size:100%; table-layout:auto; }
+  :where([data-table-region][data-state] thead) { display:none; }
+  :where([data-table-footer]) { container: mica-pagination / inline-size; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-md); padding:var(--space-md) var(--table-padding); font-size:var(--table-font-size); }
+  :where([data-page-meta]) { display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap; color:var(--color-text-muted); }
+  :where([data-page-size]) { display:flex; align-items:center; gap:var(--space-xs); }
+  :where([data-page-size] select) { inline-size:auto; min-block-size:2rem; padding-block:var(--space-2xs); font-size:1rem; }
+  :where(nav[data-pagination]) { --pagination-target:2.125rem; --pagination-font-size:.8125rem; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2xs); }
+  :where([data-pagination] > a, [data-pagination] > button, [data-pagination] > [aria-disabled]) { display:inline-flex; justify-content:center; align-items:center; min-inline-size:var(--pagination-target); min-block-size:var(--pagination-target); padding:var(--space-2xs) var(--space-xs); border:0; background:transparent; color:var(--color-text); font-size:var(--pagination-font-size); text-decoration:none; }
+  :where([data-pagination]) > a:hover { background:var(--color-surface-raised); }
+  :where([data-pagination]) > [aria-current=page] { background:var(--color-surface-raised); font-weight:650; color:var(--color-text); }
+  :where([data-pagination]) > :is([aria-disabled=true], :disabled) { color:var(--color-text-muted); cursor:default; }
+  :where([data-page-status]) { display:none; color:var(--color-text-muted); font-size:var(--pagination-font-size); }
+  @container mica-table (max-width:44rem) {
+    :where([data-table-heading]) { padding:var(--space-md); }
+    :where([data-table-filters]) { padding:0 var(--space-md) var(--space-sm); }
+    :where([data-table-search]) { flex-basis:100%; }
+    :where([data-table-filters] select) { flex:1; min-inline-size:0; max-inline-size:none; }
+    :where([data-table-selection]) { padding-inline:var(--space-md); }
+    :where([data-table-footer]) { padding:var(--space-md); gap:var(--space-sm); }
+    :where([data-table] [data-table-sticky]) { position:sticky; inset-inline-start:var(--table-sticky-offset, 0px); background:var(--color-surface); z-index:1; }
+    :where([data-table] thead [data-table-sticky]) { background:var(--color-surface-raised); z-index:3; }
+  }
+  /* A compact status is opt-in: include data-page-status to let numbered
+     links collapse. Without it, every authored page link remains visible. */
+  @container mica-pagination (max-width:40rem) {
+    :where([data-page-meta]) { inline-size:100%; justify-content:space-between; gap:var(--space-xs); }
+    :where([data-pagination]):has([data-page-status]) { inline-size:100%; justify-content:space-between; }
+    :where([data-pagination]):has([data-page-status]) > :is([data-page-number], [data-page-ellipsis]) { display:none; }
+    :where([data-pagination] [data-page-status]) { display:block; }
+  }
+
+  /* Breadcrumbs: native hierarchy with decorative separators. The current
+     page is plain text; nothing is automatically removed on narrow screens.
+     Override --breadcrumb-current-weight or --breadcrumb-separator-color
+     to tune emphasis without changing the authored trail. */
+  :where(nav[data-breadcrumbs]) {
+    --breadcrumb-font-size: .8125rem;
+    --breadcrumb-gap: var(--space-xs);
+    --breadcrumb-row-gap: var(--space-2xs);
+    --breadcrumb-current-weight: 500;
+    --breadcrumb-separator-size: .3rem;
+    --breadcrumb-separator-color: var(--color-text-muted);
+    --breadcrumb-menu-width: 14rem;
+    --breadcrumb-overflow-font-size: 1rem;
+    --breadcrumb-menu-target: 2.25rem;
+    --breadcrumb-menu-z: 5;
+    font-size: var(--breadcrumb-font-size);
+    line-height: 1.5;
+    color: var(--color-text-muted);
+  }
+  :where(nav[data-breadcrumbs] ol) {
+    display: flex; align-items: center; flex-wrap: wrap;
+    list-style: none; margin: 0; padding: 0;
+    column-gap: var(--breadcrumb-gap); row-gap: var(--breadcrumb-row-gap);
+  }
+  :where(nav[data-breadcrumbs] li) {
+    display: flex; align-items: center; gap: var(--breadcrumb-gap);
+    min-inline-size: 0; max-inline-size: 100%;
+  }
+  :where(nav[data-breadcrumbs] > ol > li + li)::before {
+    content: ''; display: block; flex: none;
+    inline-size: var(--breadcrumb-separator-size); block-size: var(--breadcrumb-separator-size);
+    border: solid var(--breadcrumb-separator-color); border-width: 1px 1px 0 0;
+    transform: rotate(45deg); margin-inline: var(--space-2xs);
+  }
+  :where(nav[data-breadcrumbs]:dir(rtl) > ol > li + li)::before { transform: rotate(225deg); }
+  :where(nav[data-breadcrumbs] a) {
+    color: var(--color-text-muted); text-decoration: none;
+    overflow-wrap: anywhere; padding-block: var(--space-2xs);
+  }
+  :where(nav[data-breadcrumbs] a):hover { text-decoration: underline; color: var(--color-text); }
+  :where(nav[data-breadcrumbs] [aria-current="page"]) {
+    color: var(--color-text); font-weight: var(--breadcrumb-current-weight);
+    overflow-wrap: anywhere; padding-block: var(--space-2xs);
+  }
+  :where(m-breadcrumb-overflow) { display: block; min-inline-size: 0; }
+  :where(nav[data-breadcrumbs] details) { position: relative; margin: 0; border: 0; padding: 0; flex: none; }
+  :where(nav[data-breadcrumbs] summary) {
+    display: grid; place-items: center;
+    inline-size: var(--breadcrumb-menu-target); min-block-size: var(--breadcrumb-menu-target);
+    padding: 0; list-style: none; font-size: var(--breadcrumb-overflow-font-size);
+    font-weight: var(--breadcrumb-current-weight); border-radius: var(--radius-md);
+    color: var(--color-text-muted); cursor: pointer;
+  }
+  :where(nav[data-breadcrumbs] summary)::-webkit-details-marker { display: none; }
+  :where(nav[data-breadcrumbs] summary)::after { display: none; }
+  :where(nav[data-breadcrumbs] summary):hover,
+  :where(nav[data-breadcrumbs] details)[open] > :where(summary) {
+    background: var(--color-surface-raised); color: var(--color-text); text-decoration: none;
+  }
+  :where(nav[data-breadcrumbs] details)::details-content { transition: none; overflow: visible; }
+  :where(nav[data-breadcrumbs] [data-breadcrumb-menu]) {
+    position: absolute; inset-block-start: 100%; inset-inline-start: 0;
+    inline-size: var(--breadcrumb-menu-width); max-inline-size: calc(100vw - var(--space-2xl));
+    max-block-size: var(--m-breadcrumb-height, none); overflow: auto;
+    z-index: var(--breadcrumb-menu-z); display: flex; flex-direction: column;
+    align-items: stretch; flex-wrap: nowrap; gap: 0;
+    margin: var(--space-2xs) 0 0; padding: var(--space-xs);
+    border: 1px solid var(--color-border); border-radius: var(--radius-md);
+    background: var(--color-surface-overlay);
+  }
+  :where(m-breadcrumb-overflow[data-m-breadcrumb-ready] [data-breadcrumb-menu]) {
+    position: fixed; inset: auto; left: var(--m-breadcrumb-left); top: var(--m-breadcrumb-top);
+  }
+  :where(nav[data-breadcrumbs] [data-breadcrumb-menu] li) { display: block; max-inline-size: none; flex: none; }
+  :where(nav[data-breadcrumbs] [data-breadcrumb-menu] a) {
+    display: block; padding: var(--space-xs); min-block-size: var(--breadcrumb-menu-target);
+  }
+  :where(nav[data-breadcrumbs] [data-breadcrumb-menu] a):hover { background: var(--color-surface-raised); text-decoration: none; }
+
+  /* Bottom navigation is ordinary site navigation, not a tab widget.
+     Place it in the last row of an app shell; no fixed positioning or
+     breakpoint is imposed. For emphasis without fill, override
+     --bottom-nav-active-background: transparent on the nav. */
+  :where(nav[data-bottom-nav]) {
+    --bottom-nav-pad: var(--space-xs);
+    --bottom-nav-gap: var(--space-2xs);
+    --bottom-nav-target-height: 3.5rem;
+    --bottom-nav-font-size: .75rem;
+    --bottom-nav-font-weight: 500;
+    --bottom-nav-active-weight: 650;
+    --bottom-nav-icon-size: 1.125rem;
+    --bottom-nav-active-background: var(--color-surface-raised);
+    display: flex;
+    gap: var(--bottom-nav-gap);
+    padding: var(--bottom-nav-pad);
+    padding-block-end: max(var(--bottom-nav-pad), env(safe-area-inset-bottom));
+    /* Safe-area insets are physical, even in an RTL document. */
+    padding-left: max(var(--bottom-nav-pad), env(safe-area-inset-left));
+    padding-right: max(var(--bottom-nav-pad), env(safe-area-inset-right));
+    border-block-start: 1px solid var(--color-border);
+    background: var(--color-surface);
+  }
+  :where(nav[data-bottom-nav]:not(:has([data-bottom-icon]))) {
+    --bottom-nav-target-height: 2.75rem;
+    --bottom-nav-font-size: .8125rem;
+  }
+  :where(nav[data-bottom-nav] > a) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--bottom-nav-gap);
+    min-inline-size: 0;
+    min-block-size: var(--bottom-nav-target-height);
+    padding: var(--space-xs) var(--space-2xs);
+    border-radius: var(--radius-md);
+    color: var(--color-text-muted);
+    font-size: var(--bottom-nav-font-size);
+    font-weight: var(--bottom-nav-font-weight);
+    line-height: 1.25;
+    text-align: center;
+    text-decoration: none;
+    overflow-wrap: anywhere;
+  }
+  :where(nav[data-bottom-nav] > a):hover:not([aria-disabled="true"]) {
+    background: var(--color-surface-raised);
+    color: var(--color-text);
+  }
+  :where(nav[data-bottom-nav] > a)[aria-current="page"] {
+    background: var(--bottom-nav-active-background);
+    color: var(--color-text);
+    font-weight: var(--bottom-nav-active-weight);
+  }
+  :where(nav[data-bottom-nav] > a)[aria-disabled="true"] { opacity: .45; cursor: default; }
+  :where(nav[data-bottom-nav] [data-bottom-icon]) {
+    inline-size: var(--bottom-nav-icon-size);
+    block-size: var(--bottom-nav-icon-size);
+    flex: none;
+  }
+
+  /* --- sidebar: authored navigation, optional sidebar.js shell behavior --- */
+  :where(m-sidebar-layout) {
+    --sidebar-width: 15.5rem;
+    --sidebar-rail-width: 3.75rem;
+    --sidebar-mobile-width: 18rem;
+    --sidebar-pad: var(--space-xs);
+    --sidebar-icon-size: 1rem;
+    --sidebar-font-size: .875rem;
+    --sidebar-group-size: .6875rem;
+    --sidebar-subnav-size: .8125rem;
+    --sidebar-active-weight: 600;
+    --sidebar-close-size: 2.75rem;
+    --sidebar-inset: 0px;
+    --sidebar-content-border: 0px;
+    --sidebar-edge: 1px;
+    display: grid;
+    grid-template-columns: var(--m-sidebar-track, var(--sidebar-width)) minmax(0, 1fr);
+    block-size: var(--sidebar-height, 100svh);
+    min-block-size: 0;
+    background: var(--color-surface-raised);
+  }
+  :where(m-sidebar-layout[variant="inset"]) {
+    --sidebar-inset: var(--space-xs);
+    --sidebar-content-border: 1px;
+    --sidebar-edge: 0px;
+  }
+  :where(m-sidebar-layout > [data-sidebar-main]) {
+    min-inline-size: 0;
+    min-block-size: 0;
+    overflow: auto;
+    margin-block: var(--sidebar-inset);
+    margin-inline: 0 var(--sidebar-inset);
+    border: var(--sidebar-content-border) solid var(--color-border);
+    background: var(--color-surface);
+  }
+  :where(m-sidebar) {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    min-block-size: 0;
+    block-size: 100%;
+    padding: var(--sidebar-pad, var(--space-xs));
+    border-inline-end: var(--sidebar-edge, 1px) solid var(--color-border);
+    background: var(--color-surface-raised);
+  }
+  :where(m-sidebar > header, m-sidebar > footer) { flex: none; }
+  :where(m-sidebar > header) { display: flex; align-items: center; }
+  :where(m-sidebar > nav) {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-block: var(--space-md);
+  }
+  :where(m-sidebar > nav section) { margin: 0 0 var(--space-lg); }
+  :where(m-sidebar > nav h2) {
+    margin: 0;
+    padding: var(--space-xs);
+    font-size: var(--sidebar-group-size, .6875rem);
+    font-weight: 500;
+    color: var(--color-text-muted);
+  }
+  :where(m-sidebar [data-sidebar-item], m-sidebar [data-sidebar-subnav] > a) {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    min-block-size: var(--control-height);
+    block-size: auto;
+    padding: var(--space-xs);
+    border: 0;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--color-text-muted);
+    font-size: var(--sidebar-font-size, .875rem);
+    text-decoration: none;
+    text-align: start;
+  }
+  :where(m-sidebar [data-sidebar-item], m-sidebar [data-sidebar-subnav] > a):hover:not(:disabled, [aria-disabled="true"]) {
+    color: var(--color-text);
+    background: var(--color-surface);
+  }
+  :where(m-sidebar a)[aria-current="page"] {
+    color: var(--color-text);
+    background: var(--color-surface);
+    font-weight: var(--sidebar-active-weight, 600);
+    /* Active is a quiet fill, never a framed button. */
+    box-shadow: none;
+  }
+  :where(m-sidebar [data-sidebar-item])[aria-disabled="true"] { opacity: .45; }
+  :where(m-sidebar [data-sidebar-icon]) {
+    inline-size: var(--sidebar-icon-size, 1rem);
+    block-size: var(--sidebar-icon-size, 1rem);
+    flex: none;
+    object-fit: contain;
+  }
+  :where(m-sidebar [data-sidebar-label]) { flex: 1; min-inline-size: 0; }
+  :where(m-sidebar [data-sidebar-badge]) { margin-inline-start: auto; color: var(--color-text-muted); font-size: var(--sidebar-subnav-size, .8125rem); }
+  :where(m-sidebar > header > [data-sidebar-item], m-sidebar > footer > [data-sidebar-item]) { inline-size: 100%; }
+  :where(m-sidebar details) { margin: 0; padding: 0; border: 0; background: none; }
+  :where(m-sidebar summary) { cursor: pointer; list-style: none; }
+  :where(m-sidebar summary)::-webkit-details-marker { display: none; }
+  :where(m-sidebar summary)::after { display: none; }
+  :where(m-sidebar [data-sidebar-chevron]) { inline-size: var(--space-sm); block-size: var(--space-sm); flex: none; }
+  :where(m-sidebar details)[open] > :where(summary) > :where([data-sidebar-chevron]) { transform: rotate(90deg); }
+  :where(m-sidebar [data-sidebar-subnav]) {
+    margin: var(--space-2xs) 0 var(--space-xs) var(--sidebar-icon-size, 1rem);
+    margin-inline: var(--sidebar-icon-size, 1rem) 0;
+    padding: 0;
+    padding-inline-start: var(--space-md);
+    border-inline-start: 1px solid var(--color-border);
+  }
+  :where(m-sidebar [data-sidebar-subnav] > a) { font-size: var(--sidebar-subnav-size, .8125rem); }
+  :where([data-sidebar-toggle], [data-sidebar-close]) { display: none; }
+  :where(m-sidebar-layout[data-m-sidebar-rail]) { --m-sidebar-track: var(--sidebar-rail-width); }
+  :where(m-sidebar-layout[data-m-sidebar-rail] m-sidebar) :where([data-sidebar-label], [data-sidebar-badge], h2, [data-sidebar-chevron], [data-sidebar-subnav]) { display: none; }
+  :where(m-sidebar-layout[data-m-sidebar-rail] m-sidebar [data-sidebar-item]) { justify-content: center; }
+  :where(m-sidebar-layout[data-m-sidebar-rail] m-sidebar details:has([aria-current="page"]) > summary) { color: var(--color-text); background: var(--color-surface); }
+  :where(m-sidebar-layout[data-m-sidebar-can-rail] [data-sidebar-toggle], m-sidebar-layout[data-m-sidebar-mobile] [data-sidebar-toggle]) { display: inline-flex; }
+  :where(m-sidebar-layout[data-m-sidebar-mobile]) { grid-template-columns: minmax(0, 1fr); --sidebar-inset: 0px; --sidebar-content-border: 0px; }
+  :where(dialog[data-sidebar-dialog]) {
+    position: fixed;
+    inset: 0 auto 0 0;
+    inset-inline: 0 auto;
+    margin: 0;
+    padding: 0;
+    inline-size: min(var(--sidebar-mobile-width, 18rem), calc(100vw - var(--space-2xl)));
+    max-inline-size: none;
+    block-size: 100dvh;
+    max-block-size: 100dvh;
+    border: 0;
+    border-radius: 0;
+    background: var(--color-surface-raised);
+    opacity: 1;
+    scale: 1;
+    transform: none;
+    transition: none;
+    animation: none;
+  }
+  :where(dialog[data-sidebar-dialog])::backdrop { transition: none; }
+  :where(dialog[data-sidebar-dialog] > m-sidebar) {
+    flex: 1 1 auto;
+    overflow: hidden;
+    border: 0;
+    padding: var(--sidebar-pad, var(--space-xs));
+    padding-block-start: max(var(--sidebar-pad, var(--space-xs)), env(safe-area-inset-top));
+    padding-block-end: max(var(--sidebar-pad, var(--space-xs)), env(safe-area-inset-bottom));
+  }
+  :where(dialog[data-sidebar-dialog] m-sidebar > header > [data-sidebar-item]) { flex: 1; inline-size: 0; min-inline-size: 0; }
+  :where(dialog[data-sidebar-dialog] [data-sidebar-close]) { display: inline-flex; flex: none; inline-size: var(--sidebar-close-size, 2.75rem); block-size: var(--sidebar-close-size, 2.75rem); padding: var(--space-xs); }
+  @media (max-width: 44rem) {
+    :where(m-sidebar-layout:not([data-m-sidebar-ready])) { grid-template-columns: minmax(0, 1fr); block-size: auto; }
+  }
+
   /* --- visually hidden: off-screen, still announced ------------------ *
    *
    * The one utility mica ships, and an accessibility primitive rather

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akonwi/mica",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Custom elements. Native behavior. Nearly no JavaScript.",
   "keywords": [
     "css",
@@ -55,6 +55,22 @@
     },
     "./types/react": {
       "types": "./types/react.d.ts"
+    },
+    "./header.js": {
+      "types": "./header.d.ts",
+      "default": "./header.js"
+    },
+    "./sidebar.js": {
+      "types": "./sidebar.d.ts",
+      "default": "./sidebar.js"
+    },
+    "./breadcrumbs.js": {
+      "types": "./breadcrumbs.d.ts",
+      "default": "./breadcrumbs.js"
+    },
+    "./table.js": {
+      "types": "./table.d.ts",
+      "default": "./table.js"
     }
   },
   "files": [
@@ -76,7 +92,15 @@
     "combobox.js",
     "combobox.d.ts",
     "types/react.d.ts",
-    "THIRD_PARTY_LICENSES.md"
+    "THIRD_PARTY_LICENSES.md",
+    "header.js",
+    "header.d.ts",
+    "sidebar.js",
+    "sidebar.d.ts",
+    "breadcrumbs.js",
+    "breadcrumbs.d.ts",
+    "table.js",
+    "table.d.ts"
   ],
   "sideEffects": true,
   "devDependencies": {
@@ -93,6 +117,13 @@
     "docs:serve": "bun run docs:build && bun tools/serve.ts",
     "snapshot": "bun tools/snapshot.ts",
     "snapshot:check": "bun tools/snapshot.ts --check",
-    "snapshot:setup": "playwright install chromium webkit"
+    "snapshot:setup": "playwright install chromium webkit",
+    "header:check": "bun tools/header-check.ts",
+    "sidebar:check": "bun tools/sidebar-check.ts",
+    "navigation-menu:check": "bun tools/navigation-menu-check.ts",
+    "bottom-navigation:check": "bun tools/bottom-navigation-check.ts",
+    "breadcrumbs:check": "bun tools/breadcrumbs-check.ts",
+    "data-table:check": "bun tools/data-table-check.ts",
+    "callout:check": "bun tools/callout-check.ts"
   }
 }

package/sidebar.d.ts

@@ -0,0 +1,11 @@
+export interface MSidebarLayoutElement extends HTMLElement {
+  open(): void;
+  close(): void;
+  toggle(): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "m-sidebar": HTMLElement;
+    "m-sidebar-layout": MSidebarLayoutElement;
+  }
+}

package/sidebar.js

@@ -0,0 +1,135 @@
+/* Optional sidebar shell enhancement. The panel, dialog, controls, and all
+ * icons are authored HTML. Only the same panel is moved into the native
+ * dialog on narrow containers; no UI or navigation is generated. */
+class MSidebarLayout extends HTMLElement {
+  #cleanup;
+  #actions;
+  #refresh;
+  static observedAttributes = ['collapse'];
+  attributeChangedCallback() { this.#refresh?.(); }
+  open() { this.#actions?.open(); }
+  close() { this.#actions?.close(); }
+  toggle() { this.#actions?.toggle(); }
+
+  connectedCallback() {
+    queueMicrotask(() => {
+      if (!this.isConnected || this.#cleanup) return;
+      const sidebar = this.querySelector(':scope > m-sidebar');
+      const main = this.querySelector(':scope > [data-sidebar-main]');
+      const dialog = this.querySelector(':scope > dialog[data-sidebar-dialog]');
+      if (!sidebar?.id || !main || !dialog || !('showModal' in dialog) || dialog.open || dialog.children.length) return;
+      const triggers = [...main.querySelectorAll('button[data-sidebar-toggle]')].filter(b => b.getAttribute('aria-controls') === sidebar.id);
+      const closers = [...sidebar.querySelectorAll('button[data-sidebar-close]')];
+      if (!triggers.length || !closers.length) return;
+      const originalExpanded = triggers.map(b => b.getAttribute('aria-expanded'));
+      const controller = new AbortController();
+      const { signal } = controller;
+      let mobile = false;
+      let rail = false;
+      let canRail = false;
+      let opener = triggers[0];
+      const focusable = 'a[href],button:not(:disabled),summary';
+      const closePopovers = () => sidebar.querySelectorAll('[popover]:popover-open').forEach(p => p.hidePopover());
+      const update = () => {
+        this.toggleAttribute('data-m-sidebar-mobile', mobile);
+        this.toggleAttribute('data-m-sidebar-rail', rail && canRail && !mobile);
+        this.toggleAttribute('data-m-sidebar-can-rail', canRail && !mobile);
+        for (const button of triggers) button.setAttribute('aria-expanded', String(mobile ? dialog.open : !(rail && canRail)));
+      };
+      const setRail = value => {
+        closePopovers();
+        const active = document.activeElement;
+        rail = value && canRail;
+        update();
+        if (sidebar.contains(active) && active instanceof HTMLElement && !active.getClientRects().length) triggers[0].focus();
+      };
+      const open = () => {
+        if (mobile) {
+          if (!dialog.open) dialog.showModal();
+          update();
+        } else setRail(false);
+      };
+      const close = () => {
+        if (mobile) {
+          closePopovers();
+          if (dialog.open) dialog.close();
+          update();
+        } else setRail(true);
+      };
+      const toggle = () => mobile ? (dialog.open ? close() : open()) : setRail(!rail);
+      const measure = () => {
+        const active = document.activeElement;
+        // Icon collapse is explicitly requested and requires named, authored
+        // icons. Invalid icon anatomy falls back to the expanded desktop panel.
+        const items = [...sidebar.querySelectorAll('[data-sidebar-item]')].filter(e => !e.closest('[data-sidebar-subnav], [popover]'));
+        canRail = this.getAttribute('collapse') === 'icon' && items.length > 0 && items.every(e => e.querySelector('[data-sidebar-icon]') && (e.hasAttribute('aria-label') || e.hasAttribute('aria-labelledby')));
+        const nextMobile = this.getBoundingClientRect().width < 44 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+        if (nextMobile !== mobile || sidebar.parentElement !== (nextMobile ? dialog : this)) {
+          const hadSidebarFocus = sidebar.contains(active);
+          closePopovers();
+          if (dialog.open) dialog.close();
+          mobile = nextMobile;
+          if (mobile) dialog.append(sidebar);
+          else this.insertBefore(sidebar, main);
+          update();
+          if (hadSidebarFocus && active instanceof HTMLElement) {
+            if (mobile) opener.focus();
+            else {
+              // Preserve a focused nested link when returning to desktop.
+              if (active.closest('[data-sidebar-subnav]')) rail = false;
+              update();
+              if (active.matches('[data-sidebar-close]')) sidebar.querySelector(focusable)?.focus();
+              else active.focus();
+            }
+          } else if (!mobile && triggers.includes(active) && !canRail) sidebar.querySelector(focusable)?.focus();
+        } else update();
+      };
+      for (const button of triggers) button.addEventListener('click', () => { opener = button; toggle(); }, { signal });
+      for (const button of closers) button.addEventListener('click', close, { signal });
+      dialog.addEventListener('close', () => {
+        update();
+        // WebKit can leave focus on body after closing a modal that contained
+        // a popover. Preserve router-assigned focus elsewhere in the page.
+        if (mobile && (document.activeElement === document.body || dialog.contains(document.activeElement))) opener.focus();
+      }, { signal });
+      dialog.addEventListener('click', event => {
+        if (event.target !== dialog) return;
+        const r = dialog.getBoundingClientRect();
+        if (event.clientX < r.left || event.clientX > r.right || event.clientY < r.top || event.clientY > r.bottom) close();
+      }, { signal });
+      sidebar.addEventListener('click', event => {
+        const summary = event.target.closest('summary');
+        if (summary && rail && !mobile) {
+          event.preventDefault();
+          setRail(false);
+          summary.parentElement.open = true;
+        }
+        const link = event.target.closest('a[href]');
+        if (link && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) queueMicrotask(() => { if (!event.defaultPrevented && mobile) close(); });
+      }, { signal });
+      const observer = new ResizeObserver(measure);
+      observer.observe(this);
+      window.addEventListener('resize', measure, { signal, passive: true });
+      this.#actions = { open, close, toggle };
+      this.#refresh = measure;
+      this.#cleanup = () => {
+        controller.abort();
+        observer.disconnect();
+        closePopovers();
+        if (dialog.open) dialog.close();
+        this.insertBefore(sidebar, main);
+        for (const name of ['ready', 'mobile', 'rail', 'can-rail']) this.removeAttribute(`data-m-sidebar-${name}`);
+        triggers.forEach((b, i) => originalExpanded[i] === null ? b.removeAttribute('aria-expanded') : b.setAttribute('aria-expanded', originalExpanded[i]));
+      };
+      this.setAttribute('data-m-sidebar-ready', '');
+      measure();
+    });
+  }
+
+  disconnectedCallback() {
+    this.#cleanup?.();
+    this.#cleanup = this.#actions = this.#refresh = undefined;
+  }
+}
+
+if (!customElements.get('m-sidebar-layout')) customElements.define('m-sidebar-layout', MSidebarLayout);

package/table.d.ts

@@ -0,0 +1,5 @@
+/** Optional visual overflow indicators; native scrolling works without JS. */
+declare global {
+  interface HTMLElementTagNameMap { "m-table-scroll": HTMLElement; }
+}
+export {};

package/table.js

@@ -0,0 +1,59 @@
+/** Optional overflow indicators. Authored rows, selection, sorting, and paging
+ * remain application-owned. The native scroll region works without this module. */
+class MicaTableScroll extends HTMLElement {
+  connectedCallback() {
+    this._abort?.abort();
+    this._resize?.disconnect();
+    this._mutation?.disconnect();
+    this._abort = new AbortController();
+    this._update = () => {
+      cancelAnimationFrame(this._frame);
+      this._frame = requestAnimationFrame(() => this._measure());
+    };
+    this.addEventListener('scroll', this._update, { capture: true, passive: true, signal: this._abort.signal });
+    window.addEventListener('resize', this._update, { signal: this._abort.signal });
+    this._resize = new ResizeObserver(this._update);
+    this._observe = () => {
+      this._resize.disconnect();
+      this._resize.observe(this);
+      const region = this.querySelector(':scope > [data-table-region]');
+      if (region) this._resize.observe(region);
+      const table = region?.querySelector('table');
+      if (table) this._resize.observe(table);
+      this._update();
+    };
+    this._mutation = new MutationObserver(this._observe);
+    this._mutation.observe(this, { subtree: true, childList: true, attributes: true, attributeFilter: ['hidden', 'data-state', 'dir'] });
+    this._observe();
+  }
+  _measure() {
+    const region = this.querySelector(':scope > [data-table-region]');
+    const table = region?.querySelector('table');
+    if (!region || !table) return;
+    const r = region.getBoundingClientRect(), t = table.getBoundingClientRect();
+    const overflow = !region.hasAttribute('data-state') && region.scrollWidth > region.clientWidth + 1;
+    this.toggleAttribute('data-m-overflow-left', overflow && t.left < r.left - 1);
+    this.toggleAttribute('data-m-overflow-right', overflow && t.right > r.right + 1);
+    let left = 0, right = 0;
+    const rtl = getComputedStyle(region).direction === 'rtl';
+    for (const cell of table.querySelectorAll('thead [data-table-sticky]')) {
+      if (getComputedStyle(cell).position !== 'sticky' || !cell.getClientRects().length) continue;
+      const c = cell.getBoundingClientRect();
+      if (rtl) right = Math.max(right, r.right - c.left);
+      else left = Math.max(left, c.right - r.left);
+    }
+    this.style.setProperty('--m-table-edge-left', `${left}px`);
+    this.style.setProperty('--m-table-edge-right', `${right}px`);
+  }
+  disconnectedCallback() {
+    this._abort?.abort();
+    this._resize?.disconnect();
+    this._mutation?.disconnect();
+    cancelAnimationFrame(this._frame);
+    this.removeAttribute('data-m-overflow-left');
+    this.removeAttribute('data-m-overflow-right');
+    this.style.removeProperty('--m-table-edge-left');
+    this.style.removeProperty('--m-table-edge-right');
+  }
+}
+if (!customElements.get('m-table-scroll')) customElements.define('m-table-scroll', MicaTableScroll);

package/types/react.d.ts

@@ -51,6 +51,11 @@ declare module 'react' {
 
       // components
       'm-segmented': MicaElement
+      'm-sidebar': MicaElement
+      'm-sidebar-layout': MicaElement<{ variant?: 'docked' | 'inset'; collapse?: 'icon' }>
+      'm-table-scroll': MicaElement
+      'm-breadcrumb-overflow': MicaElement
+      'm-header': MicaElement<{ align?: 'start' | 'end' }>
       'm-stepper': MicaElement
       'm-tabs': MicaElement<{ variant?: 'underline' }>
       'm-badge': MicaElement<{
@@ -61,6 +66,7 @@ declare module 'react' {
         blobatar?: string
         contained?: boolean
       }>
+      'm-callout': MicaElement<{ variant?: 'neutral' | 'success' | 'warning' | 'danger' }>
       'm-skeleton': MicaElement
       'm-toast': MicaElement<{
         popover?: 'manual'