@adia-ai/web-components 0.8.42 → 0.8.44

package/patterns/conversion-funnel/conversion-funnel.html

@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="../../components/button/button.css">
   <link rel="stylesheet" href="../../components/card/card.css">
   <link rel="stylesheet" href="../../components/col/col.css">
-  <link rel="stylesheet" href="../../components/progress-row/progress-row.css">
+  <link rel="stylesheet" href="../../components/progress/progress.css">
   <link rel="stylesheet" href="../../components/row/row.css">
   <link rel="stylesheet" href="../../components/segment/segment.css">
   <link rel="stylesheet" href="../../components/segmented/segmented.css">
@@ -26,7 +26,7 @@
   <script type="module" src="../../components/button/button.js"></script>
   <script type="module" src="../../components/card/card.js"></script>
   <script type="module" src="../../components/col/col.js"></script>
-  <script type="module" src="../../components/progress-row/progress-row.js"></script>
+  <script type="module" src="../../components/progress/progress.js"></script>
   <script type="module" src="../../components/row/row.js"></script>
   <script type="module" src="../../components/segment/segment.js"></script>
   <script type="module" src="../../components/segmented/segmented.js"></script>

package/patterns/data-tables-inline-edit-and-tree/data-tables-inline-edit-and-tree.examples.html

@@ -33,7 +33,7 @@
         <header>
           <span slot="heading" variant="section">Pricing matrix</span>
           <text-ui slot="description" color="subtle">12 rows · 1 unsaved</text-ui>
-          <button-ui slot="action" text="Add row" variant="ghost" size="sm" icon-leading="plus"></button-ui>
+          <button-ui slot="action" text="Add row" variant="ghost" size="sm" icon="plus"></button-ui>
         </header>
         <section bleed>
           <!-- A real <table> in <table-ui frameless raw> (consumer-owns-body mode) gives
@@ -90,7 +90,7 @@
           <span slot="heading" variant="section">Inventory — Q4 forecast</span>
           <text-ui slot="description" color="subtle">Auto-saving · 3 cells dirty</text-ui>
           <row-ui slot="action" gap="2">
-            <button-ui text="Undo" variant="ghost" size="sm" icon-leading="arrow-counter-clockwise"></button-ui>
+            <button-ui text="Undo" variant="ghost" size="sm" icon="arrow-counter-clockwise"></button-ui>
             <button-ui text="Save now" variant="primary" size="sm"></button-ui>
           </row-ui>
         </header>

package/patterns/diff-review/diff-review.examples.html

@@ -109,22 +109,22 @@
             <dt>Workspace name</dt>
             <dd>
               <row-ui gap="2" align="center">
-                <tag-ui variant="danger" icon-leading="minus">Adia</tag-ui>
-                <tag-ui variant="success" icon-leading="plus">Adia AI</tag-ui>
+                <tag-ui variant="danger">Adia</tag-ui>
+                <tag-ui variant="success">Adia AI</tag-ui>
               </row-ui>
             </dd>
             <dt>Default theme</dt>
             <dd>
               <row-ui gap="2" align="center">
-                <tag-ui variant="danger" icon-leading="minus">light</tag-ui>
-                <tag-ui variant="success" icon-leading="plus">auto</tag-ui>
+                <tag-ui variant="danger">light</tag-ui>
+                <tag-ui variant="success">auto</tag-ui>
               </row-ui>
             </dd>
             <dt>Member invites</dt>
             <dd>
               <row-ui gap="2" align="center">
-                <tag-ui variant="danger" icon-leading="minus">Admin only</tag-ui>
-                <tag-ui variant="success" icon-leading="plus">Anyone with link</tag-ui>
+                <tag-ui variant="danger">Admin only</tag-ui>
+                <tag-ui variant="success">Anyone with link</tag-ui>
               </row-ui>
             </dd>
           </description-list-ui>

package/patterns/editor-shell/editor-shell.examples.html

@@ -42,7 +42,7 @@
 
   <!-- Leading sidebar — layer tree / outline / file browser -->
   <editor-sidebar slot="leading" collapsible persist="structure">
-    <pane-ui side="leading" resizable size="sm">
+    <pane-ui edge="leading" resizable size="sm">
       <header>Layers</header>
       <section>
         <tree-ui>...</tree-ui>
@@ -67,7 +67,7 @@
 
   <!-- Trailing sidebar (optional) — inspector / properties panel -->
   <editor-sidebar slot="trailing" collapsible persist="inspector">
