@ponchia/ui 0.6.11 → 0.6.12

package/CHANGELOG.md

@@ -5,6 +5,42 @@
 |> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
 |> the deprecation policy in CONTRIBUTING.md.
 
+## 0.6.12 — 2026-07-10
+
+A stabilization patch. It changes no public class, token name, behavior name,
+or package path.
+
+### Changed
+
+- **Small-text readability.** The `--text-2xs` value increases from `0.68rem`
+  to `0.72rem`. This raises the floor for form labels, table headings,
+  provenance metadata, report captions, and other dense secondary text without
+  changing the type scale's public names or the default CSS payload size.
+- **1.0 stabilization mode.** Public catalog growth is frozen while real
+  consumers move onto one current minor. The stability guide now distinguishes
+  downstream-proven surfaces from package-only proof and unproven 1.0
+  candidates. New public surface needs explicit maintainer approval to reopen
+  the catalog.
+
+### Fixed
+
+- **Controlled-modal ownership.** `initModal()` now reconciles one stack per
+  document instead of letting each modal own `inert` independently. Sibling
+  portal modals no longer inert the active top modal, nested stacks restore the
+  previous modal correctly, late-added background nodes join the trap, and a
+  popover opened from the top modal remains interactive when its panel is
+  portaled elsewhere. Cleanup still preserves author-owned `inert` state.
+- **Maintainer documentation.** The architecture map now identifies
+  `css/generated.css` as authored trust-surface CSS, and the roadmap reflects
+  the current release and WOFF2 font payload.
+
+### Verified
+
+- Focused unit coverage exercises sibling and nested modal stacks, portaled
+  popovers, late background nodes, focus restoration, and cleanup ownership.
+  The non-pixel browser suite carries the same sibling-stack, portal, and
+  late-node scenario.
+
 ## 0.6.11 — 2026-07-04
 
 A correctness, accessibility, and performance release drawn from a multi-pass

package/README.md

