@adia-ai/web-components 0.8.41 → 0.8.42

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>`, which is now a
+  deprecated alias); `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/color-picker/color-picker.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/ColorPicker.json",
   "title": "ColorPicker",
-  "description": "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.",
+  "description": "DEPRECATED (ADR-0063, gh#1563, gh#1377 B11) — `-picker` is reserved for the outer, trigger + popover, form-associated composite shape (`calendar-picker-ui` / `date-range-picker-ui` / `datetime-picker-ui` / `time-picker-ui`); `color-picker-ui` was the sole violator, playing `calendar-grid-ui`'s inline-substrate role under a `-picker` name. `<color-picker-ui>` is now a thin `UIColorArea` subclass (see color-picker.class.js) rather than an independent implementation — every prop/event/token is inherited unchanged from `<color-area-ui>`. Existing markup keeps working, but new markup should reach for `<color-area-ui>` directly. See `<color-area-ui>` for the full contract.",
   "type": "object",
   "allOf": [
     {
@@ -71,7 +71,13 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
-    "anti_patterns": [],
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"ColorArea\", \"name\": \"brand\"}\n",
+        "why": "ColorPicker is deprecated (ADR-0063, gh#1563) — new generation should\nreach for ColorArea instead.\n",
+        "wrong": "{\"component\": \"ColorPicker\", \"name\": \"brand\"}\n"
+      }
+    ],
     "category": "input",
     "composes": [
       "slider-ui"
@@ -95,14 +101,9 @@
     },
     "examples": [
       {
-        "description": "Color picker card with a color picker component for selecting colors with swatches.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"cp\"\n    ]\n  },\n  {\n    \"id\": \"cp\",\n    \"component\": \"ColorPicker\",\n    \"value\": \"#6366f1\"\n  }\n]",
-        "name": "color-picker-demo"
-      },
-      {
-        "description": "Color picker with swatch selection in a card.",
+        "description": "Deprecated tag — prefer ColorArea's own \"color-area-demo\" example for NEW markup.",
         "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"cp\"\n    ]\n  },\n  {\n    \"id\": \"cp\",\n    \"component\": \"ColorPicker\",\n    \"value\": \"#3b82f6\"\n  }\n]",
-        "name": "color-picker-panel"
+        "name": "color-picker-legacy"
       }
     ],
     "keywords": [
@@ -114,6 +115,7 @@
     "name": "UIColorPicker",
     "parts": {},
     "related": [
+      "color-area",
       "grid",
       "button"
     ],
@@ -129,17 +131,18 @@
         "name": "disabled"
       }
     ],
-    "status": "stable",
+    "status": "deprecated",
     "synonyms": {
       "color-picker": [
         "color-canvas",
         "color-surface",
-        "swatch-picker"
+        "swatch-picker",
+        "color-area"
       ]
     },
     "tag": "color-picker-ui",
     "tokens": {},
     "traits": [],
-    "version": 1
+    "version": 2
   }
 }