-    <pane-ui side="trailing" resizable size="sm">
+    <pane-ui edge="trailing" resizable size="sm">
       <header>Inspector</header>
       <section>
         <field-ui label="Width"><input-ui type="number"></input-ui></field-ui>
@@ -121,7 +121,7 @@
   <h2 variant="section">Authoring rules</h2>
   <ul>
     <li><strong>Cluster-namespaced children only.</strong> Inside <code>&lt;editor-shell&gt;</code>: <code>&lt;editor-toolbar&gt;</code>, <code>&lt;editor-sidebar&gt;</code>, <code>&lt;editor-canvas&gt;</code>, <code>&lt;editor-statusbar&gt;</code>. Don't author raw <code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code>, <code>&lt;div data-editor-body&gt;</code>, <code>&lt;div data-canvas&gt;</code> — retired in v0.4.0.</li>
-    <li><strong>Each sidebar wraps a <code>&lt;pane-ui&gt;</code>.</strong> The pane owns resize; the sidebar owns slot positioning + collapse + persist. <code>&lt;pane-ui side="leading|trailing"&gt;</code> is required so the resize handle lands on the correct edge.</li>
+    <li><strong>Each sidebar wraps a <code>&lt;pane-ui&gt;</code>.</strong> The pane owns resize; the sidebar owns slot positioning + collapse + persist. <code>&lt;pane-ui edge="leading|trailing"&gt;</code> is required so the resize handle lands on the correct edge.</li>
     <li><strong>Canvas reflects <code>[empty]</code>.</strong> Use <code>:has(editor-canvas[empty])</code> to style the shell differently when nothing's open.</li>
     <li><strong>Focus mode is one attribute.</strong> Setting <code>focus-mode</code> on the shell propagates to <code>[full-screen]</code> on the canvas and <code>[focused]</code> on the active sidebar — no JS coordination needed.</li>
   </ul>

package/patterns/export-flow/export-flow.examples.html

@@ -45,7 +45,7 @@
         </section>
         <footer divider>
           <button-ui slot="action" text="Cancel" variant="ghost"></button-ui>
-          <button-ui id="export-sync-submit" slot="action" text="Download CSV" variant="primary" icon-leading="download-simple"></button-ui>
+          <button-ui id="export-sync-submit" slot="action" text="Download CSV" variant="primary" icon="download-simple"></button-ui>
         </footer>
       </card-ui>
     </div>
@@ -134,7 +134,7 @@
         </section>
         <footer divider>
           <button-ui slot="action" text="Cancel" variant="ghost"></button-ui>
-          <button-ui id="export-delivery-submit" slot="action" text="Download PDF" variant="primary" icon-leading="download-simple"></button-ui>
+          <button-ui id="export-delivery-submit" slot="action" text="Download PDF" variant="primary" icon="download-simple"></button-ui>
         </footer>
       </card-ui>
     </div>

package/patterns/filter-bar/filter-bar.examples.html

@@ -35,7 +35,7 @@
         <span data-spacer></span>
         <button-ui text="Clear all" variant="ghost" size="sm"></button-ui>
       </row-ui>
-      <popover-ui id="pat-filter-menu" anchor="previous">
+      <popover-ui id="pat-filter-menu">
         <action-list-ui>
           <action-item-ui icon="flag" text="Status" value="status"></action-item-ui>
           <action-item-ui icon="user" text="Owner" value="owner"></action-item-ui>
@@ -111,7 +111,7 @@
   &lt;button-ui text="Clear all" variant="ghost"&gt;&lt;/button-ui&gt;
 &lt;/row-ui&gt;
 
-&lt;popover-ui id="filter-menu" anchor="previous"&gt;
+&lt;popover-ui id="filter-menu"&gt;
   &lt;action-list-ui&gt;...facets...&lt;/action-list-ui&gt;
 &lt;/popover-ui&gt;</code-ui>
 </section>

package/patterns/forms-conditional-and-autocomplete/forms-conditional-and-autocomplete.examples.html

@@ -81,7 +81,7 @@
         <section>
           <col-ui gap="2">
             <field-ui label="Search address" hint="Start typing — we'll suggest matches">
-              <input-ui name="address_query" placeholder="123 Main St" icon-leading="map-pin" value="500 market"></input-ui>
+              <input-ui name="address_query" placeholder="123 Main St" prefix="map-pin" value="500 market"></input-ui>
             </field-ui>
             <card-ui raw style="max-width: 100%;" data-shape="popover">
               <section>
