@adia-ai/web-components 0.8.41 → 0.8.43

package/components/{color-picker/color-picker.class.js → color-area/color-area.class.js}

@@ -1,20 +1,22 @@
 /**
- * Non-side-effect class export for `<color-picker-ui>`.
+ * Non-side-effect class export for `<color-area-ui>`.
  *
  * Importing this file gives you the class(es) without auto-registering the tag.
  * Useful for test isolation, subclassing with tag-name override, or selective
  * composition.
  *
- * The auto-register path stays at `@adia-ai/web-components/components/color-picker`
+ * The auto-register path stays at `@adia-ai/web-components/components/color-area`
  * (which imports this file + calls `defineIfFree()`).
  *
  * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
 /**
- * <color-picker-ui value="#3b82f6" format="hex"></color-picker-ui>
+ * <color-area-ui value="#3b82f6" format="hex"></color-area-ui>
  *
- * OKLCH-native color picker with 2D area + H/C/L sliders.
+ * OKLCH-native color picker with 2D area + H/C/L sliders (ADR-0063,
+ * gh#1563 — renamed from `<color-picker-ui>`, which was cut in 0.8.43,
+ * gh#1617; this is the sole tag now).
  *
  * Layout:
  *   [═══════════ color area (chroma x lightness) ═══════════]
@@ -122,7 +124,7 @@ function gamutMapChroma(L, C, H) {
 
 // ── Component ────────────────────────────────────────────
 
-export class UIColorPicker extends UIFormElement {
+export class UIColorArea extends UIFormElement {
   // §154 (v0.5.3): Phosphor icons this primitive auto-stamps (without
   // consumer markup). Aggregated by installIconLoadersForRegistered()
   // across all defined elements. Audited by check-required-icons.mjs
@@ -453,11 +455,11 @@ export class UIColorPicker extends UIFormElement {
       }
       // No regex match — warn once per element so consumers can correct.
       // WeakSet dedup matches v0.5.5 §184 §8 button-ui icon-only pattern.
-      if (!UIColorPicker.#warnedBadParse.has(this)) {
-        UIColorPicker.#warnedBadParse.add(this);
+      if (!UIColorArea.#warnedBadParse.has(this)) {
+        UIColorArea.#warnedBadParse.add(this);
         // eslint-disable-next-line no-console
         console.warn(
-          `<color-picker-ui>: could not parse value=${JSON.stringify(val)}. ` +
+          `<color-area-ui>: could not parse value=${JSON.stringify(val)}. ` +
           `Expected #rrggbb or oklch(L C H) with numeric, NaN, 'none' (CSS L4 ` +
           `powerless), or % channels. Picker is keeping prior state.`,
         );

package/components/color-area/color-area.css

@@ -0,0 +1,185 @@
+/* ADR-0063 (gh#1563) — `color-picker-ui` was a thin alias subclassing
+ * `UIColorArea`; cut in 0.8.43 (gh#1617). `color-area-ui` is the sole tag
+ * now. */
+@scope (color-area-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --color-area-gap:              var(--a-space-2);
+    --color-area-area-height:      10rem;
+    --color-area-area-radius:      var(--a-radius-md);
+    --color-area-track-height:     0.75rem;
+    --color-area-track-radius:     var(--a-radius-full);
+    --color-area-thumb-size:       1.125rem;
+    --color-area-thumb-border:     2px solid var(--a-chrome-border);
+    --color-area-thumb-shadow:     0 0 0 1px var(--a-chrome-ring-subtle), 0 2px 4px var(--a-chrome-shadow-soft);
+    --color-area-font:             var(--a-font-family-code);
+    --color-area-font-size:        var(--a-ui-sm);
+    --color-area-fg:               var(--md-sys-color-neutral-on-surface);
+    --color-area-label-fg:         var(--a-fg-muted);
+    --color-area-border:           var(--md-sys-color-neutral-outline-variant);
+    --color-area-output-bg:        var(--a-bg-muted);
+    --color-area-output-radius:    var(--a-radius-sm);
+    --color-area-fg-disabled:      var(--a-ui-text-disabled);
+
+    /* ── Spacing ── */
+    --color-area-gap-sm:           var(--a-space-1);
+    --color-area-pad-sm:           var(--a-space-2);
+
+    /* ── Interactive ── */
+    --color-area-focus-color:      var(--md-sys-color-primary);
+    --color-area-disabled-border:  var(--md-sys-color-neutral-outline-variant);
+
+    /* ── Transitions ── */
+    --color-area-duration:         var(--a-duration-fast);
+    --color-area-easing:           var(--a-easing);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--color-area-gap);
+    width: 100%;
+  }
+
+  /* ═══════ 2D Color Area ═══════ */
+
+  [data-area] {
+    position: relative;
+    width: 100%;
+    height: var(--color-area-area-height);
+    border-radius: var(--color-area-area-radius);
+    border: 1px solid var(--color-area-border);
+    overflow: hidden;
+    cursor: crosshair;
+    touch-action: none;
+  }
+
+  [data-area]:focus-visible {
+    outline: 2px solid var(--color-area-focus-color);
+    outline-offset: 2px;
+  }
+
+  [data-area] canvas {
+    image-rendering: auto;
+  }
+
+  [data-area-thumb] {
+    position: absolute;
+    width: var(--color-area-thumb-size);
+    height: var(--color-area-thumb-size);
+    border-radius: 50%;
+    border: var(--color-area-thumb-border);
+    box-shadow: var(--color-area-thumb-shadow);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  /* ═══════ Slider Rows (H / C / L) ═══════ */
+
+  [data-sliders] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--color-area-gap-sm);
+  }
+
+  /* ═══════ Hue Track ═══════ */
+
+  [data-hue-track] {
+    position: relative;
+    width: 100%;
+    height: var(--color-area-track-height);
+    border-radius: var(--color-area-track-radius);
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  [data-hue-track]:focus-visible {
+    outline: 2px solid var(--color-area-focus-color);
+    outline-offset: 2px;
+  }
+
+  [data-hue-thumb] {
+    position: absolute;
+    top: 50%;
+    width: var(--color-area-thumb-size);
+    height: var(--color-area-thumb-size);
+    border-radius: 50%;
+    border: var(--color-area-thumb-border);
+    box-shadow: var(--color-area-thumb-shadow);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  /* ═══════ Output Values ═══════ */
+
+  [data-output] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--color-area-gap-sm);
+  }
+
+  [data-output-group] {
+    display: flex;
+    align-items: center;
+    gap: var(--color-area-gap-sm);
+    padding: var(--color-area-gap-sm) var(--color-area-pad-sm);
+    background: var(--color-area-output-bg);
+    border-radius: var(--color-area-output-radius);
+  }
+
+  [data-output-value] {
+    font-family: var(--color-area-font);
+    font-size: var(--color-area-font-size);
+    color: var(--color-area-fg);
+    user-select: all;
+    -webkit-user-select: all;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Copy button */
+  [data-copy] {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--color-area-label-fg);
+    transition: color var(--color-area-duration) var(--color-area-easing);
+  }
+
+  [data-copy]:hover {
+    color: var(--color-area-fg);
+  }
+
+  [data-copy] icon-ui {
+    --a-icon-size: var(--color-area-font-size);
+  }
+
+  /* ═══════ Disabled ═══════ */
+
+  :scope[disabled] {
+    pointer-events: none;
+    color: var(--color-area-fg-disabled);
+  }
+  :scope[disabled] [data-area],
+  :scope[disabled] [data-hue-track] {
+    filter: grayscale(1);
+    cursor: not-allowed;
+  }
+  :scope[disabled] slider-ui {
+    --slider-fill-bg: var(--color-area-disabled-border);
+    --slider-thumb-bg: var(--color-area-disabled-border);
+  }
+  :scope[disabled] [data-output-value] {
+    color: var(--color-area-fg-disabled);
+  }
+}

