@jsekulowicz/ds-components 0.1.0

package/dist/molecules/card/define.js

@@ -0,0 +1,5 @@
+import { DsCard } from './card.js';
+if (!customElements.get('ds-card')) {
+    customElements.define('ds-card', DsCard);
+}
+//# sourceMappingURL=define.js.map

package/dist/molecules/card/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/molecules/card/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;IACnC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAC3C,CAAC"}

package/dist/molecules/card/index.d.ts

@@ -0,0 +1,2 @@
+export { DsCard, type CardElevation, type CardOrientation } from './card.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/molecules/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecules/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC"}

package/dist/molecules/card/index.js

@@ -0,0 +1,2 @@
+export { DsCard } from './card.js';
+//# sourceMappingURL=index.js.map

package/dist/molecules/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA4C,MAAM,WAAW,CAAC"}

package/dist/molecules/color-picker/color-picker-custom-inputs.d.ts

@@ -0,0 +1,38 @@
+interface ColorPickerCustomInputsHost {
+    requestUpdate(): void;
+}
+interface ColorPickerCustomInputsDelegate {
+    closePicker: () => void;
+    commitAndClose: () => void;
+    emitChange: (value: string) => void;
+    emitInput: (value: string) => void;
+    setValidation: (message: string) => void;
+    setValue: (value: string) => void;
+}
+export declare class ColorPickerCustomInputs {
+    #private;
+    private readonly host;
+    private readonly delegate;
+    nativeValue: string;
+    textValue: string;
+    validationError: string;
+    constructor(host: ColorPickerCustomInputsHost, delegate: ColorPickerCustomInputsDelegate);
+    syncEmpty(): void;
+    syncInvalid(raw: string): void;
+    syncValue(value: string): void;
+    commit(): boolean;
+    focusHexInput(root: ParentNode | null): void;
+    onNativeInput: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+    onNativeChange: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+    onTextInput: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+    onTextChange: () => void;
+    onTextKeydown: (event: KeyboardEvent) => void;
+}
+export {};
+//# sourceMappingURL=color-picker-custom-inputs.d.ts.map

package/dist/molecules/color-picker/color-picker-custom-inputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-custom-inputs.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-custom-inputs.ts"],"names":[],"mappings":"AAMA,UAAU,2BAA2B;IACnC,aAAa,IAAI,IAAI,CAAC;CACvB;AAED,UAAU,+BAA+B;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,qBAAa,uBAAuB;;IAMhC,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAN3B,WAAW,SAAiB;IAC5B,SAAS,SAAM;IACf,eAAe,SAAM;gBAGF,IAAI,EAAE,2BAA2B,EACjC,QAAQ,EAAE,+BAA+B;IAG5D,SAAS,IAAI,IAAI;IAOjB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAM9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAO9B,MAAM,IAAI,OAAO;IAIjB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI;IAI5C,aAAa,GAAI,OAAO,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAG,IAAI,CAO3D;IAEF,cAAc,GAAI,OAAO,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAG,IAAI,CAE5D;IAEF,WAAW,GAAI,OAAO,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAG,IAAI,CAezD;IAEF,YAAY,QAAO,IAAI,CAKrB;IAEF,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAS1C;CAqBH"}

package/dist/molecules/color-picker/color-picker-custom-inputs.js