@@ -133,7 +133,7 @@
         data-chunk-keywords="address fields street apt suite city state zip postal form expanded manual billing shipping layout" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Address details</span>
-          <button-ui slot="action" text="Search again" variant="ghost" size="sm" icon-leading="arrow-counter-clockwise"></button-ui>
+          <button-ui slot="action" text="Search again" variant="ghost" size="sm" icon="arrow-counter-clockwise"></button-ui>
         </header>
         <section>
           <col-ui gap="3">

package/patterns/inline-dialog/inline-dialog.examples.html

@@ -25,7 +25,7 @@
           data-chunk-domain="overlay"
           data-chunk-description="Inline rename popover — a Rename trigger opens an anchored mini-dialog card with a new-name input and Cancel / Save actions; no modal needed for a one-field edit."
           data-chunk-keywords="inline dialog rename popover anchored file name input save cancel mini one-field edit quick" placement="bottom-start">
-          <button-ui slot="trigger" text="Rename" variant="ghost" size="sm" icon-leading="pencil-simple"></button-ui>
+          <button-ui slot="trigger" text="Rename" variant="ghost" size="sm" icon="pencil-simple"></button-ui>
           <card-ui slot="content" style="min-width: 320px;">
             <header>
               <span slot="heading" variant="section">Rename file</span>
@@ -120,7 +120,7 @@
             </section>
             <footer divider>
               <button-ui slot="action" text="Cancel" variant="ghost" data-popover-close></button-ui>
-              <button-ui slot="action" text="Schedule" variant="primary" icon-leading="clock"></button-ui>
+              <button-ui slot="action" text="Schedule" variant="primary" icon="clock"></button-ui>
             </footer>
           </card-ui>
         </popover-ui>

package/patterns/marketing-engagement/marketing-engagement.examples.html

@@ -100,11 +100,11 @@
         <section>
           <col-ui gap="3">
             <field-ui label="Your referral link">
-              <input-ui name="referral_url" value="adia.ai/r/kim-A4F92" readonly icon-trailing="copy"></input-ui>
+              <input-ui name="referral_url" value="adia.ai/r/kim-A4F92" readonly suffix="copy"></input-ui>
             </field-ui>
             <row-ui gap="2">
-              <button-ui text="Copy link" variant="primary" icon-leading="copy"></button-ui>
-              <button-ui text="Email" variant="ghost" icon-leading="envelope"></button-ui>
+              <button-ui text="Copy link" variant="primary" icon="copy"></button-ui>
+              <button-ui text="Email" variant="ghost" icon="envelope"></button-ui>
               <button-ui text="X" variant="ghost"></button-ui>
               <button-ui text="LinkedIn" variant="ghost"></button-ui>
             </row-ui>
@@ -265,7 +265,7 @@
         </section>
         <footer divider>
           <button-ui slot="action" text="Keep going" variant="ghost"></button-ui>
-          <button-ui slot="action" text="Share" variant="primary" icon-leading="share-network"></button-ui>
+          <button-ui slot="action" text="Share" variant="primary" icon="share-network"></button-ui>
         </footer>
       </card-ui>
     </div>

package/patterns/notifications-bell-and-digest/notifications-bell-and-digest.examples.html

@@ -138,7 +138,7 @@
         <header>
           <span slot="heading" variant="section">Weekly digest preview</span>
           <text-ui slot="description" color="subtle">This is what your Monday morning email will contain</text-ui>
-          <button-ui slot="action" text="Send test" variant="ghost" size="sm" icon-leading="paper-plane-tilt"></button-ui>
+          <button-ui slot="action" text="Send test" variant="ghost" size="sm" icon="paper-plane-tilt"></button-ui>
         </header>
         <section>
           <col-ui gap="4">

package/patterns/permissions-matrix/permissions-matrix.examples.html

@@ -30,7 +30,7 @@
         <header>
           <span slot="heading" variant="section">Permissions</span>
           <text-ui slot="description" color="subtle">Changes save automatically</text-ui>
-          <button-ui slot="action" text="Add custom role" variant="ghost" size="sm" icon-leading="plus"></button-ui>
+          <button-ui slot="action" text="Add custom role" variant="ghost" size="sm" icon="plus"></button-ui>
         </header>
         <section bleed>
           <table-ui frameless id="pat-perm-matrix"></table-ui>

