@visitwonders/assembly 0.15.0 → 0.16.0

package/README.md

@@ -100,6 +100,14 @@ appends (rather than replaces) the Ember outlet view inside
 
 [Longer description of how to use the addon in apps.]
 
+## Migrations
+
+Breaking changes — token retirements, behaviour shifts, and visual-parity diffs that downstream consumers should know about — are documented one-file-per-change under [`docs/migrations/`](docs/migrations).
+
+Recent:
+
+- [Token Extension and Focus Ring Upgrade](docs/migrations/2026-04-27-token-extension-and-focus-ring-upgrade.md) (2026-04-27): surface-vs-fill split, two-stop focus ring (WCAG 2.2 non-text-contrast), typography role sub-tokens, action + input matrices populated, halo tokens retired.
+
 ## Contributing
 
 See the [Contributing](CONTRIBUTING.md) guide for details.

package/dist/_app_/data/pagination-cluster.js

@@ -0,0 +1 @@
+export { default } from "@visitwonders/assembly/data/pagination-cluster";

package/dist/_app_/data/pagination.js

@@ -0,0 +1 @@
+export { default } from "@visitwonders/assembly/data/pagination";

package/dist/action/button.css

@@ -40,15 +40,11 @@
 
 .button_e0e07a6eb[data-variant][data-tone]:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--color-bg-surface),
-    0 0 0 4px var(--color-focus-ring-halo);
+  box-shadow: var(--focus-ring);
 }
 
 .button_e0e07a6eb[data-variant][data-tone="critical"]:focus-visible {
-  box-shadow:
-    0 0 0 2px var(--color-bg-surface),
-    0 0 0 4px var(--color-focus-ring-halo-critical);
+  box-shadow: var(--focus-ring-critical);
 }
 
 /* ===================================
@@ -91,57 +87,72 @@
 
 /* ===================================
  * Solid Variant
+ *
+ * Solid variants are the canonical action-matrix consumers: bg + text
+ * come from `--color-action-{tone}-{bg|text}-*`. The `neutral` tone
+ * is a documented variant override — its visual is a "white card"
+ * (surface bg + control border + drop shadow), so it picks `bg` from
+ * `--color-bg-surface` rather than the matrix's `interactive` fill,
+ * but still pulls border/text/active-bg through the matrix.
  * =================================== */
 
 /* Primary */
 .button_e0e07a6eb[data-variant="solid"][data-tone="primary"] {
-  background: var(--color-bg-fill-primary);
-  color: var(--color-text-on-primary);
+  background: var(--color-action-primary-bg-default);
+  color: var(--color-action-primary-text-default);
 }
 
 .button_e0e07a6eb[data-variant="solid"][data-tone="primary"]:hover:not(:disabled) {
-  background: var(--color-bg-fill-primary-hover);
+  background: var(--color-action-primary-bg-hover);
 }
 
 .button_e0e07a6eb[data-variant="solid"][data-tone="primary"]:active:not(:disabled) {
-  background: var(--color-bg-fill-primary-active);
+  background: var(--color-action-primary-bg-pressed);
 }
 
