@adia-ai/web-components 0.8.42 → 0.8.43

package/index.d.ts

@@ -107,16 +107,6 @@ export type {
   ColorAreaConstraintClampEventDetail,
 } from './components/color-area/color-area.js';
 
-export type {
-  UIColorPicker,
-  ColorPickerChangeEvent,
-  ColorPickerInputEvent,
-  ColorPickerChangeEventDetail,
-  ColorPickerClampRecord,
-  ColorPickerConstraintClampEvent,
-  ColorPickerConstraintClampEventDetail,
-} from './components/color-picker/color-picker.js';
-
 export type {
   UIRating,
   RatingChangeEvent,
@@ -201,7 +191,6 @@ export * from './components/pane/pane.js';
 export * from './components/pipeline-status/pipeline-status.js';
 export * from './components/popover/popover.js';
 export * from './components/progress/progress.js';
-export * from './components/progress-row/progress-row.js';
 export * from './components/richtext/richtext.js';
 export * from './components/row/row.js';
 export * from './components/segment/segment.js';
@@ -219,7 +208,6 @@ export * from './components/tag/tag.js';
 export * from './components/text/text.js';
 export * from './components/timeline/timeline.js';
 export * from './components/toast/toast.js';
-export * from './components/toggle-group/toggle-group.js';
 export * from './components/toggle-scheme/toggle-scheme.js';
 export * from './components/toolbar/toolbar.js';
 export * from './components/tooltip/tooltip.js';
@@ -251,7 +239,6 @@ declare global {
     'otp-input-ui':       import('./components/otp-input/otp-input.js').UIOtpInput;
     'option-card-ui':     import('./components/option-card/option-card.js').UIOptionCard;
     'color-area-ui':      import('./components/color-area/color-area.js').UIColorArea;
-    'color-picker-ui':    import('./components/color-picker/color-picker.js').UIColorPicker;
     'rating-ui':          import('./components/rating/rating.js').UIRating;
     'code-ui':            import('./components/code/code.js').UICode;
     'calendar-picker-ui': import('./components/calendar-picker/calendar-picker.js').UICalendarPicker;
@@ -307,7 +294,6 @@ declare global {
     'pipeline-status-ui': import('./components/pipeline-status/pipeline-status.js').UIPipelineStatus;
     'popover-ui':         import('./components/popover/popover.js').UIPopover;
     'progress-ui':        import('./components/progress/progress.js').UIProgress;
-    'progress-row-ui':    import('./components/progress-row/progress-row.js').UIProgressRow;
     'richtext-ui':        import('./components/richtext/richtext.js').UIRichText;
     'row-ui':             import('./components/row/row.js').UIRow;
     'segment-ui':         import('./components/segment/segment.js').UISegment;
@@ -325,7 +311,6 @@ declare global {
     'text-ui':            import('./components/text/text.js').UIText;
     'timeline-ui':        import('./components/timeline/timeline.js').UITimeline;
     'toast-ui':           import('./components/toast/toast.js').UIToast;
-    'toggle-group-ui':    import('./components/toggle-group/toggle-group.js').UIToggleGroup;
     'toggle-scheme-ui':   import('./components/toggle-scheme/toggle-scheme.js').UIToggleScheme;
     'toolbar-ui':         import('./components/toolbar/toolbar.js').UIToolbar;
     'tooltip-ui':         import('./components/tooltip/tooltip.js').UITooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.42",
+  "version": "0.8.43",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui.",
   "type": "module",
   "types": "./index.d.ts",

package/patterns/chart-in-card/chart-in-card.examples.html

@@ -52,7 +52,7 @@
           <text-ui slot="description" color="subtle">Last 12 months</text-ui>
         </header>
         <section>
-          <chart-ui id="pat-revenue" type="bar" x="month" y="revenue" hide-values></chart-ui>
+          <chart-ui id="pat-revenue" type="bar" x="month" y="revenue" no-values></chart-ui>
         </section>
         <footer>
           <button-ui text="View report" variant="outline" stretch></button-ui>
@@ -77,7 +77,7 @@
           </span>
         </header>
         <section>
-          <chart-ui id="pat-mrr" type="line" x="month" y="revenue" smooth="0.4" hide-values></chart-ui>
+          <chart-ui id="pat-mrr" type="line" x="month" y="revenue" smooth="0.4" no-values></chart-ui>
         </section>
       </card-ui>
     </div>
@@ -99,7 +99,7 @@
         </header>
         <section>
           <col-ui gap="3">
-            <chart-ui id="pat-sessions" type="bar" x="day" y="sessions" hide-values></chart-ui>
+            <chart-ui id="pat-sessions" type="bar" x="day" y="sessions" no-values></chart-ui>
             <grid-ui columns="3" gap="2">
               <card-ui><section><stat-ui label="Desktop" value="2,840"></stat-ui></section></card-ui>
               <card-ui><section><stat-ui label="Mobile" value="1,590"></stat-ui></section></card-ui>
@@ -126,7 +126,7 @@
           <text-ui slot="description" color="subtle">January – March 2024</text-ui>
         </header>
         <section>
-          <chart-ui id="pat-trend-revenue" type="area" x="month" y="revenue" hide-values></chart-ui>
+          <chart-ui id="pat-trend-revenue" type="area" x="month" y="revenue" no-values></chart-ui>
         </section>
         <footer>
           <span slot="heading">Trending up by 5.2% this month</span>
@@ -175,7 +175,7 @@
           </segmented-ui>
         </header>
         <section>
-          <chart-ui id="pat-filter-sessions" type="line" x="day" y="sessions" hide-values></chart-ui>
+          <chart-ui id="pat-filter-sessions" type="line" x="day" y="sessions" no-values></chart-ui>
         </section>
       </card-ui>
     </div>
@@ -186,8 +186,8 @@
   <h2 variant="section">Full-bleed chart + legend band</h2>
   <p data-note>
     <code>bleed</code> only earns true edge-to-edge treatment for bare plotted
-    marks — a sparkline, or another chart type with both <code>hide-grid</code>
-    and <code>hide-values</code> set (gh#1095). A multi-series chart still
+    marks — a sparkline, or another chart type with both <code>no-grid</code>
+    and <code>no-values</code> set (gh#1095). A multi-series chart still
     needs a legend, so keep <code>&lt;chart-legend-ui&gt;</code> OUT of the
     bled section — wire it to the chart via <code>[for]</code> in a normal
     (inset) section below instead. It reads as its own band beneath the
@@ -204,7 +204,7 @@
           <text-ui slot="description" color="subtle">Last 6 months</text-ui>
         </header>
         <section bleed>
-          <chart-ui id="pat-bleed-legend-chart" type="multi-line" x="month" y="revenue,users,churn" hide-grid hide-values></chart-ui>
+          <chart-ui id="pat-bleed-legend-chart" type="multi-line" x="month" y="revenue,users,churn" no-grid no-values></chart-ui>
         </section>
         <section>
           <chart-legend-ui for="pat-bleed-legend-chart" shape="line"></chart-legend-ui>
@@ -239,9 +239,9 @@
   <h2 variant="section">Rules</h2>
   <ul>
     <li>For sparklines, set <code>bleed</code> on the card's <code>&lt;section&gt;</code> so the line touches the edges.</li>
-    <li><code>bleed</code> is a bare-marks affordance, not a general "edge-to-edge chart" switch (gh#1095). It's safe for a sparkline, or for any other chart <code>type</code> that also sets both <code>hide-grid</code> and <code>hide-values</code> — i.e. nothing that renders axis ticks, gridlines, or value text. A chart that still shows guides or values needs the card's normal inset so that text doesn't collide with (and clip under) the card's rounded corners; card.css restores the inset automatically if it detects either case, so a forgotten <code>hide-grid</code>/<code>hide-values</code> fails safe rather than clipping silently.</li>
+    <li><code>bleed</code> is a bare-marks affordance, not a general "edge-to-edge chart" switch (gh#1095). It's safe for a sparkline, or for any other chart <code>type</code> that also sets both <code>no-grid</code> and <code>no-values</code> — i.e. nothing that renders axis ticks, gridlines, or value text. A chart that still shows guides or values needs the card's normal inset so that text doesn't collide with (and clip under) the card's rounded corners; card.css restores the inset automatically if it detects either case, so a forgotten <code>no-grid</code>/<code>no-values</code> fails safe rather than clipping silently.</li>
     <li>Never put <code>&lt;chart-legend-ui&gt;</code> inside a <code>bleed</code> section — its badge rows need their own breathing room too. Place it in a plain <code>&lt;section&gt;</code> immediately after the chart's section, wired via <code>chart-legend-ui[for="&lt;chart id&gt;"]</code> (mirrors <code>.legendData</code>; see the "Full-bleed chart + legend band" example above and <a href="/site/components/chart-legend">chart-legend-ui</a>'s own <code>for</code> docs). card.css also restores the section's inset if a legend ends up inside a bled section anyway, so the fallback stays readable rather than edge-clipped.</li>
-    <li>Put <code>hide-values</code> on bar/line charts inside cards — the stat in the header already shows the current number.</li>
+    <li>Put <code>no-values</code> on bar/line charts inside cards — the stat in the header already shows the current number.</li>
     <li>Use <code>&lt;stat-ui&gt;</code> in the heading slot only when the card's primary metric is a single number; otherwise use <code>&lt;h3&gt;</code> + description.</li>
     <li>Keep breakdowns shallow — 3–4 stats max. More belongs in a full section, not inside a tile.</li>
   </ul>

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/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/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/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).
- */

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

@@ -1,99 +0,0 @@
-/**
- * `<color-picker-ui>` — OKLCH-native color picker with 2D area + H/C/L sliders.
- *
- * Form-associated (extends UIFormElement). The `[format]` attribute controls
- * whether `value` is read/written as a `#rrggbb` hex string or an `oklch(L C H)`
- * string, but the event detail always carries BOTH forms plus the parsed
- * OKLCH channel scalars — consumers don't need to parse the string.
- *
- * @see https://ui-kit.exe.xyz/site/components/color-picker
- */
-
-import { UIFormElement } from '../../core/form.js';
-
-/**
- * Output format selected by the `[format]` attribute. Drives the shape of
- * `value` (and the matching `detail.value` field). Both `hex` and `oklch`
- * forms are always present on the event detail regardless of `[format]`.
- */
-export type ColorFormat = 'hex' | 'oklch';
-
-/**
- * Detail payload for both `change` (commit) and `input` (continuous drag)
- * events. Carries parsed channel scalars + both string forms — `value`
- * mirrors the picker's current `[format]`, while `hex` and `oklch` are
- * always populated parallel views.
- */
-export interface ColorPickerChangeEventDetail {
-  /** Format-respecting string. Equals `hex` when `[format="hex"]`; equals `oklch` when `[format="oklch"]`. */
-  value: string;
-  /** OKLCH lightness (0–1). */
-  l: number;
-  /** OKLCH chroma (0–~0.4). */
-  c: number;
-  /** OKLCH hue (0–360, degrees). */
-  h: number;
-  /** Hex string (`#rrggbb`). Gamut-mapped to sRGB. */
-  hex: string;
-  /** OKLCH string (`oklch(L C H)`, fixed precision). */
-  oklch: string;
-}
-export type ColorPickerChangeEvent = CustomEvent<ColorPickerChangeEventDetail>;
-export type ColorPickerInputEvent = CustomEvent<ColorPickerChangeEventDetail>;
-
-/**
- * Axis-specific clamp record. Fires when a consumer-declared constraint
- * (max-chroma / max-l / min-l / hue-drift-max) clamped a user-requested
- * channel value to its in-bound equivalent.
- */
-export interface ColorPickerClampRecord {
-  /** OKLCH axis that was clamped. */
-  axis: 'l' | 'c' | 'h';
-  /** Channel value the user requested before the clamp. */
-  requested: number;
-  /** Channel value the picker actually committed after the clamp. */
-  clamped: number;
-  /** Constraint prop that triggered the clamp. */
-  reason: 'max-l' | 'min-l' | 'max-chroma' | 'hue-drift-max';
-}
-
-/**
- * Detail payload for the `constraint-clamp` event — fired immediately
- * before the corresponding `change` / `input` when one or more axes
- * were clamped to fit the consumer's declared constraints. `clamps`
- * is never empty.
- */
-export interface ColorPickerConstraintClampEventDetail {
-  clamps: ColorPickerClampRecord[];
-}
-export type ColorPickerConstraintClampEvent = CustomEvent<ColorPickerConstraintClampEventDetail>;
-
-export class UIColorPicker extends UIFormElement {
-  /** Form field name. */
-  name: string;
-  /** Disables all interaction. */
-  disabled: boolean;
-  /** Current color as a string in the active `format`. */
-  value: string;
-  /** Output format — drives the shape of `value`. Detail always carries both `hex` and `oklch`. */
-  format: ColorFormat;
-  /** Clamp the OKLCH chroma channel to at most this value. `Infinity` = unconstrained. */
-  maxChroma: number;
-  /** Clamp the OKLCH lightness channel to at most this value (0..1). `1` = unconstrained. */
-  maxL: number;
-  /** Clamp the OKLCH lightness channel to at least this value (0..1). `0` = unconstrained. */
-  minL: number;
-  /** Maximum allowed signed-shortest-path hue drift in degrees from `baseHue`. `NaN` = unconstrained. */
-  hueDriftMax: number;
-  /** Reference hue (degrees) for the `hueDriftMax` constraint. `NaN` = use the picker's hue at first commit. */
-  baseHue: number;
-
-  addEventListener<K extends keyof HTMLElementEventMap>(
-    type: K,
-    listener: (this: UIColorPicker, ev: HTMLElementEventMap[K]) => unknown,
-    options?: boolean | AddEventListenerOptions,
-  ): void;
-  addEventListener(type: 'change', listener: (ev: ColorPickerChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'input', listener: (ev: ColorPickerInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'constraint-clamp', listener: (ev: ColorPickerConstraintClampEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-}

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

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

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

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