@jsekulowicz/ds-components 0.1.0

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

@@ -0,0 +1,88 @@
+export const DEFAULT_COLOR = '#000000';
+export const COLOR_FORMAT_ERROR = 'Use #RGB or #RRGGBB.';
+const SHORT_HEX = /^#([0-9a-f]{3})$/i;
+const LONG_HEX = /^#([0-9a-f]{6})$/i;
+const RGB_COLOR = /^rgba?\(([^)]+)\)$/i;
+export function normalizeHexColor(value) {
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const trimmed = value.trim();
+    const longMatch = trimmed.match(LONG_HEX);
+    const longValue = longMatch?.[1];
+    if (longValue) {
+        return `#${longValue.toUpperCase()}`;
+    }
+    const shortMatch = trimmed.match(SHORT_HEX);
+    const shortValue = shortMatch?.[1];
+    if (!shortValue) {
+        return null;
+    }
+    const [red, green, blue] = shortValue.split('');
+    return `#${red}${red}${green}${green}${blue}${blue}`.toUpperCase();
+}
+export function normalizeColorOptions(colors) {
+    return colors.flatMap((color) => {
+        const value = normalizeHexColor(color.value);
+        if (!value) {
+            return [];
+        }
+        return [{ ...color, value }];
+    });
+}
+export function getColorLabel(color) {
+    return color.label?.trim() || color.value;
+}
+export function getContrastingThemeColor(value, bg, fg) {
+    const selected = parseColor(value);
+    if (!selected) {
+        return 'var(--ds-color-fg)';
+    }
+    const bgColor = parseColor(bg) ?? { red: 250, green: 248, blue: 245 };
+    const fgColor = parseColor(fg) ?? { red: 11, green: 11, blue: 12 };
+    return contrastRatio(selected, bgColor) >= contrastRatio(selected, fgColor)
+        ? 'var(--ds-color-bg)'
+        : 'var(--ds-color-fg)';
+}
+function parseColor(value) {
+    const hex = normalizeHexColor(value);
+    if (hex) {
+        return {
+            red: Number.parseInt(hex.slice(1, 3), 16),
+            green: Number.parseInt(hex.slice(3, 5), 16),
+            blue: Number.parseInt(hex.slice(5, 7), 16),
+        };
+    }
+    const channels = value.trim().match(RGB_COLOR)?.[1]?.split(',').map((item) => item.trim());
+    if (!channels || channels.length < 3) {
+        return null;
+    }
+    return {
+        red: clampChannel(Number.parseFloat(channels[0] ?? '')),
+        green: clampChannel(Number.parseFloat(channels[1] ?? '')),
+        blue: clampChannel(Number.parseFloat(channels[2] ?? '')),
+    };
+}
+function clampChannel(value) {
+    if (Number.isNaN(value)) {
+        return 0;
+    }
+    return Math.min(255, Math.max(0, value));
+}
+function contrastRatio(first, second) {
+    const firstLuminance = relativeLuminance(first);
+    const secondLuminance = relativeLuminance(second);
+    const lighter = Math.max(firstLuminance, secondLuminance);
+    const darker = Math.min(firstLuminance, secondLuminance);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+function relativeLuminance(color) {
+    return (0.2126 * linearChannel(color.red) +
+        0.7152 * linearChannel(color.green) +
+        0.0722 * linearChannel(color.blue));
+}
+function linearChannel(channel) {
+    const value = channel / 255;
+    return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+//# sourceMappingURL=color-utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-utils.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAC;AACvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAEzD,MAAM,SAAS,GAAG,mBAAmB,CAAC;AACtC,MAAM,QAAQ,GAAG,mBAAmB,CAAC;AACrC,MAAM,SAAS,GAAG,qBAAqB,CAAC;AAQxC,MAAM,UAAU,iBAAiB,CAAC,KAAc;IAC9C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC7B,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;IACjC,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,IAAI,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;IACvC,CAAC;IACD,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IACnC,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAChD,OAAO,IAAI,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;AACrE,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,MAA2B;IAC/D,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QAC9B,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC7C,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAAwB;IACpD,OAAO,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,KAAK,CAAC,KAAK,CAAC;AAC5C,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,KAAa,EAAE,EAAU,EAAE,EAAU;IAC5E,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IACD,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;IACtE,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IACnE,OAAO,aAAa,CAAC,QAAQ,EAAE,OAAO,CAAC,IAAI,aAAa,CAAC,QAAQ,EAAE,OAAO,CAAC;QACzE,CAAC,CAAC,oBAAoB;QACtB,CAAC,CAAC,oBAAoB,CAAC;AAC3B,CAAC;AAED,SAAS,UAAU,CAAC,KAAa;IAC/B,MAAM,GAAG,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACrC,IAAI,GAAG,EAAE,CAAC;QACR,OAAO;YACL,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;YACzC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;YAC3C,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;SAC3C,CAAC;IACJ,CAAC;IACD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC3F,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACrC,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO;QACL,GAAG,EAAE,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACvD,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACzD,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;KACzD,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,KAAa;IACjC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,CAAC,CAAC;IACX,CAAC;IACD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAC3C,CAAC;AAED,SAAS,aAAa,CAAC,KAAe,EAAE,MAAgB;IACtD,MAAM,cAAc,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IAC1D,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IACzD,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;AAC5C,CAAC;AAED,SAAS,iBAAiB,CAAC,KAAe;IACxC,OAAO,CACL,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC;QACjC,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC;QACnC,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CACnC,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,OAAe;IACpC,MAAM,KAAK,GAAG,OAAO,GAAG,GAAG,CAAC;IAC5B,OAAO,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI,GAAG,CAAC;AAC7E,CAAC"}

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

@@ -0,0 +1,18 @@
+import { DsColorPicker } from './color-picker.js';
+import { DsColorPickerInputColor } from './input-color.js';
+import { DsColorPickerSwatch } from './color-picker-swatch.js';
+import { DsColorPickerSwatchGroup } from './color-picker-swatch-group.js';
+import '../card/define.js';
+import '../../atoms/button/define.js';
+import '../../atoms/icon/define.js';
+import '../../atoms/icon/icons/swatch.js';
+import '../../atoms/text-field/define.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-color-picker': DsColorPicker;
+        'ds-color-picker-swatch': DsColorPickerSwatch;
+        'ds-color-picker-swatch-group': DsColorPickerSwatchGroup;
+        'ds-color-picker-input-color': DsColorPickerInputColor;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,mBAAmB,CAAC;AAC3B,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAe1C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;QACjC,wBAAwB,EAAE,mBAAmB,CAAC;QAC9C,8BAA8B,EAAE,wBAAwB,CAAC;QACzD,6BAA6B,EAAE,uBAAuB,CAAC;KACxD;CACF"}

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

@@ -0,0 +1,22 @@
+import { DsColorPicker } from './color-picker.js';
+import { DsColorPickerInputColor } from './input-color.js';
+import { DsColorPickerSwatch } from './color-picker-swatch.js';
+import { DsColorPickerSwatchGroup } from './color-picker-swatch-group.js';
+import '../card/define.js';
+import '../../atoms/button/define.js';
+import '../../atoms/icon/define.js';
+import '../../atoms/icon/icons/swatch.js';
+import '../../atoms/text-field/define.js';
+if (!customElements.get('ds-color-picker')) {
+    customElements.define('ds-color-picker', DsColorPicker);
+}
+if (!customElements.get('ds-color-picker-swatch')) {
+    customElements.define('ds-color-picker-swatch', DsColorPickerSwatch);
+}
+if (!customElements.get('ds-color-picker-swatch-group')) {
+    customElements.define('ds-color-picker-swatch-group', DsColorPickerSwatchGroup);
+}
+if (!customElements.get('ds-color-picker-input-color')) {
+    customElements.define('ds-color-picker-input-color', DsColorPickerInputColor);
+}
+//# sourceMappingURL=define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,mBAAmB,CAAC;AAC3B,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAE1C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;IAC3C,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC1D,CAAC;AACD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,wBAAwB,CAAC,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,CAAC;AACvE,CAAC;AACD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,8BAA8B,CAAC,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,8BAA8B,EAAE,wBAAwB,CAAC,CAAC;AAClF,CAAC;AACD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,6BAA6B,CAAC,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,6BAA6B,EAAE,uBAAuB,CAAC,CAAC;AAChF,CAAC"}

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

@@ -0,0 +1,6 @@
+export { DsColorPicker } from './color-picker.js';
+export { DsColorPickerInputColor } from './input-color.js';
+export { DsColorPickerSwatch } from './color-picker-swatch.js';
+export { DsColorPickerSwatchGroup } from './color-picker-swatch-group.js';
+export type { ColorPickerOption } from './types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,5 @@
+export { DsColorPicker } from './color-picker.js';
+export { DsColorPickerInputColor } from './input-color.js';
+export { DsColorPickerSwatch } from './color-picker-swatch.js';
+export { DsColorPickerSwatchGroup } from './color-picker-swatch-group.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC"}

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

@@ -0,0 +1,18 @@
+import { type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+/**
+ * @tag ds-color-picker-input-color
+ * @summary Native color input wrapper used inside ds-color-picker.
+ * @event ds-input - Fires on live color edits. Detail: `{ value }`.
+ * @event ds-change - Fires when the color is committed. Detail: `{ value }`.
+ * @csspart input - The native color input.
+ */
+export declare class DsColorPickerInputColor extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    value: string;
+    label: string;
+    disabled: boolean;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=input-color.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-color.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/input-color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIjD;;;;;;GAMG;AACH,qBAAa,uBAAwB,SAAQ,SAAS;;IACpD,OAAgB,MAAM,4BAA2C;IAErD,KAAK,SAAiB;IACtB,KAAK,SAAuB;IACI,QAAQ,UAAS;IAsBpD,MAAM,IAAI,cAAc;CAWlC"}

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

@@ -0,0 +1,68 @@
+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 { live } from 'lit/directives/live.js';
+import { property } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { DEFAULT_COLOR, normalizeHexColor } from './color-utils.js';
+import { inputColorStyles } from './input-color.styles.js';
+/**
+ * @tag ds-color-picker-input-color
+ * @summary Native color input wrapper used inside ds-color-picker.
+ * @event ds-input - Fires on live color edits. Detail: `{ value }`.
+ * @event ds-change - Fires when the color is committed. Detail: `{ value }`.
+ * @csspart input - The native color input.
+ */
+export class DsColorPickerInputColor extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.value = DEFAULT_COLOR;
+        this.label = 'Pick custom color';
+        this.disabled = false;
+        this.#onInput = (event) => {
+            this.#updateValue(event, 'ds-input');
+        };
+        this.#onChange = (event) => {
+            this.#updateValue(event, 'ds-change');
+        };
+    }
+    static { this.styles = [...DsElement.styles, inputColorStyles]; }
+    #onInput;
+    #onChange;
+    #updateValue(event, name) {
+        if (this.disabled) {
+            return;
+        }
+        const value = normalizeHexColor(event.target.value);
+        if (!value) {
+            return;
+        }
+        this.value = value;
+        this.emit(name, { detail: { value } });
+    }
+    render() {
+        return html `<input
+      part="input"
+      type="color"
+      .value=${live(this.value || DEFAULT_COLOR)}
+      ?disabled=${this.disabled}
+      aria-label=${this.label}
+      @input=${this.#onInput}
+      @change=${this.#onChange}
+    />`;
+    }
+}
+__decorate([
+    property()
+], DsColorPickerInputColor.prototype, "value", void 0);
+__decorate([
+    property()
+], DsColorPickerInputColor.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsColorPickerInputColor.prototype, "disabled", void 0);
+//# sourceMappingURL=input-color.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-color.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/input-color.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,OAAO,uBAAwB,SAAQ,SAAS;IAAtD;;QAGc,UAAK,GAAG,aAAa,CAAC;QACtB,UAAK,GAAG,mBAAmB,CAAC;QACI,aAAQ,GAAG,KAAK,CAAC;QAE7D,aAAQ,GAAG,CAAC,KAAY,EAAQ,EAAE;YAChC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;QACvC,CAAC,CAAC;QAEF,cAAS,GAAG,CAAC,KAAY,EAAQ,EAAE;YACjC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QACxC,CAAC,CAAC;IAyBJ,CAAC;aArCiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,gBAAgB,CAAC,AAA1C,CAA2C;IAMjE,QAAQ,CAEN;IAEF,SAAS,CAEP;IAEF,YAAY,CAAC,KAAY,EAAE,IAA8B;QACvD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,MAAM,KAAK,GAAG,iBAAiB,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;QAC1E,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IACzC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;eAGA,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC;kBAC9B,IAAI,CAAC,QAAQ;mBACZ,IAAI,CAAC,KAAK;eACd,IAAI,CAAC,QAAQ;gBACZ,IAAI,CAAC,SAAS;OACvB,CAAC;IACN,CAAC;;AAlCW;IAAX,QAAQ,EAAE;sDAAuB;AACtB;IAAX,QAAQ,EAAE;sDAA6B;AACI;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAkB"}

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

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

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

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

