npm - @ponchia/ui - Versions diffs - 0.2.0 → 0.2.2 - Mend

@ponchia/ui 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/README.md CHANGED Viewed

@@ -18,19 +18,6 @@ npm i @ponchia/ui
 > deliberately distinct from the package name. See
 > [`docs/architecture.md`](docs/architecture.md).
-> Not published yet — the only remaining blocker is npm-account side
-> (create the `@ponchia` scope + `NPM_TOKEN`; see [Release](#release)).
-> Until the first publish, depend on a `file:` link to a checkout or a
-> pinned git tag:
->
-> ```json
-> { "dependencies": { "@ponchia/ui": "file:../bronto-ui" } }
-> ```
->
-> ```json
-> { "dependencies": { "@ponchia/ui": "github:Ponchia/bronto-ui#semver:^0.2.0" } }
-> ```
 Import the full theme (includes responsive breakpoints):
 ```css
@@ -43,6 +30,27 @@ Or the core bundle if the app manages its own responsive layer:
 @import '@ponchia/ui/css/core.css';
 ```
+**Prebuilt single file (recommended for apps without a CSS bundler).**
+`@ponchia/ui/css` is a 17-deep `@import` graph — fine through a bundler,
+a load waterfall over plain HTTP. The package also ships flattened,
+minified bundles with no `@import` chain:
+```css
+@import '@ponchia/ui';               /* → dist/bronto.css, full   */
+@import '@ponchia/ui/dist/bronto-core.css';   /* core, no responsive */
+```
+~62 kB raw / ~11 kB gzip, one request, same `@layer bronto`. Source CSS,
+tokens/classes/behaviors entrypoints are unchanged — use whichever fits.
+### Browser support
+Evergreen only — the framework relies on cascade layers (`@layer`),
+`:has()`, `color-mix()`, CSS logical properties and native `<dialog>`.
+Floor: **Chrome/Edge 111+, Safari 16.4+, Firefox 121+** (early 2023
+onward). No build-time fallback is shipped; pin an older tag if you must
+support below this.
 The Doto `@font-face` ships in `css/fonts.css` (bundled by both `css` and
 `css/core.css`) with URLs relative to the package, so it resolves through a
 bundler or static serving with no `/fonts` path assumption. To self-host the
@@ -59,6 +67,11 @@ escape hatch, not the default path.
 Set `data-theme="light"` or `data-theme="dark"` on `<html>`; defaults follow
 `prefers-color-scheme`.
+**Re-brand with one knob:** `--accent` drives the whole accent family
+(`color-mix`-derived). `:root { --accent: #2f6df6 }` — or scope it to a
+subtree — restyles everything, both themes. Plus `data-density` and
+`data-contrast` presets. Full contract: [`docs/theming.md`](docs/theming.md).
 ## Entrypoints
 The CSS is the framework. These optional sibling entrypoints are thin layers
@@ -77,9 +90,12 @@ themeColor('dark').accent; // → "#ff3b41"
 ```
 `behaviors` wires `[data-bronto-theme-toggle]`, `[data-bronto-dismiss]` /
-`[data-bronto-dismissible]`, and `[data-bronto-disclosure]`. Each initializer
-is SSR-safe and returns a cleanup function. `demo/index.html` drives itself
-with these modules, so it is also a live integration test.
+`[data-bronto-dismissible]`, `[data-bronto-disclosure]`, and native
+`<dialog>` glue (`initDialog`: `[data-bronto-open]` / `[data-bronto-close]`
+/ `[data-bronto-dialog-light]`). `toast(message, { tone, title, duration })`
+pushes into a shared, body-anchored stack. Each initializer is SSR-safe and
+returns a cleanup function. `demo/index.html` drives itself with these
+modules, so it is also a live integration test.
 ## Layout
@@ -89,14 +105,18 @@ with these modules, so it is also a live integration test.
 | `fonts.css`      | Doto `@font-face` (relative URLs; optional if self-hosting)    |
 | `base.css`       | reset, element defaults, focus, scrollbars                    |
 | `motion.css`     | keyframes + animation utilities + reduced-motion              |
-| `dots.css`       | dot-grid, dot rule, status dot, dot loader/bar, matrix reveal |
+| `dots.css`       | dot-grid, dot rule, status dot, dot loader, orbital dot spinner, dot bar (+ indeterminate), matrix reveal |
 | `primitives.css` | `ui-*` buttons, cards, chips, badges, links, key/value        |
 | `forms.css`      | inputs, select, textarea, search, switch, checkbox            |
+| `feedback.css`   | alert / callout, toast, tooltip, linear progress              |
+| `overlay.css`    | modal + drawer (native `<dialog>`), dropdown menu             |
+| `disclosure.css` | tabs, accordion (`<details>`), segmented, breadcrumb, pagination, avatar |
 | `table.css`      | `ui-table` dense / comfortable                                |
 | `app.css`        | admin shell: rail, topbar, toolbar, panel, metrics            |
 | `navigation.css` | site nav, menu, theme toggle (dot indicator)                  |
 | `typography.css` | display headings, eyebrows, legacy `.button`                  |
-| `cards.css`      | personal-site semantic cards (token-driven)                   |
+| `content.css`    | `.ui-prose` — Markdown/raw-HTML long-form, zero per-element classes |
+| `cards.css`      | semantic content cards (token-driven)                         |
 | `layout.css`     | site shell, hero, grids                                       |
 | `responsive.css` | breakpoint overrides                                          |
@@ -113,18 +133,30 @@ python3 -m http.server -d . 8080   # then open http://localhost:8080/demo/
 ```bash
 npm install        # stylelint + jsdom (test only)
-npm run check      # lint + 4 integrity checks (exports, tokens, classes, pack)
+npm run check      # lint + 5 integrity checks (exports, tokens, classes, dist, pack)
 npm test           # node:test — pure modules + jsdom behavior tests
-npm run lint:fix   # auto-fix the safe stylistic rules
+npm run lint:fix   # auto-fix the safe stylistic rules + logical properties
 npm run tokens:build  # regenerate tokens/index.json from tokens/index.js
+npm run dist:build    # rebuild the flattened dist/ bundles
 ```
 `npm run check` enforces that the data mirrors cannot drift from the CSS:
 exports/import-graph integrity, `tokens.css` ⇄ `tokens/index.{js,json}`, the
-`classes` registry ⇄ the `.ui-*` selectors, and that the published tarball
-ships only the intended files. CI
-(`.github/workflows/ci.yml`) runs it on every branch push and PR. It never
-publishes — a push to `main` ships nothing.
+`classes` registry ⇄ the `.ui-*` selectors, `dist/` ⇄ `css/` (fresh + in
+budget), and that the published tarball ships only the intended files.
+Visual + a11y regression is a separate suite (real browser, so not in the
+zero-dep core check):
+```bash
+npx playwright test   # demo screenshots (light/dark/RTL) + axe-core WCAG
+```
+It is pinned to a Playwright container so baselines are byte-stable; the
+committed baselines under `test/e2e/__screenshots__` were authored in that
+same image. CI (`.github/workflows/ci.yml`) runs both the `check` job and a
+containerised `visual` job on every branch push and PR. It never publishes —
+a push to `main` ships nothing.
 ## Release
@@ -142,19 +174,12 @@ the version never reaches npm, so consumers never resolve it. GitHub also
 serves the raw tag tarball ungated, but that is a legacy/fallback path, not
 the documented install. See [`docs/architecture.md`](docs/architecture.md).
-**Before the first real publish** — one npm-account step remains:
-- Create the `@ponchia` npm scope and add an `NPM_TOKEN` repo secret
-  (an npm automation token with publish rights to the scope).
-Done already: MIT `LICENSE`, `version` `0.2.0`, `publishConfig`, the
-gated publish workflow. After publishing, switch the consumer repos'
-dependency specifier to `@ponchia/ui`.
+Published: `@ponchia/ui` is live on npm (latest `0.2.1`), released by CI
+with provenance. The `@ponchia` scope and the `NPM_TOKEN` repo secret are
+in place, so a pushed `vX.Y.Z` tag is all a release needs.
 ## Consumers
-- `personal-site` — imports `@ponchia/ui/css/core.css`
-- `polpo-admin` — imports `@ponchia/ui/css`
-Both still pin the old tarball URL; they switch their dependency to
-`@ponchia/ui` once it is published (separate repos — not changed here).
+Built for two shapes of app: a content/marketing site (imports
+`@ponchia/ui/css/core.css`) and an admin dashboard (imports the full
+`@ponchia/ui/css`). Consuming apps depend on it via `@ponchia/ui`.

package/behaviors/index.d.ts CHANGED Viewed

@@ -38,3 +38,32 @@ export declare function dismissible(opts?: DelegateOpts): Cleanup;
 /** Wire `[data-bronto-disclosure]` triggers. Returns a cleanup function. */
 export declare function initDisclosure(opts?: DelegateOpts): Cleanup;
+/**
+ * Wire `[data-bronto-tabs]` groups with the WAI-ARIA Tabs keyboard
+ * pattern (roving tabindex, Arrow/Home/End, aria-selected, panel sync).
+ * Returns a cleanup function.
+ */
+export declare function initTabs(opts?: DelegateOpts): Cleanup;
+/**
+ * Wire native <dialog> open/close glue: `[data-bronto-open="id"]`,
+ * `[data-bronto-close]`, and backdrop light-dismiss for dialogs marked
+ * `[data-bronto-dialog-light]`. Returns a cleanup function.
+ */
+export declare function initDialog(opts?: DelegateOpts): Cleanup;
+export interface ToastOpts {
+  /** Status tone — maps to `ui-toast--<tone>`. */
+  tone?: 'accent' | 'success' | 'warning' | 'danger';
+  /** Optional uppercase label rendered above the message. */
+  title?: string;
+  /** Auto-dismiss delay in ms. 0 keeps it until dismissed. Default: 4000. */
+  duration?: number;
+}
+/**
+ * Push a transient toast into a shared, body-anchored stack. Returns a
+ * function that dismisses it early. No-op (returns noop) without a DOM.
+ */
+export declare function toast(message: string, opts?: ToastOpts): Cleanup;

package/behaviors/index.js CHANGED Viewed

@@ -116,6 +116,178 @@ export function dismissible({ root } = {}) {
   return () => host.removeEventListener('click', onClick);
 }
+/**
+ * Wire `[data-bronto-tabs]` groups for full keyboard a11y. The framework
+ * ships the look + the ARIA/`.is-active` contract; this adds the WAI-ARIA
+ * Tabs pattern: roving `tabindex`, `aria-selected`, Arrow/Home/End
+ * navigation with automatic activation, and panel `hidden` sync. Tabs are
+ * `.ui-tab[data-tab]`; panels are `.ui-tabs__panel[data-panel]` with
+ * matching values. SSR-safe; returns a cleanup function.
+ */
+export function initTabs({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const cleanups = [];
+  let uid = 0;
+  // querySelectorAll only matches descendants, so a `root` that *is* a
+  // tab group would be skipped — include it explicitly.
+  const groups = [];
+  if (host !== document && host.matches?.('[data-bronto-tabs]')) groups.push(host);
+  groups.push(...host.querySelectorAll('[data-bronto-tabs]'));
+  for (const group of groups) {
+    // Own group only — a tab/panel inside a nested [data-bronto-tabs]
+    // belongs to that inner group, not this one.
+    const owned = (el) => el.closest('[data-bronto-tabs]') === group;
+    const tabs = [...group.querySelectorAll('.ui-tab')].filter(owned);
+    const panels = [...group.querySelectorAll('.ui-tabs__panel')].filter(owned);
+    if (!tabs.length) continue;
+    const list = group.querySelector('.ui-tabs__list');
+    if (list) list.setAttribute('role', 'tablist');
+    // APG: bind each tab to its panel (aria-controls) and back
+    // (aria-labelledby), minting stable ids only where absent.
+    for (const t of tabs) {
+      const p = panels.find((x) => x.dataset.panel === t.dataset.tab);
+      if (!p) continue;
+      const n = ++uid;
+      if (!t.id) t.id = `bronto-tab-${n}`;
+      if (!p.id) p.id = `bronto-tabpanel-${n}`;
+      t.setAttribute('aria-controls', p.id);
+      p.setAttribute('aria-labelledby', t.id);
+    }
+    const select = (tab) => {
+      for (const t of tabs) {
+        const on = t === tab;
+        t.classList.toggle('is-active', on);
+        t.setAttribute('role', 'tab');
+        t.setAttribute('aria-selected', String(on));
+        t.tabIndex = on ? 0 : -1;
+      }
+      for (const p of panels) {
+        p.setAttribute('role', 'tabpanel');
+        p.hidden = p.dataset.panel !== tab.dataset.tab;
+      }
+    };
+    const onClick = (e) => {
+      // `tabs` is filtered to this group, so membership (not mere DOM
+      // containment) is what isolates nested [data-bronto-tabs] groups.
+      const tab = e.target.closest('.ui-tab');
+      if (tab && tabs.includes(tab)) {
+        select(tab);
+        tab.focus();
+      }
+    };
+    const onKey = (e) => {
+      const i = tabs.indexOf(e.target.closest('.ui-tab'));
+      if (i < 0) return;
+      let n = i;
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') n = (i + 1) % tabs.length;
+      else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') n = (i - 1 + tabs.length) % tabs.length;
+      else if (e.key === 'Home') n = 0;
+      else if (e.key === 'End') n = tabs.length - 1;
+      else return;
+      e.preventDefault();
+      select(tabs[n]);
+      tabs[n].focus();
+    };
+    group.addEventListener('click', onClick);
+    group.addEventListener('keydown', onKey);
+    select(tabs.find((t) => t.classList.contains('is-active')) || tabs[0]);
+    cleanups.push(() => {
+      group.removeEventListener('click', onClick);
+      group.removeEventListener('keydown', onKey);
+    });
+  }
+  return () => cleanups.forEach((fn) => fn());
+}
+/**
+ * Wire native <dialog> open/close glue (the one bit <dialog> can't do
+ * declaratively). Click `[data-bronto-open="dialogId"]` calls
+ * `showModal()` on `#dialogId`; click `[data-bronto-close]` closes the
+ * nearest enclosing <dialog>. Clicking the backdrop of a dialog that has
+ * `[data-bronto-dialog-light]` closes it too. SSR-safe; returns cleanup.
+ *
+ * `root` scopes which triggers are delegated (default `document`); the
+ * dialog itself is still resolved by id document-wide, because a modal
+ * <dialog> is promoted to the top layer and is inherently document-global
+ * (same model as `initThemeToggle`, where `root` scopes controls but the
+ * theme applies to <html>).
+ */
+export function initDialog({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const onClick = (e) => {
+    const opener = e.target.closest('[data-bronto-open]');
+    if (opener && host.contains(opener)) {
+      const dlg = document.getElementById(opener.getAttribute('data-bronto-open'));
+      if (dlg && typeof dlg.showModal === 'function' && !dlg.open) dlg.showModal();
+      return;
+    }
+    const closer = e.target.closest('[data-bronto-close]');
+    if (closer && host.contains(closer)) {
+      const dlg = closer.closest('dialog');
+      if (dlg && dlg.open) dlg.close();
+      return;
+    }
+    // Light-dismiss: a click whose target is the <dialog> itself is the
+    // backdrop (content sits in child elements).
+    const dlg = e.target;
+    if (
+      dlg.tagName === 'DIALOG' &&
+      dlg.open &&
+      dlg.hasAttribute('data-bronto-dialog-light') &&
+      host.contains(dlg)
+    ) {
+      dlg.close();
+    }
+  };
+  host.addEventListener('click', onClick);
+  return () => host.removeEventListener('click', onClick);
+}
+/**
+ * Push a transient toast into a shared, screen-anchored stack (created
+ * once and appended to <body>, `aria-live="polite"`). `tone` is one of
+ * accent/success/warning/danger; `title` is an optional uppercase label;
+ * `duration` ms before auto-dismiss (0 keeps it until dismissed). Returns
+ * a function that dismisses the toast early. SSR-safe (no-op).
+ */
+export function toast(message, { tone, title, duration = 4000 } = {}) {
+  if (!hasDom()) return noop;
+  let stack = document.querySelector('.ui-toast-stack');
+  if (!stack) {
+    stack = document.createElement('div');
+    stack.className = 'ui-toast-stack';
+    stack.setAttribute('aria-live', 'polite');
+    document.body.appendChild(stack);
+  }
+  const el = document.createElement('div');
+  el.className = tone ? `ui-toast ui-toast--${tone}` : 'ui-toast';
+  // No per-item role: the stack is already aria-live=polite; a nested
+  // status live region risks double announcement in some SRs.
+  if (title) {
+    const t = document.createElement('p');
+    t.className = 'ui-toast__title';
+    t.textContent = title;
+    el.appendChild(t);
+  }
+  const body = document.createElement('div');
+  body.textContent = message;
+  el.appendChild(body);
+  stack.appendChild(el);
+  let timer;
+  const dismiss = () => {
+    if (timer) clearTimeout(timer);
+    el.remove();
+    if (stack && !stack.childElementCount) stack.remove();
+  };
+  if (duration > 0) timer = setTimeout(dismiss, duration);
+  return dismiss;
+}
 /**
  * Disclosure: a `[data-bronto-disclosure]` trigger toggles the element
  * referenced by its `aria-controls` id, keeping `aria-expanded` and the

package/classes/index.d.ts CHANGED Viewed

@@ -49,6 +49,34 @@ export interface ClusterOpts {
 export interface StaggerOpts {
   auto?: boolean;
 }
+export type Tone = 'accent' | 'success' | 'warning' | 'danger';
+export interface AlertOpts {
+  tone?: Tone;
+}
+export interface ToastOpts {
+  tone?: Tone;
+}
+export interface ProgressOpts {
+  indeterminate?: boolean;
+}
+export interface DotspinnerOpts {
+  size?: 'sm' | 'lg';
+}
+export interface DotbarOpts {
+  indeterminate?: boolean;
+}
+export interface ModalOpts {
+  drawer?: boolean;
+}
+export interface TabOpts {
+  active?: boolean;
+}
+export interface AvatarOpts {
+  size?: 'sm' | 'lg';
+}
+export interface ProseOpts {
+  compact?: boolean;
+}
 export interface Ui {
   button(opts?: ButtonOpts): string;
@@ -63,6 +91,15 @@ export interface Ui {
   hint(opts?: HintOpts): string;
   cluster(opts?: ClusterOpts): string;
   stagger(opts?: StaggerOpts): string;
+  alert(opts?: AlertOpts): string;
+  toast(opts?: ToastOpts): string;
+  progress(opts?: ProgressOpts): string;
+  dotspinner(opts?: DotspinnerOpts): string;
+  dotbar(opts?: DotbarOpts): string;
+  modal(opts?: ModalOpts): string;
+  tab(opts?: TabOpts): string;
+  avatar(opts?: AvatarOpts): string;
+  prose(opts?: ProseOpts): string;
 }
 export declare const ui: Ui;

package/classes/index.js CHANGED Viewed

@@ -50,7 +50,11 @@ export const cls = Object.freeze({
   dotfield: 'ui-dotfield',
   dotrule: 'ui-dotrule',
   dotbar: 'ui-dotbar',
+  dotbarIndeterminate: 'ui-dotbar--indeterminate',
   dotloader: 'ui-dotloader',
+  dotspinner: 'ui-dotspinner',
+  dotspinnerSm: 'ui-dotspinner--sm',
+  dotspinnerLg: 'ui-dotspinner--lg',
   // forms
   field: 'ui-field',
   label: 'ui-label',
@@ -64,6 +68,58 @@ export const cls = Object.freeze({
   switchThumb: 'ui-switch__thumb',
   hint: 'ui-hint',
   hintError: 'ui-hint--error',
+  // feedback
+  alert: 'ui-alert',
+  alertTitle: 'ui-alert__title',
+  alertBody: 'ui-alert__body',
+  alertDismiss: 'ui-alert__dismiss',
+  alertAccent: 'ui-alert--accent',
+  alertSuccess: 'ui-alert--success',
+  alertWarning: 'ui-alert--warning',
+  alertDanger: 'ui-alert--danger',
+  toastStack: 'ui-toast-stack',
+  toast: 'ui-toast',
+  toastTitle: 'ui-toast__title',
+  toastAccent: 'ui-toast--accent',
+  toastSuccess: 'ui-toast--success',
+  toastWarning: 'ui-toast--warning',
+  toastDanger: 'ui-toast--danger',
+  tooltip: 'ui-tooltip',
+  tooltipBubble: 'ui-tooltip__bubble',
+  progress: 'ui-progress',
+  progressBar: 'ui-progress__bar',
+  progressIndeterminate: 'ui-progress--indeterminate',
+  // overlay
+  modal: 'ui-modal',
+  modalHead: 'ui-modal__head',
+  modalTitle: 'ui-modal__title',
+  modalBody: 'ui-modal__body',
+  modalFoot: 'ui-modal__foot',
+  modalClose: 'ui-modal__close',
+  modalDrawer: 'ui-modal--drawer',
+  menu: 'ui-menu',
+  menuLabel: 'ui-menu__label',
+  menuItem: 'ui-menu__item',
+  menuSep: 'ui-menu__sep',
+  // disclosure
+  tabs: 'ui-tabs',
+  tabsList: 'ui-tabs__list',
+  tab: 'ui-tab',
+  tabsPanel: 'ui-tabs__panel',
+  accordion: 'ui-accordion',
+  accordionItem: 'ui-accordion__item',
+  accordionSummary: 'ui-accordion__summary',
+  accordionBody: 'ui-accordion__body',
+  segmented: 'ui-segmented',
+  segmentedOption: 'ui-segmented__option',
+  breadcrumb: 'ui-breadcrumb',
+  breadcrumbItem: 'ui-breadcrumb__item',
+  pagination: 'ui-pagination',
+  paginationItem: 'ui-pagination__item',
+  avatar: 'ui-avatar',
+  avatarSm: 'ui-avatar--sm',
+  avatarLg: 'ui-avatar--lg',
+  avatarGroup: 'ui-avatar-group',
   // table
   table: 'ui-table',
   tableDense: 'ui-table--dense',
@@ -84,6 +140,8 @@ export const cls = Object.freeze({
   // typography / utilities
   eyebrow: 'ui-eyebrow',
   eyebrowMuted: 'ui-eyebrow--muted',
+  prose: 'ui-prose',
+  proseCompact: 'ui-prose--compact',
   display: 'ui-display',
   mono: 'ui-mono',
   muted: 'ui-muted',
@@ -154,6 +212,33 @@ export const ui = {
   hint: ({ error } = {}) => j(cls.hint, error && cls.hintError),
   cluster: ({ between } = {}) => j(cls.cluster, between && cls.clusterBetween),
   stagger: ({ auto } = {}) => j(cls.stagger, auto && cls.staggerAuto),
+  alert: ({ tone } = {}) =>
+    j(
+      cls.alert,
+      tone === 'accent' && cls.alertAccent,
+      tone === 'success' && cls.alertSuccess,
+      tone === 'warning' && cls.alertWarning,
+      tone === 'danger' && cls.alertDanger
+    ),
+  toast: ({ tone } = {}) =>
+    j(
+      cls.toast,
+      tone === 'accent' && cls.toastAccent,
+      tone === 'success' && cls.toastSuccess,
+      tone === 'warning' && cls.toastWarning,
+      tone === 'danger' && cls.toastDanger
+    ),
+  progress: ({ indeterminate } = {}) =>
+    j(cls.progress, indeterminate && cls.progressIndeterminate),
+  dotspinner: ({ size } = {}) =>
+    j(cls.dotspinner, size === 'sm' && cls.dotspinnerSm, size === 'lg' && cls.dotspinnerLg),
+  dotbar: ({ indeterminate } = {}) =>
+    j(cls.dotbar, indeterminate && cls.dotbarIndeterminate),
+  modal: ({ drawer } = {}) => j(cls.modal, drawer && cls.modalDrawer),
+  tab: ({ active } = {}) => j(cls.tab, active && 'is-active'),
+  avatar: ({ size } = {}) =>
+    j(cls.avatar, size === 'sm' && cls.avatarSm, size === 'lg' && cls.avatarLg),
+  prose: ({ compact } = {}) => j(cls.prose, compact && cls.proseCompact),
 };
 export default ui;

package/css/app.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /* ==========================================================================
    app — admin shell (sidebar + topbar + panels + metrics)
-   Adopted by polpo-admin and future operator UIs.
+   For admin / operator dashboards.
    ========================================================================== */
 .app-shell {
   display: grid;
   grid-template-columns: var(--app-rail, 14rem) minmax(0, 1fr);
-  min-height: 100vh;
+  min-block-size: 100vh;
 }
 .app-shell--full {
@@ -17,14 +17,14 @@
 .app-rail {
   background: var(--panel);
-  border-right: 1px solid var(--line);
+  border-inline-end: 1px solid var(--line);
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
   padding: var(--space-md);
   position: sticky;
-  top: 0;
-  height: 100vh;
+  inset-block-start: 0;
+  block-size: 100vh;
   overflow-y: auto;
 }
@@ -44,8 +44,8 @@
   background: var(--accent);
   border-radius: 50%;
   content: '';
-  height: 0.5rem;
-  width: 0.5rem;
+  block-size: 0.5rem;
+  inline-size: 0.5rem;
 }
 .app-nav {
@@ -65,7 +65,7 @@
 .app-nav a {
   align-items: center;
-  border-left: 2px solid transparent;
+  border-inline-start: 2px solid transparent;
   color: var(--text-soft);
   display: flex;
   font-family: var(--mono);
@@ -82,9 +82,9 @@
   background: currentColor;
   border-radius: 50%;
   content: '';
-  height: 0.34rem;
+  block-size: 0.34rem;
   opacity: 0.45;
-  width: 0.34rem;
+  inline-size: 0.34rem;
 }
 .app-nav a:hover {
@@ -94,7 +94,7 @@
 .app-nav a.is-active {
   background: var(--accent-soft);
-  border-left-color: var(--accent);
+  border-inline-start-color: var(--accent);
   color: var(--accent);
 }
@@ -103,12 +103,12 @@
 }
 .app-rail__foot {
-  border-top: 1px solid var(--line);
+  border-block-start: 1px solid var(--line);
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
-  margin-top: auto;
-  padding-top: var(--space-sm);
+  margin-block-start: auto;
+  padding-block-start: var(--space-sm);
 }
 /* --- Main column --- */
@@ -116,20 +116,20 @@
 .app-main {
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  min-inline-size: 0;
 }
 .app-topbar {
   align-items: center;
   background: color-mix(in srgb, var(--bg) 86%, transparent);
   backdrop-filter: blur(8px);
-  border-bottom: 1px solid var(--line);
+  border-block-end: 1px solid var(--line);
   display: flex;
   gap: var(--space-md);
   justify-content: space-between;
   padding: 0.75rem var(--space-lg);
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   z-index: 10;
 }
@@ -272,10 +272,10 @@
   .app-rail {
     flex-direction: row;
-    height: auto;
+    block-size: auto;
     overflow-x: auto;
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
     z-index: 11;
   }
@@ -293,14 +293,14 @@
   }
   .app-nav a {
-    border-left: 0;
-    border-bottom: 2px solid transparent;
+    border-inline-start: 0;
+    border-block-end: 2px solid transparent;
     white-space: nowrap;
   }
   .app-nav a.is-active {
-    border-left: 0;
-    border-bottom-color: var(--accent);
+    border-inline-start: 0;
+    border-block-end-color: var(--accent);
   }
   .app-content {