@skdx/web-components 0.26.0

package/dist/color-picker/ColorPickerInput.d.ts

@@ -0,0 +1,86 @@
+import { LitElement } from 'lit';
+/** Which single channel a {@link SkdxColorPickerInput} edits. */
+export type ColorChannel = 'hex' | 'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'brightness' | 'lightness' | 'alpha';
+/**
+ * `<skdx-color-picker-input>` — a text field over the colour. With no `channel`
+ * it carries the **whole value in the picker's current format** — the hex box
+ * people expect, which re-spells itself the moment the format changes. With a
+ * `channel` it edits one number: `red`, `hue`, `alpha`, and so on, which is how
+ * an RGB spinbox row is built without eight elements. Must be used inside
+ * `<skdx-color-picker>`.
+ *
+ * Editing is **draft-based**: keystrokes are held locally and only applied on
+ * `Enter` or blur, because `#ab` on the way to `#abcdef` is not a colour and
+ * committing per keystroke would repaint the picker to black halfway through
+ * every hex the user types. `Escape` abandons the draft, and an entry that does
+ * not parse reverts rather than clearing the colour.
+ *
+ * A commit **announces the resulting colour** through the shared live region.
+ * An input is not a slider: a screen reader echoes the characters typed, which
+ * says nothing about the colour they produced.
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-input aria-label="Hex value"></skdx-color-picker-input>
+ *
+ * <skdx-color-picker-input channel="red"></skdx-color-picker-input>
+ * <skdx-color-picker-input channel="green"></skdx-color-picker-input>
+ * <skdx-color-picker-input channel="blue"></skdx-color-picker-input>
+ * <skdx-color-picker-input channel="alpha"></skdx-color-picker-input>
+ * ```
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), for the same reason `<skdx-text-field-input>` does: behind a shadow
+ * boundary a wrapping `<label>` cannot name the `<input>` (a label names its
+ * first labelable *descendant*) and `<skdx-field>`'s `findFieldControl()` cannot
+ * see it (`querySelectorAll()` does not pierce a shadow root). Putting
+ * `display: contents` on the `<input>` instead is not an option: CSS Display 3
+ * computes it to `none` on form controls.
+ *
+ * @csspart input - The native `<input>` element. **`::part(input)` does not reach it.**
+ * This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
+ * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so
+ * the name matches the shadow-DOM components and the styling-hooks contract. Style it as an
+ * ordinary descendant instead: `skdx-color-picker-input > input { … }`.
+ */
+export declare class SkdxColorPickerInput extends LitElement {
+    /** Light DOM, for the labelling reasons in the class docblock. */
+    createRenderRoot(): this;
+    /**
+     * Reaches through to the native `<input>`. The shadow root used to carry
+     * `delegatesFocus`, which did this for free; a light-DOM element has to
+     * forward focus itself.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Which single channel this input edits. Omit it and the input carries the
+     * whole colour as one string in the picker's current `format`.
+     * @default undefined — the whole colour, in the current format, which is the
+     * hex box people expect and which re-spells itself when the format changes.
+     */
+    channel?: ColorChannel;
+    /** @internal The in-progress edit, or `null` when the field is showing the committed colour. */
+    private draft;
+    private root;
+    /** The consumer's own name for this field, moved off the host so it lands on the element that has the role. */
+    private label;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
+    syncFromRoot(): void;
+    private get numeric();
+    /** The text the field shows when nothing is being typed into it. */
+    private get committed();
+    protected updated(): void;
+    /** Applies `text`, or reports that it could not be read so the caller can revert. */
+    private commitText;
+    private readonly handleInput;
+    private readonly handleKeydown;
+    private readonly handleBlur;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-input': SkdxColorPickerInput;
+    }
+}

package/dist/color-picker/ColorPickerInput.js