@@ -0,0 +1,95 @@
+import { COLOR_FORMAT_ERROR, DEFAULT_COLOR, normalizeHexColor, } from './color-utils.js';
+export class ColorPickerCustomInputs {
+    constructor(host, delegate) {
+        this.host = host;
+        this.delegate = delegate;
+        this.nativeValue = DEFAULT_COLOR;
+        this.textValue = '';
+        this.validationError = '';
+        this.onNativeInput = (event) => {
+            const normalized = normalizeHexColor(event.detail.value);
+            if (!normalized) {
+                return;
+            }
+            this.delegate.setValue(normalized);
+            this.delegate.emitInput(normalized);
+        };
+        this.onNativeChange = (event) => {
+            this.delegate.emitChange(normalizeHexColor(event.detail.value) || this.nativeValue);
+        };
+        this.onTextInput = (event) => {
+            const raw = event.detail.value.trim();
+            this.textValue = raw;
+            if (raw === '') {
+                this.delegate.setValue('');
+                this.delegate.emitInput('');
+                return;
+            }
+            const normalized = normalizeHexColor(raw);
+            if (!normalized) {
+                this.#setValidation(COLOR_FORMAT_ERROR);
+                return;
+            }
+            this.delegate.setValue(normalized);
+            this.delegate.emitInput(normalized);
+        };
+        this.onTextChange = () => {
+            const value = this.#commitValue();
+            if (value !== null) {
+                this.delegate.emitChange(value);
+            }
+        };
+        this.onTextKeydown = (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.delegate.commitAndClose();
+            }
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.delegate.closePicker();
+            }
+        };
+    }
+    syncEmpty() {
+        this.textValue = '';
+        this.nativeValue = DEFAULT_COLOR;
+        this.validationError = '';
+        this.host.requestUpdate();
+    }
+    syncInvalid(raw) {
+        this.textValue = raw;
+        this.validationError = COLOR_FORMAT_ERROR;
+        this.host.requestUpdate();
+    }
+    syncValue(value) {
+        this.textValue = value;
+        this.nativeValue = value;
+        this.validationError = '';
+        this.host.requestUpdate();
+    }
+    commit() {
+        return this.#commitValue() !== null;
+    }
+    focusHexInput(root) {
+        root?.querySelector('.hex-input')?.focus();
+    }
+    #commitValue() {
+        if (!this.textValue) {
+            this.delegate.setValue('');
+            return '';
+        }
+        const normalized = normalizeHexColor(this.textValue);
+        if (!normalized) {
+            this.#setValidation(COLOR_FORMAT_ERROR);
+            return null;
+        }
+        this.delegate.setValue(normalized);
+        return normalized;
+    }
+    #setValidation(message) {
+        this.validationError = message;
+        this.delegate.setValidation(message);
+        this.host.requestUpdate();
+    }
+}
+//# sourceMappingURL=color-picker-custom-inputs.js.map

package/dist/molecules/color-picker/color-picker-custom-inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-custom-inputs.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-custom-inputs.ts"],"names":[],"mappings":"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"}

package/dist/molecules/color-picker/color-picker-popover.d.ts

@@ -0,0 +1,24 @@
+interface ColorPickerPopoverHost extends HTMLElement {
+    disabled: boolean;
+    requestUpdate(): void;
+    updateComplete: Promise<unknown>;
+}
+interface ColorPickerPopoverDelegate {
+    focusTrigger: () => void;
+    onOpen: () => void;
+}
+export declare class ColorPickerPopover {
+    #private;
+    private readonly host;
+    private readonly delegate;
+    open: boolean;
+    constructor(host: ColorPickerPopoverHost, delegate: ColorPickerPopoverDelegate);
+    disconnect(): void;
+    openPicker(): void;
+    close(focusTrigger?: boolean): void;
+    toggle: () => void;
+    onTriggerKeydown: (event: KeyboardEvent) => void;
+    onPanelKeydown: (event: KeyboardEvent) => void;
+}
+export {};
+//# sourceMappingURL=color-picker-popover.d.ts.map

package/dist/molecules/color-picker/color-picker-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-popover.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-popover.ts"],"names":[],"mappings":"AAAA,UAAU,sBAAuB,SAAQ,WAAW;IAClD,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,IAAI,IAAI,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;CAClC;AAED,UAAU,0BAA0B;IAClC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,qBAAa,kBAAkB;;IAI3B,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAJ3B,IAAI,UAAS;gBAGM,IAAI,EAAE,sBAAsB,EAC5B,QAAQ,EAAE,0BAA0B;IAGvD,UAAU,IAAI,IAAI;IAIlB,UAAU,IAAI,IAAI;IAUlB,KAAK,CAAC,YAAY,UAAQ,GAAG,IAAI;IAYjC,MAAM,QAAO,IAAI,CAMf;IAEF,gBAAgB,GAAI,OAAO,aAAa,KAAG,IAAI,CAQ7C;IAEF,cAAc,GAAI,OAAO,aAAa,KAAG,IAAI,CAK3C;CAOH"}

package/dist/molecules/color-picker/color-picker-popover.js