package/dist/molecules/color-picker/input-color.styles.js

@@ -0,0 +1,36 @@
+import { css } from 'lit';
+export const inputColorStyles = css `
+  :host {
+    display: inline-flex;
+    width: var(--color-picker-input-size, var(--ds-size-sm));
+    height: var(--color-picker-input-size, var(--ds-size-sm));
+  }
+
+  input {
+    width: 100%;
+    height: 100%;
+    padding: 1px;
+    border: 1px solid var(--ds-color-border-strong);
+    border-radius: var(--ds-radius-sm);
+    background: var(--ds-color-bg);
+    cursor: pointer;
+  }
+
+  input:focus-visible {
+    border-color: var(--ds-color-accent);
+    box-shadow: var(--ds-shadow-focus);
+    outline: none;
+  }
+
+  :host([disabled]) input {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  @media (max-width: 480px) {
+    :host {
+      width: 100%;
+    }
+  }
+`;
+//# sourceMappingURL=input-color.styles.js.map

package/dist/molecules/color-picker/input-color.styles.js.map

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

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

@@ -0,0 +1,6 @@
+export interface ColorPickerOption {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/types.ts"],"names":[],"mappings":""}

package/dist/molecules/dialog/define.d.ts

@@ -0,0 +1,8 @@
+import { DsDialog } from './dialog.js';
+import '../card/define.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-dialog': DsDialog;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

package/dist/molecules/dialog/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/molecules/dialog/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,mBAAmB,CAAC;AAM3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/molecules/dialog/define.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/molecules/dialog/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,mBAAmB,CAAC;AAE3B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;IACrC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC/C,CAAC"}

package/dist/molecules/dialog/dialog.d.ts

@@ -0,0 +1,33 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+import '../card/define.js';
+export type DialogSize = 'sm' | 'md' | 'lg';
+/**
+ * @tag ds-dialog
+ * @summary Modal dialog built on the native `<dialog>` element. Header and footer are sticky; only the body scrolls.
+ * @slot title - Heading content rendered in the header row.
+ * @slot default - Body content. Scrolls when it overflows.
+ * @slot footer - Footer content, typically `<ds-button>` actions.
+ * @csspart dialog - The native `<dialog>` element.
+ * @csspart card - The inner `ds-card` container.
+ * @csspart body - The scrolling body region (forwarded from `ds-card`).
+ * @csspart close-button - The header close button.
+ * @event ds-open - Fires after the dialog opens.
+ * @event ds-close - Fires after the dialog closes. Detail: `{ returnValue: string }`.
+ * @event ds-cancel - Fires when the dialog is dismissed via Escape or backdrop click.
+ */
+export declare class DsDialog extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    open: boolean;
+    label: string;
+    dismissible: boolean;
+    size: DialogSize;
+    private _dialogEl?;
+    show(): void;
+    close(returnValue?: string): void;
+    updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=dialog.d.ts.map

package/dist/molecules/dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,mBAAmB,CAAC;AAG3B,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAS,SAAQ,SAAS;;IACrC,OAAgB,MAAM,4BAAuC;IAEjB,IAAI,UAAS;IAC7C,KAAK,SAAM;IACqB,WAAW,UAAQ;IAClC,IAAI,EAAE,UAAU,CAAQ;IAEpC,OAAO,CAAC,SAAS,CAAC,CAAoB;IAEvD,IAAI,IAAI,IAAI;IAIZ,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI;IAOxB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAUtC,oBAAoB,IAAI,IAAI;IA6B5B,MAAM,IAAI,cAAc;CAoClC"}

package/dist/molecules/dialog/dialog.js

@@ -0,0 +1,139 @@
+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, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import '../card/define.js';
+import { dialogStyles } from './dialog.styles.js';
+/**
+ * @tag ds-dialog
+ * @summary Modal dialog built on the native `<dialog>` element. Header and footer are sticky; only the body scrolls.
+ * @slot title - Heading content rendered in the header row.
+ * @slot default - Body content. Scrolls when it overflows.
+ * @slot footer - Footer content, typically `<ds-button>` actions.
+ * @csspart dialog - The native `<dialog>` element.
+ * @csspart card - The inner `ds-card` container.
+ * @csspart body - The scrolling body region (forwarded from `ds-card`).
+ * @csspart close-button - The header close button.
+ * @event ds-open - Fires after the dialog opens.
+ * @event ds-close - Fires after the dialog closes. Detail: `{ returnValue: string }`.
+ * @event ds-cancel - Fires when the dialog is dismissed via Escape or backdrop click.
+ */
+export class DsDialog extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.label = '';
+        this.dismissible = true;
+        this.size = 'md';
+        this.#onBackdropClick = (event) => {
+            if (!this.dismissible)
+                return;
+            if (event.target === this._dialogEl)
+                this.close();
+        };
+        this.#onCancel = (event) => {
+            if (!this.dismissible) {
+                event.preventDefault();
+                return;
+            }
+            this.emit('ds-cancel', { detail: null });
+        };
+        this.#onNativeClose = () => {
+            this.open = false;
+            this.emit('ds-close', {
+                detail: { returnValue: this._dialogEl?.returnValue ?? '' },
+            });
+        };
+        this.#onCloseButtonClick = () => {
+            this.close();
+        };
+    }
+    static { this.styles = [...DsElement.styles, dialogStyles]; }
+    show() {
+        this.open = true;
+    }
+    close(returnValue) {
+        if (returnValue !== undefined && this._dialogEl) {
+            this._dialogEl.returnValue = returnValue;
+        }
+        this.open = false;
+    }
+    updated(changed) {
+        if (!changed.has('open') || !this._dialogEl)
+            return;
+        if (this.open && !this._dialogEl.open) {
+            this._dialogEl.showModal();
+            this.emit('ds-open', { detail: null });
+        }
+        else if (!this.open && this._dialogEl.open) {
+            this._dialogEl.close();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._dialogEl?.open)
+            this._dialogEl.close();
+    }
+    #onBackdropClick;
+    #onCancel;
+    #onNativeClose;
+    #onCloseButtonClick;
+    render() {
+        const titleId = `${this.uid}-title`;
+        const useLabelledBy = !this.label;
+        return html `<dialog
+      part="dialog"
+      aria-labelledby=${ifDefined(useLabelledBy ? titleId : undefined)}
+      aria-label=${ifDefined(this.label || undefined)}
+      @click=${this.#onBackdropClick}
+      @cancel=${this.#onCancel}
+      @close=${this.#onNativeClose}
+    >
+      <ds-card elevation="md" part="card">
+        <div slot="title" class="title-row">
+          <h2 id=${titleId} class="title-text"><slot name="title"></slot></h2>
+          <button
+            class="close-btn"
+            part="close-button"
+            type="button"
+            aria-label="Close"
+            @click=${this.#onCloseButtonClick}
+          >
+            <svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true">
+              <path
+                d="M4 4l8 8M12 4l-8 8"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <slot></slot>
+        <div slot="footer" class="footer"><slot name="footer"></slot></div>
+      </ds-card>
+    </dialog>`;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsDialog.prototype, "open", void 0);
+__decorate([
+    property()
+], DsDialog.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsDialog.prototype, "dismissible", void 0);
+__decorate([
+    property({ reflect: true })
+], DsDialog.prototype, "size", void 0);
+__decorate([
+    query('dialog')
+], DsDialog.prototype, "_dialogEl", void 0);
+//# sourceMappingURL=dialog.js.map

