@visitwonders/assembly 0.14.0 → 0.16.0

package/dist/data/pagination.js

@@ -0,0 +1,287 @@
+import "./pagination.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { modifier } from 'ember-modifier';
+import { eq } from 'ember-truth-helpers';
+import { ChevronsRight, ChevronsLeft, ChevronRight, ChevronLeft } from 'lucide';
+import Button from '../action/button.js';
+import Icon from '../media/icon.js';
+import Form from '../form/form.js';
+import { buildPageCluster } from './pagination-cluster.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Component
+// ============================================================================
+class Pagination extends Component {
+  static {
+    g(this.prototype, "internalCurrentPage", [tracked], function () {
+      return 1;
+    });
+  }
+  #internalCurrentPage = (i(this, "internalCurrentPage"), void 0); // Uncontrolled-mode state. When the consumer passes `@currentPage`, this
+  // value is ignored; otherwise it tracks page locally.
+  // Tracked snapshot of the last seen totalPages so the refresh-clamp modifier
+  // can detect a shrink-under-the-user without scheduling its own runloop.
+  previousTotalPages = null;
+  // Jump-to-page tracked value. The consumer's @onChange fires only on form
+  // submit — keystrokes flow through this field, not through @onChange.
+  // Stored as number | null (null = empty) since `NumberField`'s onInput
+  // hands us `null` when the user clears the input. The template converts
+  // null → undefined to match `NumberField`'s @value signature.
+  static {
+    g(this.prototype, "jumpToValue", [tracked], function () {
+      return null;
+    });
+  }
+  #jumpToValue = (i(this, "jumpToValue"), void 0);
+  get jumpToFieldValue() {
+    return this.jumpToValue ?? undefined;
+  }
+  // ============================================================================
+  // Resolved args
+  // ============================================================================
+  get variant() {
+    return this.args.variant ?? 'default';
+  }
+  get siblingCount() {
+    return this.args.siblingCount ?? 1;
+  }
+  get boundaryCount() {
+    return this.args.boundaryCount ?? 1;
+  }
+  get itemName() {
+    return this.args.itemName ?? 'item';
+  }
+  get itemNamePlural() {
+    return this.args.itemNamePlural ?? 'items';
+  }
+  get isDisabled() {
+    return this.args.isDisabled ?? false;
+  }
+  get ariaLabel() {
+    return this.args['aria-label'] ?? 'Pagination';
+  }
+  // showSummary is variant-aware when not explicitly passed: numbered hides
+  // by default; default + compact show it.
+  get showSummary() {
+    if (this.args.showSummary !== undefined) return this.args.showSummary;
+    return this.variant !== 'numbered';
+  }
+  // First/last and jump-to-page are silently ignored on the compact variant —
+  // the variant exists for narrow toolbars; adding affordances defeats its
+  // reason for existing. Spec §Variants > compact.
+  get showFirstLast() {
+    if (this.variant === 'compact') return false;
+    return this.args.showFirstLast ?? false;
+  }
+  get showJumpTo() {
+    if (this.variant === 'compact') return false;
+    return this.args.showJumpTo ?? false;
+  }
+  // ============================================================================
+  // Mode inference (mirrors Table's isControlledSelection / isControlledSort).
+  // Note: unlike Table, @onChange fires in BOTH modes — Pagination models a
+  // navigation event. See spec §Behaviour > Callback contract.
+  // ============================================================================
+  get isControlled() {
+    return this.args.currentPage !== undefined;
+  }
+  get currentPage() {
+    return this.args.currentPage ?? this.internalCurrentPage;
+  }
+  // ============================================================================
+  // Derived counts
+  // ============================================================================
+  // Total pages = ceil(totalItems / pageSize). Defensive: pageSize must be > 0.
+  // If it isn't, fall back to 1 so we never render NaN/Infinity in the cluster.
+  get totalPages() {
+    const {
+      totalItems,
+      pageSize
+    } = this.args;
+    if (!pageSize || pageSize <= 0) return 1;
+    if (!totalItems || totalItems <= 0) return 1;
+    return Math.max(1, Math.ceil(totalItems / pageSize));
+  }
+  get startItem() {
+    if (this.args.totalItems <= 0) return 0;
+    return (this.currentPage - 1) * this.args.pageSize + 1;
+  }
+  get endItem() {
+    if (this.args.totalItems <= 0) return 0;
+    return Math.min(this.currentPage * this.args.pageSize, this.args.totalItems);
+  }
+  get resolvedItemName() {
+    return this.args.totalItems === 1 ? this.itemName : this.itemNamePlural;
+  }
+  get summaryContext() {
+    return {
+      startItem: this.startItem,
+      endItem: this.endItem,
+      totalItems: this.args.totalItems,
+      itemName: this.itemName,
+      itemNamePlural: this.itemNamePlural
+    };
+  }
+  // ============================================================================
+  // Page cluster (delegated to the pure helper)
+  //
+  // The template iterates `pageItems`, where each entry already exposes the
+  // fields both branches need. This keeps the template free of discriminated-
+  // union narrowing (which Glint doesn't follow through opaque helpers).
+  // ============================================================================
+  // Max items the cluster could ever render at the current sibling/boundary
+  // settings: 2 boundaries on each side + 2 ellipses + current + 2*siblings.
+  // Reserved as a min-width so the cluster footprint stays stable across
+  // page changes — otherwise prev/next shift horizontally as the user clicks
+  // through pages and the cluster shape mutates between renders.
+  get maxClusterItems() {
+    return 2 * this.boundaryCount + 2 * this.siblingCount + 3;
+  }
+  // Inline custom property consumed by the cluster's CSS to reserve a stable
+  // footprint. Runtime style prop, not a token — `--pagination-*` tokens are
+  // forbidden by docs/component-tokens.md, but inline runtime style props
+  // (Glimmer's standard pattern, mirrored from Toast/Grid/Tag) are fine.
+  get clusterStyle() {
+    return `--pagination-max-items: ${this.maxClusterItems};`;
+  }
+  get pageItems() {
+    return buildPageCluster({
+      totalPages: this.totalPages,
+      currentPage: this.currentPage,
+      siblingCount: this.siblingCount,
+      boundaryCount: this.boundaryCount
+    }).map(item => item.kind === 'page' ? {
+      kind: 'page',
+      key: `p-${item.page}`,
+      page: item.page,
+      isCurrent: item.page === this.currentPage
+    } : {
+      kind: 'ellipsis',
+      key: item.key,
+      page: 0,
+      isCurrent: false
+    });
+  }
+  // ============================================================================
+  // Boundary / disabled state
+  // ============================================================================
+  get isPrevDisabled() {
+    return this.isDisabled || this.currentPage <= 1;
+  }
+  get isNextDisabled() {
+    return this.isDisabled || this.currentPage >= this.totalPages;
+  }
+  // ============================================================================
+  // Navigation
+  // ============================================================================
+  // Single update path. Fires @onChange in both modes — the callback models a
+  // navigation event regardless of whether the parent stores currentPage.
+  // Spec §Behaviour > Callback contract.
+  goToPage(page) {
+    const clamped = Math.max(1, Math.min(this.totalPages, page));
+    if (!this.isControlled) {
+      this.internalCurrentPage = clamped;
+    }
+    this.args.onChange(clamped);
+  }
+  handlePageClick = page => {
+    if (this.isDisabled) return;
+    this.goToPage(page);
+  };
+  handlePrevClick = () => {
+    if (this.isPrevDisabled) return;
+    this.goToPage(this.currentPage - 1);
+  };
+  handleNextClick = () => {
+    if (this.isNextDisabled) return;
+    this.goToPage(this.currentPage + 1);
+  };
+  handleFirstClick = () => {
+    if (this.isPrevDisabled) return;
+    this.goToPage(1);
+  };
+  handleLastClick = () => {
+    if (this.isNextDisabled) return;
+    this.goToPage(this.totalPages);
+  };
+  // ============================================================================
+  // Jump-to-page form
+  //
+  // The user types into `NumberField`; we accumulate the value into
+  // `jumpToValue` via `onInput`. The consumer's `@onChange` is wired ONLY to
+  // form submit — typing 1, 12, 123 must not fire @onChange three times.
+  // ============================================================================
+  handleJumpToInput = value => {
+    this.jumpToValue = value;
+  };
+  handleJumpToSubmit = event => {
+    event.preventDefault();
+    const typed = this.jumpToValue;
+    // Empty / non-numeric / NaN submit: no-op. No @onChange fire, no clearing.
+    // The user can correct the typo without retyping from scratch.
+    if (typed === null || typed === undefined || Number.isNaN(typed)) return;
+    // Out-of-range typed values are clamped, not rejected. A typo of 999 on
+    // 17 pages becomes 17; a 0 or -3 becomes 1. Operator-friendly behaviour
+    // per spec §Jump-to-page input.
+    const clamped = Math.max(1, Math.min(this.totalPages, typed));
+    this.goToPage(clamped);
+    // Clear after a successful submit. The input is a transient jump shortcut,
+    // not a persistent record — the page-cluster already shows where the user
+    // is. Clearing also makes the next jump frictionless.
+    this.jumpToValue = null;
+  };
+  // ============================================================================
+  // Refresh-clamp modifier
+  //
+  // Fires when totalPages changes. If totalItems shrinks under the user and
+  // currentPage is now out of range, clamp to the new last page and fire
+  // @onChange once. Never re-fires on growth.
+  // ============================================================================
+  refreshClamp = modifier((_element, [totalPages, currentPage]) => {
+    const previous = this.previousTotalPages;
+    this.previousTotalPages = totalPages;
+    // First run: just record. We don't know yet whether totalItems is
+    // shrinking or growing, and the consumer's initial @currentPage is
+    // assumed to be valid.
+    if (previous === null) return;
+    // Only clamp on shrink-past-current. Growth never re-fires.
+    // The mutation is deferred to a microtask: the modifier reads
+    // `currentPage` (which in uncontrolled mode is `internalCurrentPage`)
+    // and `goToPage` writes it. Glimmer rejects same-computation read+write
+    // on a tracked field, so we punt the write to the next microtask.
+    if (totalPages < previous && currentPage > totalPages) {
+      void Promise.resolve().then(() => this.goToPage(totalPages));
+    }
+  });
+  // ============================================================================
+  // Template
+  // ============================================================================
+  static {
+    setComponentTemplate(precompileTemplate("<nav class=\"pagination_e7638bd11\" data-variant={{this.variant}} data-test-pagination aria-label={{this.ariaLabel}} {{this.refreshClamp this.totalPages this.currentPage}} ...attributes>\n  {{#if (eq this.variant \"compact\")}}\n    {{!-- ============================================================\n        Compact: icon-only prev/next bracketing a single indicator.\n        The aria-live region wraps the indicator (it IS the summary).\n        @showFirstLast / @showJumpTo are silently ignored here.\n        ============================================================ --}}\n    {{#if (has-block \"prev\")}}\n      <Button @variant=\"ghost\" @size=\"sm\" @isDisabled={{this.isPrevDisabled}} aria-label=\"Previous page\" data-test-pagination-prev {{on \"click\" this.handlePrevClick}}>\n        {{yield to=\"prev\"}}\n      </Button>\n    {{else}}\n      <Button @variant=\"ghost\" @size=\"sm\" @isDisabled={{this.isPrevDisabled}} aria-label=\"Previous page\" data-test-pagination-prev {{on \"click\" this.handlePrevClick}}>\n        <:prefix><Icon @icon={{ChevronLeft}} @size=\"sm\" /></:prefix>\n      </Button>\n    {{/if}}\n\n    <span class=\"indicator_e7638bd11\" aria-live=\"polite\" data-test-pagination-indicator>\n      Page\n      {{this.currentPage}}\n      of\n      {{this.totalPages}}\n    </span>\n\n    {{#if (has-block \"next\")}}\n      <Button @variant=\"ghost\" @size=\"sm\" @isDisabled={{this.isNextDisabled}} aria-label=\"Next page\" data-test-pagination-next {{on \"click\" this.handleNextClick}}>\n        {{yield to=\"next\"}}\n      </Button>\n    {{else}}\n      <Button @variant=\"ghost\" @size=\"sm\" @isDisabled={{this.isNextDisabled}} aria-label=\"Next page\" data-test-pagination-next {{on \"click\" this.handleNextClick}}>\n        <:prefix><Icon @icon={{ChevronRight}} @size=\"sm\" /></:prefix>\n      </Button>\n    {{/if}}\n  {{else}}\n    {{!-- ============================================================\n        default and numbered: summary (optional) + cluster + prev/next,\n        with optional first/last and jump-to-page affordances.\n        ============================================================ --}}\n    {{#if this.showSummary}}\n      <div class=\"summary_e7638bd11\" aria-live=\"polite\" data-test-pagination-summary>\n        {{#if (has-block \"summary\")}}\n          {{yield this.summaryContext to=\"summary\"}}\n        {{else}}\n          {{this.startItem}}\u2013{{this.endItem}}\n          of\n          {{@totalItems}}\n          {{this.resolvedItemName}}\n        {{/if}}\n      </div>\n    {{/if}}\n\n    <div class=\"controls_e7638bd11\">\n      {{#if this.showFirstLast}}\n        <Button @size=\"sm\" @isDisabled={{this.isPrevDisabled}} aria-label=\"First page\" data-test-pagination-first {{on \"click\" this.handleFirstClick}}>\n          <:prefix><Icon @icon={{ChevronsLeft}} @size=\"sm\" /></:prefix>\n        </Button>\n      {{/if}}\n\n      {{#if (has-block \"prev\")}}\n        <Button @size=\"sm\" @isDisabled={{this.isPrevDisabled}} data-test-pagination-prev {{on \"click\" this.handlePrevClick}}>\n          {{yield to=\"prev\"}}\n        </Button>\n      {{else}}\n        <Button @size=\"sm\" @isDisabled={{this.isPrevDisabled}} data-test-pagination-prev {{on \"click\" this.handlePrevClick}}>\n          <:prefix><Icon @icon={{ChevronLeft}} @size=\"sm\" /></:prefix>\n          <:default>Prev</:default>\n        </Button>\n      {{/if}}\n\n      <ol class=\"cluster_e7638bd11\" style={{this.clusterStyle}} data-test-pagination-cluster>\n        {{#each this.pageItems key=\"key\" as |entry|}}\n          {{#if (eq entry.kind \"page\")}}\n            <li class=\"item_e7638bd11\">\n              <Button @variant=\"ghost\" @size=\"sm\" @isDisabled={{this.isDisabled}} aria-current={{if entry.isCurrent \"page\"}} data-current={{if entry.isCurrent \"true\"}} data-test-pagination-page={{entry.page}} {{on \"click\" (fn this.handlePageClick entry.page)}}>\n                {{entry.page}}\n              </Button>\n            </li>\n          {{else}}\n            <li class=\"ellipsis_e7638bd11\" aria-hidden=\"true\" data-test-pagination-ellipsis>\u2026</li>\n          {{/if}}\n        {{/each}}\n      </ol>\n\n      {{#if (has-block \"next\")}}\n        <Button @size=\"sm\" @isDisabled={{this.isNextDisabled}} data-test-pagination-next {{on \"click\" this.handleNextClick}}>\n          {{yield to=\"next\"}}\n        </Button>\n      {{else}}\n        <Button @size=\"sm\" @isDisabled={{this.isNextDisabled}} data-test-pagination-next {{on \"click\" this.handleNextClick}}>\n          <:default>Next</:default>\n          <:suffix><Icon @icon={{ChevronRight}} @size=\"sm\" /></:suffix>\n        </Button>\n      {{/if}}\n\n      {{#if this.showFirstLast}}\n        <Button @size=\"sm\" @isDisabled={{this.isNextDisabled}} aria-label=\"Last page\" data-test-pagination-last {{on \"click\" this.handleLastClick}}>\n          <:prefix><Icon @icon={{ChevronsRight}} @size=\"sm\" /></:prefix>\n        </Button>\n      {{/if}}\n\n      {{#if this.showJumpTo}}\n        {{!-- Form's @isDisabled is forwarded to every yielded child,\n            so passing it here disables both the input and the submit\n            Button without re-passing on each. Form does not introduce\n            a separate <nav> landmark \u2014 it sits inside Pagination's. --}}\n        <Form class=\"jump-to_e7638bd11\" @onSubmit={{this.handleJumpToSubmit}} @isDisabled={{this.isDisabled}} data-test-pagination-jump-form as |form|>\n          <form.NumberField @label=\"Go to page\" @value={{this.jumpToFieldValue}} @onInput={{this.handleJumpToInput}} @min={{1}} @max={{this.totalPages}} @step={{1}} @showStepper={{false}} @inputMode=\"numeric\" data-test-pagination-jump-input />\n          <form.Button @type=\"submit\" @size=\"sm\" data-test-pagination-jump-submit>\n            Go\n          </form.Button>\n        </Form>\n      {{/if}}\n    </div>\n  {{/if}}\n</nav>", {
+      strictMode: true,
+      scope: () => ({
+        eq,
+        Button,
+        on,
+        Icon,
+        ChevronLeft,
+        ChevronRight,
+        ChevronsLeft,
+        fn,
+        ChevronsRight,
+        Form
+      })
+    }), this);
+  }
+}
+
+export { Pagination as default };
+//# sourceMappingURL=pagination.js.map

