@apliteni/apliteni-ui 0.12.0 → 0.23.1

package/package.json

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

package/react/dist/index.css

@@ -1,3 +1,22 @@
+/* ../src/styles/reduced-motion.css */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto !important;
+  }
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  [data-reveal] {
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}
+
 /* src/Modal.css */
 .rx-scrim {
   position: fixed;

package/react/dist/index.d.ts

@@ -12,9 +12,11 @@ type ButtonProps = {
     iconRight?: string;
     iconOnly?: boolean;
     block?: boolean;
+    /** In flight: aria-busy, disabled, and the kit's indeterminate bars. */
+    busy?: boolean;
     children?: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
-declare function Button({ variant, size, icon, iconRight, iconOnly, block, children, type, ...rest }: ButtonProps): react.JSX.Element;
+declare function Button({ variant, size, icon, iconRight, iconOnly, block, busy, children, type, disabled, ...rest }: ButtonProps): react.JSX.Element;
 
 declare function Badge({ variant, children }: {
     variant?: string;
@@ -55,4 +57,43 @@ declare function DataTable<T extends {
     name: string;
 }>({ columns, rows, pageSize, selected, onToggle, onTogglePage, }: DataTableProps<T>): react.JSX.Element;
 
-export { Badge, Button, type ButtonProps, Card, type Column, DataTable, type DataTableProps, Icon, Modal, type ModalProps };
+type SkeletonProps = {
+    /** A count of bars, or explicit widths when a ragged prose edge matters. */
+    lines?: number | string[];
+    width?: string;
+    height?: string;
+    radius?: string;
+    className?: string;
+};
+declare function Skeleton({ lines, width, height, radius, className }: SkeletonProps): react.JSX.Element;
+type SkeletonTableProps = {
+    rows?: number;
+    cols?: number;
+    head?: boolean;
+};
+declare function SkeletonTable({ rows, cols, head }: SkeletonTableProps): react.JSX.Element;
+type BusyRegionProps = {
+    busy: boolean;
+    /** Spoken while it works. */
+    label?: string;
+    /** Spoken when it finishes — the specific line ("14 invoices") beats "Loaded". */
+    message?: string;
+    /** Placeholder while busy. Defaults to a three-bar skeleton. */
+    placeholder?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+};
+declare function BusyRegion({ busy, label, message, placeholder, className, children, }: BusyRegionProps): react.JSX.Element;
+type DeniedProps = {
+    title?: string;
+    sub?: string;
+    /** The scope or role the reader is missing, verbatim. */
+    need?: string;
+    icon?: string;
+    className?: string;
+    /** Buttons. Nothing is assumed about what a reader can do next. */
+    children?: ReactNode;
+};
+declare function Denied({ title, sub, need, icon, className, children, }: DeniedProps): react.JSX.Element;
+
+export { Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, DataTable, type DataTableProps, Denied, type DeniedProps, Icon, Modal, type ModalProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps };

package/react/dist/index.js

@@ -24,8 +24,10 @@ function Button({
   iconRight,
   iconOnly,
   block,
+  busy,
   children,
   type = "button",
+  disabled,
   ...rest
 }) {
   const cls = cx(
@@ -38,11 +40,27 @@ function Button({
   const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
   const fallback = typeof children === "string" && children.trim() ? children.trim() : icon2;
   const named = iconOnly && !labelled && fallback ? { "aria-label": fallback, title: rest.title ?? fallback } : {};
-  return /* @__PURE__ */ jsxs("button", { type, className: cls, ...rest, ...named, children: [
-    icon2 && /* @__PURE__ */ jsx2(Icon, { name: icon2 }),
-    !iconOnly && children != null && /* @__PURE__ */ jsx2("span", { children }),
-    iconRight && /* @__PURE__ */ jsx2(Icon, { name: iconRight })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      className: cls,
+      disabled: disabled || busy,
+      "aria-disabled": disabled || busy ? true : void 0,
+      "aria-busy": busy ? true : void 0,
+      ...rest,
+      ...named,
+      children: [
+        icon2 && /* @__PURE__ */ jsx2(Icon, { name: icon2 }),
+        !iconOnly && children != null && /* @__PURE__ */ jsx2("span", { children }),
+        iconRight && /* @__PURE__ */ jsx2(Icon, { name: iconRight }),
+        busy && /* @__PURE__ */ jsxs("span", { className: "ui-btn__bars", children: [
+          /* @__PURE__ */ jsx2("i", {}),
+          /* @__PURE__ */ jsx2("i", {})
+        ] })
+      ]
+    }
+  );
 }
 
 // src/primitives/Badge.tsx
@@ -244,11 +262,85 @@ function DataTable({
     ] })
   ] });
 }
+
+// src/Loading.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var cx2 = (...a) => a.filter(Boolean).join(" ");
+function Skeleton({ lines = 3, width, height, radius, className }) {
+  const widths = Array.isArray(lines) ? lines : null;
+  const n = widths ? widths.length : Math.max(1, lines);
+  const styleFor = (i) => {
+    const w = widths ? widths[i] : width;
+    if (!w && !height && !radius) return void 0;
+    return { ...w && { width: w }, ...height && { height }, ...radius && { borderRadius: radius } };
+  };
+  return /* @__PURE__ */ jsx7("div", { className: cx2("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx7("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
+}
+function SkeletonTable({ rows = 5, cols = 4, head = true }) {
+  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx7("span", { className: "ui-skel__bar m-skeleton" }, i));
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: "ui-skel ui-skel--table",
+      style: { "--skel-cols": Math.max(1, cols) },
+      "aria-hidden": "true",
+      children: [
+        head && /* @__PURE__ */ jsx7("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
+        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx7("div", { className: "ui-skel__row", children: cells }, i))
+      ]
+    }
+  );
+}
+function BusyRegion({
+  busy,
+  label = "Loading\u2026",
+  message = "Loaded",
+  placeholder,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cx2("ui-busy", className),
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": busy,
+      children: [
+        /* @__PURE__ */ jsx7("span", { className: "ui-sr", children: busy ? label : message }),
+        /* @__PURE__ */ jsx7("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx7(Skeleton, { lines: 3 }) : children })
+      ]
+    }
+  );
+}
+function Denied({
+  title = "You don\u2019t have access",
+  sub,
+  need,
+  icon: icon2 = "lock",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: cx2("ui-denied", className), children: [
+    /* @__PURE__ */ jsx7("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx7(Icon, { name: icon2 }) }),
+    /* @__PURE__ */ jsx7("div", { className: "ui-denied__title", children: title }),
+    sub && /* @__PURE__ */ jsx7("div", { className: "ui-denied__sub", children: sub }),
+    need && /* @__PURE__ */ jsxs5("div", { className: "ui-denied__need", children: [
+      "Needs ",
+      /* @__PURE__ */ jsx7("code", { className: "ui-code", children: need })
+    ] }),
+    children && /* @__PURE__ */ jsx7("div", { className: "ui-denied__actions", children })
+  ] });
+}
 export {
   Badge,
+  BusyRegion,
   Button,
   Card,
   DataTable,
+  Denied,
   Icon,
-  Modal
+  Modal,
+  Skeleton,
+  SkeletonTable
 };

package/src/assets/icons.js

@@ -1,34 +1,13 @@
-// Line-icon set — 24×24, stroke=currentColor, 1.7 weight, round caps/joins.
-// House style is Feather/Lucide (Lucide is the maintained Feather; our glyphs
-// match it 1:1). Delivery is inline SVG strings: no runtime dependency, works
-// in any framework, and every glyph inherits `currentColor` + a consistent
-// stroke so it sits right next to our type.
+// Line-icon set — 24×24, stroke=currentColor, 1.7 weight, round caps/joins,
+// Lucide house style. Delivery is inline SVG strings, so there is no runtime
+// dependency and every glyph inherits `currentColor`.
 //
 // Each value is the INNER markup; icon() wraps it in the shared <svg>. Glyphs
 // are grouped by domain — the flat ICONS map is what icon() looks up, and
 // iconCategories drives the Storybook grid.
 //
-// ---- Adding a glyph -------------------------------------------------------
-//
-// NAME it for what it depicts, not for the one place it is used: `trash`, not
-// `deleteWorkspace`. camelCase, and a modifier follows its noun — `circleX`,
-// `eyeOff`, `trendingUp` — so the family sorts together. A name is taken once;
-// a second declaration of one is a gate failure, not a merge conflict.
-//
-// GROUP it by what it depicts, again rather than by caller. `chart` lives in
-// DATA because it draws data, even when a comms panel is what renders it. If
-// two groups both look right, the glyph belongs to the one whose other members
-// it would sit beside in the catalogue. Groups are not tags: exactly one.
-//
-// PROVENANCE: the path comes from Lucide, unmodified, at the 24×24 / 1.7 house
-// stroke — that is what keeps the set looking like one hand. Say which Lucide
-// name it came from in the commit if the two differ. A hand-drawn path needs a
-// reason in the commit message, because the next person cannot tell one from a
-// traced one by looking.
-//
-// The gates: src/assets/icons.test.js holds one-group-per-glyph and the
-// emitter's numbers, and stories/guidelines/iconography.test.js holds the
-// icon-only list below. The written rules are on Guidelines / Iconography.
+// Naming, grouping and provenance, and the gates that hold them:
+// why: CONTRIBUTING.md#add-a-glyph
 
 const NAV = {
   chevronDown: '<path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"/>',

package/src/components/account-nav.js

@@ -3,7 +3,7 @@
 // shell.js and topbar.js need it and shell.js already imports topbar.js — the
 // other direction would be a cycle. shell.js re-exports ACCOUNT_NAV, which is
 // the published name docs/library.md documents.
-// why: docs/adr/0007-one-page-shell-built-from-the-kits-own-nav.md
+// why: docs/specification.md#the-page-shell
 import { esc } from './index.js';
 
 // nav.js item objects. Labels are raw text — every nav primitive escapes, so a

package/src/components/loading.js

@@ -0,0 +1,126 @@
+// The pending and denied states of a SCREEN, not of one control.
+//
+// busyRegion() is one live region that outlives what it reports on; setBusy()
+// swaps its body and writes a line into the sr-only node already inside it.
+// Three things land in that body: skeleton() while it fetches, your markup once
+// the rows arrive, deniedState() when the answer came back 403.
+//
+// why: docs/specification.md#pending-and-denied-states
+import { icon } from '../assets/icons.js';
+import { button, esc } from './index.js';
+
+const cx = (...a) => a.filter(Boolean).join(' ');
+
+// ---- Skeleton ------------------------------------------------------------
+// The placeholder shape. `lines` is a count, or an array of widths when the
+// varied ragged edge of real prose matters (['100%','92%','60%']). `height`
+// makes it one solid block instead — a chart, a map, an avatar. The shimmer is
+// .m-skeleton from the motion library, so there is one animation to own and it
+// is already inside that library's reduced-motion net.
+export function skeleton({ lines = 3, width, height, radius, className = '' } = {}) {
+  const widths = Array.isArray(lines) ? lines : Array.isArray(width) ? width : null;
+  const n = widths ? widths.length : Math.max(1, lines | 0);
+  const styleFor = (i) => {
+    const w = widths ? widths[i] : (typeof width === 'string' ? width : null);
+    const bits = [w && `width:${w}`, height && `height:${height}`, radius && `border-radius:${radius}`];
+    const s = bits.filter(Boolean).join(';');
+    return s ? ` style="${esc(s)}"` : '';
+  };
+  const bars = Array.from({ length: n }, (_, i) =>
+    `<span class="ui-skel__bar m-skeleton"${styleFor(i)}></span>`).join('');
+  return `<div class="${cx('ui-skel', className)}" aria-hidden="true">${bars}</div>`;
+}
+
+// A table's worth of skeleton — `rows` × `cols` of bar, laid out on a grid so
+// the placeholder has the column rhythm the real table will have. Screens that
+// load a table are the common case, and hand-rolling this per screen is how
+// four slightly different loading tables get shipped.
+export function skeletonTable({ rows = 5, cols = 4, head = true } = {}) {
+  const row = (cls) => `<div class="${cls}">`
+    + Array.from({ length: Math.max(1, cols | 0) }, () => '<span class="ui-skel__bar m-skeleton"></span>').join('')
+    + '</div>';
+  const body = Array.from({ length: Math.max(1, rows | 0) }, () => row('ui-skel__row')).join('');
+  return `<div class="ui-skel ui-skel--table" style="--skel-cols:${Math.max(1, cols | 0)}" aria-hidden="true">`
+    + `${head ? row('ui-skel__row ui-skel__row--head') : ''}${body}</div>`;
+}
+
+// ---- The region ----------------------------------------------------------
+// `label` is what is spoken while it works, `readyLabel` the fallback for when
+// it finishes without the caller supplying a line. Both are parked on the
+// element so setBusy() can find them and the caller never repeats itself.
+//
+// `body` overrides the default skeleton (pass your own placeholder, or the
+// already-loaded content when the region starts ready).
+export function busyRegion({
+  label = 'Loading…', readyLabel = 'Loaded', busy = true,
+  body, lines = 3, className = '',
+} = {}) {
+  const inner = body != null ? body : skeleton({ lines });
+  return `<div class="${cx('ui-busy', className)}" data-busy`
+    + ` data-busy-label="${esc(label)}" data-busy-ready="${esc(readyLabel)}"`
+    + ` role="status" aria-live="polite" aria-busy="${busy ? 'true' : 'false'}">`
+    + `<span class="ui-sr" data-busy-msg>${esc(busy ? label : readyLabel)}</span>`
+    + `<div class="ui-busy__body" data-busy-body>${inner}</div>`
+    + '</div>';
+}
+
+// Flip a region between busy and ready, and say so. Writing into
+// [data-busy-msg] IS the announcement. Callers pass `message` for the specific
+// line ("14 invoices", "You don't have access to this report"); the region's
+// own labels are the fallback.
+//
+// Accepts the region, a selector, or any ancestor of it. Returns the region, or
+// null when there is nothing to update — safe to call against a torn-down view.
+export function setBusy(root, { busy = false, message, body } = {}) {
+  const el = typeof root === 'string' ? document.querySelector(root) : root;
+  if (!el || typeof el.querySelector !== 'function') return null;
+  const region = el.matches && el.matches('[data-busy]') ? el : el.querySelector('[data-busy]');
+  if (!region) return null;
+
+  region.setAttribute('aria-busy', busy ? 'true' : 'false');
+  if (body != null) {
+    const slot = region.querySelector('[data-busy-body]');
+    if (slot) slot.innerHTML = body;
+  }
+  const msg = region.querySelector('[data-busy-msg]');
+  if (msg) {
+    const fallback = busy
+      ? (region.dataset.busyLabel || 'Loading…')
+      : (region.dataset.busyReady || 'Loaded');
+    msg.textContent = message == null ? fallback : String(message);
+  }
+  return region;
+}
+
+// ---- Permission denied ---------------------------------------------------
+// The 403 screen. Same shape as emptyState() — a mark, a title, a line, some
+// actions — because to a reader they are the same event: the thing you came for
+// is not here. What separates them is that this one owes an explanation, so
+// `need` is a first-class slot rather than something to bury in `sub`.
+//
+// `need` names the scope or role the reader is missing, verbatim, as code. A
+// reader who can act on "you need reports.read" acts on it; "insufficient
+// permissions" sends them to open a ticket to find out what to ask for.
+//
+// No role and no live region here — see the file header. When this lands as the
+// answer to a fetch, put it inside a busyRegion() and the region announces it.
+export function deniedState({
+  title = 'You don’t have access',
+  sub = '',
+  need = '',
+  actions = [],
+  icon: ic = 'lock',
+  className = '',
+} = {}) {
+  const needEl = need
+    ? `<div class="ui-denied__need">Needs <code class="ui-code">${esc(need)}</code></div>`
+    : '';
+  const actionsEl = actions.length
+    ? `<div class="ui-denied__actions">${actions.map((a) => button({ size: 'md', ...a })).join('')}</div>`
+    : '';
+  return `<div class="${cx('ui-denied', className)}">`
+    + `<div class="ui-denied__seal" aria-hidden="true">${icon(ic)}</div>`
+    + `<div class="ui-denied__title">${esc(title)}</div>`
+    + `${sub ? `<div class="ui-denied__sub">${esc(sub)}</div>` : ''}`
+    + `${needEl}${actionsEl}</div>`;
+}

package/src/components/shell.js

@@ -3,7 +3,7 @@
 // with a breadcrumb trail the caller owns. `accountShell()` is a thin preset
 // over it that keeps the topbar, so the published /account API still works.
 // Call wireTopbar() once after mounting to wire the account menu + theme toggle.
-// why: docs/adr/0007-one-page-shell-built-from-the-kits-own-nav.md
+// why: docs/specification.md#the-page-shell
 import { topbar as productTopbar } from './topbar.js';
 import { esc, icon } from './index.js';
 import { sidebarNav, breadcrumbs } from './nav.js';
@@ -89,16 +89,17 @@ const toTopbar = (t) => {
   return out;
 };
 
-// `maxWidth` lands inside a style attribute, which is a declaration list: esc()
-// stops a quote closing the attribute, and `;` is the character that matters
-// there. So a length is all this accepts — a number and a unit the reading
-// column can use, or `none`. Anything else falls back to the default rather
-// than throwing, because a shell that throws mid-render takes the page with it.
-const MAIN_MAX = '860px';
+// `maxWidth` lands inside a style attribute, so a length is all this accepts —
+// a number and a unit, or `none`. Anything else yields '' and the caller writes
+// no style attribute, letting layout.css fall through to --measure. It must
+// REMOVE the property rather than pass a default or a bad value on: a custom
+// property accepts any token stream, so garbage is a valid declaration that
+// drops the column to `none`, the full track.
+// why: docs/specification.md#widths
 const LENGTH = /^(?:\d+|\d*\.\d+)(?:px|rem|em|ch|%|vw)$/;
 const mainMax = (v) => {
   const s = str(v).trim();
-  return s === 'none' || LENGTH.test(s) ? s : MAIN_MAX;
+  return s === 'none' || LENGTH.test(s) ? s : '';
 };
 
 // The one pass. Each key names the function that settles it; nothing else in
@@ -194,7 +195,7 @@ export function appShell(options = {}) {
       ${rail}
       ${railUser(account)}
     </div>
-    <main class="ui-app__main" style="--ui-app-main: ${maxWidth}">
+    <main class="ui-app__main"${maxWidth ? ` style="--ui-app-main: ${maxWidth}"` : ''}>
       ${crumbs.length ? breadcrumbs({ items: crumbs }) : ''}
       ${title ? `<h1>${title}</h1>` : ''}
       ${sub ? `<p class="ui-app__sub">${sub}</p>` : ''}

package/src/index.css

@@ -1,12 +1,16 @@
 /* ============================================================================
  * apliteni-ui — full stylesheet.
- * Import once (`import 'apliteni-ui/css'`) or cherry-pick from src/styles/*.
+ * Import once: `import 'apliteni-ui/css'`. A single component sheet is NOT
+ * addressable — package.json `exports` has no wildcard for ./styles/*, so a deep
+ * path into src/styles/ does not resolve. To take one component, read it by name
+ * through `apliteni-ui/inline` (`import { topbarCss } from …`).
  * Requires the Poppins font (loaded by the host page or Storybook preview).
  * ========================================================================== */
 @import "./tokens/brand.generated.css";
 @import "./tokens/tokens.css";
 @import "./tokens/accents.css";
 @import "./styles/base.css";
+@import "./styles/reduced-motion.css";
 @import "./styles/motion.css";
 @import "./styles/button.css";
 @import "./styles/card.css";
@@ -27,3 +31,4 @@
 @import "./styles/layout.css";
 @import "./styles/feedback.css";
 @import "./styles/success.css";
+@import "./styles/loading.css";

package/src/index.js

@@ -12,6 +12,7 @@ export * from './components/footer.js';
 export * from './components/feedback.js';
 export * from './components/toasts.js';
 export * from './components/success.js';
+export * from './components/loading.js';
 export * from './assets/icons.js';
 export * from './assets/brand.js';
 export * from './motion.js';

package/src/inline.js

@@ -28,6 +28,7 @@ export const topbarCss = read('styles/topbar.css');
 // Individual component stylesheets, addressable by name.
 export const styles = {
   base: baseCss,
+  reducedMotion: read('styles/reduced-motion.css'),
   motion: read('styles/motion.css'),
   button: read('styles/button.css'),
   card: read('styles/card.css'),
@@ -48,12 +49,14 @@ export const styles = {
   layout: read('styles/layout.css'),
   feedback: read('styles/feedback.css'),
   success: read('styles/success.css'),
+  loading: read('styles/loading.css'),
 };
 
 // Everything, in the same order as index.css. `tokensCss` first so cascade is right.
 export const cssText = [
   tokensCss,
   styles.base,
+  styles.reducedMotion,
   styles.motion,
   styles.button,
   styles.card,
@@ -74,4 +77,5 @@ export const cssText = [
   styles.layout,
   styles.feedback,
   styles.success,
+  styles.loading,
 ].join('\n');

package/src/styles/badge.css

@@ -72,7 +72,7 @@
 .ui-dot.is-live {
   background: var(--green);
   box-shadow: 0 0 0 0 var(--glow-green);
-  animation: ui-pulse 2s var(--ease) infinite;
+  animation: ui-pulse 2s var(--ease) infinite; /* motion: ambient — a liveness heartbeat, not a response to anything the reader did */
 }
 @keyframes ui-pulse {
   0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }

package/src/styles/base.css

@@ -88,7 +88,7 @@ a {
 }
 
 /* Layout helpers used by the example apps */
-.ui-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 2.4vw, 26px); }
+.ui-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(14px, 2.4vw, 26px); }
 .ui-stack > * + * { margin-top: var(--space-4); }
 
 /* Section eyebrow — uppercase caption used across cards and headers */

package/src/styles/button.css

@@ -37,7 +37,7 @@
 }
 .ui-btn:active { transform: translateY(1px); }
 
-.ui-btn svg { width: 16px; height: 16px; flex: none; }
+.ui-btn svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; }
 
 /* -- Variants ----------------------------------------------------------- */
 .ui-btn--primary {
@@ -82,12 +82,25 @@
 .ui-btn--block { width: 100%; }
 
 /* -- States ------------------------------------------------------------- */
+/* Off, in every variant. A disabled button has no variant identity — primary,
+   secondary and danger all take the same flat pair, because the accent IS the
+   "press me" and keeping a faded version of it was what put a disabled primary
+   at 1.48:1 (white on a washed-out purple). Dropping the accent is most of what
+   makes this read as inert; the quiet ink is the rest. #220 */
 .ui-btn:disabled,
 .ui-btn[aria-disabled="true"] {
-  opacity: 0.45;
+  background: var(--disabled-surface);
+  border-color: var(--disabled-border);
+  color: var(--disabled-ink);
   cursor: not-allowed;
   pointer-events: none;
 }
+/* A ghost button draws no box when it is on, so it draws none when it is off. */
+.ui-btn--ghost:disabled,
+.ui-btn--ghost[aria-disabled="true"] {
+  background: transparent;
+  border-color: transparent;
+}
 
 /* Busy: keep the label, run an indeterminate accent shimmer along the base, and
    the button is disabled (not clickable). Pass busy + the .ui-btn__bars markup.
@@ -109,7 +122,7 @@
   overflow: hidden;
   /* Clean entrance: grow + fade in on state change, once. */
   transform-origin: center;
-  animation: ui-bars-in 180ms var(--ease) both;
+  animation: ui-bars-in var(--dur-fast) var(--ease) both;
 }
 .ui-btn--sm .ui-btn__bars { left: 7px; right: 7px; bottom: 4px; }
 .ui-btn--lg .ui-btn__bars { left: 14px; right: 14px; bottom: 7px; }
@@ -130,8 +143,8 @@
     color-mix(in srgb, var(--accent-contrast) 35%, transparent),
     var(--accent-contrast));
 }
-.ui-btn__bars i:nth-child(1) { width: 38%; animation: ui-bars1 2s cubic-bezier(0.65, 0.05, 0.35, 1) infinite; }
-.ui-btn__bars i:nth-child(2) { width: 22%; animation: ui-bars2 2s cubic-bezier(0.65, 0.05, 0.35, 1) 0.8s infinite; }
+.ui-btn__bars i:nth-child(1) { width: 38%; animation: ui-bars1 2s cubic-bezier(0.65, 0.05, 0.35, 1) infinite; } /* motion: ambient — an indeterminate loader loops until the work returns; its period is not a response time */
+.ui-btn__bars i:nth-child(2) { width: 22%; animation: ui-bars2 2s cubic-bezier(0.65, 0.05, 0.35, 1) 0.8s infinite; } /* motion: ambient — the second bar runs the same loop 0.8s out of phase */
 @keyframes ui-bars1 { 0% { left: -45%; } 100% { left: 110%; } }
 @keyframes ui-bars2 { 0% { left: -28%; } 100% { left: 120%; } }
 @keyframes ui-bars-in { from { opacity: 0; transform: scaleX(0.72); } to { opacity: 1; transform: scaleX(1); } }