package/dist/molecules/dialog/dialog.js.map

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

package/dist/molecules/dialog/dialog.styles.d.ts

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

package/dist/molecules/dialog/dialog.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAiFxB,CAAC"}

package/dist/molecules/dialog/dialog.styles.js

@@ -0,0 +1,84 @@
+import { css } from 'lit';
+export const dialogStyles = css `
+  :host {
+    display: contents;
+  }
+  dialog {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    width: 100%;
+    max-height: min(90vh, 720px);
+    border-radius: var(--ds-radius-sm);
+    box-shadow: var(--ds-shadow-md);
+    overflow: visible;
+  }
+  :host([size='sm']) dialog {
+    max-width: 400px;
+  }
+  :host([size='md']) dialog {
+    max-width: 560px;
+  }
+  :host([size='lg']) dialog {
+    max-width: 800px;
+  }
+  dialog::backdrop {
+    background: rgb(15 23 42 / 0.55);
+    backdrop-filter: blur(2px);
+  }
+  ds-card {
+    height: 100%;
+  }
+  ds-card::part(card) {
+    height: 100%;
+    max-height: 100%;
+    box-shadow: none;
+    border-color: transparent;
+    gap: var(--ds-space-3);
+  }
+  ds-card::part(body) {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+  .title-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--ds-space-3);
+  }
+  .title-text {
+    margin: 0;
+    flex: 1;
+    font-family: var(--ds-font-display);
+    font-size: var(--ds-font-size-xl);
+    font-weight: var(--ds-font-weight-semibold);
+    letter-spacing: var(--ds-letter-spacing-display);
+  }
+  .close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin: calc(var(--ds-space-1) * -1);
+    border: 0;
+    border-radius: var(--ds-radius-sm);
+    background: transparent;
+    color: var(--ds-color-fg-subtle, var(--ds-color-fg));
+    cursor: pointer;
+    transition: background-color var(--ds-duration-fast) var(--ds-easing-standard);
+  }
+  .close-btn:hover {
+    background: var(--ds-color-bg-subtle, rgb(0 0 0 / 0.05));
+    color: var(--ds-color-fg);
+  }
+  .footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--ds-space-2);
+  }
+`;
+//# sourceMappingURL=dialog.styles.js.map

package/dist/molecules/dialog/dialog.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/molecules/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiF9B,CAAC"}

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

@@ -0,0 +1,2 @@
+export { DsDialog, type DialogSize } from './dialog.js';
+//# sourceMappingURL=index.d.ts.map