@visitwonders/assembly 0.14.0 → 0.16.0

package/dist/form/radio.css

@@ -32,9 +32,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-round);
-  background-color: var(--color-bg-surface);
+  background-color: var(--color-input-bg-default);
   transition: all var(--transition-fast);
 }
 
@@ -65,43 +65,46 @@
 
 /* Hover */
 .radio-label-wrapper_e6dda4f5d:hover .radio-control_e6dda4f5d {
-  border-color: var(--color-border-control-hover);
+  border-color: var(--color-input-border-hover);
 }
 
 .radio-wrapper_e6dda4f5d[data-disabled="true"] .radio-label-wrapper_e6dda4f5d:hover .radio-control_e6dda4f5d {
-  border-color: var(--color-border-control-disabled);
+  border-color: var(--color-input-border-disabled);
 }
 
 /* Focus */
 .radio-input_e6dda4f5d:focus-visible + .radio-control_e6dda4f5d {
-  border-color: var(--color-border-focus);
+  border-color: var(--color-input-border-focus);
   box-shadow: var(--focus-ring);
 }
 
-/* Checked */
+/* Checked — anchored to the shared `--color-bg-control-checked`
+   token, in line with the other selected-state controls. Folded
+   the pre-existing radio debt that pinned the dot to
+   `--color-border-focus` and `--color-text-link-hover`. */
 .radio-input_e6dda4f5d:checked + .radio-control_e6dda4f5d {
-  border-color: var(--color-border-focus);
+  border-color: var(--color-input-checked-border);
 }
 
 .radio-input_e6dda4f5d:checked + .radio-control_e6dda4f5d .radio-dot_e6dda4f5d {
-  background-color: var(--color-border-focus);
+  background-color: var(--color-input-checked-bg);
 }
 
 .radio-label-wrapper_e6dda4f5d:hover .radio-input_e6dda4f5d:checked + .radio-control_e6dda4f5d {
-  border-color: var(--color-text-link-hover);
+  border-color: var(--color-input-checked-bg-hover);
 }
 
 .radio-label-wrapper_e6dda4f5d:hover .radio-input_e6dda4f5d:checked + .radio-control_e6dda4f5d .radio-dot_e6dda4f5d {
-  background-color: var(--color-text-link-hover);
+  background-color: var(--color-input-checked-bg-hover);
 }
 
-/* Invalid */
+/* Invalid — error path goes through `--color-input-border-error`. */
 .radio-wrapper_e6dda4f5d[data-invalid="true"] .radio-control_e6dda4f5d {
-  border-color: var(--color-border-critical);
+  border-color: var(--color-input-border-error);
 }
 
 .radio-wrapper_e6dda4f5d[data-invalid="true"] .radio-input_e6dda4f5d:checked + .radio-control_e6dda4f5d {
-  border-color: var(--color-border-critical);
+  border-color: var(--color-input-border-error);
 }
 
 .radio-wrapper_e6dda4f5d[data-invalid="true"]
@@ -119,12 +122,12 @@
 
 /* Disabled */
 .radio-input_e6dda4f5d:disabled + .radio-control_e6dda4f5d {
-  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);
 }
 
 .radio-input_e6dda4f5d:disabled:checked + .radio-control_e6dda4f5d .radio-dot_e6dda4f5d {
-  background-color: var(--color-text-disabled);
+  background-color: var(--color-input-text-disabled);
 }
 
 /* Label */

package/dist/form/toggle.css

@@ -108,9 +108,11 @@
   transform: scale(0.95);
 }
 
-/* Checked state - track */
+/* Checked state - track (default tone). Sentiment variants below
+   intentionally bypass `--color-bg-control-checked` to expose the
+   sentiment-specific fill — architect-confirmed override. */
 .track_eb612ecfd.checked_eb612ecfd {
-  background-color: var(--color-bg-fill-accent);
+  background-color: var(--color-bg-control-checked);
 }
 
 /* Checked + hover */

package/dist/overlay/drawer.js