package/patterns/permissions-sharing/permissions-sharing.examples.html

@@ -59,7 +59,7 @@
           <col-ui gap="3">
             <row-ui gap="2" align="center">
               <input-ui readonly value="https://acme.app/d/8421-revenue-q2" style="flex: 1;"></input-ui>
-              <button-ui text="Copy" variant="primary" icon-leading="copy"></button-ui>
+              <button-ui text="Copy" variant="primary" icon="copy"></button-ui>
             </row-ui>
             <row-ui gap="3" align="center">
               <field-ui label="Expires" inline>
@@ -88,7 +88,7 @@
           </col-ui>
         </section>
         <footer divider>
-          <button-ui slot="action" text="Revoke link" variant="ghost" color="danger" size="sm" icon-leading="x"></button-ui>
+          <button-ui slot="action" text="Revoke link" variant="ghost" color="danger" size="sm" icon="x"></button-ui>
         </footer>
       </card-ui>
     </div>

package/patterns/profile-public-and-verification/profile-public-and-verification.examples.html

@@ -38,13 +38,13 @@
               <col-ui gap="1" grow>
                 <row-ui gap="2" align="center">
                   <text-ui strong size="lg">Kim Granlund</text-ui>
-                  <tag-ui variant="primary" icon-leading="seal-check">Verified</tag-ui>
+                  <tag-ui variant="primary">Verified</tag-ui>
                 </row-ui>
                 <text-ui color="subtle">Founder · AdiaUI · Reykjavík, IS</text-ui>
                 <text-ui>Building the AdiaUI web-components library and the A2UI generative-UI runtime. Previously at Construct, before that at Modular.</text-ui>
                 <row-ui gap="2" style="margin-top: 0.5rem;">
                   <button-ui text="Follow" variant="primary" size="sm"></button-ui>
-                  <button-ui text="Message" variant="ghost" size="sm" icon-leading="chat-circle"></button-ui>
+                  <button-ui text="Message" variant="ghost" size="sm" icon="chat-circle"></button-ui>
                   <button-ui icon="dots-three" variant="ghost" size="sm" aria-label="More"></button-ui>
                 </row-ui>
               </col-ui>
@@ -178,7 +178,7 @@
         <header>
           <span slot="heading" variant="section">
             You're verified
-            <tag-ui variant="primary" icon-leading="seal-check">Verified</tag-ui>
+            <tag-ui variant="primary">Verified</tag-ui>
           </span>
         </header>
         <section>
@@ -205,7 +205,7 @@
           </alert-ui>
         </section>
         <footer divider>
-          <button-ui slot="action" text="Try again" variant="primary" icon-leading="arrow-counter-clockwise"></button-ui>
+          <button-ui slot="action" text="Try again" variant="primary" icon="arrow-counter-clockwise"></button-ui>
           <button-ui slot="action" text="Contact support" variant="ghost"></button-ui>
         </footer>
       </card-ui>

package/patterns/search-discovery/search-discovery.examples.html

@@ -169,7 +169,7 @@
           </list-ui>
         </section>
         <footer divider>
-          <button-ui slot="action" text="Clear all recents" variant="ghost" size="sm" icon-leading="trash"></button-ui>
+          <button-ui slot="action" text="Clear all recents" variant="ghost" size="sm" icon="trash"></button-ui>
         </footer>
       </card-ui>
     </div>
@@ -188,7 +188,7 @@
         <header>
           <span slot="heading" variant="section">Saved views</span>
           <text-ui slot="description" color="subtle">5 views · last edited 2 days ago</text-ui>
-          <button-ui slot="action" text="Save current view" variant="primary" size="sm" icon-leading="bookmark-simple"></button-ui>
+          <button-ui slot="action" text="Save current view" variant="primary" size="sm" icon="bookmark-simple"></button-ui>
         </header>
         <section bleed>
           <list-ui divider contained>

package/styles/colors/semantics/features.css

@@ -60,7 +60,14 @@
   --a-ui-bg-hover:         var(--a-canvas-0-scrim);
   --a-ui-bg-active:        var(--a-canvas-0);
   --a-ui-bg-selected:      var(--a-bg-selected);