@@ -0,0 +1,14 @@
+var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=(e,r,t,i)=>{for(var o=i>1?void 0:i?p(r,t):r,l=e.length-1,a;l>=0;l--)(a=e[l])&&(o=(i?a(r,t,o):a(o))||o);return i&&o&&m(r,t,o),o};import{html as c,LitElement as b}from"lit";import{property as f,state as v}from"lit/decorators.js";import{takeHostAriaLabel as g}from"../internal/aria-label.js";import{formatColor as x,hsbToHsl as h,hsbToRgb as n,hslToHsb as y,parseColor as C,rgbToHsb as d}from"../internal/color.js";import{customElement as k}from"../internal/define.js";import{installLightDomStyles as w}from"../internal/styles.js";var E={red:{max:255,label:"Red",read:e=>n(e).r,write:(e,r)=>d({...n(e),r})},green:{max:255,label:"Green",read:e=>n(e).g,write:(e,r)=>d({...n(e),g:r})},blue:{max:255,label:"Blue",read:e=>n(e).b,write:(e,r)=>d({...n(e),b:r})},hue:{max:360,label:"Hue",read:e=>e.h,write:(e,r)=>({...e,h:r})},saturation:{max:100,label:"Saturation",read:e=>e.s,write:(e,r)=>({...e,s:r})},brightness:{max:100,label:"Brightness",read:e=>e.b,write:(e,r)=>({...e,b:r})},lightness:{max:100,label:"Lightness",read:e=>h(e).l,write:(e,r)=>y({...h(e),l:r})},alpha:{max:100,label:"Opacity",read:e=>e.a*100,write:(e,r)=>({...e,a:r/100})}},s=class extends b{constructor(){super(...arguments);this.draft=null;this.root=null;this.label=null;this.handleInput=t=>{this.draft=t.target.value};this.handleKeydown=t=>{t.key==="Enter"?(t.preventDefault(),this.commitText(this.draft??this.committed),this.draft=null):t.key==="Escape"&&(this.draft=null)};this.handleBlur=()=>{this.draft!==null&&this.commitText(this.draft),this.draft=null}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}connectedCallback(){if(super.connectedCallback(),w(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-input> must be used inside <skdx-color-picker>.");this.label=g(this)}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}get numeric(){let t=this.channel;return t&&t!=="hex"?E[t]:null}get committed(){let t=this.root;if(!t)return"";let i=this.numeric;return i?String(Math.round(i.read(t.color))):this.channel==="hex"?x(t.color,"hex",t.alpha):t.value}updated(){let t=this.root;t&&(this.setAttribute("data-channel",this.channel??"value"),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly))}commitText(t){let i=this.root;if(!i?.interactive)return!1;let o=this.numeric;if(o){let a=Number(t.trim());return t.trim()===""||!Number.isFinite(a)?!1:(i.setColor(o.write(i.color,Math.min(Math.max(a,0),o.max)),{announce:!0}),!0)}let l=C(t);return l?(i.setColor(l,{announce:!0}),!0):!1}render(){let t=this.root;if(!t)return c`<input part="input" />`;let i=this.numeric;return c`<input
+      part="input"
+      type="text"
+      inputmode=${i?"numeric":"text"}
+      autocomplete="off"
+      spellcheck="false"
+      aria-label=${this.label??(i?i.label:"Colour value")}
+      ?disabled=${t.disabled}
+      ?readonly=${t.readOnly}
+      .value=${this.draft??this.committed}
+      @input=${this.handleInput}
+      @keydown=${this.handleKeydown}
+      @blur=${this.handleBlur}
+    />`}};u([f({type:String,reflect:!0})],s.prototype,"channel",2),u([v()],s.prototype,"draft",2),s=u([k("skdx-color-picker-input","color-picker","input")],s);export{s as SkdxColorPickerInput};

package/dist/color-picker/ColorPickerSwatch.cjs

@@ -0,0 +1,40 @@
+"use strict";var c=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var v=(s,e)=>{for(var t in e)c(s,t,{get:e[t],enumerable:!0})},f=(s,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!w.call(s,o)&&o!==t&&c(s,o,{get:()=>e[o],enumerable:!(i=k(e,o))||i.enumerable});return s};var g=s=>f(c({},"__esModule",{value:!0}),s),h=(s,e,t,i)=>{for(var o=i>1?void 0:i?k(e,t):e,d=s.length-1,u;d>=0;d--)(u=s[d])&&(o=(i?u(e,t,o):u(o))||o);return i&&o&&c(e,t,o),o};var x={};v(x,{SkdxColorPickerSwatch:()=>r});module.exports=g(x);var a=require("lit"),p=require("lit/decorators.js"),n=require("../internal/color.cjs"),b=require("../internal/define.cjs"),l=require("../internal/styles.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.group=null;this.handleClick=()=>{let t=this.parsed;t&&this.root?.setColor(t,{announce:!0})};this.handleFocus=()=>{this.group?.setFocusedValue(this.value)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),this.group=this.closest("skdx-color-picker-swatch-group"),!this.root||!this.group)throw new Error("<skdx-color-picker-swatch> must be used inside <skdx-color-picker-swatch-group>, inside <skdx-color-picker>.")}disconnectedCallback(){this.root=null,this.group=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}get parsed(){return(0,n.parseColor)(this.value)}get swatchHex(){let t=this.parsed;return t?(0,n.formatColor)(t,"hex",this.root?.alpha??!0):this.value}get checked(){let t=this.root;return!t||this.parsed===null?!1:this.swatchHex===(0,n.formatColor)(t.color,"hex",t.alpha)}get isDisabled(){return this.disabled||(this.root?.disabled??!1)||this.parsed===null}updated(){let t=this.root;t&&(this.setAttribute("data-value",this.value),this.setAttribute("data-state",this.checked?"checked":"unchecked"),this.toggleAttribute("data-disabled",this.isDisabled),this.toggleAttribute("data-readonly",t.readOnly),this.style.setProperty("--skdx-color-picker-swatch-value",this.swatchHex))}render(){let t=this.isDisabled,i=this.checked;return a.html`<button
+      part="swatch"
+      type="button"
+      role="radio"
+      aria-checked=${i}
+      aria-label=${this.swatchHex}
+      aria-disabled=${t?"true":a.nothing}
+      tabindex=${this.group?.activeValue===this.value?"0":"-1"}
+      data-state=${i?"checked":"unchecked"}
+      ?disabled=${t}
+      @click=${this.handleClick}
+      @focus=${this.handleFocus}
+    >
+      <slot></slot>
+    </button>`}};r.shadowRootOptions=l.delegatesFocusShadowRootOptions,r.styles=[l.resetNativeControl,l.hiddenHostStyles,a.css`
+      /**
+       * A flex container, not an inline-block, and that is load-bearing.
+       *
+       * A swatch has no content — it is a colour square, so the shadow
+       * <button>'s <slot> is empty and the button has no intrinsic size of its
+       * own. The box comes from the skin, which paints the *host*:
+       * .skdx-color-picker__swatch is 32x32 (skins/src/components/color-picker.css:170),
+       * and React puts that same class straight on its <button>
+       * (react/src/color-picker/ColorPickerSwatch.tsx:86).
+       *
+       * controlBoxOnHost is what carries the host's box down to the control
+       * here, and it does it with flex: 1 and align-self: stretch — both of
+       * which are inert unless the host is a flex container. As an
+       * inline-block the host painted its 32x32 square while the button inside
+       * it measured 0x0: the swatch was visible but the thing that takes focus
+       * was not, so the focus ring had nothing to draw around.
+       *
+       * The skin sets no display on this part, so this rule is the one that
+       * decides. No backticks anywhere in this block: it lives inside a
+       * template literal, where one would terminate the string.
+       */
+      :host {
+        display: inline-flex;
+      }
+    `,l.controlBoxOnHost],h([(0,p.property)({type:String,reflect:!0})],r.prototype,"value",2),h([(0,p.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=h([(0,b.customElement)("skdx-color-picker-swatch","color-picker","swatch")],r);0&&(module.exports={SkdxColorPickerSwatch});

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

@@ -0,0 +1,84 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-color-picker-swatch>` — one preset colour inside a
+ * `<skdx-color-picker-swatch-group>`. Renders a `role="radio"` `<button>` whose
+ * `aria-checked` is true when the picker's current colour matches this swatch
+ * exactly — compared as hex, so `#f00`, `#ff0000` and `rgb(255, 0, 0)` are all
+ * recognised as the same preset. Must be used inside both the group and
+ * `<skdx-color-picker>`.
+ *
+ * Clicking it **announces the resulting colour** through the shared live
+ * region. A swatch is a button, not a slider: nothing about pressing it tells a
+ * screen-reader user what colour they now have, so this is one of the few
+ * controls in the family that speaks for itself.
+ *
+ * A `value` the parser cannot read renders a **disabled** swatch rather than a
+ * button that silently does nothing — a preset list built from user data should
+ * fail visibly.
+ *
+ * It publishes `--skdx-color-picker-swatch-value` (always hex, always a real CSS
+ * colour) so the fill is one rule and never a second copy of the value in an
+ * inline `background`:
+ *
+ * ```css
+ * skdx-color-picker-swatch::part(swatch) {
+ *   background: var(--skdx-color-picker-swatch-value);
+ * }
+ * skdx-color-picker-swatch[data-state='checked']::part(swatch) {
+ *   outline: 2px solid currentColor;
+ * }
+ * ```
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-swatch-group aria-label="Preset colours">
+ *   <skdx-color-picker-swatch value="#e11d48"></skdx-color-picker-swatch>
+ *   <skdx-color-picker-swatch value="rgb(16 185 129 / 50%)"></skdx-color-picker-swatch>
+ * </skdx-color-picker-swatch-group>
+ * ```
+ *
+ * @csspart swatch - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxColorPickerSwatch extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * The colour this swatch selects, in any notation the picker's parser
+     * understands — hex, `rgb()`, `hsl()` or this library's `hsb()`.
+     * @default '' — which is unparseable, so a swatch with no value renders
+     * disabled rather than as a button that does nothing when clicked.
+     */
+    value: string;
+    /**
+     * Disables this swatch specifically, in addition to the root's disabled
+     * state and the automatic disabling of an unparseable `value`.
+     * @default false
+     */
+    disabled: boolean;
+    private root;
+    private group;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Mirrors the root's (and the group's) state onto this host. Called by both after every update. */
+    syncFromRoot(): void;
+    /** The parsed colour, or `null` when `value` is not a colour this library reads. */
+    private get parsed();
+    /**
+     * Hex is the comparison currency: two notations for the same colour must read
+     * as the same preset, and hex is the one every notation converts to.
+     */
+    private get swatchHex();
+    /** @internal Whether this preset is the picker's current colour. Read by the group to place the tab stop. */
+    get checked(): boolean;
+    /** @internal Disabled by its own prop, by the root, or by a `value` that is not a colour. Read by the group's roving focus. */
+    get isDisabled(): boolean;
+    protected updated(): void;
+    private readonly handleClick;
+    private readonly handleFocus;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-swatch': SkdxColorPickerSwatch;
+    }
+}

package/dist/color-picker/ColorPickerSwatch.d.ts

@@ -0,0 +1,84 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-color-picker-swatch>` — one preset colour inside a
+ * `<skdx-color-picker-swatch-group>`. Renders a `role="radio"` `<button>` whose
+ * `aria-checked` is true when the picker's current colour matches this swatch
+ * exactly — compared as hex, so `#f00`, `#ff0000` and `rgb(255, 0, 0)` are all
+ * recognised as the same preset. Must be used inside both the group and
+ * `<skdx-color-picker>`.
+ *
+ * Clicking it **announces the resulting colour** through the shared live
+ * region. A swatch is a button, not a slider: nothing about pressing it tells a
+ * screen-reader user what colour they now have, so this is one of the few
+ * controls in the family that speaks for itself.
+ *
+ * A `value` the parser cannot read renders a **disabled** swatch rather than a
+ * button that silently does nothing — a preset list built from user data should
+ * fail visibly.
+ *
+ * It publishes `--skdx-color-picker-swatch-value` (always hex, always a real CSS
+ * colour) so the fill is one rule and never a second copy of the value in an
+ * inline `background`:
+ *
+ * ```css
+ * skdx-color-picker-swatch::part(swatch) {
+ *   background: var(--skdx-color-picker-swatch-value);
+ * }
+ * skdx-color-picker-swatch[data-state='checked']::part(swatch) {
+ *   outline: 2px solid currentColor;
+ * }
+ * ```
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-swatch-group aria-label="Preset colours">
+ *   <skdx-color-picker-swatch value="#e11d48"></skdx-color-picker-swatch>
+ *   <skdx-color-picker-swatch value="rgb(16 185 129 / 50%)"></skdx-color-picker-swatch>
+ * </skdx-color-picker-swatch-group>
+ * ```
+ *
+ * @csspart swatch - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxColorPickerSwatch extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * The colour this swatch selects, in any notation the picker's parser
+     * understands — hex, `rgb()`, `hsl()` or this library's `hsb()`.
+     * @default '' — which is unparseable, so a swatch with no value renders
+     * disabled rather than as a button that does nothing when clicked.
+     */
+    value: string;
+    /**
+     * Disables this swatch specifically, in addition to the root's disabled
+     * state and the automatic disabling of an unparseable `value`.
+     * @default false
+     */
+    disabled: boolean;
+    private root;
+    private group;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Mirrors the root's (and the group's) state onto this host. Called by both after every update. */
+    syncFromRoot(): void;
+    /** The parsed colour, or `null` when `value` is not a colour this library reads. */
+    private get parsed();
+    /**
+     * Hex is the comparison currency: two notations for the same colour must read
+     * as the same preset, and hex is the one every notation converts to.
+     */
+    private get swatchHex();
+    /** @internal Whether this preset is the picker's current colour. Read by the group to place the tab stop. */
+    get checked(): boolean;
+    /** @internal Disabled by its own prop, by the root, or by a `value` that is not a colour. Read by the group's roving focus. */
+    get isDisabled(): boolean;
+    protected updated(): void;
+    private readonly handleClick;
+    private readonly handleFocus;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-swatch': SkdxColorPickerSwatch;
+    }
+}

package/dist/color-picker/ColorPickerSwatch.js

@@ -0,0 +1,40 @@
+var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(a,i,t,o)=>{for(var s=o>1?void 0:o?u(i,t):i,l=a.length-1,n;l>=0;l--)(n=a[l])&&(s=(o?n(i,t,s):n(s))||s);return o&&s&&d(i,t,s),s};import{css as p,html as k,LitElement as b,nothing as m}from"lit";import{property as c}from"lit/decorators.js";import{formatColor as h,parseColor as w}from"../internal/color.js";import{customElement as v}from"../internal/define.js";import{controlBoxOnHost as f,delegatesFocusShadowRootOptions as g,hiddenHostStyles as x,resetNativeControl as y}from"../internal/styles.js";var e=class extends b{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.group=null;this.handleClick=()=>{let t=this.parsed;t&&this.root?.setColor(t,{announce:!0})};this.handleFocus=()=>{this.group?.setFocusedValue(this.value)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),this.group=this.closest("skdx-color-picker-swatch-group"),!this.root||!this.group)throw new Error("<skdx-color-picker-swatch> must be used inside <skdx-color-picker-swatch-group>, inside <skdx-color-picker>.")}disconnectedCallback(){this.root=null,this.group=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}get parsed(){return w(this.value)}get swatchHex(){let t=this.parsed;return t?h(t,"hex",this.root?.alpha??!0):this.value}get checked(){let t=this.root;return!t||this.parsed===null?!1:this.swatchHex===h(t.color,"hex",t.alpha)}get isDisabled(){return this.disabled||(this.root?.disabled??!1)||this.parsed===null}updated(){let t=this.root;t&&(this.setAttribute("data-value",this.value),this.setAttribute("data-state",this.checked?"checked":"unchecked"),this.toggleAttribute("data-disabled",this.isDisabled),this.toggleAttribute("data-readonly",t.readOnly),this.style.setProperty("--skdx-color-picker-swatch-value",this.swatchHex))}render(){let t=this.isDisabled,o=this.checked;return k`<button
+      part="swatch"
+      type="button"
+      role="radio"
+      aria-checked=${o}
+      aria-label=${this.swatchHex}
+      aria-disabled=${t?"true":m}
+      tabindex=${this.group?.activeValue===this.value?"0":"-1"}
+      data-state=${o?"checked":"unchecked"}
+      ?disabled=${t}
+      @click=${this.handleClick}
+      @focus=${this.handleFocus}
+    >
+      <slot></slot>
+    </button>`}};e.shadowRootOptions=g,e.styles=[y,x,p`
+      /**
+       * A flex container, not an inline-block, and that is load-bearing.
+       *
+       * A swatch has no content — it is a colour square, so the shadow
+       * <button>'s <slot> is empty and the button has no intrinsic size of its
+       * own. The box comes from the skin, which paints the *host*:
+       * .skdx-color-picker__swatch is 32x32 (skins/src/components/color-picker.css:170),
+       * and React puts that same class straight on its <button>
+       * (react/src/color-picker/ColorPickerSwatch.tsx:86).
+       *
+       * controlBoxOnHost is what carries the host's box down to the control
+       * here, and it does it with flex: 1 and align-self: stretch — both of
+       * which are inert unless the host is a flex container. As an
+       * inline-block the host painted its 32x32 square while the button inside
+       * it measured 0x0: the swatch was visible but the thing that takes focus
+       * was not, so the focus ring had nothing to draw around.
+       *
+       * The skin sets no display on this part, so this rule is the one that
+       * decides. No backticks anywhere in this block: it lives inside a
+       * template literal, where one would terminate the string.
+       */
+      :host {
+        display: inline-flex;
+      }
+    `,f],r([c({type:String,reflect:!0})],e.prototype,"value",2),r([c({type:Boolean,reflect:!0})],e.prototype,"disabled",2),e=r([v("skdx-color-picker-swatch","color-picker","swatch")],e);export{e as SkdxColorPickerSwatch};

package/dist/color-picker/ColorPickerSwatchGroup.cjs

@@ -0,0 +1,5 @@
+"use strict";var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var w=(s,o)=>{for(var e in o)c(s,e,{get:o[e],enumerable:!0})},g=(s,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of y(o))!b.call(s,t)&&t!==e&&c(s,t,{get:()=>o[t],enumerable:!(r=h(o,t))||r.enumerable});return s};var x=s=>g(c({},"__esModule",{value:!0}),s),a=(s,o,e,r)=>{for(var t=r>1?void 0:r?h(o,e):o,l=s.length-1,i;l>=0;l--)(i=s[l])&&(t=(r?i(o,e,t):i(t))||t);return r&&t&&c(o,e,t),t};var C={};w(C,{SkdxColorPickerSwatchGroup:()=>d});module.exports=x(C);var n=require("lit"),u=require("lit/decorators.js"),f=require("../internal/define.cjs"),p=require("../internal/direction.cjs"),m=require("../internal/positioning.cjs"),k=require("../internal/styles.cjs");var A="skdx-color-picker-swatch",d=class extends n.LitElement{constructor(){super(...arguments);this.loop=!0;this.focusedValue=null;this.root=null;this.childObserver=new MutationObserver(()=>this.notifySwatches());this.handleKeydown=e=>{let r=this.swatches().filter(v=>!v.isDisabled);if(r.length===0)return;let t=r.indexOf(e.target),l=(0,p.directionalKey)(e.key,this),i;l==="ArrowRight"||l==="ArrowDown"?(i=t+1,i>=r.length&&(i=this.loop?0:r.length-1)):l==="ArrowLeft"||l==="ArrowUp"?(i=t-1,i<0&&(i=this.loop?r.length-1:0)):l==="Home"?i=0:l==="End"&&(i=r.length-1),i!==void 0&&(e.preventDefault(),r[i]?.focus())}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-swatch-group> must be used inside <skdx-color-picker>.");this.addEventListener("keydown",this.handleKeydown),this.childObserver.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.childObserver.disconnect(),this.root=null,super.disconnectedCallback()}swatches(){return Array.from(this.querySelectorAll(A))}get activeValue(){let e=this.swatches();return this.focusedValue!==null&&e.some(t=>t.value===this.focusedValue)?this.focusedValue:(e.find(t=>t.checked)??e[0])?.value??null}setFocusedValue(e){this.focusedValue!==e&&(this.focusedValue=e,this.notifySwatches())}notifySwatches(){for(let e of this.swatches())e.syncFromRoot()}syncFromRoot(){this.requestUpdate()}updated(){let e=this.root;e&&(this.setAttribute("role","radiogroup"),e.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),e.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly))}render(){return n.html`<slot></slot>`}};d.styles=[k.hiddenHostStyles,n.css`
+      :host {
+        display: block;
+      }
+    `],a([(0,u.property)({converter:m.optOutBoolean})],d.prototype,"loop",2),d=a([(0,f.customElement)("skdx-color-picker-swatch-group","color-picker","swatch-group")],d);0&&(module.exports={SkdxColorPickerSwatchGroup});

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

@@ -0,0 +1,82 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-color-picker-swatch-group>` — the container for a set of preset
+ * `<skdx-color-picker-swatch>`es. Renders `role="radiogroup"` — picking one of N
+ * presets is exactly the radio pattern, and "none of them" is a legitimate
+ * radiogroup state, which matters because the picker's colour usually is *not*
+ * one of the presets. Must be used inside `<skdx-color-picker>`.
+ *
+ * That brings a **single tab stop** for the whole set: arrow keys move between
+ * swatches, `Home`/`End` jump to the ends. All four arrows navigate, since
+ * swatches are normally laid out as a grid and forcing one axis would strand
+ * half of it. Under `dir="rtl"` the horizontal arrows swap. The tab stop
+ * follows the last focused swatch, then the checked one, then the first — and
+ * it re-derives from the DOM on every push, so removing the swatch that held it
+ * cannot drop the group out of the tab order.
+ *
+ * Arrow keys move focus; they do not select. Selection is a click (or `Space` /
+ * `Enter` on the focused swatch), which is what the React, Vue, Angular and
+ * Svelte ports do too.
+ *
+ * Give the group an accessible name (`aria-label` or `aria-labelledby`) — an
+ * unnamed radiogroup announces a bare count of options.
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-swatch-group aria-label="Preset colours">
+ *   <skdx-color-picker-swatch value="#e11d48"></skdx-color-picker-swatch>
+ *   <skdx-color-picker-swatch value="#f59e0b"></skdx-color-picker-swatch>
+ *   <skdx-color-picker-swatch value="#10b981"></skdx-color-picker-swatch>
+ * </skdx-color-picker-swatch-group>
+ * ```
+ */
+export declare class SkdxColorPickerSwatchGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether arrow-key navigation wraps from the last swatch back to the first.
+     *
+     * 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 `loop="false"` is the way to opt out.
+     * @default true — navigation wraps at both ends.
+     */
+    loop: boolean;
+    /** @internal The swatch the user last focused, if it is still rendered. */
+    private focusedValue;
+    private root;
+    /**
+     * Swatches added or removed after the first render have to re-derive the tab
+     * stop: removing the swatch that held it would otherwise leave the group with
+     * no `tabindex="0"` at all, silently dropping it out of the tab order with
+     * nothing on screen to explain why. React gets this from re-rendering the
+     * list; a custom element has to be told.
+     */
+    private readonly childObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Every rendered swatch, in DOM order. */
+    private swatches;
+    /**
+     * @internal Which swatch holds the group's single tab stop: the last focused
+     * one, else the checked one (so tabbing in lands on the current selection),
+     * else the first. Derived rather than stored, which is what keeps the tab stop
+     * on a swatch that still exists — a stored value pointing at a removed swatch
+     * would drop the whole group out of the tab order with nothing on screen to
+     * explain why.
+     */
+    get activeValue(): string | null;
+    /** @internal Hands the tab stop to a swatch the user just focused. Called by `<skdx-color-picker-swatch>`. */
+    setFocusedValue(value: string): void;
+    /** @internal Re-pushes the tab stop onto every swatch; the group owns it, so the group announces the change. */
+    private notifySwatches;
+    /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
+    syncFromRoot(): void;
+    protected updated(): void;
+    private readonly handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-swatch-group': SkdxColorPickerSwatchGroup;
+    }
+}

package/dist/color-picker/ColorPickerSwatchGroup.d.ts

@@ -0,0 +1,82 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-color-picker-swatch-group>` — the container for a set of preset
+ * `<skdx-color-picker-swatch>`es. Renders `role="radiogroup"` — picking one of N
+ * presets is exactly the radio pattern, and "none of them" is a legitimate
+ * radiogroup state, which matters because the picker's colour usually is *not*
+ * one of the presets. Must be used inside `<skdx-color-picker>`.
+ *
+ * That brings a **single tab stop** for the whole set: arrow keys move between
+ * swatches, `Home`/`End` jump to the ends. All four arrows navigate, since
+ * swatches are normally laid out as a grid and forcing one axis would strand
+ * half of it. Under `dir="rtl"` the horizontal arrows swap. The tab stop
+ * follows the last focused swatch, then the checked one, then the first — and
+ * it re-derives from the DOM on every push, so removing the swatch that held it
+ * cannot drop the group out of the tab order.
+ *
+ * Arrow keys move focus; they do not select. Selection is a click (or `Space` /
+ * `Enter` on the focused swatch), which is what the React, Vue, Angular and
+ * Svelte ports do too.
+ *
+ * Give the group an accessible name (`aria-label` or `aria-labelledby`) — an
+ * unnamed radiogroup announces a bare count of options.
+ *
+ * @example
+ * ```html
+ * <skdx-color-picker-swatch-group aria-label="Preset colours">
+ *   <skdx-color-picker-swatch value="#e11d48"></skdx-color-picker-swatch>
+ *   <skdx-color-picker-swatch value="#f59e0b"></skdx-color-picker-swatch>
+ *   <skdx-color-picker-swatch value="#10b981"></skdx-color-picker-swatch>
+ * </skdx-color-picker-swatch-group>
+ * ```
+ */
+export declare class SkdxColorPickerSwatchGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether arrow-key navigation wraps from the last swatch back to the first.
+     *
+     * 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 `loop="false"` is the way to opt out.
+     * @default true — navigation wraps at both ends.
+     */
+    loop: boolean;
+    /** @internal The swatch the user last focused, if it is still rendered. */
+    private focusedValue;
+    private root;
+    /**
+     * Swatches added or removed after the first render have to re-derive the tab
+     * stop: removing the swatch that held it would otherwise leave the group with
+     * no `tabindex="0"` at all, silently dropping it out of the tab order with
+     * nothing on screen to explain why. React gets this from re-rendering the
+     * list; a custom element has to be told.
+     */
+    private readonly childObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Every rendered swatch, in DOM order. */
+    private swatches;
+    /**
+     * @internal Which swatch holds the group's single tab stop: the last focused
+     * one, else the checked one (so tabbing in lands on the current selection),
+     * else the first. Derived rather than stored, which is what keeps the tab stop
+     * on a swatch that still exists — a stored value pointing at a removed swatch
+     * would drop the whole group out of the tab order with nothing on screen to
+     * explain why.
+     */
+    get activeValue(): string | null;
+    /** @internal Hands the tab stop to a swatch the user just focused. Called by `<skdx-color-picker-swatch>`. */
+    setFocusedValue(value: string): void;
+    /** @internal Re-pushes the tab stop onto every swatch; the group owns it, so the group announces the change. */
+    private notifySwatches;
+    /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
+    syncFromRoot(): void;
+    protected updated(): void;
+    private readonly handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-color-picker-swatch-group': SkdxColorPickerSwatchGroup;
+    }
+}

package/dist/color-picker/ColorPickerSwatchGroup.js

@@ -0,0 +1,5 @@
+var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(d,l,e,o)=>{for(var t=o>1?void 0:o?h(l,e):l,i=d.length-1,r;i>=0;i--)(r=d[i])&&(t=(o?r(l,e,t):r(t))||t);return o&&t&&a(l,e,t),t};import{css as u,html as f,LitElement as p}from"lit";import{property as m}from"lit/decorators.js";import{customElement as k}from"../internal/define.js";import{directionalKey as v}from"../internal/direction.js";import{optOutBoolean as y}from"../internal/positioning.js";import{hiddenHostStyles as b}from"../internal/styles.js";var w="skdx-color-picker-swatch",s=class extends p{constructor(){super(...arguments);this.loop=!0;this.focusedValue=null;this.root=null;this.childObserver=new MutationObserver(()=>this.notifySwatches());this.handleKeydown=e=>{let o=this.swatches().filter(c=>!c.isDisabled);if(o.length===0)return;let t=o.indexOf(e.target),i=v(e.key,this),r;i==="ArrowRight"||i==="ArrowDown"?(r=t+1,r>=o.length&&(r=this.loop?0:o.length-1)):i==="ArrowLeft"||i==="ArrowUp"?(r=t-1,r<0&&(r=this.loop?o.length-1:0)):i==="Home"?r=0:i==="End"&&(r=o.length-1),r!==void 0&&(e.preventDefault(),o[r]?.focus())}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error("<skdx-color-picker-swatch-group> must be used inside <skdx-color-picker>.");this.addEventListener("keydown",this.handleKeydown),this.childObserver.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.childObserver.disconnect(),this.root=null,super.disconnectedCallback()}swatches(){return Array.from(this.querySelectorAll(w))}get activeValue(){let e=this.swatches();return this.focusedValue!==null&&e.some(t=>t.value===this.focusedValue)?this.focusedValue:(e.find(t=>t.checked)??e[0])?.value??null}setFocusedValue(e){this.focusedValue!==e&&(this.focusedValue=e,this.notifySwatches())}notifySwatches(){for(let e of this.swatches())e.syncFromRoot()}syncFromRoot(){this.requestUpdate()}updated(){let e=this.root;e&&(this.setAttribute("role","radiogroup"),e.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),e.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly))}render(){return f`<slot></slot>`}};s.styles=[b,u`
+      :host {
+        display: block;
+      }
+    `],n([m({converter:y})],s.prototype,"loop",2),s=n([k("skdx-color-picker-swatch-group","color-picker","swatch-group")],s);export{s as SkdxColorPickerSwatchGroup};

