@akonwi/mica 0.9.0 → 0.10.0

package/mica.css

@@ -847,6 +847,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 +1062,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 +1679,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 +1817,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);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akonwi/mica",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Custom elements. Native behavior. Nearly no JavaScript.",
   "keywords": [
     "css",

package/tabs.d.ts

@@ -1,5 +1,6 @@
 /* Type declarations for mica/tabs.js — side-effect module.
- * Registers <m-tabs>: roving tabindex, arrow keys, aria-selected wiring.
+ * Registers <m-tabs>: roving tabindex, arrow keys, aria-selected wiring,
+ * selected-tab reveal, and directional overflow markers.
  */
 declare global {
   interface HTMLElementTagNameMap {

package/tabs.js

@@ -3,7 +3,8 @@
  * Enhances working light-DOM markup; never renders it. Without this
  * module, the nav buttons are inert and every panel is visible in
  * order — complete, readable content. With it: real tablist semantics,
- * roving tabindex, arrow-key navigation, automatic activation.
+ * roving tabindex, arrow-key navigation, automatic activation, and
+ * selected-tab reveal with position-aware overflow markers.
  *
  *   <m-tabs>
  *     <nav>
@@ -23,10 +24,43 @@ let uid = 0;
 class MTabs extends HTMLElement {
   #tabs = [];
   #panels = [];
+  #nav = null;
+  #overflowing = false;
+  #resizeObserver = null;
+  #revealFrame = null;
+  #onScroll = () => this.#syncOverflow();
+  #cancelReveal = () => {
+    if (this.#revealFrame !== null) cancelAnimationFrame(this.#revealFrame);
+    this.#revealFrame = null;
+  };
+  #onClick = (event) => {
+    const tab = event.target instanceof Element ? event.target.closest("button") : null;
+    const index = this.#tabs.indexOf(tab);
+    if (index === -1) return;
+    this.select(index);
+    this.#reveal(index);
+  };
+  #onKeyDown = (event) => {
+    const n = this.#tabs.length;
+    const current = this.#tabs.findIndex(
+      (tab) => tab.getAttribute("aria-selected") === "true",
+    );
+    let next = null;
+    if (event.key === "ArrowRight") next = (current + 1) % n;
+    else if (event.key === "ArrowLeft") next = (current - 1 + n) % n;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = n - 1;
+    if (next === null) return;
+    event.preventDefault();
+    this.select(next); // automatic activation, radix-style
+    this.#tabs[next].focus({ preventScroll: true });
+    this.#reveal(next);
+  };
 
   connectedCallback() {
     const nav = this.querySelector(":scope > nav");
     if (!nav) return;
+    this.#nav = nav;
     this.#tabs = [...nav.querySelectorAll("button")];
     const sections = [...this.querySelectorAll(":scope > section")];
     this.#panels = this.#tabs.map((b, i) => {
@@ -44,29 +78,117 @@ class MTabs extends HTMLElement {
         panel.setAttribute("aria-labelledby", tab.id);
         panel.tabIndex = 0;
       }
-      tab.addEventListener("click", () => this.select(i));
     });
 