-/* Neutral */
+/* Neutral — variant override: bg stays on surface (white card),
+   border + text reach through the matrix. */
 .button_e0e07a6eb[data-variant="solid"][data-tone="neutral"] {
   background: var(--color-bg-surface);
-  color: var(--color-text);
-  border: 1px solid var(--color-border-control);
+  color: var(--color-action-neutral-text-default);
+  border: 1px solid var(--color-action-neutral-border-default);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
 .button_e0e07a6eb[data-variant="solid"][data-tone="neutral"]:hover:not(:disabled) {
-  border-color: var(--color-border-control-hover);
+  border-color: var(--color-action-neutral-border-hover);
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
 }
 
 .button_e0e07a6eb[data-variant="solid"][data-tone="neutral"]:active:not(:disabled) {
   background: var(--color-bg-neutral-subtle);
-  border-color: var(--color-border-control-active);
+  border-color: var(--color-action-neutral-border-pressed);
   box-shadow: none;
 }
 
 /* Critical */
 .button_e0e07a6eb[data-variant="solid"][data-tone="critical"] {
-  background: var(--color-bg-fill-critical);
-  color: var(--color-text-on-critical);
+  background: var(--color-action-critical-bg-default);
+  color: var(--color-action-critical-text-default);
 }
 
 .button_e0e07a6eb[data-variant="solid"][data-tone="critical"]:hover:not(:disabled) {
-  background: var(--color-bg-fill-critical-hover);
+  background: var(--color-action-critical-bg-hover);
 }
 
 .button_e0e07a6eb[data-variant="solid"][data-tone="critical"]:active:not(:disabled) {
-  background: var(--color-bg-fill-critical-active);
+  background: var(--color-action-critical-bg-pressed);
 }
 
 /* ===================================
  * Outline Variant
+ *
+ * Outline / ghost / link variants stay semantic-direct: their `text`
+ * carries the tone (so `--color-text-{tone}` is the right anchor),
+ * not the matrix's `--color-action-*-text-*` cells which encode
+ * "text on a solid fill" (e.g. white-on-primary). The matrix's
+ * `border` cells likewise target form-control borders (gray-300);
+ * outline-neutral wants the heavier `--color-border-neutral`.
  * =================================== */
 
 /* Primary */

package/dist/data/index.js

@@ -1,3 +1,4 @@
+export { default as Pagination } from './pagination.js';
 export { default as SortableList } from './sortable-list.js';
 export { default as Table } from './table.js';
 //# sourceMappingURL=index.js.map

package/dist/data/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/data/pagination-cluster.js

@@ -0,0 +1,106 @@
+// Pure helper for the Pagination component's page-cluster algorithm.
+// Co-located here under src/data/ next to where pagination.gts will land.
+// Spec contract: docs/specs/pagination.md §Behaviour > Page-cluster algorithm.
+//
+// This file has no Glimmer or DOM dependencies; it is a pure function so it
+// can be unit-tested in isolation and reused by any future consumer.
+
+// Required for the addon's rollup `app-reexports` pattern (`data/!(index).js`)
+// to publish this file into `dist/`. Do not remove — without a default export
+// the file is dropped from the build silently. Consumers should use the named
+// exports below.
+var paginationCluster = {};
+function buildPageCluster(args) {
+  const {
+    totalPages,
+    currentPage,
+    siblingCount,
+    boundaryCount
+  } = args;
+  if (totalPages <= 0) return [];
+  if (totalPages === 1) return [{
+    kind: 'page',
+    page: 1
+  }];
+  const sibling = {
+    start: Math.max(1, currentPage - siblingCount),
+    end: Math.min(totalPages, currentPage + siblingCount)
+  };
+  const initial = [];
+  if (boundaryCount > 0) {
+    initial.push({
+      start: 1,
+      end: Math.min(boundaryCount, totalPages)
+    });
+  }
+  initial.push(sibling);
+  if (boundaryCount > 0) {
+    initial.push({
+      start: Math.max(1, totalPages - boundaryCount + 1),
+      end: totalPages
+    });
+  }
+  const merged = mergeOverlapping(initial);
+  const collapsed = collapseSinglePageGapIfOnly(merged);
+  return emit(collapsed, sibling);
+}
+
+// Merge intervals that overlap or are directly touching (gap < 1).
+// Input intervals are already in non-decreasing-start order by construction
+// (left boundary, sibling, right boundary).
+function mergeOverlapping(intervals) {
+  const sorted = [...intervals].sort((a, b) => a.start - b.start);
+  const result = [];
+  for (const next of sorted) {
+    const last = result[result.length - 1];
+    if (last && next.start <= last.end + 1) {
+      last.end = Math.max(last.end, next.end);
+    } else {
+      result.push({
+        ...next
+      });
+    }
+  }
+  return result;
+}
+
+// Rule 4: a single hidden page is never elided — but only when it is the
+// ONLY remaining gap. With multiple gaps, single-page gaps stay as ellipses
+// so the cluster shape is consistent. See spec §Behaviour for worked
+// examples that pin this interpretation (T=7,C=4 keeps both ellipses;
+// T=6,C=3 inlines its single gap because there is only one).
+function collapseSinglePageGapIfOnly(intervals) {
+  if (intervals.length !== 2) return intervals;
+  const [first, second] = intervals;
+  const gapSize = second.start - first.end - 1;
+  if (gapSize !== 1) return intervals;
+  return [{
+    start: first.start,
+    end: second.end
+  }];
+}
+function emit(intervals, sibling) {
+  const items = [];
+  for (let i = 0; i < intervals.length; i++) {
+    const interval = intervals[i];
+    for (let p = interval.start; p <= interval.end; p++) {
+      items.push({
+        kind: 'page',
+        page: p
+      });
+    }
+    const next = intervals[i + 1];
+    if (next) {
+      const gapEnd = next.start - 1;
+      const key = gapEnd < sibling.start ? 'ellipsis-left' : 'ellipsis-right';
+      items.push({
+        kind: 'ellipsis',
+        key
+      });
+    }
+  }
+  return items;
+}
+
+export { buildPageCluster, paginationCluster as default };
+//# sourceMappingURL=pagination-cluster.js.map

package/dist/data/pagination-cluster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-cluster.js","sources":["../../src/data/pagination-cluster.ts"],"sourcesContent":["// Pure helper for the Pagination component's page-cluster algorithm.\n// Co-located here under src/data/ next to where pagination.gts will land.\n// Spec contract: docs/specs/pagination.md §Behaviour > Page-cluster algorithm.\n//\n// This file has no Glimmer or DOM dependencies; it is a pure function so it\n// can be unit-tested in isolation and reused by any future consumer.\n\n// Required for the addon's rollup `app-reexports` pattern (`data/!(index).js`)\n// to publish this file into `dist/`. Do not remove — without a default export\n// the file is dropped from the build silently. Consumers should use the named\n// exports below.\nexport default {};\n\nexport type PageClusterItem =\n  | { kind: 'page'; page: number }\n  | { kind: 'ellipsis'; key: string };\n\nexport interface BuildClusterArgs {\n  /** Total page count, T = ceil(totalItems / pageSize). Caller computes this. */\n  totalPages: number;\n  /** Current page, 1-indexed. Caller clamps to [1, totalPages] before passing. */\n  currentPage: number;\n  /** Pages shown either side of currentPage in the cluster. */\n  siblingCount: number;\n  /** Pages always shown at the start and end of the cluster. */\n  boundaryCount: number;\n}\n\ninterface Interval {\n  start: number;\n  end: number;\n}\n\nexport function buildPageCluster(args: BuildClusterArgs): PageClusterItem[] {\n  const { totalPages, currentPage, siblingCount, boundaryCount } = args;\n\n  if (totalPages <= 0) return [];\n  if (totalPages === 1) return [{ kind: 'page', page: 1 }];\n\n  const sibling: Interval = {\n    start: Math.max(1, currentPage - siblingCount),\n    end: Math.min(totalPages, currentPage + siblingCount),\n  };\n\n  const initial: Interval[] = [];\n  if (boundaryCount > 0) {\n    initial.push({ start: 1, end: Math.min(boundaryCount, totalPages) });\n  }\n  initial.push(sibling);\n  if (boundaryCount > 0) {\n    initial.push({\n      start: Math.max(1, totalPages - boundaryCount + 1),\n      end: totalPages,\n    });\n  }\n\n  const merged = mergeOverlapping(initial);\n  const collapsed = collapseSinglePageGapIfOnly(merged);\n\n  return emit(collapsed, sibling);\n}\n\n// Merge intervals that overlap or are directly touching (gap < 1).\n// Input intervals are already in non-decreasing-start order by construction\n// (left boundary, sibling, right boundary).\nfunction mergeOverlapping(intervals: Interval[]): Interval[] {\n  const sorted = [...intervals].sort((a, b) => a.start - b.start);\n  const result: Interval[] = [];\n  for (const next of sorted) {\n    const last = result[result.length - 1];\n    if (last && next.start <= last.end + 1) {\n      last.end = Math.max(last.end, next.end);\n    } else {\n      result.push({ ...next });\n    }\n  }\n  return result;\n}\n\n// Rule 4: a single hidden page is never elided — but only when it is the\n// ONLY remaining gap. With multiple gaps, single-page gaps stay as ellipses\n// so the cluster shape is consistent. See spec §Behaviour for worked\n// examples that pin this interpretation (T=7,C=4 keeps both ellipses;\n// T=6,C=3 inlines its single gap because there is only one).\nfunction collapseSinglePageGapIfOnly(intervals: Interval[]): Interval[] {\n  if (intervals.length !== 2) return intervals;\n  const [first, second] = intervals as [Interval, Interval];\n  const gapSize = second.start - first.end - 1;\n  if (gapSize !== 1) return intervals;\n  return [{ start: first.start, end: second.end }];\n}\n\nfunction emit(intervals: Interval[], sibling: Interval): PageClusterItem[] {\n  const items: PageClusterItem[] = [];\n  for (let i = 0; i < intervals.length; i++) {\n    const interval = intervals[i]!;\n    for (let p = interval.start; p <= interval.end; p++) {\n      items.push({ kind: 'page', page: p });\n    }\n    const next = intervals[i + 1];\n    if (next) {\n      const gapEnd = next.start - 1;\n      const key: string =\n        gapEnd < sibling.start ? 'ellipsis-left' : 'ellipsis-right';\n      items.push({ kind: 'ellipsis', key });\n    }\n  }\n  return items;\n}\n"],"names":["buildPageCluster","args","totalPages","currentPage","siblingCount","boundaryCount","kind","page","sibling","start","Math","max","end","min","initial","push","merged","mergeOverlapping","collapsed","collapseSinglePageGapIfOnly","emit","intervals","sorted","sort","a","b","result","next","last","length","first","second","gapSize","items","i","interval","p","gapEnd","key"],"mappings":"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"}

package/dist/data/pagination.css

@@ -0,0 +1,216 @@
+/* src/data/pagination.css */
+/* ============================================================================
+   Pagination Component Styles
+
+   Spec: docs/specs/pagination.md
+   Per docs/component-tokens.md, Pagination routes semantic-direct (no
+   layer-3 component-token matrix). Every value below is a semantic token.
+   ============================================================================ */
+
+.pagination_e7638bd11 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--spacing-gap-md);
+  font-size: var(--font-size-md);
+}
+
+/* On `numbered`, there is no summary; the cluster sits alone (centred is fine
+   but the consumer gets to position it via the parent layout). */
+.pagination_e7638bd11[data-variant="numbered"] {
+  justify-content: center;
+}
+
+/* On `compact`, the indicator + prev/next form a tight row. */
+.pagination_e7638bd11[data-variant="compact"] {
+  justify-content: center;
+  gap: var(--spacing-gap-xs);
+}
+
+/* ============================================================================
+   Summary
+   ============================================================================ */
+
+.summary_e7638bd11 {
+  color: var(--color-text-secondary);
+}
+
+/* ============================================================================
+   Controls (prev + cluster + next group)
+
+   The controls wrapper exists so prev/next sit OUTSIDE the cluster <ol>.
+   That keeps the <ol> semantically pure (only pages) and — load-bearingly —
+   isolates the cluster's reserved min-width from prev/next, so prev/next
+   anchor at fixed positions while the cluster's interior reflows.
+   ============================================================================ */
+
+.controls_e7638bd11 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-gap-xs);
+  row-gap: var(--spacing-gap-md);
+}
+
+/* ============================================================================
+   Page Cluster
+   ============================================================================ */
+
+.cluster_e7638bd11 {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--spacing-gap-xs);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  /* Reserve a stable footprint based on the maximum cluster width the
+     current sibling/boundary settings can produce, so prev/next don't
+     shift horizontally as the user clicks through pages. The actual
+     items centre within the reserved space when the cluster is shorter
+     than its maximum.
+
+     Formula: N items * sm-button-square + (N - 1) * gap, where N is
+     supplied via the `--pagination-max-items` runtime style prop on
+     the <ol>. Falls back to a reasonable default if the prop is missing
+     so the cluster never collapses. */
+  min-width: calc(
+    var(--pagination-max-items, 9) * var(--button-height-sm) +
+      (var(--pagination-max-items, 9) - 1) * var(--spacing-gap-xs)
+  );
+  justify-content: center;
+}
+
+.item_e7638bd11 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Uniform width across every numeric page button so 1-digit and 3-digit
+   pages render at the same minimum size. Buttons grow uniformly past the
+   minimum once content (e.g. "100") demands it; ellipses match. The
+   target selectors hit only the cluster's numbered controls — prev/next
+   keep their text-driven width. */
+.cluster_e7638bd11 .item_e7638bd11 [data-test-pagination-page] {
+  min-width: var(--button-height-sm);
+}
+
+/* Current-page fill on the wrapped Button. The fill is decorative — the
+   load-bearing affordances are aria-current, focus ring, and text contrast.
+   See spec §Contrast and §Token gaps for follow-up. */
+.cluster_e7638bd11 .item_e7638bd11 [data-current="true"] {
+  background: var(--color-bg-fill-interactive-selected);
+}
+
+/* ============================================================================
+   Ellipsis
+   ============================================================================ */
+
+.ellipsis_e7638bd11 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--button-height-sm);
+  height: var(--button-height-sm);
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+/* ============================================================================
+   Custom :prev / :next block alignment
+
+   When a consumer overrides <:prev> or <:next>, their icon + text content
+   lands in Button's default slot (`.button-label`). That slot is a span
+   with `flex: 1 1 auto; text-box: cap alphabetic` — sized for text, not
+   for inline icon+text composition. Targeting it inside Pagination's
+   prev/next Buttons makes it a flex container so the Icon and text
+   centre against each other regardless of intrinsic SVG height.
+
+   For the default (non-overridden) path the icon goes through `<:prefix>`
+   (which is already `display: flex; align-items: center`) and `.button-label`
+   contains only the text — so this rule is a no-op there.
+   ============================================================================ */
+
+[data-test-pagination-prev] .button-label_e7638bd11,
+[data-test-pagination-next] .button-label_e7638bd11 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-xs);
+}
+
+/* ============================================================================
+   Compact indicator
+
+   Height pinned to button-height-sm so the indicator matches the prev/next
+   button height exactly — otherwise the row's tallest child sets the line
+   height and the buttons appear top-anchored.
+   ============================================================================ */
+
+.indicator_e7638bd11 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--button-height-sm);
+  padding: 0 var(--spacing-gap-xs);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+/* ============================================================================
+   Jump-to-page form
+
+   The form is a horizontal flex row of [label] [input] [submit]. It sits to
+   the right of the navigation cluster with the wider --spacing-gap-md gap
+   (vs the --spacing-gap-xs that separates prev/next/first/last) so the form
+   reads as a distinct chunk, not a peer of the cluster controls.
+
+   NumberField wraps Label + input in a Control whose default orientation is
+   column. We override locally so the label sits inline with the input. The
+   selectors are scoped under the data-test attribute so we never bleed into
+   any other Form/NumberField on the page.
+   ============================================================================ */
+
+.controls_e7638bd11 > .jump-to_e7638bd11 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-gap-xs);
+  margin-left: var(--spacing-gap-md);
+}
+
+/* Control wraps Label + input-wrapper. Default orientation is column (label
+   above input). Force row-flex so the label sits inline with the input, and
+   shrink-to-content via width: auto so it doesn't claim the parent's width. */
+[data-test-pagination-jump-form] [data-test-form-control] {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-gap-xs);
+  width: auto;
+}
+
+/* The default Label has padding-top tuned for column layout; reset for the
+   inline row so the label sits centred against the input. white-space: nowrap
+   prevents "Go to page" from wrapping when the form is squeezed.
+
+   We target [data-test-form-label] / [data-test-number-field-wrapper] rather
+   than the .label / .number-field-input-wrapper class names, because this CSS
+   is processed through ember-scoped-css — class selectors get a hash suffix
+   tied to Pagination's scope, so they don't match elements rendered by
+   external components (Label, NumberField). The data-test attributes are
+   untouched by scoping and reach the actual elements. */
+[data-test-pagination-jump-form] [data-test-form-label] {
+  flex-shrink: 0;
+  padding-top: 0;
+  white-space: nowrap;
+}
+
+/* The number-field input wrapper is content-fluid by default; constrain it
+   to a fixed compact width so the form reads as a "type a small number"
+   affordance, not a "fill the page" input. */
+[data-test-pagination-jump-form] [data-test-number-field-wrapper] {
+  width: 80px;
+  height: var(--button-height-sm);
+}