@skdx/web-components 0.27.0 → 0.29.0

package/dist/collapsible/CollapsibleIndicator.d.cts

@@ -0,0 +1,28 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Disclosure affordance inside a collapsible trigger, rendered as a `<span>`
+ * with `data-state`/`data-disabled` for styling rotations, and no glyph of
+ * its own — slot the icon in.
+ *
+ * @example
+ * ```html
+ * <skdx-collapsible-trigger>
+ *   Toggle
+ *   <skdx-collapsible-indicator><svg>…</svg></skdx-collapsible-indicator>
+ * </skdx-collapsible-trigger>
+ * ```
+ */
+export declare class SkdxCollapsibleIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    private rootEl;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _sync;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-collapsible-indicator': SkdxCollapsibleIndicator;
+    }
+}

package/dist/collapsible/CollapsibleIndicator.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Disclosure affordance inside a collapsible trigger, rendered as a `<span>`
+ * with `data-state`/`data-disabled` for styling rotations, and no glyph of
+ * its own — slot the icon in.
+ *
+ * @example
+ * ```html
+ * <skdx-collapsible-trigger>
+ *   Toggle
+ *   <skdx-collapsible-indicator><svg>…</svg></skdx-collapsible-indicator>
+ * </skdx-collapsible-trigger>
+ * ```
+ */
+export declare class SkdxCollapsibleIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    private rootEl;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _sync;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-collapsible-indicator': SkdxCollapsibleIndicator;
+    }
+}

package/dist/collapsible/CollapsibleIndicator.js

@@ -0,0 +1,5 @@
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(o,s,e,l)=>{for(var t=l>1?void 0:l?c(s,e):s,r=o.length-1,a;r>=0;r--)(a=o[r])&&(t=(l?a(s,e,t):a(t))||t);return l&&t&&n(s,e,t),t};import{css as b,html as p,LitElement as u}from"lit";import{customElement as h}from"../internal/define.js";var i=class extends u{constructor(){super(...arguments);this.rootEl=null;this.observer=new MutationObserver(()=>this._sync())}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-collapsible"),!this.rootEl)throw new Error("<skdx-collapsible-indicator> must be used inside <skdx-collapsible>.");this.observer.observe(this.rootEl,{attributeFilter:["open","disabled"]}),this.setAttribute("aria-hidden","true"),this._sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}_sync(){let e=this.rootEl;e&&(this.setAttribute("data-state",e.open?"open":"closed"),e.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"))}render(){return p`<slot></slot>`}};i.styles=b`
+    :host {
+      display: inline-flex;
+    }
+  `,i=d([h("skdx-collapsible-indicator","collapsible","indicator")],i);export{i as SkdxCollapsibleIndicator};

package/dist/collapsible/CollapsibleTrigger.cjs

@@ -1,18 +1,12 @@
-"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var E=(s,t)=>{for(var e in t)d(s,e,{get:t[e],enumerable:!0})},f=(s,t,e,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of v(t))!m.call(s,o)&&o!==e&&d(s,o,{get:()=>t[o],enumerable:!(l=p(t,o))||l.enumerable});return s};var k=s=>f(d({},"__esModule",{value:!0}),s),b=(s,t,e,l)=>{for(var o=l>1?void 0:l?p(t,e):t,n=s.length-1,c;n>=0;n--)(c=s[n])&&(o=(l?c(t,e,o):c(o))||o);return l&&o&&d(t,e,o),o};var x={};E(x,{SkdxCollapsibleTrigger:()=>i});module.exports=k(x);var r=require("lit"),h=require("../internal/define.cjs"),u=require("../internal/part.cjs"),a=require("../internal/styles.cjs");var i=class extends r.LitElement{constructor(){super(...arguments);this.rootEl=null;this.observer=new MutationObserver(()=>this.requestUpdate());this.handleClick=()=>{let e=this.rootEl;!e||e.disabled||e.setOpen(!e.open)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-collapsible"),!this.rootEl)throw new Error("<skdx-collapsible-trigger> must be used inside <skdx-collapsible>.");this.observer.observe(this.rootEl,{attributeFilter:["open","disabled"]})}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}updated(){(0,u.reflectHostState)(this,{"data-state":this.rootEl?.open??!1?"open":"closed","data-disabled":this.rootEl?.disabled?"":null})}render(){let e=this.rootEl?.open??!1,l=this.rootEl?.disabled??!1;return r.html`
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var E=(r,l)=>{for(var e in l)d(r,e,{get:l[e],enumerable:!0})},f=(r,l,e,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let t of m(l))!v.call(r,t)&&t!==e&&d(r,t,{get:()=>l[t],enumerable:!(o=c(l,t))||o.enumerable});return r};var k=r=>f(d({},"__esModule",{value:!0}),r),p=(r,l,e,o)=>{for(var t=o>1?void 0:o?c(l,e):l,i=r.length-1,a;i>=0;i--)(a=r[i])&&(t=(o?a(l,e,t):a(t))||t);return o&&t&&d(l,e,t),t};var g={};E(g,{SkdxCollapsibleTrigger:()=>n});module.exports=k(g);var s=require("lit"),u=require("../internal/define.cjs"),b=require("../internal/light-dom-styles.cjs"),h=require("../internal/part.cjs");var n=class extends s.LitElement{constructor(){super(...arguments);this.rootEl=null;this.observer=new MutationObserver(()=>this.requestUpdate());this.handleClick=()=>{let e=this.rootEl;!e||e.disabled||e.setOpen(!e.open)}}createRenderRoot(){return this}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-collapsible"),!this.rootEl)throw new Error("<skdx-collapsible-trigger> must be used inside <skdx-collapsible>.");this.observer.observe(this.rootEl,{attributeFilter:["open","disabled"]}),(0,b.installLightDomStyles)(),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}focus(e){this.querySelector(":scope > button")?.focus(e)}firstUpdated(){let e=this.querySelector(":scope > button");if(!e)return;let o=this.firstChild;for(;o&&o!==e;){let t=o.nextSibling;o.nodeType!==Node.COMMENT_NODE&&e.append(o),o=t}}updated(){(0,h.reflectHostState)(this,{"data-state":this.rootEl?.open??!1?"open":"closed","data-disabled":this.rootEl?.disabled?"":null})}render(){let e=this.rootEl?.open??!1,o=this.rootEl?.disabled??!1,t=this.rootEl?.querySelector("skdx-collapsible-content"),i=t?t.id||this.rootEl?.contentId:void 0;return s.html`
       <button
         part="trigger"
         type="button"
-        aria-controls=${this.rootEl?.contentId??r.nothing}
+        aria-controls=${i??s.nothing}
         aria-expanded=${e}
         data-state=${e?"open":"closed"}
-        data-disabled=${l?"":r.nothing}
-        ?disabled=${l}
+        data-disabled=${o?"":s.nothing}
+        ?disabled=${o}
         @click=${this.handleClick}
-      >
-        <slot></slot>
-      </button>
-    `}};i.shadowRootOptions=a.delegatesFocusShadowRootOptions,i.styles=[a.resetNativeControl,r.css`
-      :host {
-        display: inline-block;
-      }
-    `,a.controlBoxOnHost],i=b([(0,h.customElement)("skdx-collapsible-trigger","collapsible","trigger")],i);0&&(module.exports={SkdxCollapsibleTrigger});
+      ></button>
+    `}};n=p([(0,u.customElement)("skdx-collapsible-trigger","collapsible","trigger")],n);0&&(module.exports={SkdxCollapsibleTrigger});