package/dist/color-picker/channel-slider.cjs

@@ -0,0 +1,12 @@
+"use strict";var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var E=(r,i)=>{for(var t in i)l(r,t,{get:i[t],enumerable:!0})},C=(r,i,t,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of k(i))!R.call(r,e)&&e!==t&&l(r,e,{get:()=>i[e],enumerable:!(o=y(i,e))||o.enumerable});return r};var L=r=>C(l({},"__esModule",{value:!0}),r),b=(r,i,t,o)=>{for(var e=o>1?void 0:o?y(i,t):i,n=r.length-1,a;n>=0;n--)(a=r[n])&&(e=(o?a(i,t,e):a(e))||e);return o&&e&&l(i,t,e),e};var F={};E(F,{SkdxColorPickerChannelSlider:()=>d,SkdxColorPickerChannelSliderThumb:()=>h,arrowStep:()=>w,round2:()=>c,snapChannel:()=>p});module.exports=L(F);var s=require("lit"),u=require("lit/decorators.js"),f=require("../internal/direction.cjs"),m=require("../internal/styles.cjs"),A=require("./pointer-ratio.cjs");var M=10;function c(r){return Math.round(r*100)/100}function p(r,i,t){let o=i>0?Math.round(Math.round(r/i)*i*1e6)/1e6:r;return Math.min(Math.max(o,0),t)}function w(r){return r>0?r:1}var d=class extends s.LitElement{constructor(){super(...arguments);this.orientation="horizontal";this.dragging=!1;this.root=null;this.handleKeydown=t=>{let o=this.root;if(!o?.interactive)return;let e=(0,f.directionalKey)(t.key,this),n=this.limit;if(e==="Home"||e==="End"){t.preventDefault(),this.writeChannel(e==="Home"?0:n);return}let a=w(o.step),g=Math.max(this.max/10,a),v={ArrowRight:a,ArrowUp:a,ArrowLeft:-a,ArrowDown:-a,PageUp:g,PageDown:-g}[e];if(v===void 0)return;t.preventDefault();let x=t.shiftKey&&e.startsWith("Arrow")?M:1;this.writeChannel(p(this.channelValue+v*x,o.step,n))}}get limit(){return this.max}get hiddenByRoot(){return!1}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error(`<${this.localName}> must be used inside <skdx-color-picker>.`);this.addEventListener("keydown",this.handleKeydown),this.disposePointer=(0,A.trackPointerRatio)(this,{enabled:()=>this.root?.interactive??!1,onRatioChange:t=>{let o=this.root;if(!o)return;let e=this.orientation==="horizontal"?t.x:1-t.y;this.writeChannel(p(e*this.max,o.step,this.limit))},onRatioChangeEnd:()=>this.root?.commit(),onDraggingChange:t=>{this.dragging=t}})}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.disposePointer?.(),this.disposePointer=void 0,this.dragging=!1,this.removeAttribute("data-dragging"),this.root=null,super.disconnectedCallback()}syncFromRoot(){this.requestUpdate()}updated(){let t=this.root;if(!t)return;this.hidden=this.hiddenByRoot;let o=this.channelValue;this.setAttribute("role","slider"),!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby")&&this.setAttribute("aria-label",this.defaultLabel),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this.max)),this.setAttribute("aria-valuenow",String(c(o))),this.setAttribute("aria-valuetext",this.valueTextFor(o)),this.setAttribute("aria-orientation",this.orientation),this.setAttribute("tabindex",t.disabled?"-1":"0"),t.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),t.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.setAttribute("data-channel",this.channel),this.setAttribute("data-orientation",this.orientation),this.setAttribute("data-value",String(c(o))),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly),this.toggleAttribute("data-dragging",this.dragging)}render(){return s.html`<slot></slot>`}};d.styles=[m.hiddenHostStyles,s.css`
+      :host {
+        display: block;
+        position: relative;
+        /* So a touch drag along the track is not stolen by the page scroll. */
+        touch-action: none;
+      }
+    `],b([(0,u.property)({type:String,reflect:!0})],d.prototype,"orientation",2),b([(0,u.state)()],d.prototype,"dragging",2);var h=class extends s.LitElement{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-color-picker"),!this.root)throw new Error(`<${this.localName}> must be used inside <skdx-color-picker>.`);this.setAttribute("aria-hidden","true"),this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){let t=this.root;t&&(this.setAttribute("data-channel",this.channel),this.setAttribute("data-value",String(c(this.channelValue))),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly))}render(){return s.html`<slot></slot>`}};h.styles=[m.hiddenHostStyles,s.css`
+      :host {
+        display: block;
+      }
+    `];0&&(module.exports={SkdxColorPickerChannelSlider,SkdxColorPickerChannelSliderThumb,arrowStep,round2,snapChannel});