@akonwi/mica 0.9.0 → 0.11.0

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);
@@ -847,6 +909,85 @@
       );
   }
 
+  /* --- skeleton: quiet CSS-only loading placeholder ---------------- */
+  :where(m-skeleton) {
+    display: block;
+    flex: none;
+    inline-size: var(--skeleton-width, 100%);
+    block-size: var(--skeleton-height, 0.75rem);
+    overflow: hidden;
+    border-radius: var(--skeleton-radius, var(--radius-md));
+    background-color: var(--color-surface-raised);
+    animation: mica-skeleton-pulse 1.6s ease-in-out infinite alternate;
+  }
+
+  @keyframes mica-skeleton-pulse {
+    to {
+      background-color: var(--color-border);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(m-skeleton) {
+      animation: none;
+      background-color: var(--color-border);
+    }
+  }
+
+  /* --- stat grid: semantic summaries in a fused frame -------------- */
+  :where(dl.stat-grid) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1px;
+    margin-block: 0;
+    padding: 1px;
+    overflow: hidden;
+    border-radius: var(--radius-md);
+    background: var(--color-border);
+  }
+
+  :where(dl.stat-grid) > :where(div.stat) {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 min(100%, 8rem);
+    gap: var(--space-sm);
+    min-inline-size: 0;
+    padding: var(--space-md);
+    background: var(--color-surface);
+  }
+
+  :where(dl.stat-grid) > :where(div.stat) > :where(dt) {
+    color: var(--color-text-muted);
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  :where(dl.stat-grid) > :where(div.stat) > :where(dd) {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    gap: var(--space-2xs);
+    min-inline-size: 0;
+    margin-block: 0;
+  }
+
+  :where(dl.stat-grid) > :where(div.stat) > :where(dd) > :first-child {
+    color: var(--color-text);
+    font-size: 1.5rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+    overflow-wrap: anywhere;
+  }
+
+  :where(dl.stat-grid) > :where(div.stat) > :where(dd) > :where(small) {
+    margin-block-start: auto;
+    color: var(--color-text-muted);
+    font-size: 0.75rem;
+    line-height: 1.4;
+  }
+
   /* --- content: tables, lists, code, quotes ------------------------ */
   :where(table) {
     inline-size: 100%;
@@ -983,6 +1124,71 @@
     background: var(--color-danger);
   }
 
+  /* --- stepper: framed sequence controls --------------------------- *
+   * Mica owns only the fused layout. Consumers own labels, disabled
+   * state, events, routing, and value changes. The frame deliberately does
+   * not clip overflow: native focus rings must remain fully visible.
+   * ------------------------------------------------------------------ */
+  :where(m-stepper) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: stretch;
+    min-inline-size: 0;
+    border: 1px solid var(--color-border-strong);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+  }
+
+  :where(m-stepper:has(> [data-reset])) {
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+  }
+
+  :where(m-stepper) > :where(button) {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+
+    &:focus-visible {
+      z-index: 1;
+    }
+  }
+
+  :where(m-stepper) > :where(button:first-child) {
+    border-start-start-radius: inherit;
+    border-end-start-radius: inherit;
+  }
+
+  :where(m-stepper) > :where(button:last-child) {
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
+  }
+
+  :where(m-stepper) > :where([data-step]) {
+    inline-size: var(--control-height);
+    padding-inline: 0;
+  }
+
+  :where(m-stepper) > :where(:nth-child(2)) {
+    display: grid;
+    place-items: center;
+    min-inline-size: 0;
+    block-size: var(--control-height);
+    padding-inline: var(--space-sm);
+    overflow: hidden;
+    border-inline: 1px solid var(--color-border);
+    background: var(--color-surface-raised);
+    color: var(--color-text);
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(m-stepper) > :where([data-reset]) {
+    border-inline-start: 1px solid var(--color-border);
+  }
+
   /* --- dialog: modal + drawer --------------------------------------- *
    * The browser brings focus trapping, Esc, top layer, ::backdrop, and
    * form[method=dialog] closing. Invoker commands (commandfor/command)
@@ -1535,38 +1741,136 @@
   /* --- tabs: m-tabs + tabs.js (JS-enhanced) ------------------------------ *
    * without the module: inert nav, all panels visible in order —
    * complete content. with it: tablist semantics + roving focus.
-   * shadcn segmented look: muted track, surface active tab.
+   * default: muted track + surface active tab. variant="underline":
+   * quiet rail + accent selection line; behavior stays identical.
    * ------------------------------------------------------------------ */
   :where(m-tabs) {
+    --m-tabs-rail-gap: var(--space-2xs);
+    --m-tabs-rail-padding: var(--space-2xs);
+    --m-tabs-rail-border: none;
+    --m-tabs-rail-radius: var(--radius-md);
+    --m-tabs-rail-background: var(--neutral-3);
+    --m-tabs-overflow-cover: var(--neutral-3);
+    --m-tabs-overflow-duration: 0.15s;
+    --m-tabs-overflow-marker: color-mix(in oklch, var(--color-text-muted) 70%, transparent);
+    --m-tabs-overflow-start-gutter: 0px;
+    --m-tabs-overflow-end-gutter: 0px;
+    --m-tabs-overflow-start: 0;
+    --m-tabs-overflow-end: 0;
+    --m-tabs-tab-radius: var(--radius-sm);
+    --m-tabs-tab-edge-padding: var(--space-sm);
+    --m-tabs-tab-focus-offset: var(--focus-ring-offset);
+    --m-tabs-tab-selected-background: var(--color-surface);
+    --m-tabs-tab-selected-shadow: 0 1px 2px oklch(0 0 0 / 0.08);
     display: block;
   }
 
+  :where(m-tabs[variant="underline"]) {
+    --m-tabs-rail-gap: 0;
+    --m-tabs-rail-padding: 0;
+    --m-tabs-rail-border: 1px solid var(--color-border);
+    --m-tabs-rail-radius: 0;
+    --m-tabs-rail-background: transparent;
+    --m-tabs-overflow-cover: var(--color-surface);
+    --m-tabs-tab-radius: 0;
+    --m-tabs-tab-edge-padding: 0;
+    --m-tabs-tab-focus-offset: -2px;
+    --m-tabs-tab-selected-background: transparent;
+    --m-tabs-tab-selected-shadow: inset 0 -2px var(--color-accent);
+  }
+
   :where(m-tabs) > :where(nav) {
     display: inline-flex;
-    gap: var(--space-2xs);
-    padding: var(--space-2xs);
-    background: var(--neutral-3);
-    border-radius: var(--radius-md);
+    gap: var(--m-tabs-rail-gap);
+    padding: var(--m-tabs-rail-padding);
+    border-block-end: var(--m-tabs-rail-border);
+    border-radius: var(--m-tabs-rail-radius);
+    background: var(--m-tabs-rail-background);
 
     /* Graceful collapse: labels never wrap inside a tab — when the rail
-       is narrower than its tabs it scrolls horizontally instead. The
-       thin scrollbar is the overflow affordance on platforms that show
-       one; scroll chaining stays contained. */
+       is narrower than its tabs it scrolls horizontally instead. Before
+       enhancement, the native scrollbar remains the overflow affordance.
+       tabs.js hides it, activates sticky direction markers in clear
+       gutters, and reveals a selected tab within those gutters. Scroll
+       chaining stays contained. */
     max-inline-size: 100%;
     overflow-x: auto;
     overscroll-behavior-x: contain;
     scrollbar-width: thin;
 
+    &[role="tablist"] {
+      scrollbar-width: none;
+    }
+
+    &::before,
+    &::after {
+      content: "";
+      position: sticky;
+      z-index: 1;
+      align-self: stretch;
+      background-color: var(--m-tabs-overflow-cover);
+      background-position: center;
+      background-size: 6px 10px;
+      background-repeat: no-repeat;
+      pointer-events: none;
+    }
+
+    &::before {
+      inset-inline-start: 0;
+      flex: 0 0 var(--space-md);
+      margin-inline-end: calc(var(--m-tabs-overflow-start-gutter) - var(--space-md));
+      opacity: var(--m-tabs-overflow-start);
+      background-image: conic-gradient(from 45deg at left center,
+        var(--m-tabs-overflow-marker) 0 25%, transparent 0);
+      transition:
+        opacity var(--m-tabs-overflow-duration),
+        margin-inline-end var(--m-tabs-overflow-duration);
+    }
+
+    &::after {
+      inset-inline-end: 0;
+      flex: 0 0 var(--space-md);
+      margin-inline-start: calc(var(--m-tabs-overflow-end-gutter) - var(--space-md));
+      opacity: var(--m-tabs-overflow-end);
+      background-image: conic-gradient(from 225deg at right center,
+        var(--m-tabs-overflow-marker) 0 25%, transparent 0);
+      transition:
+        opacity var(--m-tabs-overflow-duration),
+        margin-inline-start var(--m-tabs-overflow-duration);
+    }
+
+    &:dir(rtl)::before {
+      background-image: conic-gradient(from 225deg at right center,
+        var(--m-tabs-overflow-marker) 0 25%, transparent 0);
+    }
+
+    &:dir(rtl)::after {
+      background-image: conic-gradient(from 45deg at left center,
+        var(--m-tabs-overflow-marker) 0 25%, transparent 0);
+    }
+
     & > :where(button) {
       flex-shrink: 0;
       white-space: nowrap;
       block-size: var(--control-height-sm);
       padding-inline: var(--space-sm);
       border: 0;
-      border-radius: var(--radius-sm);
+      border-radius: var(--m-tabs-tab-radius);
       background: transparent;
       color: var(--color-text-muted);
 
+      &:first-of-type {
+        padding-inline-start: var(--m-tabs-tab-edge-padding);
+      }
+
+      &:last-of-type {
+        padding-inline-end: var(--m-tabs-tab-edge-padding);
+      }
+
+      &:focus-visible {
+        outline-offset: var(--m-tabs-tab-focus-offset);
+      }
+
       /* :not() guards mirror the base button states (house rule) */
       &:hover:not(:disabled, [aria-disabled="true"]),
       &:active:not(:disabled, [aria-disabled="true"]) {
@@ -1575,19 +1879,25 @@
       }
 
       &[aria-selected="true"] {
-        background: var(--color-surface);
+        background: var(--m-tabs-tab-selected-background);
         color: var(--color-text);
-        box-shadow: 0 1px 2px oklch(0 0 0 / 0.08);
+        box-shadow: var(--m-tabs-tab-selected-shadow);
 
         &:hover:not(:disabled, [aria-disabled="true"]),
         &:active:not(:disabled, [aria-disabled="true"]) {
-          background: var(--color-surface);
+          background: var(--m-tabs-tab-selected-background);
           color: var(--color-text);
         }
       }
     }
   }
 
+  /* Vendor pseudo gets its own rule: one unknown selector in a list
+     invalidates the whole list. */
+  :where(m-tabs) > :where(nav[role="tablist"])::-webkit-scrollbar {
+    display: none;
+  }
+
   :where(m-tabs) > :where(section) {
     padding-block: var(--space-md);
   }
@@ -1763,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