package/components/color-area/color-area.d.ts

@@ -0,0 +1,66 @@
+/**
+ * `<color-area-ui>` — OKLCH-native color picker with 2D area and H/C/L sliders. Form-associated input emitting OKLCH color strings; canonical color authoring surface in the AdiaUI token system. Use for color input in design tools or theming UIs; for simple color swatches use <swatch-ui> or <color-input-ui> instead. Renamed from `<color-picker-ui>` (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger + popover composite shape; this is the inline substrate, mirroring <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` was cut in 0.8.43 (gh#1617) — this is the sole tag now.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/color-area
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export type ColorAreaChangeEvent = CustomEvent<unknown>;
+export interface ColorAreaConstraintClampEventDetail {
+  /** Array of `{ axis, requested, clamped, reason }` objects. axis is
+one of "l" / "c" / "h". reason names the triggering constraint
+prop. Empty arrays are never emitted.
+ */
+  clamps: unknown[];
+}
+
+export type ColorAreaConstraintClampEvent = CustomEvent<ColorAreaConstraintClampEventDetail>;
+export type ColorAreaInputEvent = CustomEvent<unknown>;
+
+export class UIColorArea extends UIElement {
+  /** Reference hue (degrees) for the [hue-drift-max] constraint. Default
+NaN — falls back to the picker's hue at first commit so the consumer
+can pre-seed the picker and constrain drift from that initial value.
+ */
+  baseHue: number;
+  /** Disables all interaction */
+  disabled: boolean;
+  /** Output format for the value property */
+  format: 'hex' | 'oklch';
+  /** Generation constraint — maximum allowed signed-shortest-path hue
+deviation (degrees) from [base-hue] (or the first-committed hue
+if [base-hue] is unset). Default NaN (no constraint). Wrap-aware
+so a drift of 350 degrees resolves as -10.
+ */
+  hueDriftMax: number;
+  /** Generation constraint (v0.4.9 §99h, FEEDBACK-02 #7) — clamp the
+OKLCH chroma channel to at most this value before commit. Out-of-
+bound mutations round-trip to the nearest in-bound equivalent +
+fire `constraint-clamp`. Default Infinity (no constraint).
+ */
+  maxChroma: number;
+  /** Generation constraint — clamp OKLCH lightness to at most this value (0..1). Default 1 (no constraint). */
+  maxL: number;
+  /** Generation constraint — clamp OKLCH lightness to at least this value (0..1). Default 0 (no constraint). */
+  minL: number;
+  /** Form field name */
+  name: string;
+  /** Current color as hex string */
+  value: string;
+
+  addEventListener(type: 'change', listener: (ev: ColorAreaChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'constraint-clamp', listener: (ev: ColorAreaConstraintClampEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: ColorAreaInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIColorArea, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+}

package/components/color-area/color-area.examples.md

@@ -0,0 +1,19 @@
+# color-area — Examples
+
+## Default
+
+```html
+<color-area-ui></color-area-ui>
+```
+
+## Pre-set Colors
+
+```html
+<color-area-ui value="#3b82f6"></color-area-ui>
+```
+
+## disabled
+
+```html
+<color-area-ui value="#3b82f6" disabled></color-area-ui>
+```

package/components/color-area/color-area.js

@@ -0,0 +1,17 @@
+/**
+ * `<color-area-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIColorArea } from '@adia-ai/web-components/components/color-area/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIColorArea } from './color-area.class.js';
+
+defineIfFree('color-area-ui', UIColorArea);
+
+export { UIColorArea };

package/components/{color-picker/color-picker.yaml → color-area/color-area.yaml}

@@ -1,10 +1,10 @@
 # Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: UIColorPicker
-tag: color-picker-ui
+name: UIColorArea
+tag: color-area-ui
 status: stable
-component: ColorPicker
+component: ColorArea
 category: input
 version: 1
 description: >-
@@ -12,7 +12,11 @@ description: >-
   Form-associated input emitting OKLCH color strings; canonical color
   authoring surface in the AdiaUI token system. Use for color input in
   design tools or theming UIs; for simple color swatches use <swatch-ui>
-  or <color-input-ui> instead.
+  or <color-input-ui> instead. Renamed from `<color-picker-ui>`
+  (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger +
+  popover composite shape; this is the inline substrate, mirroring
+  <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` was cut in
+  0.8.43 (gh#1617) — this is the sole tag now.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
@@ -111,11 +115,13 @@ a2ui:
       reason: 'Canonical color-authoring surface.'
     - rule: 'For simple color swatches (read-only display) use <swatch-ui>; for hex/rgb text input use <color-input-ui>.'
       reason: 'Surface boundary.'
+    - rule: 'Renamed from <color-picker-ui> (ADR-0063, gh#1563); the old tag was cut in 0.8.43 (gh#1617) — ColorArea is the sole tag now.'
+      reason: 'Picker-naming convention: -picker names the outer trigger+popover composite, never the inline substrate.'
     - rule: 'Output format defaults to oklch(); set format= to override (hex, rgb, hsl).'
       reason: 'Format knob.'
 anti_patterns: []
 examples:
-  - name: color-picker-demo
+  - name: color-area-demo
     description: Color picker card with a color picker component for selecting colors with swatches.
     a2ui: >-
       [
@@ -135,11 +141,11 @@ examples:
         },
         {
           "id": "cp",
-          "component": "ColorPicker",
+          "component": "ColorArea",
           "value": "#6366f1"
         }
       ]
-  - name: color-picker-panel
+  - name: color-area-panel
     description: Color picker with swatch selection in a card.
     a2ui: >-
       [
@@ -159,17 +165,19 @@ examples:
         },
         {
           "id": "cp",
-          "component": "ColorPicker",
+          "component": "ColorArea",
           "value": "#3b82f6"
         }
       ]
 keywords:
+  - colorarea
+  - color-area
   - colorpicker
   - color-picker
   - color
   - picker
 synonyms:
-  color-picker: [color-canvas, color-surface, swatch-picker]
+  color-area: [color-canvas, color-surface, swatch-picker, color-picker]
 related:
   - grid
   - button

package/components/color-input/color-input.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/ColorInput.json",
   "title": "ColorInput",
-  "description": "Compact form-bearing color input — opens a popover-anchored\n`<color-picker-ui>` from an inline swatch button. §302 (v0.5.12,\nFEEDBACK-29 re-bucket from v0.6.0). Canonicalizes the USAGE.md §221f\nOption B recipe (popover + button + color-picker) into a single\nform-associated tag for inline form contexts (settings drawer \"source\ncolor\" field, swatch-row inline-edit, etc.).",
+  "description": "Compact form-bearing color input — opens a popover-anchored\n`<color-area-ui>` from an inline swatch button. §302 (v0.5.12,\nFEEDBACK-29 re-bucket from v0.6.0). Canonicalizes the USAGE.md §221f\nOption B recipe (popover + button + color-area) into a single\nform-associated tag for inline form contexts (settings drawer \"source\ncolor\" field, swatch-row inline-edit, etc.). Composes `<color-area-ui>`\n(ADR-0063, gh#1563 — renamed from `<color-picker-ui>`, cut in 0.8.43,\ngh#1617); `color-input-ui`'s own tag/name is unaffected.",
   "type": "object",
   "allOf": [
     {
@@ -41,7 +41,7 @@
       "default": "NaN"
     },
     "maxChroma": {
-      "description": "Generation constraint forwarded to the inner `<color-picker-ui>` (v0.5.13\n§-TBD, FB-33 §1). Clamp the OKLCH chroma channel to at most this value.\nDefault Infinity (no constraint).\n",
+      "description": "Generation constraint forwarded to the inner `<color-area-ui>` (v0.5.13\n§-TBD, FB-33 §1). Clamp the OKLCH chroma channel to at most this value.\nDefault Infinity (no constraint).\n",
       "type": "number",
       "default": "Infinity"
     },
@@ -66,7 +66,7 @@
       "default": false
     },
     "placement": {
-      "description": "Popover placement relative to the trigger. Default `bottom` centers the color-picker panel under the swatch button (ADR-0034 Rule 2 — panel wider than trigger).",
+      "description": "Popover placement relative to the trigger. Default `bottom` centers the color-area panel under the swatch button (ADR-0034 Rule 2 — panel wider than trigger).",
       "type": "string",
       "enum": [
         "top",
@@ -96,7 +96,7 @@
     "composes": [
       "button-ui",
       "popover-ui",
-      "color-picker-ui"
+      "color-area-ui"
     ],
     "events": {
       "change": {
@@ -177,7 +177,7 @@
     "name": "UIColorInput",
     "parts": {},
     "related": [
-      "color-picker",
+      "color-area",
       "popover",
       "button",
       "swatch"

package/components/color-input/color-input.class.js

@@ -17,7 +17,7 @@
  *
  * Compact form-bearing color input. §302 (v0.5.12, FEEDBACK-29 re-bucket).
  *
- * Canonicalizes the USAGE.md §221f recipe (popover + button + color-picker)
+ * Canonicalizes the USAGE.md §221f recipe (popover + button + color-area)
  * into a single form-associated tag. Builds its inner DOM in `connected()`
  * as light-DOM children:
  *
@@ -27,10 +27,13 @@
  *         <span class="color-input__swatch"></span>
  *         <span class="color-input__value"></span>
  *       </button-ui>
- *       <color-picker-ui slot="content"></color-picker-ui>
+ *       <color-area-ui slot="content"></color-area-ui>
  *     </popover-ui>
  *   </color-input-ui>
  *
+ * Composes `<color-area-ui>` (ADR-0063, gh#1563 — renamed from
+ * `<color-picker-ui>`, cut in 0.8.43, gh#1617).
+ *
  * Form-associated via UIFormElement + ElementInternals.
  */
 
@@ -44,7 +47,7 @@ export class UIColorInput extends UIFormElement {
       format:      { type: String,  default: 'hex', reflect: true },
       placement:   { type: String,  default: 'bottom', reflect: true }, // ADR-0034 Rule 2: color picker panel >> swatch trigger
       open:        { type: Boolean, default: false, reflect: true },
-      // Generation-constraint props forwarded to the inner <color-picker-ui>.
+      // Generation-constraint props forwarded to the inner <color-area-ui>.
       // v0.5.13 §-TBD (FB-33 §1) — full parity with color-picker's 5 constraint
       // props (`maxChroma` / `maxL` / `minL` / `hueDriftMax` / `baseHue`) so
       // <color-input-ui> adoption doesn't force a UX regression on consumers
@@ -105,7 +108,7 @@ export class UIColorInput extends UIFormElement {
     if (this.firstElementChild) {
       this.#popover = this.querySelector(':scope > popover-ui');
       this.#button = this.querySelector(':scope > popover-ui > button-ui[slot="trigger"]');
-      this.#picker = this.querySelector(':scope > popover-ui > color-picker-ui[slot="content"]');
+      this.#picker = this.querySelector(':scope > popover-ui > color-area-ui[slot="content"]');
       this.#swatch = this.querySelector('.color-input__swatch');
       this.#valueLabel = this.querySelector('.color-input__value');
       if (this.#popover && this.#button && this.#picker) return;
@@ -130,7 +133,7 @@ export class UIColorInput extends UIFormElement {
 
     button.append(swatch, valueLabel);
 
-    const picker = document.createElement('color-picker-ui');
+    const picker = document.createElement('color-area-ui');
     picker.setAttribute('slot', 'content');
     picker.setAttribute('format', this.format);
     picker.setAttribute('value', this.value);
@@ -197,7 +200,7 @@ export class UIColorInput extends UIFormElement {
     this.#syncFromValue();
     // Forward the inner picker's parsed OKLCH channel scalars (v0.5.13 §-TBD,
     // FB-33 §1-adjacent). Consumers writing OKLCH-native logic get the parsed
-    // {l, c, h} for free, matching <color-picker-ui>'s detail shape.
+    // {l, c, h} for free, matching <color-area-ui>'s detail shape.
     this.dispatchEvent(new CustomEvent(kind, {
       bubbles: true,
       composed: true,

package/components/color-input/color-input.css

@@ -2,7 +2,7 @@
  * <color-input-ui> — compact form-bearing color input.
  *
  * §302 (v0.5.12, FEEDBACK-29 re-bucket). Light-DOM composition of
- * <popover-ui> + <button-ui> + <color-picker-ui>. The host element
+ * <popover-ui> + <button-ui> + <color-area-ui>. The host element
  * carries form-control sizing tokens; inner button + popover keep
  * their own primitive styling.
  */

package/components/color-input/color-input.js

@@ -7,12 +7,12 @@
  *   import { UIColorInput } from '@adia-ai/web-components/components/color-input/class';
  *
  * Per ADR-0027, this module does NOT auto-import the composed primitives
- * (`<popover-ui>`, `<button-ui>`, `<color-picker-ui>`). Consumers must
+ * (`<popover-ui>`, `<button-ui>`, `<color-area-ui>`). Consumers must
  * register them explicitly before mounting `<color-input-ui>`:
  *
  *   import '@adia-ai/web-components/components/popover';
  *   import '@adia-ai/web-components/components/button';
- *   import '@adia-ai/web-components/components/color-picker';
+ *   import '@adia-ai/web-components/components/color-area';
  *   import '@adia-ai/web-components/components/color-input';
  *
  * @see ../../USAGE.md#registration--auto-vs-explicit

package/components/color-input/color-input.yaml

@@ -7,20 +7,22 @@ category: input
 version: 1
 description: |-
   Compact form-bearing color input — opens a popover-anchored
-  `<color-picker-ui>` from an inline swatch button. §302 (v0.5.12,
+  `<color-area-ui>` from an inline swatch button. §302 (v0.5.12,
   FEEDBACK-29 re-bucket from v0.6.0). Canonicalizes the USAGE.md §221f
-  Option B recipe (popover + button + color-picker) into a single
+  Option B recipe (popover + button + color-area) into a single
   form-associated tag for inline form contexts (settings drawer "source
-  color" field, swatch-row inline-edit, etc.).
+  color" field, swatch-row inline-edit, etc.). Composes `<color-area-ui>`
+  (ADR-0063, gh#1563 — renamed from `<color-picker-ui>`, cut in 0.8.43,
+  gh#1617); `color-input-ui`'s own tag/name is unaffected.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. The consumer (or demo shell) explicitly imports
 # the composed primitives. This element creates `<button-ui>` +
-# `<popover-ui>` + `<color-picker-ui>` light-DOM children but assumes the
+# `<popover-ui>` + `<color-area-ui>` light-DOM children but assumes the
 # consumer has already imported their auto-register modules.
 composes:
   - button-ui
   - popover-ui
-  - color-picker-ui
+  - color-area-ui
 props:
   name:
     description: Form field name.
@@ -44,7 +46,7 @@ props:
     default: false
     reflect: true
   placement:
-    description: Popover placement relative to the trigger. Default `bottom` centers the color-picker panel under the swatch button (ADR-0034 Rule 2 — panel wider than trigger).
+    description: Popover placement relative to the trigger. Default `bottom` centers the color-area panel under the swatch button (ADR-0034 Rule 2 — panel wider than trigger).
     type: string
     default: bottom
     reflect: true
@@ -64,7 +66,7 @@ props:
     reflect: true
   maxChroma:
     description: |
-      Generation constraint forwarded to the inner `<color-picker-ui>` (v0.5.13
+      Generation constraint forwarded to the inner `<color-area-ui>` (v0.5.13
       §-TBD, FB-33 §1). Clamp the OKLCH chroma channel to at most this value.
       Default Infinity (no constraint).
     type: number
@@ -146,7 +148,7 @@ a2ui:
   rules:
     - >-
       Use <color-input-ui> for any form-row color field — it
-      canonicalizes the popover + button + color-picker recipe and is
+      canonicalizes the popover + button + color-area recipe and is
       the only form-bearing color primitive. Do not hand-roll the
       composition; reach for color-input-ui directly.
     - >-
@@ -158,17 +160,17 @@ a2ui:
     - >-
       For brand-palette constraints, set [maxChroma] / [minL] / [maxL]
       / [hueDriftMax] (with [baseHue]) on the host — they forward to
-      the inner <color-picker-ui> and clamp generation. Useful for
+      the inner <color-area-ui> and clamp generation. Useful for
       Tokens-Studio-style guarded color generation.
     - >-
-      Use <color-picker-ui> DIRECTLY (no color-input-ui wrapper) only
+      Use <color-area-ui> DIRECTLY (no color-input-ui wrapper) only
       for full-surface editors where the picker IS the page (e.g.
       Tokens Studio main canvas). For inline form-row use, always
       reach for <color-input-ui>.
     - >-
       Per ADR-0027 (cross-primitive composition imports), consumer
       pages MUST explicitly import <button-ui>, <popover-ui>, and
-      <color-picker-ui> before <color-input-ui>. The primitive composes
+      <color-area-ui> before <color-input-ui>. The primitive composes
       them but does NOT auto-register them.
 anti_patterns: []
 examples:
@@ -209,7 +211,7 @@ synonyms:
   inline-color-picker:
     - color-input
 related:
-  - color-picker
+  - color-area
   - popover
   - button
   - swatch

package/components/description-list/description-list.a2ui.json

@@ -18,7 +18,7 @@
       "$ref": "common_types.json#/$defs/DynamicStringList"
     },
     "align": {
-      "description": "Alignment for inline layout. `start` (default): term and value pack to the term column edge. `between`: term left, value right-aligned with `text-align: end`. `stretch`: value fills the remaining track width (e.g. for a `<slider-ui>` / `<select-ui>` / `<color-picker-ui>` as `<dd>` that should span the full row). Sets `justify-self: stretch` and `width: 100%` on `dd` so block-level form controls inside reach the column edge rather than shrink-wrapping to content.\n",
+      "description": "Alignment for inline layout. `start` (default): term and value pack to the term column edge. `between`: term left, value right-aligned with `text-align: end`. `stretch`: value fills the remaining track width (e.g. for a `<slider-ui>` / `<select-ui>` / `<color-area-ui>` as `<dd>` that should span the full row). Sets `justify-self: stretch` and `width: 100%` on `dd` so block-level form controls inside reach the column edge rather than shrink-wrapping to content.\n",
       "type": "string",
       "enum": [
         "start",

package/components/description-list/description-list.css

@@ -88,7 +88,7 @@
 
   /* §-TBD (v0.5.19, FB-51 #3): align="stretch" lets dd fill the
      remaining inline-grid track width. Useful when dd hosts a block-
-     level form control (slider-ui / select-ui / color-picker-ui) that
+     level form control (slider-ui / select-ui / color-area-ui) that
      would otherwise shrink-wrap to content. width:100% on direct
      children reaches block controls that have their own inline-flex
      :scope rule (e.g. <slider-ui>) so they stretch to track width. */

package/components/description-list/description-list.d.ts

@@ -15,7 +15,7 @@ import { UIElement } from '../../core/element.js';
 export class UIDescriptionList extends UIElement {
   /** Optional JSON array of {term, description} — alternative to declarative <dt>/<dd> children */
   items: string;
-  /** Alignment for inline layout. `start` (default): term and value pack to the term column edge. `between`: term left, value right-aligned with `text-align: end`. `stretch`: value fills the remaining track width (e.g. for a `<slider-ui>` / `<select-ui>` / `<color-picker-ui>` as `<dd>` that should span the full row). Sets `justify-self: stretch` and `width: 100%` on `dd` so block-level form controls inside reach the column edge rather than shrink-wrapping to content.
+  /** Alignment for inline layout. `start` (default): term and value pack to the term column edge. `between`: term left, value right-aligned with `text-align: end`. `stretch`: value fills the remaining track width (e.g. for a `<slider-ui>` / `<select-ui>` / `<color-area-ui>` as `<dd>` that should span the full row). Sets `justify-self: stretch` and `width: 100%` on `dd` so block-level form controls inside reach the column edge rather than shrink-wrapping to content.
  */
   align: 'start' | 'between' | 'stretch';
   /** stacked: term above description. inline: term and description on one row. */