@adia-ai/web-components 0.8.41 → 0.8.43

package/index.d.ts

@@ -97,15 +97,15 @@ export type {
 } from './components/option-card/option-card.js';
 
 export type {
-  UIColorPicker,
+  UIColorArea,
   ColorFormat,
-  ColorPickerChangeEvent,
-  ColorPickerInputEvent,
-  ColorPickerChangeEventDetail,
-  ColorPickerClampRecord,
-  ColorPickerConstraintClampEvent,
-  ColorPickerConstraintClampEventDetail,
-} from './components/color-picker/color-picker.js';
+  ColorAreaChangeEvent,
+  ColorAreaInputEvent,
+  ColorAreaChangeEventDetail,
+  ColorAreaClampRecord,
+  ColorAreaConstraintClampEvent,
+  ColorAreaConstraintClampEventDetail,
+} from './components/color-area/color-area.js';
 
 export type {
   UIRating,
@@ -191,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';
@@ -209,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';
@@ -240,7 +238,7 @@ declare global {
     'search-ui':          import('./components/search/search.js').UISearch;
     'otp-input-ui':       import('./components/otp-input/otp-input.js').UIOtpInput;
     'option-card-ui':     import('./components/option-card/option-card.js').UIOptionCard;
-    'color-picker-ui':    import('./components/color-picker/color-picker.js').UIColorPicker;
+    'color-area-ui':      import('./components/color-area/color-area.js').UIColorArea;
     '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;
@@ -296,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;
@@ -314,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.41",
+  "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/admin-shell/admin-shell.examples.html

@@ -42,7 +42,7 @@
     <admin-statusbar slot="footer">
       <select-ui avatar="…" value="user" variant="ghost" style="flex:1"></select-ui>
     </admin-statusbar>
-    <div data-resize></div>
+    <div data-sidebar-resize></div>
   </admin-sidebar>
 
   <!-- MAIN content column — breadcrumb topbar · scrollable page · status footer -->
@@ -86,7 +86,7 @@
       <button-ui slot="action" data-sidebar-toggle="trailing" icon="x" variant="ghost" size="sm"></button-ui>
     </admin-topbar>
     <section-ui>…</section-ui>
-    <div data-resize></div>
+    <div data-sidebar-resize></div>
   </admin-sidebar>
 
   <!-- Command palette — top-level child, NOT nested in admin-content -->

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/patterns/form-system/form-system.examples.html

@@ -53,7 +53,7 @@
       <tr><td>Segmented</td><td><code>segmented-ui</code></td><td>String</td></tr>
       <tr><td>OTP Input</td><td><code>otp-input-ui</code></td><td>String</td></tr>
       <tr><td>Calendar Picker</td><td><code>calendar-picker-ui</code></td><td>Date string</td></tr>
-      <tr><td>Color Picker</td><td><code>color-picker-ui</code></td><td>Color string</td></tr>
+      <tr><td>Color Picker</td><td><code>color-area-ui</code></td><td>Color string</td></tr>
       <tr><td>Upload</td><td><code>upload-ui</code></td><td>File(s)</td></tr>
     </tbody>
   </table>

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

@@ -42,7 +42,7 @@
 @import "../components/badge/badge.css";
 @import "../components/breadcrumb/breadcrumb.css";
 @import "../components/command/command.css";
-@import "../components/color-picker/color-picker.css";
+@import "../components/color-area/color-area.css";
 @import "../components/color-input/color-input.css";
 @import "../components/noodles/noodles.css";
 @import "../components/table/table.css";
@@ -100,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.css

@@ -1,182 +0,0 @@
-@scope (color-picker-ui) {
-  :where(:scope) {
-    /* ── Tokens ── */
-    --color-picker-gap:              var(--a-space-2);
-    --color-picker-area-height:      10rem;
-    --color-picker-area-radius:      var(--a-radius-md);
-    --color-picker-track-height:     0.75rem;
-    --color-picker-track-radius:     var(--a-radius-full);
-    --color-picker-thumb-size:       1.125rem;
-    --color-picker-thumb-border:     2px solid var(--a-chrome-border);
-    --color-picker-thumb-shadow:     0 0 0 1px var(--a-chrome-ring-subtle), 0 2px 4px var(--a-chrome-shadow-soft);
-    --color-picker-font:             var(--a-font-family-code);
-    --color-picker-font-size:        var(--a-ui-sm);
-    --color-picker-fg:               var(--md-sys-color-neutral-on-surface);
-    --color-picker-label-fg:         var(--a-fg-muted);
-    --color-picker-border:           var(--md-sys-color-neutral-outline-variant);
-    --color-picker-output-bg:        var(--a-bg-muted);
-    --color-picker-output-radius:    var(--a-radius-sm);
-    --color-picker-fg-disabled:      var(--a-ui-text-disabled);
-
-    /* ── Spacing ── */
-    --color-picker-gap-sm:           var(--a-space-1);
-    --color-picker-pad-sm:           var(--a-space-2);
-
-    /* ── Interactive ── */
-    --color-picker-focus-color:      var(--md-sys-color-primary);
-    --color-picker-disabled-border:  var(--md-sys-color-neutral-outline-variant);
-
-    /* ── Transitions ── */
-    --color-picker-duration:         var(--a-duration-fast);
-    --color-picker-easing:           var(--a-easing);
-  }
-
-  :scope {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: var(--color-picker-gap);
-    width: 100%;
-  }
-
-  /* ═══════ 2D Color Area ═══════ */
-
-  [data-area] {
-    position: relative;
-    width: 100%;
-    height: var(--color-picker-area-height);
-    border-radius: var(--color-picker-area-radius);
-    border: 1px solid var(--color-picker-border);
-    overflow: hidden;
-    cursor: crosshair;
-    touch-action: none;
-  }
-
-  [data-area]:focus-visible {
-    outline: 2px solid var(--color-picker-focus-color);
-    outline-offset: 2px;
-  }
-
-  [data-area] canvas {
-    image-rendering: auto;
-  }
-
-  [data-area-thumb] {
-    position: absolute;
-    width: var(--color-picker-thumb-size);
-    height: var(--color-picker-thumb-size);
-    border-radius: 50%;
-    border: var(--color-picker-thumb-border);
-    box-shadow: var(--color-picker-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-picker-gap-sm);
-  }
-
-  /* ═══════ Hue Track ═══════ */
-
-  [data-hue-track] {
-    position: relative;
-    width: 100%;
-    height: var(--color-picker-track-height);
-    border-radius: var(--color-picker-track-radius);
-    cursor: pointer;
-    touch-action: none;
-  }
-
-  [data-hue-track]:focus-visible {
-    outline: 2px solid var(--color-picker-focus-color);
-    outline-offset: 2px;
-  }
-
-  [data-hue-thumb] {
-    position: absolute;
-    top: 50%;
-    width: var(--color-picker-thumb-size);
-    height: var(--color-picker-thumb-size);
-    border-radius: 50%;
-    border: var(--color-picker-thumb-border);
-    box-shadow: var(--color-picker-thumb-shadow);
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-  }
-
-  /* ═══════ Output Values ═══════ */
-
-  [data-output] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--color-picker-gap-sm);
-  }
-
-  [data-output-group] {
-    display: flex;
-    align-items: center;
-    gap: var(--color-picker-gap-sm);
-    padding: var(--color-picker-gap-sm) var(--color-picker-pad-sm);
-    background: var(--color-picker-output-bg);
-    border-radius: var(--color-picker-output-radius);
-  }
-
-  [data-output-value] {
-    font-family: var(--color-picker-font);
-    font-size: var(--color-picker-font-size);
-    color: var(--color-picker-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-picker-label-fg);
-    transition: color var(--color-picker-duration) var(--color-picker-easing);
-  }
-
-  [data-copy]:hover {
-    color: var(--color-picker-fg);
-  }
-
-  [data-copy] icon-ui {
-    --a-icon-size: var(--color-picker-font-size);
-  }
-
-  /* ═══════ Disabled ═══════ */
-
-  :scope[disabled] {
-    pointer-events: none;
-    color: var(--color-picker-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-picker-disabled-border);
-    --slider-thumb-bg: var(--color-picker-disabled-border);
-  }
-  :scope[disabled] [data-output-value] {
-    color: var(--color-picker-fg-disabled);
-  }
-}

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 };