-    nav.addEventListener("keydown", (e) => {
-      const n = this.#tabs.length;
-      const current = this.#tabs.findIndex(
-        (t) => t.getAttribute("aria-selected") === "true",
-      );
-      let next = null;
-      if (e.key === "ArrowRight") next = (current + 1) % n;
-      else if (e.key === "ArrowLeft") next = (current - 1 + n) % n;
-      else if (e.key === "Home") next = 0;
-      else if (e.key === "End") next = n - 1;
-      if (next === null) return;
-      e.preventDefault();
-      this.select(next); // automatic activation, radix-style
-      this.#tabs[next].focus();
-    });
+    nav.addEventListener("click", this.#onClick);
+    nav.addEventListener("keydown", this.#onKeyDown);
+    nav.addEventListener("pointerdown", this.#cancelReveal, { passive: true });
+    nav.addEventListener("wheel", this.#cancelReveal, { passive: true });
 
     const initial = this.#tabs.findIndex(
       (t) => t.hasAttribute("selected") || t.getAttribute("aria-selected") === "true",
     );
     this.select(initial === -1 ? 0 : initial);
+
+    nav.addEventListener("scroll", this.#onScroll, { passive: true });
+    this.#resizeObserver = new ResizeObserver(() => this.#measureOverflow());
+    this.#resizeObserver.observe(nav);
+    this.#tabs.forEach((tab) => this.#resizeObserver.observe(tab));
+    this.#measureOverflow();
+  }
+
+  disconnectedCallback() {
+    this.#nav?.removeEventListener("click", this.#onClick);
+    this.#nav?.removeEventListener("keydown", this.#onKeyDown);
+    this.#nav?.removeEventListener("pointerdown", this.#cancelReveal);
+    this.#nav?.removeEventListener("wheel", this.#cancelReveal);
+    this.#nav?.removeEventListener("scroll", this.#onScroll);
+    this.#resizeObserver?.disconnect();
+    this.#cancelReveal();
+    for (const property of [
+      "--m-tabs-overflow-start-gutter",
+      "--m-tabs-overflow-end-gutter",
+      "--m-tabs-overflow-start",
+      "--m-tabs-overflow-end",
+    ]) this.#nav?.style.removeProperty(property);
+    this.#nav = null;
+    this.#resizeObserver = null;
+  }
+
+  #measureOverflow() {
+    const nav = this.#nav;
+    if (!nav) return;
+    const style = getComputedStyle(nav);
+    const gap = Number.parseFloat(style.columnGap) || 0;
+    const padding = (Number.parseFloat(style.paddingInlineStart) || 0) +
+      (Number.parseFloat(style.paddingInlineEnd) || 0);
+    const tabsWidth = this.#tabs.reduce(
+      (width, tab) => width + tab.getBoundingClientRect().width,
+      padding + gap * Math.max(0, this.#tabs.length - 1),
+    );
+    this.#overflowing = tabsWidth > nav.clientWidth + 1;
+    this.#syncOverflow();
+  }
+
+  #syncOverflow() {
+    const nav = this.#nav;
+    if (!nav) return;
+    const offset = Math.abs(nav.scrollLeft);
+    const max = nav.scrollWidth - nav.clientWidth;
+    const start = this.#overflowing && offset > 1;
+    const end = this.#overflowing && offset < max - 1;
+    nav.style.setProperty("--m-tabs-overflow-start", String(start ? 1 : 0));
+    nav.style.setProperty("--m-tabs-overflow-end", String(end ? 1 : 0));
+    nav.style.setProperty(
+      "--m-tabs-overflow-start-gutter",
+      start ? "var(--space-md)" : "0px",
+    );
+    nav.style.setProperty(
+      "--m-tabs-overflow-end-gutter",
+      end ? "var(--space-md)" : "0px",
+    );
+  }
+
+  #reveal(index) {
+    const nav = this.#nav;
+    if (!nav || !this.#tabs[index]) return;
+    this.#cancelReveal();
+    const durations = getComputedStyle(nav, "::before").transitionDuration.split(",");
+    const duration = durations.reduce((longest, value) => {
+      const time = Number.parseFloat(value) * (value.trim().endsWith("ms") ? 1 : 1000);
+      return Math.max(longest, time);
+    }, 0);
+    // Follow the moving gutters through their transition, plus two frames
+    // for the scroll event that activates the newly exposed marker.
+    const settleAt = performance.now() + duration + 34;
+    let firstFrame = true;
+    const reveal = (now) => {
+      const nav = this.#nav;
+      const tab = this.#tabs[index];
+      if (!nav || !tab) return;
+      const navRect = nav.getBoundingClientRect();
+      const tabRect = tab.getBoundingClientRect();
+      const beforeStyle = getComputedStyle(nav, "::before");
+      const afterStyle = getComputedStyle(nav, "::after");
+      const before = Math.max(0,
+        (Number.parseFloat(beforeStyle.inlineSize) || 0) +
+        (Number.parseFloat(beforeStyle.marginInlineEnd) || 0));
+      const after = Math.max(0,
+        (Number.parseFloat(afterStyle.inlineSize) || 0) +
+        (Number.parseFloat(afterStyle.marginInlineStart) || 0));
+      const rtl = getComputedStyle(nav).direction === "rtl";
+      const left = navRect.left + (rtl ? after : before);
+      const right = navRect.right - (rtl ? before : after);
+      if (tabRect.left < left) nav.scrollBy({ left: tabRect.left - left });
+      else if (tabRect.right > right) nav.scrollBy({ left: tabRect.right - right });
+      if (firstFrame) {
+        this.#syncOverflow();
+        firstFrame = false;
+      }
+      if (now < settleAt) this.#revealFrame = requestAnimationFrame(reveal);
+      else this.#revealFrame = null;
+    };
+    this.#revealFrame = requestAnimationFrame(reveal);
   }
 
   select(index) {

package/types/react.d.ts

@@ -51,7 +51,8 @@ declare module 'react' {
 
       // components
       'm-segmented': MicaElement
-      'm-tabs': MicaElement
+      'm-stepper': MicaElement
+      'm-tabs': MicaElement<{ variant?: 'underline' }>
       'm-badge': MicaElement<{
         variant?: 'primary' | 'success' | 'warning' | 'danger'
         count?: boolean
@@ -60,6 +61,7 @@ declare module 'react' {
         blobatar?: string
         contained?: boolean
       }>
+      'm-skeleton': MicaElement
       'm-toast': MicaElement<{
         popover?: 'manual'
         variant?: 'success' | 'warning' | 'danger'