@@ -80,7 +80,7 @@ npm i @ponchia/ui
 Or drop it in with no build step, straight from a CDN:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.11/dist/bronto.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.12/dist/bronto.css">
 ```
 
 ## Quick start

package/behaviors/modal.d.ts

@@ -12,21 +12,21 @@
  *
  * Mark the overlay `[data-bronto-modal]` (opt-in). On bind it gives the modal a
  * `role="dialog"` + `aria-modal="true"` (unless the author set a role) and
- * dev-warns when it has no accessible name, so it announces as a named modal
- * dialog — parity with `initPopover`. The behavior watches its
- * `class` for `is-open`: on open it remembers the focused element, moves focus
- * into the modal (first focusable, else the panel itself), and **traps focus by
- * marking every sibling at each ancestor level `inert`** so the rest of the page
- * is non-focusable and non-interactive — the modern, robust trap. On close it
- * un-inerts exactly what it inerted and returns focus to the opener. Bronto owns
- * focus only: the **consumer still owns open/close state** (the `is-open`
- * class). Escape dispatches a cancelable `bronto:modal:close`
+ * dev-warns when it has no accessible name. While open, a document-level stack
+ * reconciler keeps only the top controlled modal interactive, marks the rest of
+ * the page `inert`, admits an open popover owned by the top modal even when the
+ * panel is portaled elsewhere, and applies the trap to background nodes added
+ * after open. Nested and sibling portal modals therefore share one ownership
+ * model instead of independently inverting each other's `inert` state.
+ *
+ * Bronto owns focus only: the **consumer still owns open/close state** (the
+ * `is-open` class). Escape dispatches a cancelable `bronto:modal:close`
  * ({@link ModalCloseDetail}) on the modal so the consumer can drop `is-open` in
- * response; the behavior never changes visibility itself.
+ * response; the behavior never changes visibility itself. Closing a parent
+ * modal temporarily suspends any still-`is-open` controlled descendants; they
+ * resume at the top of the stack if the parent reopens.
  *
- * Best suited to a body-/portal-level overlay (the documented `.is-open` use
- * case); a deeply-nested modal still gets focus-into, focus-return, and the
- * Escape signal. SSR-safe, idempotent per modal; returns a cleanup function.
+ * SSR-safe, idempotent per modal; returns a cleanup function.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}

package/behaviors/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.js"],"names":[],"mappings":"AAsDA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+G3C;;;;;YA7Ia,QAAQ"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.js"],"names":[],"mappings":"AAmQA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA6E3C;;;;;YA3Ga,QAAQ"}

package/behaviors/modal.js

@@ -3,25 +3,13 @@ import {
   resolveHost,
   noop,
   bindOnce,
+  byIdInHost,
   collectHosts,
   focusInto,
   closestSafe,
 } from './internal.js';
 
-function insideOpenPopover(target, modal) {
-  const classPanel = closestSafe(target, '.ui-popover.is-open');
-  if (classPanel && modal.contains(classPanel)) return true;
-
-  const nativePanel = closestSafe(target, '[popover]');
-  if (!nativePanel || !modal.contains(nativePanel)) return false;
-  try {
-    return nativePanel.matches(':popover-open');
-  } catch {
-    return false;
-  }
-}
-
-const activeModals = [];
+const states = new WeakMap();
 
 const snapshotAttrs = (el, names) => {
   const attrs = {};
@@ -41,16 +29,233 @@ const restoreAttrs = (el, attrs) => {
   }
 };
 
-const pushActiveModal = (modal) => {
-  const index = activeModals.indexOf(modal);
-  if (index !== -1) activeModals.splice(index, 1);
-  activeModals.push(modal);
-};
+function modalState(doc) {
+  let state = states.get(doc);
+  if (state) return state;
+  state = {
+    doc,
+    records: new Set(),
+    byModal: new Map(),
+    ownedInert: new Set(),
+    pendingOverlays: new Set(),
+    observer: null,
+    observing: false,
+    sequence: 0,
+    scheduled: false,
+    top: null,
+  };
+  states.set(doc, state);
+  return state;
+}
 
-const removeActiveModal = (modal) => {
-  const index = activeModals.indexOf(modal);
-  if (index !== -1) activeModals.splice(index, 1);
-};
+function isEffectivelyActive(record, state) {
+  if (!record.active || !record.modal.isConnected) return false;
+  for (let node = record.modal.parentElement; node; node = node.parentElement) {
+    const ancestor = state.byModal.get(node);
+    if (ancestor && (!ancestor.active || !ancestor.modal.isConnected)) return false;
+  }
+  return true;
+}
+
+function activeTop(state) {
+  let top = null;
+  for (const record of state.records) {
+    if (!isEffectivelyActive(record, state)) continue;
+    if (!top || top.modal.contains(record.modal)) {
+      top = record;
+      continue;
+    }
+    if (!record.modal.contains(top.modal) && record.openedAt > top.openedAt) top = record;
+  }
+  return top;
+}
+
+function popoverIsOpen(panel, state) {
+  if (state.pendingOverlays.has(panel) || panel.classList.contains('is-open')) return true;
+  try {
+    return panel.matches(':popover-open');
+  } catch {
+    return false;
+  }
+}
+
+function modalOwnsPopover(modal, panel) {
+  if (modal.contains(panel)) return true;
+  if (!panel.id) return false;
+  return collectHosts(modal, '[data-bronto-popover]').some(
+    (trigger) => trigger.getAttribute('data-bronto-popover') === panel.id,
+  );
+}
+
+function liveRoots(state, top) {
+  const roots = new Set([top.modal]);
+  for (const trigger of collectHosts(top.modal, '[data-bronto-popover]')) {
+    const panel = byIdInHost(top.modal, trigger.getAttribute('data-bronto-popover'));
+    if (panel && popoverIsOpen(panel, state)) roots.add(panel);
+  }
+  for (const panel of state.pendingOverlays) {
+    if (modalOwnsPopover(top.modal, panel)) roots.add(panel);
+  }
+  return roots;
+}
+
+function desiredInert(state, top) {
+  const body = state.doc.body;
+  if (!body || !top) return new Set();
+  const roots = liveRoots(state, top);
+  const livePath = new Set([body]);
+  for (const root of roots) {
+    for (let node = root; node && node !== body; node = node.parentElement) {
+      livePath.add(node);
+    }
+  }
+
+  const desired = new Set();
+  for (const parent of livePath) {
+    if (roots.has(parent)) continue;
+    for (const child of parent.children || []) {
+      if (!livePath.has(child)) desired.add(child);
+    }
+  }
+  return desired;
+}
+
+function reconcileInert(state) {
+  const previousTop = state.top;
+  const nextTop = activeTop(state);
+  const desired = desiredInert(state, nextTop);
+
+  for (const element of [...state.ownedInert]) {
+    if (desired.has(element)) {
+      if (!element.inert) element.inert = true;
+      continue;
+    }
+    element.inert = false;
+    state.ownedInert.delete(element);
+  }
+  for (const element of desired) {
+    if (state.ownedInert.has(element) || element.inert) continue;
+    element.inert = true;
+    state.ownedInert.add(element);
+  }
+  state.top = nextTop;
+  return { previousTop, nextTop };
+}
+
+function scheduleReconcile(state) {
+  if (state.scheduled) return;
+  state.scheduled = true;
+  queueMicrotask(() => {
+    state.scheduled = false;
+    reconcileInert(state);
+  });
+}
+
+function ensureDocumentObserver(state) {
+  if (state.observing) return;
+  state.observing = true;
+  const view = state.doc.defaultView;
+  const Observer = view?.MutationObserver;
+  if (Observer && state.doc.body) {
+    state.observer = new Observer((mutations) => {
+      const relevant = mutations.some(
+        (mutation) =>
+          mutation.type === 'childList' || mutation.target.matches?.('.ui-popover, [popover]'),
+      );
+      if (relevant && state.top) scheduleReconcile(state);
+    });
+    state.observer.observe(state.doc.body, {
+      attributes: true,
+      attributeFilter: ['class'],
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  state.onBeforeToggle = (event) => {
+    const panel = event.target;
+    if (!panel?.matches?.('[popover]')) return;
+    if (event.newState === 'open') state.pendingOverlays.add(panel);
+    else state.pendingOverlays.delete(panel);
+    reconcileInert(state);
+  };
+  state.onToggle = (event) => {
+    state.pendingOverlays.delete(event.target);
+    scheduleReconcile(state);
+  };
+  state.doc.addEventListener('beforetoggle', state.onBeforeToggle, true);
+  state.doc.addEventListener('toggle', state.onToggle, true);
+}
+
+function releaseDocumentState(state) {
+  if (state.records.size) return;
+  state.observer?.disconnect();
+  state.observer = null;
+  state.observing = false;
+  state.doc.removeEventListener('beforetoggle', state.onBeforeToggle, true);
+  state.doc.removeEventListener('toggle', state.onToggle, true);
+  state.pendingOverlays.clear();
+  reconcileInert(state);
+  states.delete(state.doc);
+}
+
+function restoreAfterClose(record, nextTop) {
+  const back = record.opener;
+  record.opener = null;
+  if (nextTop) {
+    if (back?.isConnected && nextTop.modal.contains(back)) back.focus?.();
+    else focusInto(nextTop.modal);
+    return;
+  }
+  if (back?.isConnected && typeof back.focus === 'function') back.focus();
+}
+
+function syncRecord(record) {
+  const { modal, state } = record;
+  const nextActive = modal.classList.contains('is-open');
+  if (nextActive === record.active) {
+    if (!record.isNativeDialog) modal.hidden = !nextActive;
+    scheduleReconcile(state);
+    return;
+  }
+
+  const oldTop = state.top ?? activeTop(state);
+  record.active = nextActive;
+  if (nextActive) {
+    record.opener = state.doc.activeElement;
+    record.openedAt = ++state.sequence;
+    if (!record.isNativeDialog) modal.hidden = false;
+    const { nextTop } = reconcileInert(state);
+    if (nextTop && (nextTop === record || modal.contains(nextTop.modal))) {
+      focusInto(nextTop.modal);
+    }
+    return;
+  }
+
+  if (!record.isNativeDialog) modal.hidden = true;
+  const closedOwnedTop = oldTop && (oldTop === record || modal.contains(oldTop.modal));
+  const { nextTop } = reconcileInert(state);
+  if (closedOwnedTop) restoreAfterClose(record, nextTop);
+  else record.opener = null;
+}
+
+function unregisterRecord(record) {
+  const { state, modal } = record;
+  const oldTop = state.top ?? activeTop(state);
+  const removedOwnedTop = oldTop && (oldTop === record || modal.contains(oldTop.modal));
+  record.active = false;
+  state.records.delete(record);
+  state.byModal.delete(modal);
+  const { nextTop } = reconcileInert(state);
+  if (removedOwnedTop) restoreAfterClose(record, nextTop);
+  else record.opener = null;
+  releaseDocumentState(state);
+}
+
+function targetIsOwnedPopover(target, modal, state) {
+  const panel = closestSafe(target, '.ui-popover, [popover]');
+  return Boolean(panel && popoverIsOpen(panel, state) && modalOwnsPopover(modal, panel));
+}
 
 /**
  * @typedef {object} ModalCloseDetail
@@ -67,21 +272,21 @@ const removeActiveModal = (modal) => {
  *
  * Mark the overlay `[data-bronto-modal]` (opt-in). On bind it gives the modal a
  * `role="dialog"` + `aria-modal="true"` (unless the author set a role) and
- * dev-warns when it has no accessible name, so it announces as a named modal
- * dialog — parity with `initPopover`. The behavior watches its
- * `class` for `is-open`: on open it remembers the focused element, moves focus
- * into the modal (first focusable, else the panel itself), and **traps focus by
- * marking every sibling at each ancestor level `inert`** so the rest of the page
- * is non-focusable and non-interactive — the modern, robust trap. On close it
- * un-inerts exactly what it inerted and returns focus to the opener. Bronto owns
- * focus only: the **consumer still owns open/close state** (the `is-open`
- * class). Escape dispatches a cancelable `bronto:modal:close`
+ * dev-warns when it has no accessible name. While open, a document-level stack
+ * reconciler keeps only the top controlled modal interactive, marks the rest of
+ * the page `inert`, admits an open popover owned by the top modal even when the
+ * panel is portaled elsewhere, and applies the trap to background nodes added
+ * after open. Nested and sibling portal modals therefore share one ownership
+ * model instead of independently inverting each other's `inert` state.
+ *
+ * Bronto owns focus only: the **consumer still owns open/close state** (the
+ * `is-open` class). Escape dispatches a cancelable `bronto:modal:close`
  * ({@link ModalCloseDetail}) on the modal so the consumer can drop `is-open` in
- * response; the behavior never changes visibility itself.
+ * response; the behavior never changes visibility itself. Closing a parent
+ * modal temporarily suspends any still-`is-open` controlled descendants; they
+ * resume at the top of the stack if the parent reopens.
  *
- * Best suited to a body-/portal-level overlay (the documented `.is-open` use
- * case); a deeply-nested modal still gets focus-into, focus-return, and the
- * Escape signal. SSR-safe, idempotent per modal; returns a cleanup function.
+ * SSR-safe, idempotent per modal; returns a cleanup function.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
@@ -97,74 +302,19 @@ export function initModal({ root } = {}) {
     const doc = modal.ownerDocument;
     if (!doc) continue;
     const view = doc.defaultView;
-    const isNativeDialog = modal.localName === 'dialog';
-    let opener = null;
-    let inerted = [];
-
-    // Inert every sibling at each ancestor level up to <body>: the rest of the
-    // page becomes non-focusable/non-interactive while the modal subtree stays
-    // live. Skip already-inert nodes so release() can't un-inert something the
-    // app inerted for its own reasons.
-    const trap = () => {
-      if (opener) return; // already trapped
-      opener = doc.activeElement;
-      pushActiveModal(modal);
-      let el = modal;
-      while (el && el.parentElement && el !== doc.body) {
-        for (const sib of el.parentElement.children) {
-          if (sib !== el && !sib.inert) {
-            sib.inert = true;
-            inerted.push(sib);
-          }
-        }
-        el = el.parentElement;
-      }
-      focusInto(modal);
-    };
-
-    const release = () => {
-      if (!opener) return;
-      removeActiveModal(modal);
-      for (const el of inerted) el.inert = false;
-      inerted = [];
-      const back = opener;
-      opener = null;
-      if (back?.isConnected && typeof back.focus === 'function') back.focus();
-    };
-
-    const sync = () => {
-      if (modal.classList.contains('is-open')) {
-        if (!isNativeDialog) modal.hidden = false;
-        trap();
-        return;
-      }
-      release();
-      if (!isNativeDialog) modal.hidden = true;
-    };
-
-    const onKey = (e) => {
-      if (e.key === 'Escape' && opener) {
-        if (activeModals.at(-1) !== modal) return;
-        if (insideOpenPopover(e.target, modal)) return;
-        const ModalCloseEvent = view?.CustomEvent ?? CustomEvent;
-        modal.dispatchEvent(
-          new ModalCloseEvent('bronto:modal:close', {
-            detail: { reason: 'escape' },
-            bubbles: true,
-            cancelable: true,
-          }),
-        );
-      }
-    };
-
     cleanups.push(
       bindOnce(modal, 'modal', () => {
         const attrs = snapshotAttrs(modal, ['role', 'aria-modal', 'tabindex', 'hidden']);
+        const state = modalState(doc);
+        const record = {
+          active: modal.classList.contains('is-open'),
+          isNativeDialog: modal.localName === 'dialog',
+          modal,
+          openedAt: 0,
+          opener: null,
+          state,
+        };
 
-        // A controlled modal must announce AS a modal dialog, not a generic group —
-        // parity with initPopover. Apply a dialog role + aria-modal (unless the
-        // author set a role), and dev-warn on a missing accessible name since we
-        // can't invent a good one.
         if (!modal.hasAttribute('role')) modal.setAttribute('role', 'dialog');
         if (!modal.hasAttribute('aria-modal')) modal.setAttribute('aria-modal', 'true');
         const named =
@@ -177,17 +327,38 @@ export function initModal({ root } = {}) {
           );
         }
 
-        const Observer =
-          view?.MutationObserver ??
-          (typeof MutationObserver === 'function' ? MutationObserver : null);
-        const observer = Observer ? new Observer(sync) : null;
+        if (record.active) {
+          record.opener = doc.activeElement;
+          record.openedAt = ++state.sequence;
+        }
+        if (!record.isNativeDialog) modal.hidden = !record.active;
+        state.records.add(record);
+        state.byModal.set(modal, record);
+        ensureDocumentObserver(state);
+        reconcileInert(state);
+        if (state.top === record) focusInto(modal);
+
+        const Observer = view?.MutationObserver;
+        const observer = Observer ? new Observer(() => syncRecord(record)) : null;
         observer?.observe(modal, { attributes: true, attributeFilter: ['class'] });
+        const onKey = (event) => {
+          if (event.key !== 'Escape' || state.top !== record) return;
+          if (targetIsOwnedPopover(event.target, modal, state)) return;
+          const ModalCloseEvent = view?.CustomEvent ?? CustomEvent;
+          modal.dispatchEvent(
+            new ModalCloseEvent('bronto:modal:close', {
+              detail: { reason: 'escape' },
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        };
         doc.addEventListener('keydown', onKey, true);
-        sync();
+
         return () => {
           observer?.disconnect();
           doc.removeEventListener('keydown', onKey, true);
-          release();
+          unregisterRecord(record);
           restoreAttrs(modal, attrs);
         };
       }),

package/behaviors/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.js"],"names":[],"mappings":"AAuCA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAoM3C"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.js"],"names":[],"mappings":"AAuCA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAoP3C"}

package/behaviors/popover.js

@@ -74,9 +74,53 @@ export function initPopover({ root } = {}) {
   const GAP = 8;
   let openPanel = null;
   let openTrigger = null;
+  let pendingFocusObserver = null;
   const triggerStates = new Map();
   const panelStates = new Map();
 
+  const cancelPendingFocus = () => {
+    pendingFocusObserver?.disconnect();
+    pendingFocusObserver = null;
+  };
+
+  const focusWhenInteractive = (panel) => {
+    cancelPendingFocus();
+    if (!panel.inert) {
+      focusInto(panel);
+      return;
+    }
+
+    // A panel portaled out of a controlled modal starts in the trapped
+    // background. Wait for initModal to admit that specific panel instead of
+    // guessing how many microtasks its MutationObserver reconciliation needs.
+    const Observer = view?.MutationObserver;
+    if (!Observer) {
+      queueMicrotask(() => {
+        if (openPanel === panel && !panel.inert) focusInto(panel);
+      });
+      return;
+    }
+    const focusIfReady = () => {
+      if (openPanel !== panel) {
+        cancelPendingFocus();
+        return;
+      }
+      if (panel.inert) return;
+      cancelPendingFocus();
+      focusInto(panel);
+    };
+    pendingFocusObserver = new Observer(focusIfReady);
+    pendingFocusObserver.observe(panel, { attributes: true, attributeFilter: ['inert'] });
+    // Some DOM implementations model `inert` as a property without reflecting
+    // its attribute, so no observer record is delivered. Cover that test-DOM
+    // path across the modal reconciler's queued microtask; real browsers still
+    // use the attribute observer as the source of truth.
+    queueMicrotask(() => {
+      focusIfReady();
+      if (openPanel === panel && panel.inert) queueMicrotask(focusIfReady);
+    });
+  };
+
   const rememberTrigger = (trigger) => {
     if (!triggerStates.has(trigger)) {
       triggerStates.set(
@@ -123,6 +167,7 @@ export function initPopover({ root } = {}) {
   };
 
   const close = () => {
+    cancelPendingFocus();
     if (!openPanel) return;
     const panel = openPanel;
     const trigger = openTrigger;
@@ -166,7 +211,7 @@ export function initPopover({ root } = {}) {
     openPanel = panel;
     openTrigger = trigger;
     place(trigger, panel);
-    focusInto(panel);
+    focusWhenInteractive(panel);
   };
 
   const onClick = (e) => {
@@ -227,7 +272,10 @@ export function initPopover({ root } = {}) {
         const onToggle = (e) => {
           const isOpen = e.newState === 'open';
           trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-          if (!isOpen && openPanel === panel) openPanel = openTrigger = null;
+          if (!isOpen && openPanel === panel) {
+            cancelPendingFocus();
+            openPanel = openTrigger = null;
+          }
         };
         panel.addEventListener('toggle', onToggle);
         seedTeardowns.push(() => panel.removeEventListener('toggle', onToggle));

package/classes/vscode.css-custom-data.json

@@ -347,7 +347,7 @@
     },
     {
       "name": "--text-2xs",
-      "description": "Global scale token. Value: `0.68rem`"
+      "description": "Global scale token. Value: `0.72rem`"
     },
     {
       "name": "--text-base",

package/css/tokens.css

@@ -33,7 +33,7 @@
   --display: var(--dot-font);
   --display-weight: 700;
   --display-weight-strong: 800;
-  --text-2xs: 0.68rem;
+  --text-2xs: 0.72rem;
   --text-xs: 0.76rem;
   --text-sm: 0.86rem;
   --text-base: 0.95rem;