-  --a-ui-bg-disabled:      var(--a-canvas-1);
+  /* gh#1596 (2026-08-17): was --a-canvas-1 (a surface-ladder tint) — a
+     disabled filled control (button/input/textarea/otp-input/upload/tag,
+     each via their own --<component>-bg-disabled indirection below) still
+     read as a "dimmed active control" rather than inert. Container-low is
+     the same 10%-tint role --a-bg-hover/--a-bg-muted already use for
+     rest-state de-emphasis (semantics/core.css) — disabled rides that same
+     ladder instead of a one-off surface tint. */
+  --a-ui-bg-disabled:      var(--md-sys-color-neutral-container-low);
   --a-ui-bg-invalid:       var(--a-danger-muted);
 
   --a-ui-text:             var(--a-fg-strong);

package/styles/components.css

@@ -43,7 +43,6 @@
 @import "../components/breadcrumb/breadcrumb.css";
 @import "../components/command/command.css";
 @import "../components/color-area/color-area.css";
-@import "../components/color-picker/color-picker.css";
 @import "../components/color-input/color-input.css";
 @import "../components/noodles/noodles.css";
 @import "../components/table/table.css";
@@ -101,16 +100,13 @@
 @import "../components/image/image.css";
 @import "../components/search/search.css";
 @import "../components/stat/stat.css";
-@import "../components/progress-row/progress-row.css";
 @import "../components/action-list/action-list.css";
 @import "../components/empty-state/empty-state.css";
 @import "../components/calendar-grid/calendar-grid.css";
 @import "../components/calendar-picker/calendar-picker.css";
-@import "../components/datetime-picker/datetime-picker.css";
 @import "../components/embed/embed.css";
 @import "../components/block/block.css";
 @import "../components/text/text.css";
-@import "../components/toggle-group/toggle-group.css";
 @import "../components/toggle-scheme/toggle-scheme.css";
 @import "../components/demo-toggle/demo-toggle.css";
 @import "../components/richtext/richtext.css";

package/styles/type/roles.css

@@ -67,9 +67,17 @@
      ORIENT — tell the reader where they are
      ────────────────────────────────────── */
 
-  /* kicker — short label above a title (eyebrow/overline) */
-  --a-kicker-family: var(--a-font-family-ui);
-  --a-kicker-weight: var(--a-weight-semibold);
+  /* kicker — short label above a title (eyebrow/overline)
+     gh#1718: mono stack at regular (400) weight — operator-ruled
+     component-level change (was UI-sans / semibold). Applies wherever
+     the [variant="kicker"] global attribute grammar reads this token
+     (styles/type/roles.css's own @layer utilities block below) —
+     text-ui, menu-ui's group-header kicker styling, and any other
+     variant="kicker" consumer, since the L3 role token is the single
+     shared source of truth for this role (roles.css §"[variant]
+     attribute API"). */
+  --a-kicker-family: var(--a-font-family-code);
+  --a-kicker-weight: var(--a-weight-normal);
   --a-kicker-sm: 11px;
   --a-kicker-md: 12px;
   --a-kicker-lg: 13px;
@@ -81,9 +89,13 @@
   --a-kicker-mbs: 0;
   --a-kicker-mbe: 0.5em;
 
-  /* label — UI labels, form fields, badges, tabs */
-  --a-label-family: var(--a-font-family-ui);
-  --a-label-weight: var(--a-weight-medium);
+  /* label — UI labels, form fields, badges, tabs
+     gh#1718: mono stack at regular (400) weight — operator-ruled
+     component-level change (was UI-sans / medium). Shared L3 token —
+     see the kicker note above on why this reaches every
+     [variant="label"] consumer, not text-ui alone. */
+  --a-label-family: var(--a-font-family-code);
+  --a-label-weight: var(--a-weight-normal);
   --a-label-sm: 11px;
   --a-label-md: 12px;
   --a-label-lg: 13px;
@@ -131,9 +143,17 @@
      DIVIDE — break flow into chunks
      ────────────────────────────────────── */
 
-  /* section — h2/h3, major division within content */
-  --a-section-family: var(--a-font-family-heading);
-  --a-section-weight: var(--a-weight-semibold);
+  /* section — h2/h3, major division within content
+     gh#1718: mono stack like kicker, but at 500 weight — operator-ruled
+     component-level change (was heading-family / semibold). Shared L3
+     token — also reaches richtext-ui's h2 weight (richtext.css aliases
+     --richtext-h2-weight to this token) via the same single-source
+     design; nav/nav-item/nav-group's OWN [variant="section"] is
+     structural, not typographic, and is already excluded from this
+     token's global attribute rule (roles.css's [variant="section"]
+     utility, `:not(nav-ui, nav-item-ui, nav-group-ui)`). */
+  --a-section-family: var(--a-font-family-code);
+  --a-section-weight: var(--a-weight-medium);
   --a-section-sm: 16px;
   --a-section-md: 17px;
   --a-section-lg: 19px;