package/dist/data/pagination.js.map

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

package/dist/form/calendar.css

@@ -163,13 +163,13 @@
   transform: translateX(-50%);
   width: 0.25rem;
   height: 0.25rem;
-  background-color: var(--color-bg-fill-accent);
+  background-color: var(--color-bg-control-checked);
   border-radius: 50%;
 }
 
 /* Selected state */
 .calendar-day_e7aa819da[data-selected="true"]:not([data-disabled="true"]) {
-  background-color: var(--color-bg-fill-accent);
+  background-color: var(--color-bg-control-checked);
   color: var(--color-text-on-accent);
 }
 
@@ -183,7 +183,7 @@
 }
 
 .calendar-day_e7aa819da[data-outside="true"][data-selected="true"] {
-  background-color: var(--color-bg-fill-accent);
+  background-color: var(--color-bg-control-checked);
   color: var(--color-text-on-accent);
 }
 
@@ -205,7 +205,7 @@
 .calendar-day_e7aa819da[data-in-range="true"]:not([data-disabled="true"]) {
   background-color: color-mix(
     in srgb,
-    var(--color-bg-fill-accent) 15%,
+    var(--color-bg-control-checked) 15%,
     transparent
   );
   border-radius: 0;
@@ -213,14 +213,14 @@
 
 /* Range start */
 .calendar-day_e7aa819da[data-range-start="true"]:not([data-disabled="true"]) {
-  background-color: var(--color-bg-fill-accent);
+  background-color: var(--color-bg-control-checked);
   color: var(--color-text-on-accent);
   border-radius: var(--radius-sm) 0 0 var(--radius-sm);
 }
 
 /* Range end */
 .calendar-day_e7aa819da[data-range-end="true"]:not([data-disabled="true"]) {
-  background-color: var(--color-bg-fill-accent);
+  background-color: var(--color-bg-control-checked);
   color: var(--color-text-on-accent);
   border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }

package/dist/form/checkbox.css

@@ -31,9 +31,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: var(--border-width-1) solid var(--color-border-control);
+  border: var(--border-width-1) solid var(--color-input-border-default);
   border-radius: var(--radius-sm);
-  background-color: var(--color-bg-surface);
+  background-color: var(--color-input-bg-default);
   transition: all 0.15s ease;
 }
 
