@ponchia/ui 0.6.8 → 0.6.10

package/classes/index.js

@@ -212,7 +212,7 @@ export const cls = Object.freeze({
   tableLined: 'ui-table--lined',
   tableBreakAnywhere: 'ui-table--break-anywhere',
   tableWrap: 'ui-table-wrap',
-  // Loading state goes on the WRAP, so the modifier is named for the wrap (C19).
+  // Loading state goes on the wrap, so the modifier is named for the wrap.
   tableLoading: 'ui-table-wrap--loading',
   tableEmpty: 'ui-table__empty',
   tableSort: 'ui-table__sort',
@@ -609,10 +609,20 @@ export const cls = Object.freeze({
   toolCallName: 'ui-tool-call__name',
   toolCallStatus: 'ui-tool-call__status',
   toolCallBody: 'ui-tool-call__body',
-  // workbench — inspector / property / selection bar / splitter (css/workbench.css)
+  // workbench — inspector / property / toolstrip / selection bar / splitter (css/workbench.css)
   inspector: 'ui-inspector',
   inspectorHead: 'ui-inspector__head',
   inspectorBody: 'ui-inspector__body',
+  toolstrip: 'ui-toolstrip',
+  toolstripFloating: 'ui-toolstrip--floating',
+  toolstripCompact: 'ui-toolstrip--compact',
+  toolstripBrand: 'ui-toolstrip__brand',
+  toolstripContext: 'ui-toolstrip__context',
+  toolstripGroup: 'ui-toolstrip__group',
+  toolstripActions: 'ui-toolstrip__actions',
+  toolstripSearch: 'ui-toolstrip__search',
+  segmentedButtons: 'ui-segmented-buttons',
+  segmentedButtonsButton: 'ui-segmented-buttons__button',
   property: 'ui-property',
   propertyLabel: 'ui-property__label',
   propertyValue: 'ui-property__value',
@@ -739,14 +749,14 @@ const srcTone = (state) =>
   })[state] || '';
 
 // Component tone → modifier class. Same object-literal idiom as srcTone/stateTone
-// (still grep-by-class-name; the modifier set differs per component). (Q9.)
+// while keeping modifier classes grep-friendly.
 //
 // The set differs PER COMPONENT on purpose — `muted` is a badge/num tone, not an
 // alert/toast/meter/dot one — so a caller extrapolating a universal tone (e.g.
 // `ui.alert({ tone: 'muted' })`) used to get a silent no-op: a bare, untoned
 // element with no signal that the tone was dropped. Warn at dev time instead, so
 // that "validates-but-no-ops" trap is loud rather than invisible. An omitted tone
-// is fine (returns no modifier). (component audit C12.)
+// is fine and returns no modifier.
 const toneClass = (component, map, tone) => {
   if (tone == null) return '';
   const hit = map[tone];
@@ -852,6 +862,43 @@ const claimStatus = (status) =>
     status,
   );
 
+const valueClass = (map, value) => (value == null ? '' : map[value] || '');
+
+const annotationVariants = Object.freeze({
+  label: cls.annotationLabelVariant,
+  callout: cls.annotationCallout,
+  elbow: cls.annotationElbow,
+  curve: cls.annotationCurve,
+  circle: cls.annotationCircle,
+  rect: cls.annotationRect,
+  threshold: cls.annotationThreshold,
+  badge: cls.annotationBadgeVariant,
+  bracket: cls.annotationBracket,
+  band: cls.annotationBand,
+  slope: cls.annotationSlope,
+  compare: cls.annotationCompare,
+  cluster: cls.annotationCluster,
+  axis: cls.annotationAxis,
+  timeline: cls.annotationTimeline,
+  evidence: cls.annotationEvidence,
+});
+
+const annotationTones = Object.freeze({
+  accent: cls.annotationAccent,
+  muted: cls.annotationMuted,
+  success: cls.annotationSuccess,
+  warning: cls.annotationWarning,
+  danger: cls.annotationDanger,
+  info: cls.annotationInfo,
+});
+
+const annotationMotions = Object.freeze({
+  draw: cls.annotationDraw,
+  pulse: cls.annotationPulse,
+  reveal: cls.annotationReveal,
+  focus: cls.annotationFocus,
+});
+
 export const ui = {
   button: ({ variant, icon, size } = {}) =>
     j(
@@ -927,7 +974,7 @@ export const ui = {
     j(
       cls.legendSwatch,
       // Series 1–8 map to ui-legend__swatch--N; the explicit bounds-check keeps a
-      // 0/9/non-integer from coining a class the stylesheet never defines. (Q9.)
+      // 0/9/non-integer from coining a class the stylesheet never defines.
       Number.isInteger(series) && series >= 1 && series <= 8 && cls[`legendSwatch${series}`],
       shape === 'circle' && cls.legendSwatchCircle,
       shape === 'line' && cls.legendSwatchLine,
@@ -935,32 +982,9 @@ export const ui = {
   annotation: ({ variant = 'callout', tone = 'accent', motion } = {}) =>
     j(
       cls.annotation,
-      variant === 'label' && cls.annotationLabelVariant,
-      variant === 'callout' && cls.annotationCallout,
-      variant === 'elbow' && cls.annotationElbow,
-      variant === 'curve' && cls.annotationCurve,
-      variant === 'circle' && cls.annotationCircle,
-      variant === 'rect' && cls.annotationRect,
-      variant === 'threshold' && cls.annotationThreshold,
-      variant === 'badge' && cls.annotationBadgeVariant,
-      variant === 'bracket' && cls.annotationBracket,
-      variant === 'band' && cls.annotationBand,
-      variant === 'slope' && cls.annotationSlope,
-      variant === 'compare' && cls.annotationCompare,
-      variant === 'cluster' && cls.annotationCluster,
-      variant === 'axis' && cls.annotationAxis,
-      variant === 'timeline' && cls.annotationTimeline,
-      variant === 'evidence' && cls.annotationEvidence,
-      tone === 'accent' && cls.annotationAccent,
-      tone === 'muted' && cls.annotationMuted,
-      tone === 'success' && cls.annotationSuccess,
-      tone === 'warning' && cls.annotationWarning,
-      tone === 'danger' && cls.annotationDanger,
-      tone === 'info' && cls.annotationInfo,
-      motion === 'draw' && cls.annotationDraw,
-      motion === 'pulse' && cls.annotationPulse,
-      motion === 'reveal' && cls.annotationReveal,
-      motion === 'focus' && cls.annotationFocus,
+      valueClass(annotationVariants, variant),
+      valueClass(annotationTones, tone),
+      valueClass(annotationMotions, motion),
     ),
   mark: ({ style, tone, motion } = {}) =>
     j(
@@ -1049,7 +1073,7 @@ export const ui = {
 // UNITLESS `--value` (0–100) and AT needs role + aria-valuenow/min/max. This sets
 // the painted value and its announced value together so they can't drift, and
 // normalizes an arbitrary {min,max} to the 0–100 `--value` the CSS expects while
-// keeping aria-valuenow in the caller's real units. (component audit C8.)
+// keeping aria-valuenow in the caller's real units.
 // `busyWhenIndeterminate` — a progressbar advertises aria-busy when its value is
 // unknown; a meter is never indeterminate so it passes false. (Kept a boolean
 // flag rather than testing the role string, so check:recipe-types doesn't read it
@@ -1064,7 +1088,7 @@ const valueAttrs = (role, value, min, max, busyWhenIndeterminate) => {
   // advertises aria-busy; a meter has no indeterminate state, so a non-finite
   // value there is a caller error we still fail safe on by omitting the
   // misleading 0. Pair with `ui.progress({ indeterminate: true })` for the CSS
-  // sweep. (component audit C9.)
+  // sweep.
   if (!Number.isFinite(raw)) {
     return busyWhenIndeterminate ? { role, 'aria-busy': 'true' } : { role };
   }
@@ -1086,13 +1110,13 @@ const valueAttrs = (role, value, min, max, busyWhenIndeterminate) => {
  *   </div>
  * `value` is in your own units; pass `{ min, max }` (default 0–100) and the
  * `--value` width is normalized for you. Call `attrs.progress()` with no value
- * for an indeterminate bar (omits aria-valuenow, sets aria-busy). (audit C9.)
+ * for an indeterminate bar (omits aria-valuenow, sets aria-busy).
  *
  * `attrs.dotbar(value)` is the segmented analogue of `attrs.progress`: a
  * determinate `.ui-dotbar` carries the same progress data as `.ui-progress` but,
  * without this, was eight empty `<span>`s to AT (the segments are decorative —
  * mark them `aria-hidden`). Same progressbar role + aria-valuenow/min/max;
- * call with no value for the indeterminate sweep. (component audit C10.)
+ * call with no value for the indeterminate sweep.
  */
 export const attrs = Object.freeze({
   meter: (value, { min = 0, max = 100 } = {}) => valueAttrs('meter', value, min, max, false),

package/connectors/index.d.ts

@@ -103,8 +103,8 @@ export function arrowHead(p: Point, angle: number, size?: number, spread?: numbe
 export function dotMark(p: Point, radius?: number): string;
 /**
  * An axis-aligned rectangle path from its corners (callers derive the corners
- * from a centre or a top-left as they need). Shared by the annotation
- * rect/band and evidence-marker subjects. (code-quality audit Q5.)
+ * from a centre or a top-left as they need). Shared by annotation rect/band
+ * and evidence-marker subjects.
  * @param {number} left
  * @param {number} top
  * @param {number} right

package/connectors/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAkDA;;;;;;GAMG;AACH,6BALW,MAAM,SACN,MAAM,GAAG,IAAI,GAAG,SAAS,aACzB,MAAM,GAAG,IAAI,GAAG,SAAS,GACvB,MAAM,CAMlB;AAED;;;;;;GAMG;AACH,gCALW,MAAM,SACN,MAAM,GAAG,IAAI,GAAG,SAAS,aACzB,MAAM,GAAG,IAAI,GAAG,SAAS,GACvB,MAAM,CAMlB;AAKD;;;GAGG;AACH,mCAHW,MAAM,GACJ,MAAM,CAKlB;AAED;;;GAGG;AACH,2BAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;GAIG;AACH,yBAJW,MAAM,KACN,MAAM,GACJ,MAAM,CAIlB;AAID;;;;;GAKG;AACH,6BALW,MAAM,OACN,MAAM,OACN,MAAM,GACJ,MAAM,CAKlB;AAqBD;;;;;GAKG;AACH,kCAJW,IAAI,SACJ,IAAI,GACF,KAAK,CAoBjB;AAED;;;;;GAKG;AACH,mCAJW,KAAK,MACL,KAAK,GACH,MAAM,CAOlB;AAED;;;;;GAKG;AACH,mCAJW,KAAK,MACL,KAAK,GACH,MAAM,CAOlB;AAED;;;;;;GAMG;AACH,gCALW,KAAK,MACL,KAAK,SACL;IAAE,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACd,MAAM,CAgBlB;AAED;;;;;;GAMG;AACH,gCALW,KAAK,MACL,KAAK,SACL;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACpB,MAAM,CAclB;AAED;;;;GAIG;AACH,qCAHW,oBAAoB,GAClB,MAAM,CAQlB;AAED;;;;;;;;GAQG;AACH,6BAPW,KAAK,SACL,MAAM,SACN,MAAM,WACN,MAAM,GAEJ,MAAM,CAalB;AAED;;;;;GAKG;AACH,2BAJW,KAAK,WACL,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;GASG;AACH,+BANW,MAAM,OACN,MAAM,SACN,MAAM,UACN,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;GAKG;AACH,oCAJW,IAAI,UACJ,IAAI,GACF;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,EAAE,IAAI,CAAA;CAAE,CAWpC;AAED;;;;;;;;GAQG;AACH,sCALW,KAAK,MACL,KAAK,UACL,cAAc,GACZ,MAAM,CASlB;AAED;;;;;;GAMG;AACH,oCAHW,mBAAmB,GACjB,kBAAkB,CAe9B;AAjWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAMH,wBAAyB,IAAI,CAAC;oBAhCjB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE;mBACxB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE;mBACvD,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ;6BAC9C,UAAU,GAAG,OAAO,GAAG,OAAO;;UAG7B,KAAK;QACL,KAAK;;;;;;;;;;;;cAML,IAAI;YACJ,IAAI;;;;;;;;;;;;;;OAQJ,MAAM;UACN,KAAK;QACL,KAAK;;;;WACL,MAAM"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAiDA;;;;;;GAMG;AACH,6BALW,MAAM,SACN,MAAM,GAAG,IAAI,GAAG,SAAS,aACzB,MAAM,GAAG,IAAI,GAAG,SAAS,GACvB,MAAM,CAMlB;AAED;;;;;;GAMG;AACH,gCALW,MAAM,SACN,MAAM,GAAG,IAAI,GAAG,SAAS,aACzB,MAAM,GAAG,IAAI,GAAG,SAAS,GACvB,MAAM,CAMlB;AAID;;;GAGG;AACH,mCAHW,MAAM,GACJ,MAAM,CAKlB;AAED;;;GAGG;AACH,2BAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;GAIG;AACH,yBAJW,MAAM,KACN,MAAM,GACJ,MAAM,CAIlB;AAGD;;;;;GAKG;AACH,6BALW,MAAM,OACN,MAAM,OACN,MAAM,GACJ,MAAM,CAKlB;AAqBD;;;;;GAKG;AACH,kCAJW,IAAI,SACJ,IAAI,GACF,KAAK,CAoBjB;AAED;;;;;GAKG;AACH,mCAJW,KAAK,MACL,KAAK,GACH,MAAM,CAOlB;AAED;;;;;GAKG;AACH,mCAJW,KAAK,MACL,KAAK,GACH,MAAM,CAOlB;AAED;;;;;;GAMG;AACH,gCALW,KAAK,MACL,KAAK,SACL;IAAE,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACd,MAAM,CAgBlB;AAED;;;;;;GAMG;AACH,gCALW,KAAK,MACL,KAAK,SACL;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACpB,MAAM,CAclB;AAED;;;;GAIG;AACH,qCAHW,oBAAoB,GAClB,MAAM,CAQlB;AAED;;;;;;;;GAQG;AACH,6BAPW,KAAK,SACL,MAAM,SACN,MAAM,WACN,MAAM,GAEJ,MAAM,CAalB;AAED;;;;;GAKG;AACH,2BAJW,KAAK,WACL,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;GASG;AACH,+BANW,MAAM,OACN,MAAM,SACN,MAAM,UACN,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;GAKG;AACH,oCAJW,IAAI,UACJ,IAAI,GACF;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,EAAE,IAAI,CAAA;CAAE,CAWpC;AAED;;;;;;;;GAQG;AACH,sCALW,KAAK,MACL,KAAK,UACL,cAAc,GACZ,MAAM,CASlB;AAED;;;;;;GAMG;AACH,oCAHW,mBAAmB,GACjB,kBAAkB,CAe9B;AA9VD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAKH,wBAAyB,IAAI,CAAC;oBA/BjB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE;mBACxB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE;mBACvD,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ;6BAC9C,UAAU,GAAG,OAAO,GAAG,OAAO;;UAG7B,KAAK;QACL,KAAK;;;;;;;;;;;;cAML,IAAI;YACJ,IAAI;;;;;;;;;;;;;;OAQJ,MAAM;UACN,KAAK;QACL,KAAK;;;;WACL,MAAM"}

package/connectors/index.js

@@ -43,9 +43,8 @@
  */
 
 // Shared scalar/geometry primitives. Exported so the annotations layer composes
-// on the SAME kernel instead of copy-pasting it (the copies had silently
-// diverged — see `clamp`). Low-level helpers; the documented API is the path
-// builders below.
+// on the same kernel as the connector path builders. Low-level helpers; the
+// documented API is the path builders below.
 export const PRECISION = 1000;
 
 /**
@@ -74,9 +73,8 @@ export function dimension(name, value, fallback) {
   return v;
 }
 
-// Round to PRECISION, normalising -0 → 0, and return the NUMBER (the numeric
-// core `fmt` stringifies). Shared with the annotations layer for the rounded
-// coordinates it echoes back to the host. (code-quality audit Q5.)
+// Round to PRECISION, normalising -0 → 0, and return the NUMBER. `fmt`
+// stringifies the numeric core; annotations use the same rounded coordinates.
 /**
  * @param {number} value
  * @returns {number}
@@ -103,8 +101,7 @@ export function point(x, y) {
   return `${fmt(x)},${fmt(y)}`;
 }
 
-// Guarded form (returns min when the range is inverted) — the reconciled body;
-// connectors only ever calls clamp(v, 0, 1) so this is output-identical here.
+// Guarded form: an inverted range resolves to `min`.
 /**
  * @param {number} value
  * @param {number} min
@@ -284,8 +281,8 @@ export function dotMark(p, radius = 3) {
 
 /**
  * An axis-aligned rectangle path from its corners (callers derive the corners
- * from a centre or a top-left as they need). Shared by the annotation
- * rect/band and evidence-marker subjects. (code-quality audit Q5.)
+ * from a centre or a top-left as they need). Shared by annotation rect/band
+ * and evidence-marker subjects.
  * @param {number} left
  * @param {number} top
  * @param {number} right

package/css/app.css

@@ -123,7 +123,7 @@
    near-imperceptible tint/dot opacity delta survives, and current-page becomes
    invisible to HCM users. Re-assert "current" on channels HCM preserves: a
    Highlight start-border and marker dot, plus a NON-colour bold weight so the
-   cue does not rely on colour alone (WCAG 1.4.1). (component audit C8.) */
+   cue does not rely on colour alone (WCAG 1.4.1). */
 @media (forced-colors: active) {
   .ui-app-nav a.is-active,
   .ui-app-nav a[aria-current]:not([aria-current='false']) {
@@ -276,7 +276,7 @@
     /* The shell keeps `min-block-size: 100dvh`, so with two auto rows the default
        `align-content: stretch` distributes the leftover viewport across BOTH
        tracks — ballooning the horizontal rail to ~half the screen. Pin tracks to
-       their content and let the content row absorb the slack. (component audit C7.) */
+       their content and let the content row absorb the slack. */
     align-content: start;
     grid-template-rows: auto 1fr;
   }
@@ -296,8 +296,7 @@
 
   /* The rail is flex-row here, so the base `margin-block-start: auto` (which
      pushed account to the bottom in the column layout) is inert and account can
-     scroll off. Push it to the inline end instead so sign-out stays reachable.
-     (layout review C21.) */
+     scroll off. Push it to the inline end instead so sign-out stays reachable. */
   .ui-app-rail__account {
     margin-block-start: 0;
     margin-inline-start: auto;

package/css/base.css

@@ -230,7 +230,7 @@ textarea:focus-visible,
   /* NB: the active-tab forced-colors re-assert lives in disclosure.css, right
      after the `.ui-tab.is-active` default — placing it here (an earlier bundle
      leaf) let the later default win even in forced-colors mode, since @media
-     adds no specificity. (a11y review C10.) */
+     adds no specificity. */
 
   /* Keyboard focus must never depend on a colour that gets overridden. */
   a:focus-visible,

package/css/content.css

@@ -15,7 +15,7 @@
 
   /* Machine-generated Markdown carries long unbreakable tokens (URLs, hashes,
      code) that otherwise force horizontal page scroll on the prose surface
-     itself. Break them. (css-robustness review C9; the table cell already does.) */
+     itself. Break them; table cells already do this locally. */
   overflow-wrap: break-word;
 
   /* Readable measure; the container can still be wider for tables/media. */
@@ -108,7 +108,7 @@
    is the opt-in marks leaf (marks.css) and must win: this rule is higher-specificity
    (0,1,1) than `.ui-mark` (0,1,0) and sits in the same `bronto` layer, so without the
    `:not(.ui-mark)` it silently overrides every `.ui-mark` tone/draw modifier in prose —
-   the most-documented mark usage. (component audit C1.) */
+   the most-documented mark usage. */
 .ui-prose mark:not(.ui-mark) {
   background: var(--accent-soft);
   color: var(--text);
@@ -255,7 +255,7 @@
    because `.ui-prose` is generated prose, not a data grid — but for a table whose
    semantics MUST survive on WebKit, author the `.ui-table` component inside a
    `.ui-table-wrap` instead (the wrap scrolls, the <table> keeps `display: table`),
-   or add `role="table"` to the markdown output. (component audit C29.) */
+   or add `role="table"` to the markdown output. */
 
 .ui-prose table {
   border: 1px solid var(--line);

package/css/disclosure.css

@@ -59,7 +59,7 @@
 
 /* Forced-colors re-assert MUST sit after the default above (same specificity,
    @media adds none) or the accent default wins and the selected tab loses its
-   only cue. Moved here from base.css, an earlier bundle leaf. (a11y review C10.) */
+   only cue. Moved here from base.css, an earlier bundle leaf. */
 @media (forced-colors: active) {
   .ui-tab.is-active {
     border-block-end-color: Highlight;
@@ -306,7 +306,7 @@
 /* Active page keys on BOTH `.is-active` and `[aria-current]` — usage.md calls
    aria-current "the framework rule", and every nav sibling (breadcrumb, sitenav,
    app-nav) highlights on it, so a pagination author who sets only aria-current
-   must still get the highlight. (component audit C17.) */
+   must still get the highlight. */
 .ui-pagination__item.is-active,
 .ui-pagination__item[aria-current]:not([aria-current='false']) {
   border-color: var(--accent);
@@ -319,7 +319,7 @@
    (CSS can't intercept keys). For a fully-inert control prefer native
    `<button disabled>`, run `initDisabledGuard()` (intercepts Enter/Space), or
    pair aria-disabled with `tabindex="-1"`. See docs/usage.md "Disabled vs
-   aria-disabled". (audit C4.) */
+   aria-disabled". */
 .ui-pagination__item[aria-disabled='true'],
 .ui-pagination__item:disabled {
   cursor: not-allowed;

package/css/dots.css

@@ -283,7 +283,7 @@
 
 /* The comet expects exactly 8 `<i>`; a 9th+ child has no rotation rule and
    would pile up dead-centre. Hide the overflow so extra children fail safe
-   rather than rendering a stray static dot (C26). */
+   rather than rendering a stray static dot. */
 .ui-dotspinner i:nth-child(n + 9) {
   display: none;
 }
@@ -523,7 +523,7 @@
    clipped from-state on `scripting: enabled`: with JS off, `.is-in` is never
    toggled, so without the gate the content stays permanently clipped away and
    invisible to every no-JS/static/print reader. Same graceful default as
-   `.ui-reveal`. (component audit C12.) */
+   `.ui-reveal`. */
 @media (scripting: enabled) {
   .ui-matrix {
     clip-path: inset(0 100% 0 0);
@@ -583,7 +583,7 @@
 
   /* Brand/live dots aren't status tones, but they still encode meaning via
      background-color alone, which HCM flattens. Keep them on a distinct,
-     opted-out system colour for completeness. (audit C31.) */
+     opted-out system colour for completeness. */
   .ui-dot--accent,
   .ui-dot--live {
     forced-color-adjust: none;
@@ -599,7 +599,7 @@
      glyph vanishes (white-on-white) — yet .ui-icon is the recommended
      icon-at-scale path AND backs .ui-legend__symbol, and the print block
      already special-cases it. Opt out and pin the fill to the system text
-     colour so the glyph stays visible. (audit C1.) */
+     colour so the glyph stays visible. */
   .ui-icon {
     forced-color-adjust: none;
     background: CanvasText;

package/css/feedback.css

@@ -9,8 +9,7 @@
    a stray `--value: 50%` is invalid against the typed syntax and falls back to
    the initial `0` (empty bar) instead of poisoning the `clamp()` and painting a
    FULL bar (the old failure mode). It inherits so the value set on the host
-   `.ui-meter` / `.ui-progress` cascades to the inner `__fill`/`__bar`.
-   (component audit C8.) */
+   `.ui-meter` / `.ui-progress` cascades to the inner `__fill`/`__bar`. */
 @property --value {
   syntax: '<number>';
   inherits: true;
@@ -442,7 +441,7 @@
     /* A still, solid, full-width bar reads as "100% complete" — the opposite of
        indeterminate. Fall back to a static diagonal hatch that fills the track
        (so it's clearly active) but doesn't read as done. AT is covered via
-       aria-busy. (audit C26.) */
+       aria-busy. */
     background: repeating-linear-gradient(
       -45deg,
       var(--accent) 0,
@@ -466,7 +465,7 @@
    Drive the fill with the same --value knob as progress; tone the fill by
    threshold. Author role="meter" + aria-valuenow/min/max for AT — but role=meter
    has uneven AT support, so keep the visible .ui-meter__label/__value (they are
-   the real channel, not just decoration). (component audit C25.) --- */
+   the real channel, not just decoration). --- */
 
 .ui-meter {
   background: var(--panel-soft);
@@ -537,7 +536,7 @@
   /* Prefer the natural one-line width, but never wider than the container: a
      long step label at `max-content` couldn't shrink and overflowed the page on
      narrow viewports (tabs scroll; steps didn't). Capping at 100% lets an
-     over-long label wrap instead of overflowing. (component audit C18.) */
+     over-long label wrap instead of overflowing. */
   min-inline-size: min(100%, max-content);
   text-transform: uppercase;
 }
@@ -597,10 +596,10 @@
 /* Forced-colors flattens the fill's tone to the system palette and can erase it
    against the track, dropping the only visual cue of the measured proportion.
    Re-assert a system colour so the bar stays visible; the tone's *semantic* is
-   carried by the author-written label beside it, not the colour. (a11y C10.)
+   carried by the author-written label beside it, not the colour.
    The toned `.ui-meter--TONE .ui-meter__fill` rules are (0,2,0); the bare
    `.ui-meter__fill` reset is only (0,1,0), so it lost — a toned fill stayed
-   `var(--TONE)` and was forced to black-on-black (component-audit C3). Match the
+   `var(--TONE)` and was forced to black-on-black. Match the
    tone specificity here (and set `forced-color-adjust: none`) so every meter,
    toned or not, paints `Highlight`, mirroring the `.ui-dot` precedent. */
 @media (forced-colors: active) {

package/css/forms.css

@@ -79,8 +79,7 @@
 
 /* Read-only is editable-looking but not editable; give it a distinct, quieter
    cue (muted fill + default cursor) so it doesn't read as a live field. Not
-   disabled — value still submits and the field stays focusable/selectable.
-   (component audit C28.) */
+   disabled — value still submits and the field stays focusable/selectable. */
 .ui-input:read-only:not(:disabled),
 .ui-textarea:read-only:not(:disabled) {
   background: var(--panel-soft);
@@ -91,7 +90,7 @@
    the controls that WRAP a native input (switch/check/segmented) showed no
    disabled cue and their label kept cursor:pointer — a lie. Mirror the cue via
    :has(input:disabled); the native-element controls (range/file) take :disabled
-   directly. (a11y/forms review C4.) */
+   directly. */
 .ui-range:disabled,
 .ui-file:disabled,
 .ui-switch:has(input:disabled),
@@ -102,7 +101,7 @@
 }
 
 /* Keep autofilled fields on-theme — the UA's yellow fill otherwise paints over
-   the monochrome surface and breaks the contrast story. (forms review C24.) */
+   the monochrome surface and breaks the contrast story. */
 .ui-input:autofill,
 .ui-select:autofill,
 .ui-textarea:autofill,
@@ -121,8 +120,7 @@
 /* Wrapper controls (switch / check / segmented) hide their native <input>, so
    the `[aria-invalid]` the validator sets on it paints nothing — a sighted,
    non-AT user couldn't see the error (WCAG 1.4.1). Mirror the invalid cue onto
-   the visible surface via :has(), the same way the disabled cue is mirrored.
-   (component audit C7.) */
+   the visible surface via :has(), the same way the disabled cue is mirrored. */
 .ui-check:has(input[aria-invalid='true']) input {
   outline: 2px solid var(--danger);
   outline-offset: 1px;
@@ -141,8 +139,7 @@
    one and sighted HCM users lose the only error cue (WCAG 1.4.1). The switch got
    a forced-colors block; the error family did not. Re-assert the state on a
    NON-colour channel — a thicker, doubled border — that survives HCM, and prefix
-   the error hint with a glyph so the message itself carries the error.
-   (component audit C5.) */
+   the error hint with a glyph so the message itself carries the error. */
 @media (forced-colors: active) {
   .ui-input[aria-invalid='true'],
   .ui-select[aria-invalid='true'],
@@ -151,7 +148,7 @@
     border-width: 3px;
   }
 
-  /* Same NON-colour re-assertion for the wrapper controls (C7): a thicker,
+  /* Same NON-colour re-assertion for the wrapper controls: a thicker,
      doubled outline/border survives the HCM colour flattening. */
   .ui-check:has(input[aria-invalid='true']) input {
     outline-width: 3px;
@@ -205,7 +202,7 @@
 
 .ui-input-group > .ui-input:focus-visible,
 .ui-input-group > .ui-select:focus-visible {
-  z-index: 1; /* keep the focus ring above the adjacent addon border (select too — audit C29) */
+  z-index: 1; /* keep the focus ring above the adjacent addon border */
 }
 
 .ui-input-group__addon {
@@ -213,7 +210,7 @@
   background: var(--panel-soft);
 
   /* Match the wrapped control's `--line-strong` border so the prefix/suffix seam
-     isn't a fainter cap than the field it abuts. (component audit C33.) */
+     isn't a fainter cap than the field it abuts. */
   border: 1px solid var(--line-strong);
   color: var(--text-dim);
   display: flex;
@@ -358,7 +355,7 @@
 
 /* Keyboard focus ring to match every sibling input (which use a 2px ring); the
    border-colour shift alone read markedly fainter on this one control. Keyed to
-   :focus-visible on the inner input so it stays keyboard-only. (a11y review C12.) */
+   :focus-visible on the inner input so it stays keyboard-only. */
 .ui-search:has(input:focus-visible) {
   outline: 2px solid var(--focus-ring);
   outline-offset: 1px;

package/css/legend.css

@@ -93,7 +93,7 @@
 /* Glyph/symbol swatch — fill an `.ui-icon` mask with the series colour. Match the
    __swatch fallback chain exactly (--chart-color → --chart-1 → --accent): without
    the --chart-1 layer, a symbol and a swatch for the SAME series diverge to two
-   colours whenever a theme overrides --chart-1. (audit C22.) */
+   colours whenever a theme overrides --chart-1. */
 .ui-legend__symbol {
   block-size: 0.95rem;
   color: var(--chart-color, var(--chart-1, var(--accent)));

package/css/marks.css

@@ -91,7 +91,7 @@
 @media (prefers-reduced-motion: no-preference) {
   /* The sweep animates `background-size`, i.e. the highlight FILL — so it is
      inert on the no-fill styles (underline/box/strike). Scope it out rather
-     than let `--draw` look applied but do nothing. (content review C14.) */
+     than let `--draw` look applied but do nothing. */
   .ui-mark--draw:not(.ui-mark--underline, .ui-mark--box, .ui-mark--strike) {
     animation: ui-mark-draw 0.6s var(--ease, ease) both;
   }

package/css/motion.css

@@ -57,7 +57,7 @@
    scroll far enough to finish its range, so a fade-to-opacity-1 would strand the
    content permanently transparent. Reach full opacity early (35%) and hold it,
    so even a partially-driven reveal is fully legible — only the last few px of
-   the rise are left unfinished. (component audit C9.) */
+   the rise are left unfinished. */
 @keyframes uiScrollReveal {
   0% {
     opacity: 0;
@@ -183,7 +183,7 @@
 /* Stagger children: set --i on each child (or use nth-child cap). Cap the manual
    --i path at index 6 (360ms) to match the .ui-stagger--auto ceiling — a long
    list with --i:30 would otherwise hold the last child at opacity:0 for 1.8s
-   before popping in. (audit C32.) */
+   before popping in. */
 .ui-stagger > * {
   animation: uiRise var(--duration-slow) var(--ease-spring) both;
   animation-delay: calc(min(var(--i, 0), 6) * 60ms);
@@ -307,7 +307,7 @@
    rest to one system colour, so the ring looks uniform with no visible sweep,
    and the scroll-progress bar can vanish into the canvas. Re-assert distinct
    system colours so each keeps a visible channel; AT is already covered via
-   aria-busy / role="status" / role="progressbar". (component audit C35.) */
+   aria-busy / role="status" / role="progressbar". */
 @media (forced-colors: active) {
   .ui-spinner {
     border-color: CanvasText;
@@ -321,7 +321,7 @@
   /* HCM strips the shimmer gradient, leaving an invisible box where a loading
      placeholder should be. Give it a system-colour border so the skeleton
      still reads as present. Same decorative-loading family as the spinner +
-     scroll-progress above. (audit C15.) */
+     scroll-progress above. */
   .ui-skeleton {
     border: 1px solid CanvasText;
   }
@@ -346,7 +346,7 @@
    The range is `entry 0% entry 100%`, NOT the old `cover 40%`: `cover` only
    completes once the element has scrolled most of the way THROUGH the viewport,
    which an element near the document bottom can never do — it froze part-way,
-   leaving a conclusion section permanently semi-transparent (C9). `entry`
+   leaving a conclusion section permanently semi-transparent. `entry`
    completes the moment the element is fully in view, which any scroll-to-bottom
    reaches. Paired with the early-opacity uiScrollReveal keyframe, an element
    taller than the viewport is legible even if its range never fully completes. */
@@ -405,7 +405,7 @@
     /* Zero the delay too: `.ui-stagger` children animate `uiRise` with
        `fill-mode: both`, so a non-zero `animation-delay` holds them at the
        `opacity: 0` from-state for the full delay and then pops them in — the
-       exact late flash a reduced-motion user asked to avoid (C4). */
+       exact late flash a reduced-motion user asked to avoid. */
     animation-delay: 0s !important;
     transition-duration: 0.01ms !important;
   }

package/css/overlay.css

@@ -91,7 +91,7 @@ dialog.ui-modal[open]::backdrop {
 /* Background scroll-lock. A native <dialog> top layer does NOT stop the page
    behind it scrolling, and the no-JS native path can't lock it in script — so
    lock it in CSS, for both the native [open] dialog and the controlled .is-open
-   overlay (incl. the drawer modifier, same base). (component audit C13.) */
+   overlay (incl. the drawer modifier, same base). */
 html:has(dialog.ui-modal[open]),
 html:has(.ui-modal.is-open) {
   overflow: hidden;
@@ -164,8 +164,7 @@ html:has(.ui-modal.is-open) {
 /* Comfortable hit target on coarse pointers — this bespoke close button measured
    ~26px on touch, below the 2.9rem floor the rest of the button family meets
    (WCAG 2.5.8). Scoped to coarse so the fine-pointer (mouse) rendering, which
-   already clears 24×24, is unchanged; centre the glyph in the enlarged box.
-   (audit C3.) */
+   already clears 24×24, is unchanged; centre the glyph in the enlarged box. */
 @media (pointer: coarse) {
   .ui-modal__close {
     align-items: center;
@@ -313,7 +312,7 @@ html:has(.ui-modal.is-open) {
 /* Menu hover/focus paints var(--bg-accent), which HCM strips, so the hovered row
    is indistinguishable from its siblings (focus keeps the UA ring; hover has no
    such fallback). Re-assert a system Highlight like the combobox/command rows,
-   for parity with those sibling surfaces. (component audit C22.) */
+   for parity with those sibling surfaces. */
 @media (forced-colors: active) {
   .ui-menu__item:hover,
   .ui-menu__item:focus-visible {
@@ -384,7 +383,7 @@ html:has(.ui-modal.is-open) {
 
 /* The active option is tracked by aria-activedescendant — it is NEVER DOM-focused,
    so it gets no UA focus ring under HCM, and its only cue (--bg-accent) is stripped.
-   Re-assert a system Highlight like the command palette does. (audit C2.) */
+   Re-assert a system Highlight like the command palette does. */
 @media (forced-colors: active) {
   .ui-combobox__option.is-active,
   .ui-combobox__option[aria-selected='true'] {
@@ -454,8 +453,7 @@ html:has(.ui-modal.is-open) {
 /* Forced-colors drops both `backdrop-filter: blur()` and the `color-mix()`
    scrim, so the dialog/lightbox would float over an undimmed page with no
    separation. Re-assert a translucent scrim with `forced-color-adjust: none`
-   so the layering reads in High Contrast, matching the meter/dot precedent
-   (C28). */
+   so the layering reads in High Contrast, matching the meter/dot precedent. */
 @media (forced-colors: active) {
   .ui-modal::backdrop,
   .ui-lightbox::backdrop {