package/traits/arrow-grid-nav/arrow-grid-nav.js

@@ -27,7 +27,7 @@ export const arrowGridNav = defineTrait({
   attributes: ['data-arrow-grid-nav-active', 'data-grid-active-row', 'data-grid-active-col'],
   events: ['grid-activate', 'grid-edge', 'grid-cell-change'],
   config: ['data-grid-columns', 'data-grid-mode'],
-  prefixes: ['grid'], // ADR-0060 — grandfathered; grazes chart/heatmap's bare `data-grid` anatomy marker (burn-down, not a fail)
+  prefixes: ['grid'], // ADR-0060 — grandfathered; the historical `data-grid` graze (admin-shell's layout helper) was renamed away at the 0.9.0 rename-wave cut (docs/ops/plan/plan-090-rename-wave.md W3, gh#1562) — KNOWN_GRAZING_PAIRS is now empty
   setup({ host }) {
     let activeRow = 0;
     let activeCol = 0;

package/traits/resize-observer/resize-observer.js

@@ -7,7 +7,7 @@ export const resizeObserver = defineTrait({
   attributes: ['data-resize-observer-observed', 'data-resize-width', 'data-resize-height'],
   events: ['element-resize'],
   config: [],
-  prefixes: ['resize'], // ADR-0060 — grandfathered; grazes shells' bare `data-resize` drag handle + table's `data-resize-handle` (burn-down, not a fail)
+  prefixes: ['resize'], // ADR-0060 — grandfathered; table's `data-resize-handle` graze was renamed away in gh#1332, and shells' `data-resize` graze was renamed away at the 0.9.0 rename-wave cut (docs/ops/plan/plan-090-rename-wave.md W3, gh#1562) — KNOWN_GRAZING_PAIRS is now empty
   setup({ host }) {
     // Guard for older browsers + non-DOM test environments (happy-dom, jsdom
     // without polyfill). The trait becomes a no-op rather than throwing on

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

@@ -1,148 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/ColorPicker.json",
-  "title": "ColorPicker",
-  "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": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "baseHue": {
-      "description": "Reference hue (degrees) for the [hue-drift-max] constraint. Default\nNaN — falls back to the picker's hue at first commit so the consumer\ncan pre-seed the picker and constrain drift from that initial value.\n",
-      "type": "number",
-      "default": "NaN"
-    },
-    "component": {
-      "const": "ColorPicker"
-    },
-    "disabled": {
-      "description": "Disables all interaction",
-      "type": "boolean",
-      "default": false
-    },
-    "format": {
-      "description": "Output format for the value property",
-      "type": "string",
-      "enum": [
-        "hex",
-        "oklch"
-      ],
-      "default": "hex"
-    },
-    "hueDriftMax": {
-      "description": "Generation constraint — maximum allowed signed-shortest-path hue\ndeviation (degrees) from [base-hue] (or the first-committed hue\nif [base-hue] is unset). Default NaN (no constraint). Wrap-aware\nso a drift of 350 degrees resolves as -10.\n",
-      "type": "number",
-      "default": "NaN"
-    },
-    "maxChroma": {
-      "description": "Generation constraint (v0.4.9 §99h, FEEDBACK-02 #7) — clamp the\nOKLCH chroma channel to at most this value before commit. Out-of-\nbound mutations round-trip to the nearest in-bound equivalent +\nfire `constraint-clamp`. Default Infinity (no constraint).\n",
-      "type": "number",
-      "default": "Infinity"
-    },
-    "maxL": {
-      "description": "Generation constraint — clamp OKLCH lightness to at most this value (0..1). Default 1 (no constraint).",
-      "type": "number",
-      "default": 1
-    },
-    "minL": {
-      "description": "Generation constraint — clamp OKLCH lightness to at least this value (0..1). Default 0 (no constraint).",
-      "type": "number",
-      "default": 0
-    },
-    "name": {
-      "description": "Form field name",
-      "type": "string",
-      "default": ""
-    },
-    "value": {
-      "description": "Current color as hex string",
-      "type": "string",
-      "default": "#3b82f6"
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "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"
-    ],
-    "events": {
-      "change": {
-        "description": "Fired on every color change"
-      },
-      "constraint-clamp": {
-        "description": "Fired immediately before `change` / `input` when one or more\nconsumer-declared constraints (max-chroma / max-l / min-l /\nhue-drift-max) clamped a channel away from the user-requested\nvalue. detail.clamps is an array of axis-specific clamp records.\n",
-        "detail": {
-          "clamps": {
-            "description": "Array of `{ axis, requested, clamped, reason }` objects. axis is\none of \"l\" / \"c\" / \"h\". reason names the triggering constraint\nprop. Empty arrays are never emitted.\n",
-            "type": "array"
-          }
-        }
-      },
-      "input": {
-        "description": "Fired during continuous interaction (drag)"
-      }
-    },
-    "examples": [
-      {
-        "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-legacy"
-      }
-    ],
-    "keywords": [
-      "colorpicker",
-      "color-picker",
-      "color",
-      "picker"
-    ],
-    "name": "UIColorPicker",
-    "parts": {},
-    "related": [
-      "color-area",
-      "grid",
-      "button"
-    ],
-    "slots": {},
-    "states": [
-      {
-        "description": "Default, ready for interaction.",
-        "name": "idle"
-      },
-      {
-        "description": "Non-interactive; dimmed.",
-        "attribute": "disabled",
-        "name": "disabled"
-      }
-    ],
-    "status": "deprecated",
-    "synonyms": {
-      "color-picker": [
-        "color-canvas",
-        "color-surface",
-        "swatch-picker",
-        "color-area"
-      ]
-    },
-    "tag": "color-picker-ui",
-    "tokens": {},
-    "traits": [],
-    "version": 2
-  }
-}

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

@@ -1,46 +0,0 @@
-/**
- * Non-side-effect class export for `<color-picker-ui>`.
- *
- * Importing this file gives you the class 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`
- * (which imports this file + calls `defineIfFree()`).
- *
- * @see ../../USAGE.md#registration--auto-vs-explicit
- */
-
-/**
- * <color-picker-ui> — 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. The real implementation moved to `<color-area-ui>`
- * (mirrors `calendar-grid-ui`'s own plain, shape-describing substrate
- * naming). `<color-picker-ui>` is now a thin compatibility alias per
- * ADR-0057's `status: deprecated` shape (same pattern as
- * `<datetime-picker-ui>` → `<calendar-picker-ui>`, gh#1372): it subclasses
- * `UIColorArea` directly rather than re-implementing any behavior.
- *
- * Migrate: `<color-picker-ui>` → `<color-area-ui>`. This tag keeps
- * working — it IS `<color-area-ui>` under the hood — but will be removed
- * in a future major; new markup should reach for `<color-area-ui>`
- * directly.
- *
- * @see ../color-area/color-area.class.js
- */
-
-import { UIColorArea } from '../color-area/color-area.class.js';
-
-export class UIColorPicker extends UIColorArea {
-  // Same value as UIColorArea's — the alias stamps no icon of its own —
-  // but restated literally because scripts/release/check-required-icons.mjs
-  // text-scans each component's own class.js and cannot resolve inheritance
-  // (gh#1503, same rationale datetime-picker.class.js documents).
-  static requiredIcons = ['copy', 'check', 'warning'];
-
-  static properties = { ...UIColorArea.properties };
-}

package/components/color-picker/color-picker.css

@@ -1,14 +0,0 @@
-/* `<color-picker-ui>` is DEPRECATED (ADR-0063, gh#1563) — a thin
- * `UIColorArea` subclass (see color-picker.class.js), never its own
- * independent implementation. Its visual contract lives entirely in
- * ../color-area/color-area.css, whose `@scope (color-area-ui,
- * color-picker-ui)` root and `:is(color-area-ui, color-picker-ui)`
- * selectors already cover this tag — one styling source, not two files
- * drifting apart (`@scope` matches by literal tag name, not JS prototype
- * chain, so the alias tag has to be named in that scope root explicitly —
- * same shape as calendar-picker.css's own `datetime-picker-ui` alias
- * coverage). This file intentionally carries no rules of its own;
- * `packages/web-components/styles/components.css` still imports it so the
- * barrel's per-component import list stays complete and mechanical (no
- * special-cased skip for a deprecated-but-still-shipping tag).
- */