@@ -55,80 +55,81 @@
 
 /* Hover */
 .label-wrapper_eed179744:hover .control_eed179744 {
-  border-color: var(--color-border-control-hover);
+  border-color: var(--color-input-border-hover);
 }
 
 .wrapper_eed179744[data-disabled="true"] .label-wrapper_eed179744:hover .control_eed179744 {
-  border-color: var(--color-border-control-disabled);
+  border-color: var(--color-input-border-disabled);
 }
 
 /* Focus */
 .input_eed179744:focus-visible + .control_eed179744 {
-  border-color: var(--color-border-focus);
+  border-color: var(--color-input-border-focus);
   box-shadow: var(--focus-ring);
 }
 
 /* Checked */
 .input_eed179744:checked + .control_eed179744 {
-  background-color: var(--color-bg-fill-accent);
-  border-color: var(--color-bg-fill-accent);
+  background-color: var(--color-input-checked-bg);
+  border-color: var(--color-input-checked-border);
 }
 
 /* Checked + Hover */
 .label-wrapper_eed179744:hover .input_eed179744:checked + .control_eed179744 {
-  background-color: var(--color-bg-fill-accent-hover);
-  border-color: var(--color-bg-fill-accent-hover);
+  background-color: var(--color-input-checked-bg-hover);
+  border-color: var(--color-input-checked-bg-hover);
 }
 
 /* Indeterminate */
 .input_eed179744[aria-checked="mixed"] + .control_eed179744 {
-  background-color: var(--color-bg-fill-accent);
-  border-color: var(--color-bg-fill-accent);
+  background-color: var(--color-input-checked-bg);
+  border-color: var(--color-input-checked-border);
 }
 