@@ -34,7 +34,7 @@ class DrawerHeader extends Component {
   }
   handleClose = event => {
     event.preventDefault();
-    void this.ctx.closeDrawer();
+    this.ctx.requestDismiss();
   };
   static {
     setComponentTemplate(precompileTemplate("<div class=\"drawer-header_e20b0b74f\" data-test-drawer-header ...attributes>\n  <div id={{this.ctx.titleId}} class=\"drawer-title_e20b0b74f\">\n    {{yield}}\n  </div>\n  {{#if this.isCloseButtonVisible}}\n    <button type=\"button\" class=\"drawer-header-close_e20b0b74f\" aria-label=\"Close\" {{on \"click\" this.handleClose}} data-test-drawer-header-close>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M12 4L4 12M4 4L12 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  {{/if}}\n</div>", {
@@ -165,8 +165,16 @@ class Drawer extends Component {
   }
   handleBackdropClose = () => {
     if (this.closeOnBackdropClick) {
-      void this.closeDrawer();
+      this.requestDismiss();
+    }
+  };
+  requestDismiss = () => {
+    if (this.args.preventClose) return;
+    if (this.args.onDismiss) {
+      this.args.onDismiss(this.closeDrawer);
+      return;
     }
+    void this.closeDrawer();
   };
   // ============================================================================
   // Modifiers
@@ -214,7 +222,7 @@ class Drawer extends Component {
       if (event.key === 'Escape' && this.closeOnEscape) {
         event.preventDefault();
         event.stopPropagation();
-        void this.closeDrawer();
+        this.requestDismiss();
         return;
       }
       // Focus trap (only when blanket is shown)
@@ -281,7 +289,8 @@ class Drawer extends Component {
     return {
       isOpen: this.isOpen,
       titleId: this.titleId,
-      closeDrawer: this.closeDrawer
+      closeDrawer: this.closeDrawer,
+      requestDismiss: this.requestDismiss
     };
   }
   // ============================================================================

package/dist/status/tag.css

@@ -54,7 +54,7 @@ button.e873402ac.tag-content_e873402ac,a.e873402ac.tag-content_e873402ac {
 
 button.e873402ac.tag-content_e873402ac:focus-visible,a.e873402ac.tag-content_e873402ac:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-focus-ring-halo);
+  box-shadow: inset 0 0 0 2px var(--color-focus-ring-outer);
 }
 
 /* ===================================
@@ -337,7 +337,7 @@ button.e873402ac.tag-content_e873402ac:focus-visible,a.e873402ac.tag-content_e87
 .tag-remove_e873402ac:focus-visible {
   outline: none;
   opacity: 1;
-  box-shadow: 0 0 0 2px var(--color-focus-ring-halo);
+  box-shadow: 0 0 0 2px var(--color-focus-ring-outer);
 }
 
 .tag-remove_e873402ac:disabled {

package/dist/styles/semantic/colors.css

@@ -17,6 +17,15 @@
   --color-bg-inverse: var(--gray-900); /* Dark background for contrast */
   --color-bg-disabled: var(--gray-100); /* Disabled backgrounds */
 
+  /* Status Surfaces — for panels, banners, callouts, toasts.
+     Distinct from `bg-{semantic}-subtle` (tinted hover/badge backgrounds)
+     and `bg-fill-{semantic}` (solid status fills). Surface tier sits at
+     the same level as `bg-surface` but carries status sentiment. */
+  --color-bg-surface-success: var(--green-50);
+  --color-bg-surface-warning: var(--amber-50);
+  --color-bg-surface-critical: var(--red-50);
+  --color-bg-surface-info: var(--cyan-50);
+
   /* Hover States */
   --color-bg-hover-subtle: var(--gray-50);
 
@@ -33,13 +42,19 @@
   --color-bg-fill-interactive-selected: var(--gray-175);
   --color-bg-fill-interactive-disabled: var(--gray-50);
 
-  /* Accent Fill (Selected controls — checkboxes, toggles, radios) */
+  /* Accent Fill (Selected controls — checkboxes, toggles, radios,
+     calendar selected day, multi-select chips, date-range fill) */
   --color-bg-fill-accent: var(--indigo-500);
   --color-bg-fill-accent-hover: var(--indigo-600);
   --color-bg-fill-accent-active: var(--indigo-700);
   --color-bg-fill-accent-disabled: var(--indigo-300);
 
-  /* Secondary Fill */
+  /* Accent Fill — Subtle (tinted accent backgrounds, e.g. table row
+     selected). Sits in the same range as the other `*-subtle` tints. */
+  --color-bg-fill-accent-subtle: var(--indigo-50);
+  --color-bg-fill-accent-subtle-hover: var(--indigo-100);
+
+  /* reserved — no consumers yet, validate value when first used */
   --color-bg-fill-secondary: var(--cyan-600);
   --color-bg-fill-secondary-hover: var(--cyan-700);
   --color-bg-fill-secondary-active: var(--cyan-800);
@@ -135,6 +150,15 @@
   --color-border-control-active: var(--gray-500);
   --color-border-control-disabled: var(--gray-300);
   --color-border-control-readonly: var(--gray-300);
+  /* Aliased to `--color-border-critical` so consumers reach for the
+     error-state intent rather than the raw critical token. */
+  --color-border-control-error: var(--color-border-critical);
+
+  /* Control Fill — Checked (selected affordance for checkbox, toggle,
+     radio, multi-select, multi-combobox, calendar selected day,
+     date-range range fill). Aliased to `--color-bg-fill-accent` so all
+     "checked/selected" controls share one anchor. */
+  --color-bg-control-checked: var(--color-bg-fill-accent);
 
   /* Brand/Primary Border */
   --color-border-primary: var(--indigo-700);
@@ -142,9 +166,11 @@
   /* Focus Border */
   --color-border-focus: var(--indigo-500);
 
-  /* Focus Ring Halo (box-shadow glow) */
-  --color-focus-ring-halo: var(--indigo-200);
-  --color-focus-ring-halo-critical: var(--red-200);
+  /* Focus Ring — two-stop composite (WCAG 2.2 non-text-contrast).
+     `inner` separates the ring from the focused element; `outer` carries
+     the ring colour. Composed in `effects.css` as `--focus-ring`. */
+  --color-focus-ring-inner: var(--white);
+  --color-focus-ring-outer: var(--indigo-500);
 
   /* Semantic Borders */
   --color-border-neutral: var(--gray-900);

package/dist/styles/semantic/component.css

@@ -0,0 +1,154 @@
+/* ===================================
+ * Component-Tier Tokens (Layer 3)
+ *
+ * Action and Input matrices. Every cell aliases a layer-2 generic — no
+ * flat hex. Variants compose in component CSS (e.g. button.css picks
+ * which property carries the tone colour for `outline` vs `solid`).
+ *
+ * The rest of Assembly's components consume semantic tokens directly;
+ * only action + input have a layer-3 surface. See
+ * `docs/component-tokens.md` for the rationale and the cell-by-cell
+ * spec — this file mirrors it.
+ * =================================== */
+:root {
+  /* ===================================
+   * Action Matrix
+   * Shape: --color-action-{tone}-{property}-{state}
+   *   tones      = primary | neutral | critical
+   *   properties = bg | border | text | icon
+   *   states     = default | hover | focus | pressed | disabled
+   * =================================== */
+
+  /* Primary — bg */
+  --color-action-primary-bg-default: var(--color-bg-fill-primary);
+  --color-action-primary-bg-hover: var(--color-bg-fill-primary-hover);
+  --color-action-primary-bg-focus: var(--color-bg-fill-primary);
+  --color-action-primary-bg-pressed: var(--color-bg-fill-primary-active);
+  --color-action-primary-bg-disabled: var(--color-bg-fill-primary-disabled);
+
+  /* Primary — border */
+  --color-action-primary-border-default: var(--color-border-primary);
+  --color-action-primary-border-hover: var(--color-border-primary);
+  --color-action-primary-border-focus: var(--color-border-focus);
+  --color-action-primary-border-pressed: var(--color-border-primary);
+  --color-action-primary-border-disabled: var(--color-border-control-disabled);
+
+  /* Primary — text */
+  --color-action-primary-text-default: var(--color-text-on-primary);
+  --color-action-primary-text-hover: var(--color-text-on-primary);
+  --color-action-primary-text-focus: var(--color-text-on-primary);
+  --color-action-primary-text-pressed: var(--color-text-on-primary);
+  --color-action-primary-text-disabled: var(--color-text-disabled);
+
+  /* Primary — icon */
+  --color-action-primary-icon-default: var(--color-text-on-primary);
+  --color-action-primary-icon-hover: var(--color-text-on-primary);
+  --color-action-primary-icon-focus: var(--color-text-on-primary);
+  --color-action-primary-icon-pressed: var(--color-text-on-primary);
+  --color-action-primary-icon-disabled: var(--color-text-disabled);
+
+  /* Neutral — bg */
+  --color-action-neutral-bg-default: var(--color-bg-fill-interactive);
+  --color-action-neutral-bg-hover: var(--color-bg-fill-interactive-hover);
+  --color-action-neutral-bg-focus: var(--color-bg-fill-interactive);
+  --color-action-neutral-bg-pressed: var(--color-bg-fill-interactive-active);
+  --color-action-neutral-bg-disabled: var(--color-bg-fill-interactive-disabled);
+
+  /* Neutral — border */
+  --color-action-neutral-border-default: var(--color-border-control);
+  --color-action-neutral-border-hover: var(--color-border-control-hover);
+  --color-action-neutral-border-focus: var(--color-border-focus);
+  --color-action-neutral-border-pressed: var(--color-border-control-active);
+  --color-action-neutral-border-disabled: var(--color-border-control-disabled);
+
+  /* Neutral — text */
+  --color-action-neutral-text-default: var(--color-text);
+  --color-action-neutral-text-hover: var(--color-text);
+  --color-action-neutral-text-focus: var(--color-text);
+  --color-action-neutral-text-pressed: var(--color-text);
+  --color-action-neutral-text-disabled: var(--color-text-disabled);
+
+  /* Neutral — icon */
+  --color-action-neutral-icon-default: var(--color-icon);
+  --color-action-neutral-icon-hover: var(--color-icon-interactive-hover);
+  --color-action-neutral-icon-focus: var(--color-icon);
+  --color-action-neutral-icon-pressed: var(--color-icon);
+  --color-action-neutral-icon-disabled: var(--color-icon-disabled);
+
+  /* Critical — bg */
+  --color-action-critical-bg-default: var(--color-bg-fill-critical);
+  --color-action-critical-bg-hover: var(--color-bg-fill-critical-hover);
+  --color-action-critical-bg-focus: var(--color-bg-fill-critical);
+  --color-action-critical-bg-pressed: var(--color-bg-fill-critical-active);
+  --color-action-critical-bg-disabled: var(
+    --color-bg-fill-interactive-disabled
+  );
+
+  /* Critical — border */
+  --color-action-critical-border-default: var(--color-border-critical);
+  --color-action-critical-border-hover: var(--color-border-critical);
+  --color-action-critical-border-focus: var(--color-border-critical);
+  --color-action-critical-border-pressed: var(--color-border-critical);
+  --color-action-critical-border-disabled: var(--color-border-control-disabled);
+
+  /* Critical — text */
+  --color-action-critical-text-default: var(--color-text-on-critical);
+  --color-action-critical-text-hover: var(--color-text-on-critical);
+  --color-action-critical-text-focus: var(--color-text-on-critical);
+  --color-action-critical-text-pressed: var(--color-text-on-critical);
+  --color-action-critical-text-disabled: var(--color-text-disabled);
+
+  /* Critical — icon */
+  --color-action-critical-icon-default: var(--color-text-on-critical);
+  --color-action-critical-icon-hover: var(--color-text-on-critical);
+  --color-action-critical-icon-focus: var(--color-text-on-critical);
+  --color-action-critical-icon-pressed: var(--color-text-on-critical);
+  --color-action-critical-icon-disabled: var(--color-text-disabled);
+
+  /* ===================================
+   * Input Matrix
+   * Shape: --color-input-{property}-{state}
+   *   properties = bg | border | text | icon | checked
+   *   states     = default | hover | focus | disabled | error
+   *
+   * `checked` is the selected-state affordance; it collapses the state
+   * axis (the "checked" affordance itself is a state). Inputs without a
+   * checked affordance (text inputs, textareas) ignore the `checked-*`
+   * cells.
+   * =================================== */
+
+  /* bg */
+  --color-input-bg-default: var(--color-bg-surface);
+  --color-input-bg-hover: var(--color-bg-surface);
+  --color-input-bg-focus: var(--color-bg-surface);
+  --color-input-bg-disabled: var(--color-bg-disabled);
+  --color-input-bg-error: var(--color-bg-surface);
+
+  /* border */
+  --color-input-border-default: var(--color-border-control);
+  --color-input-border-hover: var(--color-border-control-hover);
+  --color-input-border-focus: var(--color-border-focus);
+  --color-input-border-disabled: var(--color-border-control-disabled);
+  --color-input-border-error: var(--color-border-control-error);
+
+  /* text */
+  --color-input-text-default: var(--color-text);
+  --color-input-text-hover: var(--color-text);
+  --color-input-text-focus: var(--color-text);
+  --color-input-text-disabled: var(--color-text-disabled);
+  --color-input-text-error: var(--color-text);
+
+  /* icon */
+  --color-input-icon-default: var(--color-icon-secondary);
+  --color-input-icon-hover: var(--color-icon);
+  --color-input-icon-focus: var(--color-icon);
+  --color-input-icon-disabled: var(--color-icon-disabled);
+  --color-input-icon-error: var(--color-icon-critical);
+
+  /* checked (selected affordance) */
+  --color-input-checked-bg: var(--color-bg-control-checked);
+  --color-input-checked-bg-hover: var(--color-bg-fill-accent-hover);
+  --color-input-checked-border: var(--color-bg-control-checked);
+  --color-input-checked-icon: var(--color-text-on-accent);
+  --color-input-checked-disabled: var(--color-bg-fill-accent-disabled);
+}

package/dist/styles/semantic/effects.css

@@ -3,9 +3,15 @@
   --shadow-surface: var(--shadow-xs);
   --shadow-modal: var(--shadow-lg);
 
-  /* Focus Ring */
-  --focus-ring: 0 0 0 3px var(--color-focus-ring-halo);
-  --focus-ring-critical: 0 0 0 3px var(--color-focus-ring-halo-critical);
+  /* Focus Ring — two-stop composite. Inner stop separates the ring from
+     the focused surface; outer stop carries the ring colour. Meets WCAG
+     2.2 non-text-contrast on light + dark surfaces. */
+  --focus-ring:
+    0 0 0 2px var(--color-focus-ring-inner),
+    0 0 0 4px var(--color-focus-ring-outer);
+  --focus-ring-critical:
+    0 0 0 2px var(--color-focus-ring-inner),
+    0 0 0 4px var(--color-border-critical);
 
   /* Z-Index Semantic Layers */
   --z-dropdown: var(--z-100);

package/dist/styles/semantic/typography.css

@@ -29,4 +29,64 @@
   --letter-spacing-tight: -0.025em;
   --letter-spacing-normal: 0;
   --letter-spacing-wide: 0.025em;
+
+  /* ===================================
+   * Typography Roles — Bundled Sub-tokens
+   *
+   * Role names (display | page | section | subsection for headings;
+   * sm | md | lg for body) survive a redesign that re-scales the type
+   * ramp. Components consume the four sub-tokens (size, weight, leading,
+   * tracking) per role rather than composing atomic font-size +
+   * line-height + weight per call site. Sub-tokens not `font:`
+   * shorthand — shorthand resets font-stretch/variant and cannot carry
+   * letter-spacing.
+   *
+   * Heading mapping (locked, see WON-580):
+   *   level=1 → page          (default page title)
+   *   level=2 → section       (first-level section header)
+   *   level=3-6 → subsection  (size step-down via @size override)
+   * `display` is an opt-in @size — never a level default.
+   * =================================== */
+
+  /* Heading — Display (opt-in via @size="display") */
+  --typography-heading-display-size: var(--font-size-5xl); /* 30px */
+  --typography-heading-display-weight: var(--font-weight-medium);
+  --typography-heading-display-leading: var(--line-height-36);
+  --typography-heading-display-tracking: var(--letter-spacing-tight);
+
+  /* Heading — Page (level=1 default) */
+  --typography-heading-page-size: var(--font-size-4xl); /* 24px */
+  --typography-heading-page-weight: var(--font-weight-medium);
+  --typography-heading-page-leading: var(--line-height-28);
+  --typography-heading-page-tracking: var(--letter-spacing-tight);
+
+  /* Heading — Section (level=2 default) */
+  --typography-heading-section-size: var(--font-size-3xl); /* 20px */
+  --typography-heading-section-weight: var(--font-weight-medium);
+  --typography-heading-section-leading: var(--line-height-24);
+  --typography-heading-section-tracking: var(--letter-spacing-normal);
+
+  /* Heading — Subsection (level=3 default; 4-6 step down via @size) */
+  --typography-heading-subsection-size: var(--font-size-2xl); /* 18px */
+  --typography-heading-subsection-weight: var(--font-weight-medium);
+  --typography-heading-subsection-leading: var(--line-height-24);
+  --typography-heading-subsection-tracking: var(--letter-spacing-normal);
+
+  /* Body — Small (captions, dense table cells, helper text) */
+  --typography-body-sm-size: var(--font-size-sm); /* 12px */
+  --typography-body-sm-weight: var(--font-weight-regular);
+  --typography-body-sm-leading: var(--line-height-tight); /* 16px */
+  --typography-body-sm-tracking: var(--letter-spacing-normal);
+
+  /* Body — Medium (default body text) */
+  --typography-body-md-size: var(--font-size-md); /* 13px */
+  --typography-body-md-weight: var(--font-weight-regular);
+  --typography-body-md-leading: var(--line-height-normal); /* 20px */
+  --typography-body-md-tracking: var(--letter-spacing-normal);
+
+  /* Body — Large (lead paragraphs, emphasized body) */
+  --typography-body-lg-size: var(--font-size-lg); /* 14px */
+  --typography-body-lg-weight: var(--font-weight-regular);
+  --typography-body-lg-leading: var(--line-height-normal); /* 20px */
+  --typography-body-lg-tracking: var(--letter-spacing-normal);
 }

package/dist/styles/tokens.css

@@ -21,6 +21,9 @@
 @import url("./semantic/effects.css");
 @import url("./semantic/motion.css");
 
+/* Component-tier tokens (Action + Input matrices only) */
+@import url("./semantic/component.css");
+
 /* Base styles */
 @import url("./base/typography.css");