@@ -0,0 +1,59 @@
+export class ColorPickerPopover {
+    constructor(host, delegate) {
+        this.host = host;
+        this.delegate = delegate;
+        this.open = false;
+        this.toggle = () => {
+            if (this.open) {
+                this.close();
+                return;
+            }
+            this.openPicker();
+        };
+        this.onTriggerKeydown = (event) => {
+            if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.openPicker();
+            }
+            if (event.key === 'Escape') {
+                this.close(true);
+            }
+        };
+        this.onPanelKeydown = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.close(true);
+            }
+        };
+        this.#onDocumentClick = (event) => {
+            if (!event.composedPath().includes(this.host)) {
+                this.close();
+            }
+        };
+    }
+    disconnect() {
+        this.close();
+    }
+    openPicker() {
+        if (this.host.disabled || this.open) {
+            return;
+        }
+        this.open = true;
+        this.delegate.onOpen();
+        document.addEventListener('click', this.#onDocumentClick);
+        this.host.requestUpdate();
+    }
+    close(focusTrigger = false) {
+        if (!this.open) {
+            return;
+        }
+        this.open = false;
+        document.removeEventListener('click', this.#onDocumentClick);
+        this.host.requestUpdate();
+        if (focusTrigger) {
+            void this.host.updateComplete.then(() => this.delegate.focusTrigger());
+        }
+    }
+    #onDocumentClick;
+}
+//# sourceMappingURL=color-picker-popover.js.map

package/dist/molecules/color-picker/color-picker-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-popover.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-popover.ts"],"names":[],"mappings":"AAWA,MAAM,OAAO,kBAAkB;IAG7B,YACmB,IAA4B,EAC5B,QAAoC;QADpC,SAAI,GAAJ,IAAI,CAAwB;QAC5B,aAAQ,GAAR,QAAQ,CAA4B;QAJvD,SAAI,GAAG,KAAK,CAAC;QAiCb,WAAM,GAAG,GAAS,EAAE;YAClB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,OAAO;YACT,CAAC;YACD,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC;QAEF,qBAAgB,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAChD,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC5E,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;YACD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QAEF,mBAAc,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC9C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QAEF,qBAAgB,GAAG,CAAC,KAAiB,EAAQ,EAAE;YAC7C,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9C,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC;IAzDC,CAAC;IAEJ,UAAU;QACR,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,UAAU;QACR,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QACvB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC1D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAED,KAAK,CAAC,YAAY,GAAG,KAAK;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC7D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1B,IAAI,YAAY,EAAE,CAAC;YACjB,KAAK,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;QACzE,CAAC;IACH,CAAC;IA2BD,gBAAgB,CAId;CACH"}

package/dist/molecules/color-picker/color-picker-swatch-group.d.ts

@@ -0,0 +1,22 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+import './color-picker-swatch.js';
+import type { ColorPickerOption } from './types.js';
+/**
+ * @tag ds-color-picker-swatch-group
+ * @summary Roving radiogroup for ds-color-picker preset swatches.
+ * @event ds-color-picker-swatch-group-select - Fires when a swatch is selected.
+ */
+export declare class DsColorPickerSwatchGroup extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    options: ColorPickerOption[];
+    value: string;
+    label: string;
+    disabled: boolean;
+    compact: boolean;
+    private _focusedIndex;
+    willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=color-picker-swatch-group.d.ts.map

package/dist/molecules/color-picker/color-picker-swatch-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-swatch-group.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD;;;;GAIG;AACH,qBAAa,wBAAyB,SAAQ,SAAS;;IACrD,OAAgB,MAAM,4BAAuD;IAElD,OAAO,EAAE,iBAAiB,EAAE,CAAM;IACjD,KAAK,SAAM;IACX,KAAK,SAAmB;IACQ,QAAQ,UAAS;IACjB,OAAO,UAAS;IAEnD,OAAO,CAAC,aAAa,CAAM;IAE3B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA2FzC,MAAM,IAAI,cAAc;CASlC"}

package/dist/molecules/color-picker/color-picker-swatch-group.js

@@ -0,0 +1,135 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { getColorLabel, normalizeColorOptions } from './color-utils.js';
+import './color-picker-swatch.js';
+import { colorPickerSwatchGroupStyles } from './color-picker-swatch-group.styles.js';
+/**
+ * @tag ds-color-picker-swatch-group
+ * @summary Roving radiogroup for ds-color-picker preset swatches.
+ * @event ds-color-picker-swatch-group-select - Fires when a swatch is selected.
+ */
+export class DsColorPickerSwatchGroup extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.options = [];
+        this.value = '';
+        this.label = 'Preset colors';
+        this.disabled = false;
+        this.compact = false;
+        this._focusedIndex = -1;
+        this.#onSelect = (event) => {
+            const option = this.#normalizedOptions().find((item) => item.value === event.detail.value);
+            if (!option || option.disabled || this.disabled) {
+                return;
+            }
+            this.emit('ds-color-picker-swatch-group-select', { detail: { value: option.value } });
+        };
+    }
+    static { this.styles = [...DsElement.styles, colorPickerSwatchGroupStyles]; }
+    willUpdate(changed) {
+        if (changed.has('options') || changed.has('value')) {
+            this.#syncFocusedIndex();
+        }
+    }
+    #normalizedOptions() {
+        return normalizeColorOptions(this.options);
+    }
+    #syncFocusedIndex() {
+        const options = this.#normalizedOptions();
+        const selected = options.findIndex((option) => option.value === this.value);
+        const firstEnabled = options.findIndex((option) => !option.disabled);
+        this._focusedIndex = selected >= 0 && !options[selected]?.disabled ? selected : firstEnabled;
+    }
+    #onSelect;
+    #onKeydown(event, index) {
+        const handled = ['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', 'End'];
+        if (!handled.includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        this.#moveFocus(event.key, index);
+    }
+    #moveFocus(key, index) {
+        const enabled = this.#normalizedOptions()
+            .map((option, i) => (option.disabled ? -1 : i))
+            .filter((i) => i >= 0);
+        if (!enabled.length) {
+            return;
+        }
+        const next = this.#nextIndex(key, index, enabled);
+        this._focusedIndex = enabled[next] ?? enabled[0] ?? -1;
+        void this.updateComplete.then(() => this.#focusSwatch());
+    }
+    #nextIndex(key, index, enabled) {
+        const current = Math.max(0, enabled.indexOf(index));
+        const last = enabled.length - 1;
+        if (key === 'Home') {
+            return 0;
+        }
+        if (key === 'End') {
+            return last;
+        }
+        return key === 'ArrowRight' || key === 'ArrowDown'
+            ? this.#nextForward(current, last)
+            : this.#nextBackward(current, last);
+    }
+    #nextForward(current, last) {
+        return current >= last ? 0 : current + 1;
+    }
+    #nextBackward(current, last) {
+        return current <= 0 ? last : current - 1;
+    }
+    #focusSwatch() {
+        const swatch = this.shadowRoot?.querySelector(`ds-color-picker-swatch[data-swatch-index="${this._focusedIndex}"]`);
+        swatch?.focus();
+    }
+    #renderSwatch(option, index) {
+        const selected = option.value === this.value;
+        const tabbable = this._focusedIndex === index && !option.disabled && !this.disabled;
+        return html `<ds-color-picker-swatch
+      data-swatch-index=${index}
+      tabindex=${tabbable ? '0' : '-1'}
+      .value=${option.value}
+      .label=${getColorLabel(option)}
+      .selected=${selected}
+      .disabled=${this.disabled || Boolean(option.disabled)}
+      @ds-color-picker-swatch-select=${this.#onSelect}
+      @keydown=${(event) => this.#onKeydown(event, index)}
+    ></ds-color-picker-swatch>`;
+    }
+    render() {
+        const options = this.#normalizedOptions();
+        return html `
+      <div id="swatches-label" class="section-label">${this.label}</div>
+      <div class="swatches" role="radiogroup" aria-labelledby="swatches-label">
+        ${options.length ? options.map((option, index) => this.#renderSwatch(option, index)) : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], DsColorPickerSwatchGroup.prototype, "options", void 0);
+__decorate([
+    property()
+], DsColorPickerSwatchGroup.prototype, "value", void 0);
+__decorate([
+    property()
+], DsColorPickerSwatchGroup.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsColorPickerSwatchGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsColorPickerSwatchGroup.prototype, "compact", void 0);
+__decorate([
+    state()
+], DsColorPickerSwatchGroup.prototype, "_focusedIndex", void 0);
+//# sourceMappingURL=color-picker-swatch-group.js.map

package/dist/molecules/color-picker/color-picker-swatch-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-swatch-group.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch-group.ts"],"names":[],"mappings":"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"}

package/dist/molecules/color-picker/color-picker-swatch-group.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const colorPickerSwatchGroupStyles: import("lit").CSSResult;
+//# sourceMappingURL=color-picker-swatch-group.styles.d.ts.map

package/dist/molecules/color-picker/color-picker-swatch-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-swatch-group.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B,yBAyBxC,CAAC"}

package/dist/molecules/color-picker/color-picker-swatch-group.styles.js

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+export const colorPickerSwatchGroupStyles = css `
+  :host {
+    --color-picker-swatch-size: 24px;
+
+    display: grid;
+    gap: var(--ds-space-2);
+  }
+  :host([compact]) {
+    --color-picker-swatch-size: 24px;
+  }
+
+  .section-label {
+    color: var(--ds-color-fg);
+    font-size: var(--ds-font-size-sm);
+    font-weight: var(--ds-font-weight-medium);
+  }
+
+  .swatches {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(var(--color-picker-swatch-size), var(--color-picker-swatch-size))
+    );
+    gap: var(--ds-space-1);
+  }
+`;
+//# sourceMappingURL=color-picker-swatch-group.styles.js.map

package/dist/molecules/color-picker/color-picker-swatch-group.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-swatch-group.styles.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyB9C,CAAC"}

package/dist/molecules/color-picker/color-picker-swatch.d.ts

@@ -0,0 +1,21 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+/**
+ * @tag ds-color-picker-swatch
+ * @summary Preset color swatch used inside ds-color-picker.
+ * @event ds-color-picker-swatch-select - Fires when the swatch is activated.
+ * @csspart swatch - The swatch host surface.
+ */
+export declare class DsColorPickerSwatch extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    value: string;
+    label: string;
+    selected: boolean;
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=color-picker-swatch.d.ts.map

package/dist/molecules/color-picker/color-picker-swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-swatch.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIjD;;;;;GAKG;AACH,qBAAa,mBAAoB,SAAQ,SAAS;;IAChD,OAAgB,MAAM,4BAAkD;IAE5D,KAAK,SAAM;IACX,KAAK,SAAM;IACqB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAEpD,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAyDtC,MAAM,IAAI,cAAc;CAWlC"}

package/dist/molecules/color-picker/color-picker-swatch.js

@@ -0,0 +1,111 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { colorPickerSwatchStyles } from './color-picker-swatch.styles.js';
+import { getContrastingThemeColor } from './color-utils.js';
+/**
+ * @tag ds-color-picker-swatch
+ * @summary Preset color swatch used inside ds-color-picker.
+ * @event ds-color-picker-swatch-select - Fires when the swatch is activated.
+ * @csspart swatch - The swatch host surface.
+ */
+export class DsColorPickerSwatch extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.label = '';
+        this.selected = false;
+        this.disabled = false;
+        this.#onClick = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            this.#select();
+        };
+        this.#onKeydown = (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.disabled) {
+                return;
+            }
+            this.#select();
+        };
+    }
+    static { this.styles = [...DsElement.styles, colorPickerSwatchStyles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'radio');
+        this.setAttribute('part', 'swatch');
+        this.addEventListener('click', this.#onClick);
+        this.addEventListener('keydown', this.#onKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.#onClick);
+        this.removeEventListener('keydown', this.#onKeydown);
+    }
+    updated(changed) {
+        if (changed.has('selected')) {
+            this.setAttribute('aria-checked', this.selected ? 'true' : 'false');
+        }
+        if (changed.has('disabled')) {
+            this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+        }
+        if (changed.has('label') || changed.has('value')) {
+            this.setAttribute('aria-label', this.#accessibleLabel());
+            this.style.setProperty('--color-picker-value', this.value);
+            this.#syncCheckColor();
+        }
+    }
+    #accessibleLabel() {
+        return this.label ? `${this.label} ${this.value}` : this.value;
+    }
+    #onClick;
+    #onKeydown;
+    #select() {
+        this.emit('ds-color-picker-swatch-select', { detail: { value: this.value } });
+    }
+    #syncCheckColor() {
+        if (!this.value) {
+            this.style.removeProperty('--color-picker-check-color');
+            return;
+        }
+        const styles = getComputedStyle(this);
+        const color = getContrastingThemeColor(this.value, styles.getPropertyValue('--ds-color-bg'), styles.getPropertyValue('--ds-color-fg'));
+        this.style.setProperty('--color-picker-check-color', color);
+    }
+    render() {
+        return html `<svg class="check" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+      <path
+        d="M5 10.5l3 3L15 6"
+        stroke="currentColor"
+        stroke-width="2.6"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>`;
+    }
+}
+__decorate([
+    property()
+], DsColorPickerSwatch.prototype, "value", void 0);
+__decorate([
+    property()
+], DsColorPickerSwatch.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsColorPickerSwatch.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsColorPickerSwatch.prototype, "disabled", void 0);
+//# sourceMappingURL=color-picker-swatch.js.map

package/dist/molecules/color-picker/color-picker-swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-swatch.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch.ts"],"names":[],"mappings":"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"}

package/dist/molecules/color-picker/color-picker-swatch.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const colorPickerSwatchStyles: import("lit").CSSResult;
+//# sourceMappingURL=color-picker-swatch.styles.d.ts.map

package/dist/molecules/color-picker/color-picker-swatch.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-swatch.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,yBAuCnC,CAAC"}