-/* Invalid */
+/* Invalid — error path goes through `--color-input-border-error`,
+   not `--color-border-critical` directly. */
 .wrapper_eed179744[data-invalid="true"] .control_eed179744 {
-  border-color: var(--color-border-critical);
+  border-color: var(--color-input-border-error);
 }
 
 .wrapper_eed179744[data-invalid="true"] .input_eed179744:checked + .control_eed179744 {
   background-color: var(--color-bg-fill-critical);
-  border-color: var(--color-bg-fill-critical);
+  border-color: var(--color-input-border-error);
 }
 
 .wrapper_eed179744[data-invalid="true"] .input_eed179744[aria-checked="mixed"] + .control_eed179744 {
   background-color: var(--color-bg-fill-critical);
-  border-color: var(--color-bg-fill-critical);
+  border-color: var(--color-input-border-error);
 }
 
 /* Disabled */
 .input_eed179744:disabled + .control_eed179744 {
-  background-color: var(--color-bg-disabled);
-  border-color: var(--color-border-control-disabled);
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
   cursor: not-allowed;
 }
 
 .input_eed179744:disabled:checked + .control_eed179744 {
-  background-color: var(--color-bg-disabled);
-  border-color: var(--color-border-control-disabled);
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
 }
 
 .input_eed179744:disabled[aria-checked="mixed"] + .control_eed179744 {
-  background-color: var(--color-bg-disabled);
-  border-color: var(--color-border-control-disabled);
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
 }
 
 /* Disabled icon colors */
 .input_eed179744:disabled + .control_eed179744 .check-icon_eed179744,
 .input_eed179744:disabled + .control_eed179744 .indeterminate-icon_eed179744 {
-  background-color: var(--color-text-disabled);
+  background-color: var(--color-input-text-disabled);
 }
 
 /* Check icon */
 .check-icon_eed179744 {
   width: 100%;
   height: 100%;
-  background-color: var(--color-text-on-accent);
+  background-color: var(--color-input-checked-icon);
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5L6 12L2.5 8.5' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   mask-size: 80%;
   mask-position: center;
@@ -139,7 +140,7 @@
 .indeterminate-icon_eed179744 {
   width: 60%;
   height: 2px;
-  background-color: var(--color-text-on-accent);
+  background-color: var(--color-input-checked-icon);
   border-radius: 1px;
 }
 

package/dist/form/date-range-picker.css

@@ -115,7 +115,7 @@
 .date-range-picker-input_e973c8cc7[data-active="true"] {
   background-color: color-mix(
     in srgb,
-    var(--color-bg-fill-accent) 10%,
+    var(--color-bg-control-checked) 10%,
     transparent
   );
 }

package/dist/form/input.css

@@ -34,10 +34,10 @@
   min-width: 0;
   height: 100%;
   box-sizing: border-box;
-  border: var(--border-width-1) solid var(--color-border-control);
+  border: var(--border-width-1) solid var(--color-input-border-default);
   border-radius: var(--radius-md);
-  background-color: var(--color-bg);
-  color: var(--color-text);
+  background-color: var(--color-input-bg-default);
+  color: var(--color-input-text-default);
   font-family: inherit;
   font-size: inherit;
   line-height: var(--line-height-tight);
@@ -66,13 +66,13 @@
 
 /* Hover */
 .input_ef268a5e9:hover:not(:disabled, :focus, :read-only) {
-  border-color: var(--color-border-control-hover);
+  border-color: var(--color-input-border-hover);
 }
 
 /* Focus */
 .input_ef268a5e9:focus {
   outline: none;
-  border-color: var(--color-border-focus);
+  border-color: var(--color-input-border-focus);
   box-shadow: var(--focus-ring);
 }
 
@@ -84,17 +84,18 @@
 
 .input-wrapper_ef268a5e9[data-variant="filled"]
   .input_ef268a5e9:hover:not(:disabled, :focus, :read-only) {
-  border-color: var(--color-border-control);
+  border-color: var(--color-input-border-default);
 }
 
 .input-wrapper_ef268a5e9[data-variant="filled"] .input_ef268a5e9:focus {
-  background-color: var(--color-bg);
-  border-color: var(--color-border-focus);
+  background-color: var(--color-input-bg-focus);
+  border-color: var(--color-input-border-focus);
 }
 
-/* Invalid State */
+/* Invalid State — error path goes through the input matrix, not
+   `--color-border-critical` directly. */
 .input-wrapper_ef268a5e9[data-invalid="true"] .input_ef268a5e9 {
-  border-color: var(--color-border-critical);
+  border-color: var(--color-input-border-error);
 }
 
 .input-wrapper_ef268a5e9[data-invalid="true"] .input_ef268a5e9:focus {
@@ -103,9 +104,9 @@
 
 /* Disabled State */
 .input_ef268a5e9:disabled {
-  background-color: var(--color-bg-disabled);
-  color: var(--color-text-disabled);
-  border-color: var(--color-border-control-disabled);
+  background-color: var(--color-input-bg-disabled);
+  color: var(--color-input-text-disabled);
+  border-color: var(--color-input-border-disabled);
   cursor: not-allowed;
 }
 
@@ -167,11 +168,11 @@
 
 /* Invalid state for prefix/suffix borders */
 .input-wrapper_ef268a5e9[data-invalid="true"] .input-prefix_ef268a5e9 {
-  border-color: var(--color-border-critical);
+  border-color: var(--color-input-border-error);
   border-right: none;
 }
 
 .input-wrapper_ef268a5e9[data-invalid="true"] .input-suffix_ef268a5e9 {
-  border-color: var(--color-border-critical);
+  border-color: var(--color-input-border-error);
   border-left: none;
 }

package/dist/form/multi-combobox.css

@@ -405,8 +405,8 @@
 }
 
 .multi-combobox-checkbox_e1a041f66[data-checked="true"] {
-  background-color: var(--color-bg-fill-accent);
-  border-color: var(--color-bg-fill-accent);
+  background-color: var(--color-bg-control-checked);
+  border-color: var(--color-bg-control-checked);
 }
 
 .multi-combobox-checkbox_e1a041f66[data-checked="true"]::before {

package/dist/form/multi-select.css

@@ -263,8 +263,8 @@
 }
 
 .multi-select-option_ed2d11911[data-selected="true"] .multi-select-checkbox_ed2d11911 {
-  background-color: var(--color-bg-fill-accent);
-  border-color: var(--color-bg-fill-accent);
+  background-color: var(--color-bg-control-checked);
+  border-color: var(--color-bg-control-checked);
 }
 
 .multi-select-option_ed2d11911[data-selected="true"]:hover:not([data-disabled="true"])