package/dist/collapsible/CollapsibleTrigger.d.cts

@@ -1,21 +1,22 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-collapsible-trigger>` — button that toggles the content open/closed
- * when clicked. Sets `aria-controls`, `aria-expanded`, `data-state` and
- * `data-disabled`. Must be used inside `<skdx-collapsible>`.
- *
- * @csspart trigger - The native `<button>` element inside the shadow root.
+ * Toggle button for a collapsible, rendered as `<button type="button">` with
+ * `aria-controls`/`aria-expanded`/`data-state`/`data-disabled` in light DOM,
+ * so `aria-controls` can resolve to `<skdx-collapsible-content>`.
  */
 export declare class SkdxCollapsibleTrigger extends LitElement {
-    static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult[];
+    /** Light DOM, for the IDREF reasons in the class docblock. */
+    protected createRenderRoot(): HTMLElement;
     private rootEl;
     private readonly observer;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Focus lands on the inner button, which is where the button role is — the job `delegatesFocus` did while this element had a shadow root. */
+    focus(options?: FocusOptions): void;
+    protected firstUpdated(): void;
     private readonly handleClick;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/collapsible/CollapsibleTrigger.d.ts

@@ -1,21 +1,22 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-collapsible-trigger>` — button that toggles the content open/closed
- * when clicked. Sets `aria-controls`, `aria-expanded`, `data-state` and
- * `data-disabled`. Must be used inside `<skdx-collapsible>`.
- *
- * @csspart trigger - The native `<button>` element inside the shadow root.
+ * Toggle button for a collapsible, rendered as `<button type="button">` with
+ * `aria-controls`/`aria-expanded`/`data-state`/`data-disabled` in light DOM,
+ * so `aria-controls` can resolve to `<skdx-collapsible-content>`.
  */
 export declare class SkdxCollapsibleTrigger extends LitElement {
-    static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult[];
+    /** Light DOM, for the IDREF reasons in the class docblock. */
+    protected createRenderRoot(): HTMLElement;
     private rootEl;
     private readonly observer;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Focus lands on the inner button, which is where the button role is — the job `delegatesFocus` did while this element had a shadow root. */
+    focus(options?: FocusOptions): void;
+    protected firstUpdated(): void;
     private readonly handleClick;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/collapsible/CollapsibleTrigger.js

@@ -1,18 +1,12 @@
-var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(r,l,e,t)=>{for(var o=t>1?void 0:t?p(l,e):l,i=r.length-1,a;i>=0;i--)(a=r[i])&&(o=(t?a(l,e,o):a(o))||o);return t&&o&&c(l,e,o),o};import{css as b,html as h,LitElement as u,nothing as n}from"lit";import{customElement as v}from"../internal/define.js";import{reflectHostState as m}from"../internal/part.js";import{controlBoxOnHost as E,delegatesFocusShadowRootOptions as f,resetNativeControl as k}from"../internal/styles.js";var s=class extends u{constructor(){super(...arguments);this.rootEl=null;this.observer=new MutationObserver(()=>this.requestUpdate());this.handleClick=()=>{let e=this.rootEl;!e||e.disabled||e.setOpen(!e.open)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-collapsible"),!this.rootEl)throw new Error("<skdx-collapsible-trigger> must be used inside <skdx-collapsible>.");this.observer.observe(this.rootEl,{attributeFilter:["open","disabled"]})}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}updated(){m(this,{"data-state":this.rootEl?.open??!1?"open":"closed","data-disabled":this.rootEl?.disabled?"":null})}render(){let e=this.rootEl?.open??!1,t=this.rootEl?.disabled??!1;return h`
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(i,l,e,t)=>{for(var o=t>1?void 0:t?p(l,e):l,r=i.length-1,n;r>=0;r--)(n=i[r])&&(o=(t?n(l,e,o):n(o))||o);return t&&o&&c(l,e,o),o};import{html as u,LitElement as b,nothing as a}from"lit";import{customElement as h}from"../internal/define.js";import{installLightDomStyles as m}from"../internal/light-dom-styles.js";import{reflectHostState as v}from"../internal/part.js";var s=class extends b{constructor(){super(...arguments);this.rootEl=null;this.observer=new MutationObserver(()=>this.requestUpdate());this.handleClick=()=>{let e=this.rootEl;!e||e.disabled||e.setOpen(!e.open)}}createRenderRoot(){return this}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-collapsible"),!this.rootEl)throw new Error("<skdx-collapsible-trigger> must be used inside <skdx-collapsible>.");this.observer.observe(this.rootEl,{attributeFilter:["open","disabled"]}),m(),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}focus(e){this.querySelector(":scope > button")?.focus(e)}firstUpdated(){let e=this.querySelector(":scope > button");if(!e)return;let t=this.firstChild;for(;t&&t!==e;){let o=t.nextSibling;t.nodeType!==Node.COMMENT_NODE&&e.append(t),t=o}}updated(){v(this,{"data-state":this.rootEl?.open??!1?"open":"closed","data-disabled":this.rootEl?.disabled?"":null})}render(){let e=this.rootEl?.open??!1,t=this.rootEl?.disabled??!1,o=this.rootEl?.querySelector("skdx-collapsible-content"),r=o?o.id||this.rootEl?.contentId:void 0;return u`
       <button
         part="trigger"
         type="button"
-        aria-controls=${this.rootEl?.contentId??n}
+        aria-controls=${r??a}
         aria-expanded=${e}
         data-state=${e?"open":"closed"}
-        data-disabled=${t?"":n}
+        data-disabled=${t?"":a}
         ?disabled=${t}
         @click=${this.handleClick}
-      >
-        <slot></slot>
-      </button>
-    `}};s.shadowRootOptions=f,s.styles=[k,b`
-      :host {
-        display: inline-block;
-      }
-    `,E],s=d([v("skdx-collapsible-trigger","collapsible","trigger")],s);export{s as SkdxCollapsibleTrigger};
+      ></button>
+    `}};s=d([h("skdx-collapsible-trigger","collapsible","trigger")],s);export{s as SkdxCollapsibleTrigger};

package/dist/collapsible/index.cjs

@@ -1 +1 @@
-"use strict";var p=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var f=(l,o)=>{for(var r in o)p(l,r,{get:o[r],enumerable:!0})},k=(l,o,r,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of b(o))!d.call(l,e)&&e!==r&&p(l,e,{get:()=>o[e],enumerable:!(x=a(o,e))||x.enumerable});return l};var m=l=>k(p({},"__esModule",{value:!0}),l);var s={};f(s,{SkdxCollapsible:()=>t.SkdxCollapsible,SkdxCollapsibleContent:()=>C.SkdxCollapsibleContent,SkdxCollapsibleTrigger:()=>i.SkdxCollapsibleTrigger});module.exports=m(s);var t=require("./Collapsible.cjs"),i=require("./CollapsibleTrigger.cjs"),C=require("./CollapsibleContent.cjs");0&&(module.exports={SkdxCollapsible,SkdxCollapsibleContent,SkdxCollapsibleTrigger});
+"use strict";var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var i=(o,l)=>{for(var p in l)r(o,p,{get:l[p],enumerable:!0})},k=(o,l,p,x)=>{if(l&&typeof l=="object"||typeof l=="function")for(let e of d(l))!f.call(o,e)&&e!==p&&r(o,e,{get:()=>l[e],enumerable:!(x=b(l,e))||x.enumerable});return o};var m=o=>k(r({},"__esModule",{value:!0}),o);var s={};i(s,{SkdxCollapsible:()=>a.SkdxCollapsible});module.exports=m(s);var a=require("./Collapsible.cjs");0&&(module.exports={SkdxCollapsible});

package/dist/collapsible/index.d.cts

@@ -1,3 +1 @@
 export { SkdxCollapsible } from './Collapsible.cjs';
-export { SkdxCollapsibleTrigger } from './CollapsibleTrigger.cjs';
-export { SkdxCollapsibleContent } from './CollapsibleContent.cjs';

package/dist/collapsible/index.d.ts

@@ -1,3 +1 @@
 export { SkdxCollapsible } from './Collapsible.js';
-export { SkdxCollapsibleTrigger } from './CollapsibleTrigger.js';
-export { SkdxCollapsibleContent } from './CollapsibleContent.js';

package/dist/collapsible/index.js

@@ -1 +1 @@
-import{SkdxCollapsible as e}from"./Collapsible.js";import{SkdxCollapsibleTrigger as p}from"./CollapsibleTrigger.js";import{SkdxCollapsibleContent as t}from"./CollapsibleContent.js";export{e as SkdxCollapsible,t as SkdxCollapsibleContent,p as SkdxCollapsibleTrigger};
+import{SkdxCollapsible as e}from"./Collapsible.js";export{e as SkdxCollapsible};

package/dist/collapsible/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var f=(l,o)=>{for(var e in o)p(l,e,{get:o[e],enumerable:!0})},k=(l,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of C(o))!b.call(l,r)&&r!==e&&p(l,r,{get:()=>o[r],enumerable:!(t=d(o,r))||t.enumerable});return l};var m=l=>k(p({},"__esModule",{value:!0}),l);var n={};f(n,{SkdxCollapsibleContent:()=>a.SkdxCollapsibleContent,SkdxCollapsibleIndicator:()=>i.SkdxCollapsibleIndicator,SkdxCollapsibleTrigger:()=>x.SkdxCollapsibleTrigger});module.exports=m(n);var x=require("./CollapsibleTrigger.cjs"),i=require("./CollapsibleIndicator.cjs"),a=require("./CollapsibleContent.cjs");0&&(module.exports={SkdxCollapsibleContent,SkdxCollapsibleIndicator,SkdxCollapsibleTrigger});

package/dist/collapsible/primitives.d.cts

@@ -0,0 +1,18 @@
+/**
+ * Advanced primitives for `<skdx-collapsible>` — the parts the recipe composes,
+ * for when the derived anatomy isn't the structure you need.
+ *
+ * @example
+ * ```ts
+ * import * as Collapsible from '@skdx/web-components/primitives/collapsible';
+ * ```
+ * ```html
+ * <skdx-collapsible>
+ *   <skdx-collapsible-trigger>Toggle<skdx-collapsible-indicator></skdx-collapsible-indicator></skdx-collapsible-trigger>
+ *   <skdx-collapsible-content>Hidden content revealed on toggle.</skdx-collapsible-content>
+ * </skdx-collapsible>
+ * ```
+ */
+export { SkdxCollapsibleTrigger } from './CollapsibleTrigger.cjs';
+export { SkdxCollapsibleIndicator } from './CollapsibleIndicator.cjs';
+export { SkdxCollapsibleContent } from './CollapsibleContent.cjs';

package/dist/collapsible/primitives.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Advanced primitives for `<skdx-collapsible>` — the parts the recipe composes,
+ * for when the derived anatomy isn't the structure you need.
+ *
+ * @example
+ * ```ts
+ * import * as Collapsible from '@skdx/web-components/primitives/collapsible';
+ * ```
+ * ```html
+ * <skdx-collapsible>
+ *   <skdx-collapsible-trigger>Toggle<skdx-collapsible-indicator></skdx-collapsible-indicator></skdx-collapsible-trigger>
+ *   <skdx-collapsible-content>Hidden content revealed on toggle.</skdx-collapsible-content>
+ * </skdx-collapsible>
+ * ```
+ */
+export { SkdxCollapsibleTrigger } from './CollapsibleTrigger.js';
+export { SkdxCollapsibleIndicator } from './CollapsibleIndicator.js';
+export { SkdxCollapsibleContent } from './CollapsibleContent.js';

package/dist/collapsible/primitives.js

@@ -0,0 +1 @@
+import{SkdxCollapsibleTrigger as r}from"./CollapsibleTrigger.js";import{SkdxCollapsibleIndicator as p}from"./CollapsibleIndicator.js";import{SkdxCollapsibleContent as x}from"./CollapsibleContent.js";export{x as SkdxCollapsibleContent,p as SkdxCollapsibleIndicator,r as SkdxCollapsibleTrigger};

package/dist/color-picker/ColorPicker.cjs

@@ -1,5 +1,5 @@
-"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var g=(a,o)=>{for(var t in o)n(a,t,{get:o[t],enumerable:!0})},E=(a,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of y(o))!k.call(a,r)&&r!==t&&n(a,r,{get:()=>o[r],enumerable:!(e=m(o,r))||e.enumerable});return a};var w=a=>E(n({},"__esModule",{value:!0}),a),i=(a,o,t,e)=>{for(var r=e>1?void 0:e?m(o,t):o,p=a.length-1,d;p>=0;p--)(d=a[p])&&(r=(e?d(o,t,r):d(r))||r);return e&&r&&n(o,t,r),r};var C={};g(C,{SkdxColorPicker:()=>s});module.exports=w(C);var h=require("lit"),l=require("lit/decorators.js"),u=require("../internal/color.cjs"),b=require("../internal/define.cjs"),f=require("../internal/positioning.cjs"),v=require("../utils/live-announcer.cjs");var x=["skdx-color-picker-area","skdx-color-picker-area-thumb","skdx-color-picker-hue-slider","skdx-color-picker-hue-slider-thumb","skdx-color-picker-alpha-slider","skdx-color-picker-alpha-slider-thumb","skdx-color-picker-swatch-group","skdx-color-picker-swatch","skdx-color-picker-input","skdx-color-picker-format-select","skdx-color-picker-eye-dropper"].join(", "),A={h:0,s:0,b:0,a:1};function c(a){return Math.round(a*1e3)/1e3}var s=class extends h.LitElement{constructor(){super(...arguments);this.value="#000000";this.defaultValue="#000000";this.format="hex";this.defaultFormat="hex";this.alpha=!0;this.step=1;this.disabled=!1;this.readOnly=!1;this.color=A;this.ownValue=""}get interactive(){return!this.disabled&&!this.readOnly}connectedCallback(){super.connectedCallback(),this.hasAttribute("value")||(this.value=this.defaultValue),this.hasAttribute("format")||(this.format=this.defaultFormat)}willUpdate(t){if(t.has("value")&&this.value!==this.ownValue){this.ownValue=this.value;let e=(0,u.parseColor)(this.value);e&&(this.color=e)}}updated(){this.syncHostAttributes();for(let t of Array.from(this.querySelectorAll(x)))t.syncFromRoot?.()}syncHostAttributes(){let t=this.color;this.setAttribute("data-value",this.value),this.setAttribute("data-format",this.format),this.toggleAttribute("data-disabled",this.disabled),this.toggleAttribute("data-readonly",this.readOnly),this.style.setProperty("--skdx-color-picker-hue",`${c(t.h)}deg`),this.style.setProperty("--skdx-color-picker-hue-position",`${c(t.h/360*100)}%`),this.style.setProperty("--skdx-color-picker-saturation",`${c(t.s)}%`),this.style.setProperty("--skdx-color-picker-brightness",`${c(t.b)}%`),this.style.setProperty("--skdx-color-picker-alpha",String(c(t.a))),this.style.setProperty("--skdx-color-picker-alpha-position",`${c(t.a*100)}%`),this.style.setProperty("--skdx-color-picker-value",(0,u.formatColor)(t,"hex",this.alpha))}describe(t){let e=(0,u.formatColor)(t,"hex",!1);return this.alpha&&t.a<1?`${e}, ${Math.round(t.a*100)}% opaque`:e}setColor(t,e){if(!this.interactive)return;let r=(0,u.formatColor)(t,this.format,this.alpha);this.color=t,this.ownValue=r,r!==this.value&&(this.value=r,this.dispatchEvent(new CustomEvent("value-change",{detail:r,bubbles:!0,composed:!0}))),e?.announce&&(0,v.announce)(this.describe(t))}setFormat(t){if(!this.interactive||t===this.format)return;this.format=t,this.dispatchEvent(new CustomEvent("format-change",{detail:t,bubbles:!0,composed:!0}));let e=(0,u.formatColor)(this.color,t,this.alpha);this.ownValue=e,e!==this.value&&(this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})))}commit(){this.dispatchEvent(new CustomEvent("value-commit",{detail:this.value,bubbles:!0,composed:!0}))}render(){return h.html`<slot></slot>`}};s.styles=h.css`
+"use strict";var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var _=(l,i)=>{for(var t in i)c(l,t,{get:i[t],enumerable:!0})},B=(l,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of k(i))!g.call(l,o)&&o!==t&&c(l,o,{get:()=>i[o],enumerable:!(e=y(i,o))||e.enumerable});return l};var V=l=>B(c({},"__esModule",{value:!0}),l),a=(l,i,t,e)=>{for(var o=e>1?void 0:e?y(i,t):i,d=l.length-1,f;d>=0;d--)(f=l[d])&&(o=(e?f(i,t,o):f(o))||o);return e&&o&&c(i,t,o),o};var F={};_(F,{SkdxColorPicker:()=>r});module.exports=V(F);var p=require("lit"),s=require("lit/decorators.js"),b=require("../internal/authored.cjs"),h=require("../internal/color.cjs"),v=require("../internal/define.cjs"),n=require("../internal/events.cjs"),w=require("../internal/positioning.cjs"),A=require("../utils/live-announcer.cjs"),m=require("./ColorPickerAnatomy.cjs");var E=["skdx-color-picker-area","skdx-color-picker-area-thumb","skdx-color-picker-hue-slider","skdx-color-picker-hue-slider-thumb","skdx-color-picker-alpha-slider","skdx-color-picker-alpha-slider-thumb","skdx-color-picker-swatch-group","skdx-color-picker-swatch","skdx-color-picker-input","skdx-color-picker-format-select","skdx-color-picker-eye-dropper"].join(", "),x={h:0,s:0,b:0,a:1};function u(l){return Math.round(l*1e3)/1e3}var r=class extends p.LitElement{constructor(){super(...arguments);this.value="#000000";this.defaultValue="#000000";this.format="hex";this.defaultFormat="hex";this.alpha=!0;this.step=1;this.disabled=!1;this.readOnly=!1;this.showInput=!0;this.showSwatches=!0;this.showEyeDropper=!0;this.fullWidth=!1;this.color=x;this.ownValue="";this._anatomyBuilt=!1;this._fillAnatomy=()=>{if((0,b.hasAuthoredParts)(this,m.COLOR_PICKER_ANATOMY_GENERATED)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,(0,m.fillColorPickerAnatomy)(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()}}get interactive(){return!this.disabled&&!this.readOnly}connectedCallback(){super.connectedCallback(),this.hasAttribute("value")||(this.value=this.defaultValue),this.hasAttribute("format")||(this.format=this.defaultFormat),queueMicrotask(this._fillAnatomy)}willUpdate(t){if(t.has("value")&&this.value!==this.ownValue){this.ownValue=this.value;let e=(0,h.parseColor)(this.value);e&&(this.color=e)}}updated(t){t.has("alpha")||t.has("showSwatches")||t.has("swatches")||t.has("showInput")||t.has("showEyeDropper")?this._rebuildAnatomy():this._fillAnatomy(),this.syncHostAttributes();for(let e of Array.from(this.querySelectorAll(E)))e.syncFromRoot?.()}syncHostAttributes(){let t=this.color;this.setAttribute("data-value",this.value),this.setAttribute("data-format",this.format),this.toggleAttribute("data-disabled",this.disabled),this.toggleAttribute("data-readonly",this.readOnly),this.style.setProperty("--skdx-color-picker-hue",`${u(t.h)}deg`),this.style.setProperty("--skdx-color-picker-hue-position",`${u(t.h/360*100)}%`),this.style.setProperty("--skdx-color-picker-saturation",`${u(t.s)}%`),this.style.setProperty("--skdx-color-picker-brightness",`${u(t.b)}%`),this.style.setProperty("--skdx-color-picker-alpha",String(u(t.a))),this.style.setProperty("--skdx-color-picker-alpha-position",`${u(t.a*100)}%`),this.style.setProperty("--skdx-color-picker-value",(0,h.formatColor)(t,"hex",this.alpha))}describe(t){let e=(0,h.formatColor)(t,"hex",!1);return this.alpha&&t.a<1?`${e}, ${Math.round(t.a*100)}% opaque`:e}setColor(t,e){if(!this.interactive)return;let o=(0,h.formatColor)(t,this.format,this.alpha);this.color=t,this.ownValue=o,o!==this.value&&(this.value=o,(0,n.emit)(this,"value-change",o)),e?.announce&&(0,A.announce)(this.describe(t))}setFormat(t){if(!this.interactive||t===this.format)return;this.format=t,(0,n.emit)(this,"format-change",t);let e=(0,h.formatColor)(this.color,t,this.alpha);this.ownValue=e,e!==this.value&&(this.value=e,(0,n.emit)(this,"value-change",e))}commit(){(0,n.emit)(this,"value-commit",this.value)}render(){return p.html`<slot @slotchange=${this._fillAnatomy}></slot>`}};r.styles=p.css`
     :host {
       display: block;
     }
-  `,i([(0,l.property)({type:String,reflect:!0})],s.prototype,"value",2),i([(0,l.property)({type:String,attribute:"default-value"})],s.prototype,"defaultValue",2),i([(0,l.property)({type:String,reflect:!0})],s.prototype,"format",2),i([(0,l.property)({type:String,attribute:"default-format"})],s.prototype,"defaultFormat",2),i([(0,l.property)({converter:f.optOutBoolean})],s.prototype,"alpha",2),i([(0,l.property)({type:Number,reflect:!0})],s.prototype,"step",2),i([(0,l.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),i([(0,l.property)({type:Boolean,reflect:!0,attribute:"read-only"})],s.prototype,"readOnly",2),i([(0,l.state)()],s.prototype,"color",2),s=i([(0,b.customElement)("skdx-color-picker","color-picker","root")],s);0&&(module.exports={SkdxColorPicker});
+  `,a([(0,s.property)({type:String,reflect:!0})],r.prototype,"value",2),a([(0,s.property)({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),a([(0,s.property)({type:String,reflect:!0})],r.prototype,"format",2),a([(0,s.property)({type:String,attribute:"default-format"})],r.prototype,"defaultFormat",2),a([(0,s.property)({converter:w.optOutBoolean})],r.prototype,"alpha",2),a([(0,s.property)({type:Number,reflect:!0})],r.prototype,"step",2),a([(0,s.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),a([(0,s.property)({type:Boolean,reflect:!0,attribute:"read-only"})],r.prototype,"readOnly",2),a([(0,s.property)({type:Boolean,attribute:"show-input"})],r.prototype,"showInput",2),a([(0,s.property)({type:Boolean,attribute:"show-swatches"})],r.prototype,"showSwatches",2),a([(0,s.property)({type:Boolean,attribute:"show-eye-dropper"})],r.prototype,"showEyeDropper",2),a([(0,s.property)({attribute:!1})],r.prototype,"swatches",2),a([(0,s.property)({type:Boolean,reflect:!0,attribute:"data-full-width"})],r.prototype,"fullWidth",2),a([(0,s.property)({type:String,reflect:!0,attribute:"data-size"})],r.prototype,"size",2),a([(0,s.state)()],r.prototype,"color",2),r=a([(0,v.customElement)("skdx-color-picker","color-picker","root")],r);0&&(module.exports={SkdxColorPicker});

package/dist/color-picker/ColorPicker.d.cts

@@ -1,50 +1,11 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import { type ColorFormat, type HsbColor } from '../internal/color.cjs';
+import { type SkdxColorPickerSwatchDescriptor } from './ColorPickerAnatomy.cjs';
+export type { SkdxColorPickerSwatchDescriptor } from './ColorPickerAnatomy.cjs';
 /**
- * `<skdx-color-picker>` — the Web Components implementation of the shared
- * ColorPicker contract (see `@skdx/shared`'s `colorPickerContract`). Owns the
- * colour, owns the notation it is spelled in, and publishes both to every part
- * and to CSS through custom properties. The host carries **no role of its
- * own** — each interactive part carries its own semantics, so a role here would
- * only add an unnamed group between the user and them. Wrap it in a labelled
- * `role="group"` yourself if the picker needs introducing as a unit.
- *
- * **The colour is stored as HSB, not as the string.** RGB and hex cannot
- * represent the hue of a black, so a picker that re-parsed its own string on
- * every change would lose the user's hue the moment they dragged brightness to
- * zero and hand them red on the way back up. `value` is the *serialisation*;
- * the canonical colour lives beside it and only re-syncs when a string arrives
- * that this picker did not produce. An unparseable `value` keeps the last good
- * colour rather than blanking the picker — `#ab` is one keystroke from valid.
- *
- * Positioning is entirely CSS. The host publishes:
- *
- * | Property | Example | For |
- * | --- | --- | --- |
- * | `--skdx-color-picker-hue` | `210deg` | the area's hue backdrop, `hsl(var(--…-hue) 100% 50%)` |
- * | `--skdx-color-picker-hue-position` | `58.333%` | the hue thumb's offset along its track |
- * | `--skdx-color-picker-saturation` | `65%` | the area thumb's horizontal offset |
- * | `--skdx-color-picker-brightness` | `85%` | the area thumb's vertical offset |
- * | `--skdx-color-picker-alpha` | `0.5` | an opacity, directly |
- * | `--skdx-color-picker-alpha-position` | `50%` | the alpha thumb's offset along its track |
- * | `--skdx-color-picker-value` | `#d94c4c` | the current colour as a swatch fill |
- *
- * `--skdx-color-picker-value` is **always hex**, never the active format:
- * `hsb()` is this library's own notation and not a CSS colour, so publishing
- * the raw `value` would silently break every
- * `background: var(--skdx-color-picker-value)` the moment a user switched
- * format.
- *
- * Descendant parts find this root with `closest('skdx-color-picker')` — custom
- * elements have no context API — and the root pushes its state onto them after
- * every update, so no part duplicates it.
- *
- * Not a form control in itself: the colour is submitted by the consumer,
- * typically through a hidden input carrying the emitted string.
- *
- * **An overlay picker composes `<skdx-popover>`** rather than growing a trigger
- * and a content part of its own — there is nothing about positioning a colour
- * picker that differs from positioning anything else.
+ * Root of a colour picker: owns the colour (stored as HSB so hue survives a
+ * trip to black) and its notation, publishing both to every descendant part
+ * and to CSS through `--skdx-color-picker-*` custom properties.
  *
  * @example
  * ```html
@@ -55,88 +16,100 @@ import { type ColorFormat, type HsbColor } from '../internal/color.cjs';
  *   <skdx-color-picker-hue-slider>
  *     <skdx-color-picker-hue-slider-thumb></skdx-color-picker-hue-slider-thumb>
  *   </skdx-color-picker-hue-slider>
- *   <skdx-color-picker-alpha-slider>
- *     <skdx-color-picker-alpha-slider-thumb></skdx-color-picker-alpha-slider-thumb>
- *   </skdx-color-picker-alpha-slider>
- *   <skdx-color-picker-format-select></skdx-color-picker-format-select>
- *   <skdx-color-picker-input></skdx-color-picker-input>
- *   <skdx-color-picker-eye-dropper>🔍</skdx-color-picker-eye-dropper>
  * </skdx-color-picker>
  * ```
  *
- * @fires value-change - Fires with the new colour string on every change: each arrow key, each frame of a drag that moves the colour, each swatch click — and also on a format change, because the string genuinely changed even though the colour did not. Suppressed when the new string equals the one already reported.
- * @fires value-commit - Fires once with the final colour string (string) when a pointer drag ends, by release or cancel. This is the event to hang an expensive effect on: a drag emits `value-change` per frame and this one exactly once. Keyboard and click changes do not fire it — each is already a discrete commit reported by `value-change`.
- * @fires format-change - Fires with the new notation (`'hex' | 'rgb' | 'hsl' | 'hsb'`) whenever it changes. `value-change` fires alongside it with the re-spelled string.
+ * @fires value-change Fires with the new string on every change: arrow keys, drag
+ * frames, swatch clicks, and format switches; suppressed when the string doesn't change.
+ * @fires value-commit Fires once with the final string when a pointer drag ends.
+ * Use for expensive effects; `value-change` fires per frame but this fires once.
+ * Keyboard and click changes do not fire it.
+ * @fires format-change Fires with the new notation. `value-change` fires alongside
+ * it with the re-spelled string.
  */
 export declare class SkdxColorPicker extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Current colour as a string in the active `format`. The property is the
-     * single source of truth, like a native `<input>`'s `value`: a consumer that
-     * wants controlled behaviour listens for `value-change` and writes it back.
-     * Anything {@link parseColor} understands is accepted regardless of `format`.
+     * Current colour for controlled usage, paired with `value-change`, accepting
+     * any {@link parseColor} notation — unparseable input keeps the last colour.
      * @default '#000000' — opaque black, the one colour every format agrees on.
-     * An unparseable string is ignored and the last good colour kept, because a
-     * half-typed `#ab` should not blank the picker.
      */
     value: string;
     /**
-     * Initial colour, for uncontrolled usage. Applied once, on connect, and only
-     * if the `value` attribute wasn't already set.
-     * @default '#000000' — the picker starts on opaque black.
+     * Initial colour, for uncontrolled usage, seeding the first render.
+     * @default '#000000' — opaque black, the one colour every format agrees on.
      */
     defaultValue: string;
     /**
-     * Notation `value` is written in. The colour itself is stored as HSB whatever
-     * this says; the format only decides how it is spelled on the way out.
+     * Notation `value` is written in, for controlled usage, paired with
+     * `format-change` — the colour itself is stored as HSB, format only decides spelling.
      * @default 'hex' — the notation people paste, type and recognise.
      */
     format: ColorFormat;
     /**
-     * Initial notation, for uncontrolled usage. Applied once, on connect, and
-     * only if the `format` attribute wasn't already set.
-     * @default 'hex' — the picker starts spelling its colour as hex.
+     * The notation the picker starts in when it is left uncontrolled.
+     * @default 'hex' — the notation people paste, type and recognise.
      */
     defaultFormat: ColorFormat;
     /**
-     * Whether the picker has an alpha channel. With it off,
-     * `<skdx-color-picker-alpha-slider>` hides itself and every emitted string is
-     * fully opaque — so a consumer that cannot handle transparency never receives
-     * an `rgba()` it must strip.
-     *
-     * Uses the `optOutBoolean` converter rather than Lit's stock `Boolean`, which
-     * reads attribute *presence*: a prop that defaults to `true` can only be
-     * switched off by value, so `alpha="false"` is the way to opt out.
+     * Whether the picker has an alpha channel — when `false`, `ColorPickerAlphaSlider`
+     * renders nothing and every emitted string is fully opaque.
      * @default true — the picker offers transparency.
      */
     alpha: boolean;
     /**
-     * Keyboard increment, in the units of whichever channel is being stepped:
-     * percentage points for saturation, brightness and alpha, degrees for hue.
-     * Shift multiplies it by ten, so a 1-unit picker still has a coarse gear.
-     * @default 1 — every whole unit is reachable without a pointer. `0` makes
-     * pointer input continuous, while the arrows keep falling back to one unit so
-     * every value stays reachable by keyboard.
+     * Keyboard increment in channel units (percent for saturation/brightness/alpha,
+     * degrees for hue), multiplied by ten with Shift.
+     * @default 1 — every whole unit is reachable without a pointer.
      */
     step: number;
     /**
      * Blocks pointer and keyboard interaction across every part, and takes the
      * focusable parts out of the tab order.
-     * @default false — the picker is interactive and in the tab order.
+     * @default false
      */
     disabled: boolean;
     /**
-     * Displays the colour but blocks changes, while every part stays focusable
-     * and in the tab order — unlike `disabled`, a read-only picker can still be
-     * reached and read by a keyboard user. It also refuses a format switch,
-     * because switching format changes `value`.
-     * @default false — changes are accepted.
+     * Displays the colour but blocks changes and format switches, while every
+     * part stays focusable and in the tab order (unlike `disabled`).
+     * @default false
      */
     readOnly: boolean;
     /**
-     * @internal The canonical colour. HSB, so hue survives a trip to black.
-     * Read by every part through `closest('skdx-color-picker')`; written only by
-     * {@link setColor}.
+     * Whether to render a `ColorPickerInput`. Ignored when `children` is given.
+     * @default true
+     */
+    showInput: boolean;
+    /**
+     * Whether to render a `ColorPickerSwatchGroup`. Ignored when `children` is
+     * given or `swatches` is empty.
+     * @default true
+     */
+    showSwatches: boolean;
+    /**
+     * Whether to render a `ColorPickerEyeDropper` trigger. Ignored when `children` is given.
+     * @default true
+     */
+    showEyeDropper: boolean;
+    /**
+     * Preset colours the derived anatomy renders as `ColorPickerSwatch` parts,
+     * one per entry, ignored when `children` is given or `showSwatches` is `false`.
+     * @default undefined
+     */
+    swatches?: readonly SkdxColorPickerSwatchDescriptor[];
+    /**
+     * Stretches the control to fill its container inline size, reflected as `data-full-width`.
+     * @default false
+     */
+    fullWidth: boolean;
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
+    /**
+     * @internal The canonical colour (HSB, so hue survives a trip to black),
+     * read by every part and written only by {@link setColor}.
      */
     color: HsbColor;
     /** @internal The last string this picker produced itself; anything else in `value` arrived from outside. */
@@ -144,46 +117,39 @@ export declare class SkdxColorPicker extends LitElement {
     /** `!disabled && !readOnly` — the single condition every part gates input on. @internal */
     get interactive(): boolean;
     connectedCallback(): void;
+    private _anatomyBuilt;
+    private readonly _fillAnatomy;
+    private readonly _rebuildAnatomy;
     protected willUpdate(changed: PropertyValues): void;
-    protected updated(): void;
+    protected updated(changed: PropertyValues): void;
     private syncHostAttributes;
     /**
-     * What a change to this colour sounds like. Hex rather than the active
-     * format, because `hsb(210, 60%, 85%)` read aloud is three numbers and a unit
-     * nobody asked for, while a hex string is the one spelling a user is likely
-     * to recognise and repeat.
-     *
-     * @internal Used both as `aria-valuetext` on the channel sliders and as the
-     * body of the live announcement the swatch, eyedropper and input make.
+     * What a change to this colour sounds like — hex rather than the active
+     * format, since a hex string is the spelling a user is likely to recognise and repeat.
+     * @internal Used as `aria-valuetext` on the channel sliders and in live announcements.
      */
     describe(target: HsbColor): string;
     /**
-     * @internal Applies a new colour and dispatches `value-change`. Called by
-     * every part. `announce` is for controls whose own role does not already
-     * speak the result — a swatch, the eyedropper, a committed input; the parts
-     * that carry `role="slider"` stay silent, because their own `aria-valuetext`
-     * already re-announces on every change and speaking again would say the
-     * colour twice per arrow key.
+     * @internal Applies a new colour and dispatches `value-change`, called by
+     * every part; `announce` is for controls whose own role doesn't already
+     * speak the result (sliders' `aria-valuetext` already does).
      */
     setColor(next: HsbColor, options?: {
         announce?: boolean;
     }): void;
     /**
-     * @internal Switches the notation. The colour has not changed, but its
-     * spelling has — and `value` is a string, so a format switch is a value
-     * change to every consumer of it, and `value-change` fires alongside
-     * `format-change`. A read-only picker refuses, for exactly that reason.
+     * @internal Switches the notation; `value` is a string, so a format switch
+     * is also a value change, and `value-change` fires alongside `format-change`.
+     * A read-only picker refuses both.
      */
     setFormat(next: ColorFormat): void;
     /**
-     * @internal Dispatches `value-commit` with the value as it currently stands.
-     * Called once by the area and the two tracks at the end of a pointer drag —
-     * never suppressed, because a commit is an action, not a state change: a
-     * consumer waiting for the end of a drag must hear about it even when the
-     * drag put the colour back where it started.
+     * @internal Dispatches `value-commit` with the value as it currently stands,
+     * once at the end of a pointer drag; never suppressed, since a commit is an
+     * action, not a state change.
      */
     commit(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {