@apliteni/apliteni-ui 0.71.0 → 0.73.0

package/guidelines/accessibility-floor.md

@@ -14,6 +14,34 @@
 
 **Except:** WCAG 2.5.8 permits spacing, equivalent controls, inline text, user-agent sizes and essential presentation. Overlays must not reach neighbours.
 
+## Tap target on a phone
+
+<!-- rule: tap-zone -->
+
+**Rule:** Below the phone step, reach 44x44 with a transparent layer outside the control, never by growing the control.
+
+**Why:** A finger covers more than a cursor, and a control that grows on a phone moves the page a reader already knows.
+
+**Do:** Centre a transparent layer on the control and let it stop at half the gap to the nearest neighbour.
+
+**Don't:** Grow the drawn control to 44 and push out every row that holds one.
+
+**Except:** Only a coarse pointer gets the layer, or a cursor lights a control it is not over. Rows that share an edge — a menu, a dense table, a settings list — have nothing to grow into and stay as they are drawn. Fields generate no layer, so a field reaches the floor by its own height or not at all.
+
+## Space between small targets
+
+<!-- rule: tap-spacing -->
+
+**Rule:** Below the phone step, open a row of small controls to 44 minus their drawn size, so both tap zones fit between the drawn edges.
+
+**Why:** A zone reaches half the gap before it crosses its neighbour's edge, so the gap is what decides whether either control reaches the floor.
+
+**Do:** Open a row of 24px marks to 20px on a phone, where both zones fit and neither mark changes size.
+
+**Don't:** Keep the desktop 8px and let the control written later in the markup win the overlap.
+
+**Except:** A row that is already full opens downward only — widening it across makes the controls narrower, which is the one thing the floor must not do. Rows that share an edge — a menu, a dense table, a settings list — have nothing to open and keep their drawn targets. A row that opens nothing grows no zone at all.
+
 ## Focus ring contrast
 
 <!-- rule: ring-contrast -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.71.0",
+  "version": "0.73.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -43,7 +43,7 @@ Both forward a span ref and native span attributes, including `className`.
 <span><StatusDot live /> API online</span>
 ```
 
-`Snippet` accepts `label`, `code`, `reveal`, and `copyLabel` props. It treats `code`
+`Snippet` accepts `label`, `code`, `reveal`, `copy`, `copyLabel`, and `children` props. It treats `code`
 as plain text and copies it exactly as provided. After a successful clipboard write,
 it shows “Copied” for 1.4 seconds. If copying fails, it shows “Copy failed” so readers
 can try again or select the text manually.
@@ -52,6 +52,32 @@ can try again or select the text manually.
 <Snippet label="Terminal" code="npm install @apliteni/apliteni-ui" />
 ```
 
+Set `copy={false}` to omit the copy button. Supply React children for highlighted
+text using the existing `.k` (command), `.f` (flag), `.s` (string), `.u` (URL), and
+`.c` (comment) classes. Keep `code` as the original source: copying always uses it,
+regardless of the displayed children. Neither strings nor children are parsed as HTML.
+
+Build the children from `code` with `codeTokens`, the same tokenizer the vanilla
+`hlShell` and `hlCode` use, so the text on screen cannot drift from the text the
+button copies. Writing the spans out by hand means keeping two copies of the string
+in step. The second argument is the language — `shell` (the default), `json` or
+`ts`; `codeLanguages` lists them.
+
+```tsx
+import { codeTokens } from '@apliteni/apliteni-ui';
+
+const code = '{ "url": "https://example.com/mcp" }';
+
+<Snippet label="mcp.json" code={code} copyLabel="Copy configuration">
+  {codeTokens(code, 'json').map(({ cls, text }, at) =>
+    cls ? <span key={at} className={cls}>{text}</span> : text)}
+</Snippet>
+```
+
+The copy button is icon-only: `copyLabel` is its accessible name and its tooltip
+rather than visible text, so name what is being copied — “Copy command”, “Copy
+configuration”. It still shows words while it confirms.
+
 Before a reveal snippet, explain that the secret is stored hashed and will not be
 shown again, and ask the reader to copy it now. The page decides when to remove it.
 

package/react/dist/index.css

@@ -26,6 +26,89 @@
   }
 }
 
+/* ../src/styles/tap-zone.css */
+:root {
+  --tap-min: 44px;
+  --tap-aa: 24px;
+  --tap-gap: var(--space-5, 20px);
+  --tap-clear-x: 0px;
+  --tap-clear-y: 0px;
+}
+@media (max-width: 560px) and (pointer: coarse) {
+  :where(.ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social) {
+    position: relative;
+  }
+  :where(.ui-btn, .ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social, .ui-switch)::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-x)));
+    height: min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-y)));
+  }
+  .ui-check input::before,
+  .ui-toast__close::before {
+    width: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-x))));
+    height: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-y))));
+  }
+  .ui-seg {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--space-1, 4px);
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-tabs__list {
+    --tap-clear-x: 2px;
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-pager__steps {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--space-1, 4px);
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-pager {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-filter-bar {
+    gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--tap-gap);
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-filter-bar__chip {
+    --tap-clear-x: 0px;
+    --tap-clear-y: 0px;
+  }
+  .ui-table__act .ui-btn + .ui-btn {
+    margin-inline-start: var(--tap-gap) !important;
+  }
+  .ui-table__act {
+    --tap-clear-x: var(--tap-gap);
+    --tap-clear-y: 0px;
+  }
+  .ui-toast {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-confirm__acts,
+  .ui-toolbar,
+  .ui-empty__actions,
+  .ui-sx__actions,
+  .ui-fbc__foot,
+  .ui-drawer__footer,
+  .ui-snippet__bar,
+  .ui-app__main .ui-card__row {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-footer__socials,
+  .ui-drawer__header {
+    gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--tap-gap);
+    --tap-clear-y: var(--tap-gap);
+  }
+}
+
 /* ../src/styles/input.css */
 .ui-field {
   display: block;

package/react/dist/index.d.ts

@@ -519,12 +519,16 @@ declare function DrawerSection({ title, headingLevel, className, children, ...re
 
 type SnippetProps = {
     label?: string;
-    /** Plain text, displayed and copied without HTML parsing. */
+    /** Original text to copy; displayed when children are absent. */
     code?: string;
+    /** Token markup for display only. Strings are never parsed as HTML. */
+    children?: ReactNode;
+    copy?: boolean;
     reveal?: boolean;
+    /** Accessible name and tooltip for the icon-only copy button; name what it copies. */
     copyLabel?: string;
 };
-declare function Snippet({ label, code, reveal, copyLabel }: SnippetProps): react.JSX.Element;
+declare function Snippet({ label, code, children, copy, reveal, copyLabel }: SnippetProps): react.JSX.Element;
 
 type TabItem = {
     value: string;

package/react/dist/index.js

@@ -2048,8 +2048,8 @@ function DrawerSection({ title, headingLevel = 3, className, children, ...rest }
 
 // src/Snippet.tsx
 import { useEffect as useEffect7, useRef as useRef12, useState as useState8 } from "react";
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
-function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy" }) {
+import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+function Snippet({ label = "shell", code = "", children, copy = true, reveal = false, copyLabel = "Copy code" }) {
   const [status, setStatus] = useState8("idle");
   const request = useRef12(0);
   const timer = useRef12(void 0);
@@ -2059,8 +2059,8 @@ function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy
       request.current++;
       clearTimeout(timer.current);
     };
-  }, [code]);
-  async function copy() {
+  }, [code, copy]);
+  async function handleCopy() {
     const current = ++request.current;
     clearTimeout(timer.current);
     setStatus("idle");
@@ -2076,19 +2076,29 @@ function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy
   return /* @__PURE__ */ jsxs20("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
     /* @__PURE__ */ jsxs20("div", { className: "ui-snippet__bar", children: [
       /* @__PURE__ */ jsx25("span", { children: label }),
-      /* @__PURE__ */ jsxs20("button", { type: "button", className: "ui-snippet__copy", "aria-live": "polite", "aria-atomic": "true", onClick: copy, children: [
-        /* @__PURE__ */ jsx25(Icon, { name: status === "copied" ? "check" : "copy" }),
-        status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : copyLabel
+      copy && /* @__PURE__ */ jsxs20(Fragment6, { children: [
+        /* @__PURE__ */ jsx25(
+          "button",
+          {
+            type: "button",
+            className: "ui-snippet__copy",
+            "aria-label": copyLabel,
+            title: copyLabel,
+            onClick: handleCopy,
+            children: /* @__PURE__ */ jsx25(Icon, { name: status === "idle" ? "copy" : "check" })
+          }
+        ),
+        /* @__PURE__ */ jsx25("span", { className: "ui-sr ui-snippet__status", role: "status", "aria-live": "polite", children: status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : "" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx25("pre", { children: code })
+    /* @__PURE__ */ jsx25("pre", { children: children ?? code })
   ] });
 }
 
 // src/Tabs.tsx
 import { useEffect as useEffect8, useId as useId9, useRef as useRef13 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, label }) {
   const id = useId9();
   const previous = useRef13(value);
@@ -2137,7 +2147,7 @@ function Tabs({ items, value, onChange, label }) {
         },
         children: [
           item.label,
-          item.count != null && /* @__PURE__ */ jsxs21(Fragment6, { children: [
+          item.count != null && /* @__PURE__ */ jsxs21(Fragment7, { children: [
             " ",
             item.count
           ] })
@@ -2524,7 +2534,7 @@ import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName }
 // src/SidebarNav.tsx
 import { forwardRef as forwardRef8, useEffect as useEffect12, useId as useId11, useState as useState11 } from "react";
 import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
 function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   const uid = useId11();
@@ -2550,7 +2560,7 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
     item.disabled && "is-disabled",
     item.danger && "is-danger"
   ].filter(Boolean).join(" ");
-  const children = /* @__PURE__ */ jsxs26(Fragment7, { children: [
+  const children = /* @__PURE__ */ jsxs26(Fragment8, { children: [
     (item.leading ?? item.icon) && /* @__PURE__ */ jsx31("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx31(Icon, { name: item.icon }) }),
     /* @__PURE__ */ jsx31("span", { className: "ui-nav__label", children: item.label }),
     count != null && count !== "" && /* @__PURE__ */ jsx31("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
@@ -2619,7 +2629,7 @@ var SidebarNav = forwardRef8(function SidebarNav2({
 });
 
 // src/AppShell.tsx
-import { Fragment as Fragment8, jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -2692,7 +2702,7 @@ function AppShell({
       onClick: (event) => {
         if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
       },
-      children: /* @__PURE__ */ jsxs27(Fragment8, { children: [
+      children: /* @__PURE__ */ jsxs27(Fragment9, { children: [
         /* @__PURE__ */ jsx32("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx32(Icon, { name: section.icon }) }),
         /* @__PURE__ */ jsx32("span", { className: "ui-nav__label", children: section.label }),
         section.count != null && /* @__PURE__ */ jsx32("span", { className: "ui-nav__badge is-neutral", children: section.count })

package/src/components/index.js

@@ -289,30 +289,103 @@ export function emptyState({ art, icon: ic, title, sub, actions } = {}) {
 }
 
 // ---- Snippet -------------------------------------------------------------
-// `copyLabel` is both the visible text and the accessible name of the copy
-// button. wireTopbar() swaps that text to "✓ Copied" and back, so the button is
-// never left nameless — the glyph beside it is decorative (aria-hidden).
+// The copy button is icon-only: `copy` is on the closed list in
+// src/assets/icons.js, the bar is narrow, and the word said nothing the glyph
+// does not. `copyLabel` is therefore the accessible name and the tooltip rather
+// than visible text, and it should name what is being copied — "Copy command",
+// "Copy configuration" — the way every other icon-only control in the kit is
+// named (aria-label plus title, as button() and the theme toggle write it).
+// The confirmation is a glyph swap, not a word: the button holds its 24px box
+// through it, and the word goes to the live region beside it. A permanent
+// aria-label outranks an element's contents, so swapping text into the button
+// would have changed the pixels and left the announced name frozen — the region
+// is what carries "Copied" to a reader who cannot see the check. It ships empty
+// and is filled later, because a role="status" inserted together with its text is
+// silent on several screen readers. The button's own name stays the action, which
+// is still available; wireTopbar() fills the region. `data-orig` records the
+// resting label for a caller that wants it.
 // `type="button"`: without it a snippet dropped inside a <form> submits the form.
-export function snippet({ label = 'shell', code = '', reveal = false, copy = true, copyLabel = 'Copy' } = {}) {
+export function snippet({ label = 'shell', code = '', reveal = false, copy = true, copyLabel = 'Copy code' } = {}) {
   const copyBtn = copy
-    ? `<button type="button" class="ui-snippet__copy" data-orig="${esc(copyLabel)}">${icon('copy')}${esc(copyLabel)}</button>`
+    ? `<button type="button" class="ui-snippet__copy" aria-label="${esc(copyLabel)}" title="${esc(copyLabel)}" data-orig="${esc(copyLabel)}">${icon('copy')}</button>`
+      + '<span class="ui-sr ui-snippet__status" role="status" aria-live="polite"></span>'
     : '';
   return `<div class="${cx('ui-snippet', reveal && 'ui-snippet--reveal')}"><div class="ui-snippet__bar"><span>${esc(label)}</span>${copyBtn}</div><pre>${code}</pre></div>`;
 }
 
-// Tiny shell highlighter: escapes first, then wraps comments/strings/URLs/flags/command.
-// Matches the class names in styles/code.css (.k .f .s .u .c). Ported from viz/account.mjs.
-export const hlShell = (raw) =>
-  esc(raw).replace(
-    /(#[^\n]*)|(&quot;(?:[^&]|&(?!quot;))*&quot;|'[^']*')|(https?:\/\/[^\s"'&]+)|(\B--?[A-Za-z][\w-]*)|(^[a-z][\w.-]*)/gm,
-    (m, c, s, u, f, cmd) =>
-      c ? `<span class="c">${c}</span>`
-        : s ? `<span class="s">${s}</span>`
-        : u ? `<span class="u">${u}</span>`
-        : f ? `<span class="f">${f}</span>`
-        : cmd ? `<span class="k">${cmd}</span>`
-        : m,
-  );
+// Tiny highlighters. Each escapes first, then wraps the tokens its language
+// shows, using the class names in styles/code.css (.k .f .s .u .c). Shell is
+// ported from viz/account.mjs; JSON and TypeScript were added for the snippets
+// the kit's own docs show.
+//
+// Every pattern runs over ESCAPED text, so a quoted string ends at &quot; and a
+// shell URL stops at any entity. The group order is the class order beside it.
+//
+// They are small on purpose — they colour short documentation snippets, not
+// arbitrary programs. Known limits: no nested template expressions, no regex
+// literals, and in TypeScript a `//` inside a string reads as a comment unless a
+// `:` precedes it, which is what keeps a URL in a string whole.
+const LANGUAGES = {
+  shell: {
+    pattern: /(#[^\n]*)|(&quot;(?:[^&]|&(?!quot;))*&quot;|'[^']*')|(https?:\/\/[^\s"'&]+)|(\B--?[A-Za-z][\w-]*)|(^[a-z][\w.-]*)/gm,
+    classes: ['c', 's', 'u', 'f', 'k'],
+  },
+  // A key is a string followed by a colon, matched by lookahead so the colon
+  // stays unpainted. Keys, string values and scalars take three different
+  // classes, because a number that looks exactly like a key is not highlighting.
+  json: {
+    pattern: /(&quot;(?:[^&]|&(?!quot;))*&quot;)(?=\s*:)|(&quot;(?:[^&]|&(?!quot;))*&quot;)|(\b(?:true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g,
+    classes: ['k', 's', 'f'],
+  },
+  ts: {
+    pattern: /(\/\*[\s\S]*?\*\/|(?<![:/])\/\/[^\n]*)|(&quot;(?:[^&]|&(?!quot;))*&quot;|'[^']*'|`[^`]*`)|(\b(?:import|export|from|const|let|var|function|return|async|await|class|extends|implements|interface|type|enum|new|if|else|for|while|of|in|as|default|readonly|void)\b)|(\b(?:true|false|null|undefined)\b|\b\d+(?:\.\d+)?\b)/g,
+    classes: ['c', 's', 'k', 'f'],
+  },
+};
+
+/** The languages codeTokens and hlCode understand, so a gate can discover them. */
+export const codeLanguages = Object.keys(LANGUAGES);
+
+const ENTITY = { amp: '&', lt: '<', gt: '>', quot: '"' };
+// The exact inverse of esc: every & in escaped text starts one of these four.
+const unesc = (text) => text.replace(/&(amp|lt|gt|quot);/g, (_, name) => ENTITY[name]);
+
+/**
+ * A language's tokens, as `[{ cls, text }]` with `cls` null between tokens and
+ * `text` the original unescaped source. Concatenating `text` returns `raw`, so a
+ * React caller renders the spans from the same string it copies instead of
+ * keeping a second hand-written copy in step. hlCode joins the same tokens into
+ * HTML; neither can drift from the other. An unrecognised `lang` is read as
+ * shell, the way the kit reads every other unknown option name.
+ *
+ * No pattern ever matches inside an entity — `#`, `h`, `-`, `/`, `*`, a digit and
+ * `^[a-z]` do not occur in `&amp;`, `&lt;`, `&gt;` or `&quot;`, no keyword is one
+ * of `amp`, `lt`, `gt` or `quot`, and every alternative either stops before `&` or
+ * consumes a whole `&quot;` — so each slice is entity-complete and
+ * `esc(unesc(slice))` returns the slice unchanged. hlCode's output is therefore
+ * byte-identical to wrapping the matches in place, which
+ * src/components/snippet-tokens.test.js holds for every language, against a copy
+ * of the one-pass implementation hlShell had before #474.
+ */
+export function codeTokens(raw, lang = 'shell') {
+  const { pattern, classes } = LANGUAGES[lang] || LANGUAGES.shell;
+  const escaped = esc(raw);
+  const out = [];
+  let at = 0;
+  pattern.lastIndex = 0;
+  for (const match of escaped.matchAll(pattern)) {
+    if (match.index > at) out.push({ cls: null, text: unesc(escaped.slice(at, match.index)) });
+    out.push({ cls: classes[match.slice(1).findIndex(Boolean)], text: unesc(match[0]) });
+    at = match.index + match[0].length;
+  }
+  if (at < escaped.length) out.push({ cls: null, text: unesc(escaped.slice(at)) });
+  return out;
+}
+
+export const hlCode = (raw, lang = 'shell') =>
+  codeTokens(raw, lang).map(({ cls, text }) => (cls ? `<span class="${cls}">${esc(text)}</span>` : esc(text))).join('');
+
+export const hlShell = (raw) => hlCode(raw, 'shell');
 
 export { icon };
 export { illo, illoNames } from '../assets/illustrations.js';

package/src/components/topbar.js

@@ -242,11 +242,26 @@ export function wireTopbar(root = document) {
       });
     });
   });
-  // Copy buttons
+  // Copy buttons. The confirmation is a glyph swap plus a word in the live region
+  // beside the button, so the control holds its 24px box and a reader who cannot
+  // see the check still hears it. Writing the word into the button would do
+  // neither: the box jumps, and the permanent aria-label outranks the contents, so
+  // the announced name would never move. The restore reads the markup the button
+  // started with — putting `data-orig` back wrote the label as words and dropped
+  // the glyph, which only looked harmless while a word sat beside it. #474
   root.querySelectorAll('.ui-snippet__copy').forEach((btn) => {
+    const resting = btn.innerHTML;
+    const status = btn.parentElement?.querySelector('.ui-snippet__status');
     btn.addEventListener('click', () => {
       const pre = btn.closest('.ui-snippet')?.querySelector('pre');
-      if (pre) { navigator.clipboard?.writeText(pre.innerText); btn.innerHTML = '✓ Copied'; setTimeout(() => { btn.innerHTML = btn.dataset.orig || 'Copy'; }, 1400); }
+      if (!pre) return;
+      navigator.clipboard?.writeText(pre.innerText);
+      btn.innerHTML = icon('check');
+      if (status) status.textContent = 'Copied';
+      setTimeout(() => {
+        btn.innerHTML = resting;
+        if (status) status.textContent = '';
+      }, 1400);
     });
   });
 }

package/src/index.css

@@ -44,3 +44,6 @@
 @import "./styles/feedback.css";
 @import "./styles/success.css";
 @import "./styles/loading.css";
+/* Last, and that is the point: the tap zone opens a gap a component sheet set,
+   so it has to be read after every one of them. why: specification, the tap floor */
+@import "./styles/tap-zone.css";

package/src/index.d.ts

@@ -83,6 +83,12 @@ export declare function topbar(opts?: Record<string, unknown>): string;
 export declare function commandPaletteList(groups?: readonly Record<string, unknown>[], opts?: { uid?: string; from?: number }): string;
 export declare function deckTextSwitch(active?: string): string;
 export declare function hlShell(raw: string): string;
+/** Token class from styles/code.css, or null for the text between tokens. */
+export type CodeTokenClass = 'c' | 'f' | 'k' | 's' | 'u';
+export type CodeLanguage = 'shell' | 'json' | 'ts';
+export declare const codeLanguages: readonly CodeLanguage[];
+export declare function codeTokens(raw: string, lang?: CodeLanguage): { cls: CodeTokenClass | null; text: string }[];
+export declare function hlCode(raw: string, lang?: CodeLanguage): string;
 export declare function pill(label: string, variant?: string): string;
 export declare function statusDot(live?: boolean): string;
 export declare function successCheck(variant?: 'line' | 'circled'): string;

package/src/inline.js

@@ -30,6 +30,7 @@ export const styles = {
   base: baseCss,
   reducedMotion: read('styles/reduced-motion.css'),
   fieldZoom: read('styles/field-zoom.css'),
+  tapZone: read('styles/tap-zone.css'),
   motion: read('styles/motion.css'),
   button: read('styles/button.css'),
   card: read('styles/card.css'),
@@ -92,4 +93,7 @@ export const cssText = [
   styles.feedback,
   styles.success,
   styles.loading,
+  // Last in the list for the reason src/index.css imports it last: it opens a
+  // gap a component sheet set, so it is read after every one of them.
+  styles.tapZone,
 ].join('\n');

package/src/styles/base.css

@@ -138,6 +138,7 @@ svg:where(:not([width]):not([height])) {
 
 /* Focus-visible ring, shared by all interactive controls */
 .ui-focusable:focus-visible,
+.ui-snippet :focus-visible,
 .ui-btn:focus-visible,
 .ui-input:focus-visible,
 .ui-seg button:focus-visible,

package/src/styles/code.css

@@ -30,6 +30,27 @@
   white-space: pre;
   font-family: var(--font-mono);
 }
+/* Scrollable code is a keyboard target, but a <pre> flush with the card and
+   without its radius draws a square ring that cuts across the card and squares
+   its corners. The card carries the ring instead, so it follows --radius-md and
+   survives `overflow: hidden`, which clips descendants and not the card's own
+   shadow. --ring-gap comes from the page here, matching the container rule in
+   tokens.css: a ring outside its own surface cannot use that surface as its gap.
+   The card also keeps a transparent outline, which forced colors repaints as the
+   focus signal once box-shadow is gone; the block below is why only one box has
+   one there. See stories/snippet-focus.test.js. */
+.ui-snippet pre:focus-visible { box-shadow: none; }
+.ui-snippet:has(pre:focus-visible) { outline: 2px solid transparent; --ring-gap: inherit; box-shadow: var(--ring); }
+
+/* Forced colors drops box-shadow, so both boxes fall back to their outlines and
+   the system repaints the pre's transparent one as the square this rule set out
+   to remove — with the card's rounded one 2px further out, two indicators for one
+   focus. The card's outline is the one that survives, so the pre keeps none.
+   Emulated in stories/snippet-focus.test.js and captured in Chromium. #474 */
+@media (forced-colors: active) {
+  .ui-snippet pre:focus-visible { outline: none; }
+}
+
 .ui-snippet__copy {
   background: none;
   border: 0;
@@ -39,14 +60,16 @@
   font-size: calc(var(--text-xs) + 1px);
   display: inline-flex;
   align-items: center;
-  gap: 6px;
   padding: 2px 4px;
   /* WCAG 2.5.8's 24 CSS px target floor, taken as a real box rather than as an
-     overlay: 2 + a 12px label at line-height 1.62 + 2 came to 23.44, so the
-     drawn button grows by 0.56px and the bar it sits in grows with it. Nothing
-     smaller than a rounding error moves, which is why this one is not a hit
-     area. Measured in stories/guidelines/accessibility-floor.test.js. #219 */
+     overlay. The height came first (#219): 2 + a 12px label at line-height 1.62
+     + 2 came to 23.44, so the drawn button grew by 0.56px and the bar with it.
+     The width is the same floor on the other axis, and it is load-bearing now
+     that the label is gone: 4 + a 13px glyph + 4 is 21px. Both are measured in
+     stories/guidelines/accessibility-floor.test.js. #474 */
   min-height: 24px;
+  min-width: 24px;
+  justify-content: center;
   transition: color var(--dur-fast) var(--ease);
 }
 .ui-snippet__copy:hover { color: var(--accent); }

package/src/styles/tap-zone.css

@@ -0,0 +1,167 @@
+/* apliteni-ui — the tap zone. Below the phone step, to a coarse pointer, a
+ * control that draws smaller than --tap-min carries a transparent layer that
+ * reaches the floor, and no control is drawn any bigger. Zones alone do not
+ * finish it: a layer takes HALF the clear space its container declares, so
+ * where the kit packs small controls closer than that, the GAP opens to
+ * --tap-gap. The controls keep their size; the space between them grows.
+ *
+ * Read LAST, after every component sheet — see src/index.css — because each
+ * opening overrides a gap one of them already set.
+ *
+ * why: docs/specification.md#a-tap-reaches-the-floor-below-the-phone-step
+ * Held by stories/tap-zone.test.js, measured in a browser at 390.
+ */
+
+:root {
+  /* WCAG 2.5.5, and where iOS and Android land. Not on the spacing scale,
+     which runs 40 then 48, because a fingertip is not spacing. Declared here
+     rather than in tokens.css for the reason field-zoom.css carries its own 16:
+     react/src/index.ts imports this sheet without the token file, and a var()
+     resolving to nothing there would size the layer to `auto` in silence. */
+  --tap-min: 44px;
+
+  /* WCAG 2.5.8 (AA), the target the kit holds at every width: the floor this
+     sheet raises FROM and may never drop below. */
+  --tap-aa: 24px;
+
+  /* 44 − 24: two zones fit between two of the smallest marks the kit draws. */
+  --tap-gap: var(--space-5, 20px);
+
+  /* Clear space to the nearest neighbour, declared by the container that knows
+     its own gap; a zone takes half on each side.
+
+     ZERO by default, so a zone grows nowhere until a container has opened the
+     room — assuming --tap-gap everywhere was measured handing `Keep the
+     workspace` a pixel of its own box that answered for `Delete it
+     permanently`. */
+  --tap-clear-x: 0px;
+  --tap-clear-y: 0px;
+}
+
+@media (max-width: 560px) and (pointer: coarse) {
+  /* The containing block for every layer below. `.ui-btn` already has it; the
+     rest take it only inside this query, because `position: relative` lifts a
+     control over the in-flow one beside it and that changes who wins a shared
+     pixel. */
+  :where(
+    .ui-seg button,
+    .ui-tabs__tab,
+    .ui-dropdown__trigger,
+    .ui-toast__action,
+    .ui-drawer__close,
+    .ui-snippet__copy,
+    .ui-footer__social
+  ) { position: relative; }
+
+  /* The layer: centred, transparent, sized to the floor, clamped to half the
+     clearance. */
+  :where(
+    .ui-btn,
+    .ui-seg button,
+    .ui-tabs__tab,
+    .ui-dropdown__trigger,
+    .ui-toast__action,
+    .ui-drawer__close,
+    .ui-snippet__copy,
+    .ui-footer__social,
+    .ui-switch
+  )::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-x)));
+    height: min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-y)));
+  }
+
+  /* ::after on these is spoken for — the tick and the dot, the toast close's
+     glyph plate — so the existing ::before grows, floored at --tap-aa. The
+     floor is load-bearing: `100%` is the PADDING box, 16 on a 19px checkbox
+     with a 1.5px border, so without it the clamp takes this layer DOWN to 22
+     and under the kit's own minimum. */
+  .ui-check input::before,
+  .ui-toast__close::before {
+    width: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-x))));
+    height: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-y))));
+  }
+
+  /* -- Where the kit opens a gap, and where it cannot --------------------
+   * `!important` for the reason field-zoom.css takes it: each opening
+   * overrides a `gap` shorthand a component sheet set, and the React bundle
+   * ships this sheet without those sheets, where order is the consumer's.   */
+
+  /* A strip keeps its pills packed across — that tight track IS the control —
+     and opens down, where the room is free until it wraps. */
+  .ui-seg {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--space-1, 4px);
+    --tap-clear-y: var(--tap-gap);
+  }
+
+  /* Tabs are wide enough across; down, the panel under them has the room. */
+  .ui-tabs__list { --tap-clear-x: 2px; --tap-clear-y: var(--tap-gap); }
+
+  /* Equal cells read as one strip, so they stay packed across and open down,
+     which is where this strip wraps at this width. */
+  .ui-pager__steps {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--space-1, 4px);
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-pager { row-gap: var(--tap-gap) !important; --tap-clear-y: var(--tap-gap); }
+
+  /* Chips open both ways: the row wraps, and the button at the end of it is a
+     target like the chips are. */
+  .ui-filter-bar { gap: var(--tap-gap) !important; --tap-clear-x: var(--tap-gap); --tap-clear-y: var(--tap-gap); }
+
+  /* Inside a chip there is nothing to open: parting the value from its remove
+     mark would draw two controls where the reader sees one. Named on the
+     Accessibility minimums page. */
+  .ui-filter-bar__chip { --tap-clear-x: 0px; --tap-clear-y: 0px; }
+
+  /* Row actions open across — the pair #488 names — and cannot open down:
+     a dense table's rows share an edge, and parting them is the row height the
+     guideline protects. Down, they get the row's own padding, twice. */
+  /* Row actions — the pair #488 names — part ACROSS with a margin: the cell is
+     a `table-cell`, where `gap` does nothing, and declaring it anyway left the
+     mark's zone 9px inside `Revoke`. Nothing down, because a dense table's
+     rows share an edge and its padding is not clearance to spend. */
+  .ui-table__act .ui-btn + .ui-btn { margin-inline-start: var(--tap-gap) !important; }
+  .ui-table__act { --tap-clear-x: var(--tap-gap); --tap-clear-y: 0px; }
+
+  /* Down only, like the nine rows below: a toast is a full row at this width,
+     and opening it across took 24px out of the message for no reach at all —
+     its action already clears the floor on the vertical half. The box does not
+     open either: a toast clips to its own rounded corners for the timer bar,
+     and widening its padding grows the surface rather than the space between
+     controls, measured at four marks for 8px on every toast. */
+  .ui-toast { row-gap: var(--tap-gap) !important; --tap-clear-y: var(--tap-gap); }
+
+  /* The kit's remaining control rows open DOWN only. A row of labelled buttons
+     at 390 is often already full, so widening its column gap does not move the
+     buttons apart — it makes them narrower, and that is the half #488 rules
+     out. Measured on a toolbar of three buttons and a dropdown. These rows
+     wrap, which is also where the review measured them colliding. */
+  .ui-confirm__acts,
+  .ui-toolbar,
+  .ui-empty__actions,
+  .ui-sx__actions,
+  .ui-fbc__foot,
+  .ui-drawer__footer,
+  .ui-snippet__bar,
+  .ui-app__main .ui-card__row {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-y: var(--tap-gap);
+  }
+
+  /* Both ways: fixed squares cannot overflow the way labels can, and a drawer
+     header spends its column gap on the title. Not the accent picker — its
+     swatches are on no carrier list, so opening it bought no reach. */
+  .ui-footer__socials,
+  .ui-drawer__header {
+    gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--tap-gap);
+    --tap-clear-y: var(--tap-gap);
+  }
+}