@sekiui/elements 0.0.69 → 0.0.71

package/dist/collection/components/chart/seki-chart.js

@@ -0,0 +1,316 @@
+import { Host, h } from "@stencil/core";
+import { Chart, registerables, } from "chart.js";
+import { getChartColors, getGridColor, getTextColor, getBackgroundColor, hexToRgba } from "./chart-theme";
+import { getDefaultOptions, deepMerge } from "./chart-config";
+// Register Chart.js components
+Chart.register(...registerables);
+export class SekiChart {
+    constructor() {
+        // Props
+        this.type = 'line';
+        this.height = '300px';
+    }
+    render() {
+        const containerStyle = {
+            width: '100%',
+            height: this.height,
+            position: 'relative',
+        };
+        return (h(Host, { key: '55d6b7df566448cc744c3cf0cfb1fb4f87c81142' }, h("div", { key: '7181e6f56e42cf8f6a2d3acad1133396f5507bbd', class: "chart-container", style: containerStyle, role: "img", "aria-label": this.getAriaLabel() }, h("canvas", { key: '718d6b5986c60c92266505cd045411eab4646e97', ref: (el) => (this.canvasRef = el) }), this.renderErrorState())));
+    }
+    getAriaLabel() {
+        var _a, _b;
+        const chartData = this.data || this.parseDataJson(this.dataJson);
+        if (!chartData)
+            return 'Chart';
+        const datasetCount = ((_a = chartData.datasets) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        const labelCount = ((_b = chartData.labels) === null || _b === void 0 ? void 0 : _b.length) || 0;
+        return `${this.type} chart with ${datasetCount} dataset${datasetCount !== 1 ? 's' : ''} and ${labelCount} data point${labelCount !== 1 ? 's' : ''}`;
+    }
+    renderErrorState() {
+        if (this.data || this.dataJson)
+            return null;
+        return (h("div", { class: "chart-error" }, h("p", null, "No data provided"), h("p", { class: "error-hint" }, "Set the ", h("code", null, "data"), " property or ", h("code", null, "data-json"), " attribute")));
+    }
+    parseDataJson(jsonString) {
+        if (!jsonString)
+            return undefined;
+        try {
+            return JSON.parse(jsonString);
+        }
+        catch (e) {
+            console.error('seki-chart: Failed to parse data JSON', e);
+            return undefined;
+        }
+    }
+    parseOptionsJson(jsonString) {
+        if (!jsonString)
+            return undefined;
+        try {
+            return JSON.parse(jsonString);
+        }
+        catch (e) {
+            console.error('seki-chart: Failed to parse options JSON', e);
+            return undefined;
+        }
+    }
+    componentDidLoad() {
+        this.renderChart();
+    }
+    disconnectedCallback() {
+        if (this.chartInstance) {
+            this.chartInstance.destroy();
+            this.chartInstance = undefined;
+        }
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+        }
+    }
+    handlePropsChange() {
+        // Debounce rapid updates
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+        }
+        this.updateTimeout = window.setTimeout(() => {
+            this.renderChart();
+        }, 100);
+    }
+    renderChart() {
+        if (!this.canvasRef)
+            return;
+        // Parse data from JSON attributes if properties not set
+        const chartData = this.data || this.parseDataJson(this.dataJson);
+        const chartOptions = this.options || this.parseOptionsJson(this.optionsJson);
+        if (!chartData) {
+            console.warn('seki-chart: No data provided');
+            return;
+        }
+        // Destroy existing chart instance
+        if (this.chartInstance) {
+            this.chartInstance.destroy();
+        }
+        // Get theme colors
+        const colors = this.getColors();
+        const gridColor = getGridColor(this.el);
+        const textColor = getTextColor(this.el);
+        const backgroundColor = getBackgroundColor(this.el);
+        // Apply theme colors to datasets
+        const themedData = this.applyThemeColors(chartData, colors);
+        // Merge default options with user options
+        const defaultOptions = getDefaultOptions(this.type, gridColor, textColor, backgroundColor);
+        const mergedOptions = chartOptions ? deepMerge(defaultOptions, chartOptions) : defaultOptions;
+        // Create new Chart.js instance
+        const chartType = this.type === 'area' ? 'line' : this.type;
+        this.chartInstance = new Chart(this.canvasRef, {
+            type: chartType,
+            data: themedData,
+            options: mergedOptions,
+        });
+    }
+    getColors() {
+        var _a;
+        // 1. User-provided colors override
+        if ((_a = this.colors) === null || _a === void 0 ? void 0 : _a.length)
+            return this.colors;
+        // 2. Read CSS variables from component
+        return getChartColors(this.el);
+    }
+    applyThemeColors(data, colors) {
+        const datasets = data.datasets.map((dataset, index) => {
+            const color = colors[index % colors.length];
+            const isArea = this.type === 'area';
+            return Object.assign(Object.assign({}, dataset), { backgroundColor: isArea ? hexToRgba(color, 0.2) : (dataset.backgroundColor || color), borderColor: dataset.borderColor || color, fill: isArea ? true : dataset.fill });
+        });
+        return Object.assign(Object.assign({}, data), { datasets });
+    }
+    static get is() { return "seki-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChartType",
+                    "resolved": "\"area\" | \"bar\" | \"doughnut\" | \"line\"",
+                    "references": {
+                        "ChartType": {
+                            "location": "import",
+                            "path": "./chart-types",
+                            "id": "src/components/chart/chart-types.ts::ChartType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'line'"
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "ChartData",
+                    "resolved": "ChartData<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown> | undefined",
+                    "references": {
+                        "ChartData": {
+                            "location": "import",
+                            "path": "./chart-types",
+                            "id": "src/components/chart/chart-types.ts::ChartData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "ChartOptions",
+                    "resolved": "undefined | ({ datasets?: _DeepPartialObject<{ line: LineControllerDatasetOptions & FillerControllerDatasetOptions; bar: BarControllerDatasetOptions; doughnut: DoughnutControllerDatasetOptions; scatter: LineControllerDatasetOptions; bubble: BubbleControllerDatasetOptions; pie: DoughnutControllerDatasetOptions; polarArea: PolarAreaControllerDatasetOptions; radar: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; indexAxis?: \"x\" | \"y\" | undefined; clip?: number | false | _DeepPartialObject<ChartArea> | undefined; color?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; backgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBackgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; borderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBorderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; font?: _DeepPartialObject<Partial<FontSpec>> | undefined; responsive?: boolean | undefined; maintainAspectRatio?: boolean | undefined; resizeDelay?: number | undefined; aspectRatio?: number | undefined; locale?: string | undefined; onResize?: ((chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, size: { width: number; height: number; }) => void) | undefined; devicePixelRatio?: number | undefined; interaction?: _DeepPartialObject<CoreInteractionOptions> | undefined; hover?: _DeepPartialObject<CoreInteractionOptions> | undefined; events?: _DeepPartialArray<keyof HTMLElementEventMap> | undefined; onHover?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>) => void) | undefined; onClick?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>) => void) | undefined; layout?: _DeepPartialObject<Partial<{ autoPadding: boolean; padding: Scriptable<Padding, ScriptableContext<keyof ChartTypeRegistry>>; }>> | undefined; parsing?: false | _DeepPartialObject<{ [key: string]: string; }> | undefined; normalized?: boolean | undefined; animation?: false | _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, event: AnimationEvent) => void) | undefined; }> | undefined; animations?: _DeepPartialObject<AnimationsSpec<keyof ChartTypeRegistry>> | undefined; transitions?: _DeepPartialObject<TransitionsSpec<keyof ChartTypeRegistry>> | undefined; elements?: _DeepPartialObject<ElementOptionsByType<keyof ChartTypeRegistry>> | undefined; plugins?: _DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>> | undefined; line?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; bar?: _DeepPartialObject<{ datasets: BarControllerDatasetOptions; }> | undefined; doughnut?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; scatter?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions; }> | undefined; bubble?: _DeepPartialObject<{ datasets: BubbleControllerDatasetOptions; }> | undefined; pie?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; polarArea?: _DeepPartialObject<{ datasets: PolarAreaControllerDatasetOptions; }> | undefined; radar?: _DeepPartialObject<{ datasets: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; scales?: _DeepPartialObject<{ [key: string]: ScaleOptionsByType<\"radialLinear\" | keyof CartesianScaleTypeRegistry>; }> | undefined; })",
+                    "references": {
+                        "ChartOptions": {
+                            "location": "import",
+                            "path": "./chart-types",
+                            "id": "src/components/chart/chart-types.ts::ChartOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "colors": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'300px'"
+            },
+            "dataJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data-json"
+            },
+            "optionsJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options-json"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "chartInstance": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "dataJson",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "options",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "optionsJson",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "type",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "colors",
+                "methodName": "handlePropsChange"
+            }];
+    }
+}

package/dist/collection/components/checkbox/seki-checkbox.js

@@ -103,11 +103,11 @@ export class SekiCheckbox {
     render() {
         const isChecked = this.isChecked;
         const dataState = this.indeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: 'e92ee1e3ae6554974fd28a2602cc971c33aeaaef', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '06a8f74c647e708653514531271c5f2e7cab7410', type: "button", role: "checkbox", class: "checkbox", part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: '532259b886d3e8af73b5932784746086a630439f', class: "indicator", part: "indicator" }, this.indeterminate ? (
+        return (h(Host, { key: '5866bb194841f2d9eb42613c6a09c2f70255c81a', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '957a6594d22d24d39722631d5ac235e1b3cc541e', type: "button", role: "checkbox", class: "checkbox", part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: 'e297222ecf6e5c3357f58a20da4cb9ddcc70a5f2', class: "indicator", part: "indicator" }, this.indeterminate ? (
         // Minus icon for indeterminate state
         h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))) : (
         // Checkmark icon for checked state
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" })))))), this.name && (h("input", { key: '4c848e4cdb0f10f8592d95a7da95032b202502f4', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" })))))), this.name && (h("input", { key: 'fe5e7b1bcf73984234d6de98999395d9c41bd266', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
     }
     static get is() { return "seki-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/collapsible/seki-collapsible-content.js

@@ -86,11 +86,11 @@ export class SekiCollapsibleContent {
         else {
             contentStyle.height = '0';
         }
-        return (h(Host, { key: '27f18a16cb1324bba8f02502131c29e6471b32bc', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'f82033ef12b4f0ea12ae60ca8157def45421c252', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
+        return (h(Host, { key: '8660f862e02a0ccfa70efb4f33890a1a173dd336', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'b4088e9ff518e62ffeb907164474528d3da28a0a', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
                 'collapsible-content': true,
                 'collapsible-content--open': this._isOpen,
                 'collapsible-content--animating': this._isAnimating,
-            }, style: contentStyle }, h("div", { key: '48898deaeab9bac2ec61bd22e6895265a5a797d7', class: "collapsible-content-inner" }, h("slot", { key: '4952c3bdce1a9df77517eae7c996c2ef2f107811' })))));
+            }, style: contentStyle }, h("div", { key: 'c0d48ba3d8da984c59ee450b36ee8b4282e8c070', class: "collapsible-content-inner" }, h("slot", { key: '22812835649db8c73d6711b00aa3a1bfe360a302' })))));
     }
     static get is() { return "seki-collapsible-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/collapsible/seki-collapsible.js

@@ -87,7 +87,7 @@ export class SekiCollapsible {
         };
     }
     render() {
-        return (h(Host, { key: '3d46e1be1070262917348a933841fdc653cfb3c5', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: '8499206ae23b4cadf07ee92b46c431f757934afd', part: "collapsible", class: "collapsible" }, h("slot", { key: 'a4133f7a00e3d7807c98c4cdca5f5991a2778f25' }))));
+        return (h(Host, { key: 'd50bcf876efd46065b47d53736d0e2d8954a7099', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: '18b870f4b67947e5ef87b6e58ad841f0eb4686c9', part: "collapsible", class: "collapsible" }, h("slot", { key: '344dc7aedb5d9d4d04baaac445c8772b2d7a1b52' }))));
     }
     static get is() { return "seki-collapsible"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/combobox/seki-combobox.js

@@ -341,7 +341,7 @@ export class SekiCombobox {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '96d058064e0be6472ae40ae16caf5fd60403882d', role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": this.listboxId, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby }, h("div", { key: 'cb2dc7fe224f95bb421d509fafc796b163c20ff8', class: "combobox-container" }, h("slot", { key: '257e6d9a11230e1caa571d7eb16dfd35a0153e50' }))));
+        return (h(Host, { key: '1556f08562d9f3477db1b9d89cb5ac727ff1933e', role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": this.listboxId, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby }, h("div", { key: 'd0b5bdde2e8cfe3343f8c1761df36775151d1e9e', class: "combobox-container" }, h("slot", { key: '6ef0c8f4f82259c6c8acb5537f275c2d97b67cbc' }))));
     }
     static get is() { return "seki-combobox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/combobox-content/seki-combobox-content.js

@@ -33,7 +33,7 @@ export class SekiComboboxContent {
         }
     }
     render() {
-        return (h(Host, { key: '075c772adf87a091ea837910a765a85f2f562c1b', class: { 'hidden': !this.isOpen } }, h("div", { key: 'afa4a691a9cc139e48fbd2a1b3975b15dee44d5e', id: this.listboxId, class: "combobox-content", role: "listbox", style: { maxHeight: this.maxHeight } }, h("slot", { key: 'f00a97069107edd4340eaf181278d8ec905a5343' }))));
+        return (h(Host, { key: '9c0b779243c06d8bc9f17fdd79cd8f0b7dc3698e', class: { 'hidden': !this.isOpen } }, h("div", { key: '72e48545b9d1f225c86a76231b12c8a4b9217d52', id: this.listboxId, class: "combobox-content", role: "listbox", style: { maxHeight: this.maxHeight } }, h("slot", { key: 'f046906c1e8ccc7d3bb19a006644db633061450a' }))));
     }
     static get is() { return "seki-combobox-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/combobox-empty/seki-combobox-empty.js

@@ -36,7 +36,7 @@ export class SekiComboboxEmpty {
             .filter(([, active]) => active)
             .map(([name]) => name)
             .join(' ');
-        return (h(Host, { key: '6425da7611e88a06900cd83ad20190aba67c020d' }, h("div", { key: '84878796d46a346231e6b0eca977d34f4dcd36a4', class: classString, role: "status" }, this.renderSlotForReason(), h("slot", { key: '764dc897c6389b53d2f171fdacc1d1628996b5ba' }))));
+        return (h(Host, { key: '8fdc2f0a427a7e836009bff2505c20b7f40698fd' }, h("div", { key: '2e2e3620976fc1baf019ed90ad8e141d4b13625c', class: classString, role: "status" }, this.renderSlotForReason(), h("slot", { key: '669cf753d9e4a1b3419b9e6c43639c086de9ef43' }))));
     }
     /**
      * Renders the appropriate named slot based on the current reason

package/dist/collection/components/combobox-group/seki-combobox-group.js

@@ -7,7 +7,7 @@ export class SekiComboboxGroup {
         this.groupId = `combobox-group-${Math.random().toString(36).substr(2, 9)}`;
     }
     render() {
-        return (h(Host, { key: '8f7afc4a5d4610aecf985c3e1f8c2496608d9498' }, h("div", { key: '6766aa357f6a00b2a4fbcb6126aca916200da698', class: "combobox-group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: 'faefff69bc4f5264809ef2e6a73a93e479afdbae', id: this.groupId, class: "combobox-group-label" }, this.label), h("div", { key: '89d5eceb7245acd5e36160c1f8cfc82a1c656455', class: "combobox-group-items" }, h("slot", { key: '1f2b6e708021437a34cd2cb7bdf5a857189ee5f0' })))));
+        return (h(Host, { key: 'b117d0c4e8db249d6041b5c70fea2269ff68de95' }, h("div", { key: 'c66827942e7ab8634f6e5a2f1e4ab5e8911c27a1', class: "combobox-group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: 'd0fc316e74ef489397045a7fc1e855e6318b0d7b', id: this.groupId, class: "combobox-group-label" }, this.label), h("div", { key: '2fbc0a1af9f42fbb6056a613a2d7b23bc33690ec', class: "combobox-group-items" }, h("slot", { key: '1eb4f8a85f8afeded69b0c876f751a7e7a2c3872' })))));
     }
     static get is() { return "seki-combobox-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/combobox-input/seki-combobox-input.js

@@ -150,7 +150,7 @@ export class SekiComboboxInput {
         const focusedItemId = this.focusedItemValue
             ? `combobox-item-${this.focusedItemValue}`
             : undefined;
-        return (h(Host, { key: 'af55bf9ddfbd93b2f8eb506598f336642f9e3baa' }, h("div", { key: 'd8276ec24a1ed4725b3c9d0ed4995dd267dea024', class: "combobox-input-wrapper" }, this.renderSelectedDisplay(), h("input", { key: '40754676011f95b9e1bc201aea1c2037849c1ef6', id: this.inputId, type: "text", class: "combobox-input", value: this.searchQuery, placeholder: this.selectedItems.length > 0 && this.multiple ? '' : this.placeholder, disabled: this.disabled, "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-activedescendant": focusedItemId, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }))));
+        return (h(Host, { key: '4c9e22ab52565a52526e90bdb02d2951fd5d0932' }, h("div", { key: 'a05c73e2c6b368731728a565032f1a3e2a5c5b98', class: "combobox-input-wrapper" }, this.renderSelectedDisplay(), h("input", { key: '8dbddc30890b1e347113f09749d391de70825e26', id: this.inputId, type: "text", class: "combobox-input", value: this.searchQuery, placeholder: this.selectedItems.length > 0 && this.multiple ? '' : this.placeholder, disabled: this.disabled, "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-activedescendant": focusedItemId, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }))));
     }
     static get is() { return "seki-combobox-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/combobox-item/seki-combobox-item.js

@@ -66,12 +66,12 @@ export class SekiComboboxItem {
         }
     }
     render() {
-        return (h(Host, { key: '4bfcd03102e5914a173cf0cf637188e9dffdc03c' }, h("div", { key: 'f366831b12cbcc52da103bd944f081acf51cbe77', id: this.itemId, class: {
+        return (h(Host, { key: 'b655214703f70b20322a4a9ed0a2e8bd42c221c4' }, h("div", { key: '0cdc248bfab845c66e8ed9c347ba6a8baa15fd16', id: this.itemId, class: {
                 'combobox-item': true,
                 'selected': this.isSelected,
                 'focused': this.isFocused,
                 'disabled': this.disabled,
-            }, role: "option", "aria-selected": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter }, h("slot", { key: '12de879c8042b691b6b4a555fc208a3c0d5b0200' }), this.isSelected && (h("svg", { key: 'd688bce7e0b4d7880cdf576d4f4289a3f9dc16a5', class: "check-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: '3961183a6811f912d40306550c7bd977cba76058', points: "20 6 9 17 4 12" }))))));
+            }, role: "option", "aria-selected": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter }, h("slot", { key: '07574064e6c82771a2064a0650aca23ef11c1282' }), this.isSelected && (h("svg", { key: 'c8eafdbda8649d604f425025d65921603f3d68bc', class: "check-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: '154f69b4f6df4dd7ff6e97fce008498b4eb8c4b8', points: "20 6 9 17 4 12" }))))));
     }
     static get is() { return "seki-combobox-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/command/seki-command-input.js

@@ -46,7 +46,7 @@ export class SekiCommandInput {
         var _a;
         const context = this.getContext();
         const value = (_a = context === null || context === void 0 ? void 0 : context.value) !== null && _a !== void 0 ? _a : '';
-        return (h(Host, { key: 'c14f205761ac0006595178f865eea3409f22d810' }, h("div", { key: '2183f5e3578b41f29ec9c914439f4ed57c94b08d', part: "input-wrapper", class: "command-input-wrapper" }, h("svg", { key: '54cdc0fc339a79aef8101fe49e578a10d76b8abf', part: "icon", class: "command-input-icon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { key: '4de836ffb7be1fbbd01446d861296f5db7c813b0', cx: "11", cy: "11", r: "8" }), h("path", { key: '97f201bbd19f719d176759c1351527b68fdb1801', d: "m21 21-4.3-4.3" })), h("input", { key: 'a95e670223dc38c455045bed6dbb8ebb02ba7f67', ref: (el) => (this.inputRef = el), part: "input", type: "text", class: "command-input", placeholder: this.placeholder, value: value, role: "combobox", "aria-expanded": "true", "aria-controls": "command-list", "aria-autocomplete": "list", onInput: this.handleInput, onKeyDown: this.handleKeyDown }))));
+        return (h(Host, { key: 'f4e7a8a0803d49074cf02010ffd3d5a3e88a29d0' }, h("div", { key: '9acd66249040e045ca5b3ff09f0587bfba6215e6', part: "input-wrapper", class: "command-input-wrapper" }, h("svg", { key: '43a041960b859ff1ab494c598b92386f77831ece', part: "icon", class: "command-input-icon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { key: '51a0282f566e74e8cedbbaa3d5985f94d81c9c0d', cx: "11", cy: "11", r: "8" }), h("path", { key: '2a25e74f1b441c746d45b4d7f2a96dad94d9bde8', d: "m21 21-4.3-4.3" })), h("input", { key: 'd86c2e9f256a61fc94ff8f0a8a46ba24ad039099', ref: (el) => (this.inputRef = el), part: "input", type: "text", class: "command-input", placeholder: this.placeholder, value: value, role: "combobox", "aria-expanded": "true", "aria-controls": "command-list", "aria-autocomplete": "list", onInput: this.handleInput, onKeyDown: this.handleKeyDown }))));
     }
     static get is() { return "seki-command-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/command/seki-command-list.js

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCommandList {
     render() {
-        return (h(Host, { key: '54a1ab749f42397df292d4d2aa80ba0b9b6eb037' }, h("div", { key: '3d5ede102b712d771348c7502db1f1add07cc50a', part: "list", role: "listbox", class: "command-list" }, h("slot", { key: '4b4858a33d212b0a917c9fe7ed4c1df07aa9f9ff' }))));
+        return (h(Host, { key: '4e05a9487665f35855ee5f3f576925252ef42c16' }, h("div", { key: '314aeb9a206aeb4adda2bf133bdaffa252b58234', part: "list", role: "listbox", class: "command-list" }, h("slot", { key: '9c753efc4a2f3aa2a545907014c58b0ec1f17e5d' }))));
     }
     static get is() { return "seki-command-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/command/seki-command-separator.js

@@ -6,7 +6,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCommandSeparator {
     render() {
-        return (h(Host, { key: '4657c3bb790ee6bb16922dbd054a915a1df63877' }, h("div", { key: '1facde6b10dd3f9592fdf8ce0e075b3f0dd92ab8', part: "separator", role: "separator", class: "command-separator" })));
+        return (h(Host, { key: 'ad586a70b9519eff2affcc4146d315fdd1ccf9a1' }, h("div", { key: 'd4aa77d1ce2297868a7d993f33e58830ddce2341', part: "separator", role: "separator", class: "command-separator" })));
     }
     static get is() { return "seki-command-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/command/seki-command.js

@@ -172,7 +172,7 @@ export class SekiCommand {
         this.el._commandContext = this.getContext();
     }
     render() {
-        return (h(Host, { key: 'd03c810916a9f1cd22c13141d4390ea4f8cf315d' }, h("div", { key: 'a49ec80a1cf3cdc6855049d8510b33f05a59aad4', part: "command", class: "command" }, h("slot", { key: 'e80f45a26434434775bb167276c2380186dd7fa4' }))));
+        return (h(Host, { key: 'cd231694e6a454580035b5a524de9a3a78f3d8c4' }, h("div", { key: 'ff079bb613cc470d41f94d6ac1ccab70aa9bd7ca', part: "command", class: "command" }, h("slot", { key: 'edd144ac7a1ccb2798b6c670c5153cb9f4bce411' }))));
     }
     static get is() { return "seki-command"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/context-menu/seki-context-menu-trigger.js

@@ -77,7 +77,7 @@ export class SekiContextMenuTrigger {
         this.cancelLongPress();
     }
     render() {
-        return (h(Host, { key: 'cb8cc4ddbcc3fbe710cf013b73a5d98b151eb959', onContextMenu: this.handleContextMenu, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onTouchCancel: this.handleTouchEnd }, h("slot", { key: '1f082ee8be390224be2353bdf23caa71a9270bfb' })));
+        return (h(Host, { key: 'b2b22c0d1d4a137d9d8f69c1b09254e069bc1959', onContextMenu: this.handleContextMenu, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onTouchCancel: this.handleTouchEnd }, h("slot", { key: 'b2e6cb7eaf887a67d813026800b66243b9bd328c' })));
     }
     static get is() { return "seki-context-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/context-menu/seki-context-menu.js

@@ -130,7 +130,7 @@ export class SekiContextMenu {
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: '8dcfe0d1362fce84055d18a11c888f21e9fb39e0', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'f9c184441314ccd5aeaa967e4597de242ac8333b', part: "context-menu", class: "context-menu" }, h("slot", { key: '355e3b3cc9e644e70242130b800d259d0b09c154' }))));
+        return (h(Host, { key: 'fc90d9258efeec2bc9d2bc3cbc045b1870d088e0', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'd8c49f0e336c02c3272e9af0f5fb488b1d87b1e0', part: "context-menu", class: "context-menu" }, h("slot", { key: '11a57ffde09f25ce5dfcdb1bf271ed33e74df69b' }))));
     }
     static get is() { return "seki-context-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/data-table/seki-data-table.js

@@ -417,10 +417,10 @@ export class SekiDataTable {
         const visibleColumns = this.getVisibleColumns();
         const totalPages = this.getTotalPages();
         const isLoading = this.state.loading || this.loading;
-        return (h(Host, { key: 'da2383223fccee266eedb05ef67d99fc14160686' }, h("div", { key: '0dd877d4a74abeb7c93bcf0640fbe7cf9ef639fe', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: '78c92ab6672760e7c5ae1ba23f3f4c540c206aca', class: "data-table__toolbar" }, this.searchable && (h("div", { key: 'aac4dd01e774845ddb534a466feb2f939f799eb9', class: "data-table__search" }, h("input", { key: 'd18587ef400f91823269d53b9931a804e0c59462', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: 'ee40cbf38e2ab30a0795444c1ab97be10c590c71', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: 'e354fa3811051e644a5d40bb1aff601871e68b0f', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: '5bb0b2591359e8f3745e5318a00e163d9141d8e1', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: '75615cb94f8a0cf1db5ee59842a700c56e69fb10', class: {
+        return (h(Host, { key: 'ef69a5efe09ae7df744b67bca088a777980092a4' }, h("div", { key: 'ba1d083df5363935bea1477c9e474818e11d9202', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: '62555450c74f47314189b63571cbad9a99f189db', class: "data-table__toolbar" }, this.searchable && (h("div", { key: '42bd06b85c7b7feb8f3db2aef776f81d056a7dc4', class: "data-table__search" }, h("input", { key: 'd348ece6b67c3b1c7f13f2ff071973521467f4a5', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: '89ea344cf44dc6aee3c2b52a850d50e2aac844b7', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: '8a546dfa8690c2e571154aa5da27a9908c1c4cef', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: 'cc9d9753210339316eeaed6e9fb2a398533e9c96', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: '1e027cf981d1339aedf58810fa89c34bb3472034', class: {
                 'data-table__container': true,
                 'data-table__container--virtual': this.virtualScroll,
-            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: 'a1a791b706595b12e5941346f74b9128b497b8ae', class: "data-table__table", role: "grid" }, h("thead", { key: 'f735c43473d722bacb49fa3fbfc77cbec3133fcf', class: "data-table__head" }, h("tr", { key: 'c59c859436c214fb39201855bdc85f97e44b4704', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: '541febb38f65c38f02617e0815a5c252da93ffe4', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: '6a0d81656facc0e9b68559eb3276295b7885c2cf', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: '50c7fdf98b601cfa9bcbc52ba4bd744b8722d13a', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: 'b56608ee89064f817b74fe2f135a12756bc389fd', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
+            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: '6e39a8fbfbb77379d2544dc6ee2168ced4443a78', class: "data-table__table", role: "grid" }, h("thead", { key: '43af495683a4825caf6f9a085adc7298e354d8ce', class: "data-table__head" }, h("tr", { key: '13647162bbbf15e65d662504e1bef7773beee48b', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: 'a3d8afe9d70076ac2de77032d67381f15c09faba', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: '48ea1614a2c391ac38d7ded06c1ad1cc9f895642', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: 'be78143b151f393aba67f3282f9218752fc9fba1', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: '71b0328cc3f6f83ef33255263c211f1effed0c89', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
             var _a, _b, _c;
             return (h("th", { key: column.field, class: {
                     'data-table__th': true,
@@ -436,7 +436,7 @@ export class SekiDataTable {
                     ? '↑'
                     : '↓'
                 : '↕'))), column.resizable && (h("div", { class: "data-table__resize-handle", onMouseDown: (e) => this.startResize(e, column) }))));
-        }))), h("tbody", { key: '97f50512c99a111749a98c6b2d49aabe93db787e', class: "data-table__body", style: this.virtualScroll
+        }))), h("tbody", { key: '9f7cb50a5a96aa96ff06a0609fa7afdccce50b6b', class: "data-table__body", style: this.virtualScroll
                 ? {
                     height: `${this.virtualScrollState.totalHeight}px`,
                     position: 'relative',
@@ -479,12 +479,12 @@ export class SekiDataTable {
                 /* Expanded content row */
                 isExpanded && this.renderExpandedRow && (h("tr", { key: `${rowKey}-expanded`, class: "data-table__row data-table__row--expanded-content" }, h("td", { class: "data-table__td data-table__td--expanded-content", colSpan: visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) }, h("div", { class: "data-table__expanded-content", innerHTML: this.renderExpandedRow(row) })))),
             ];
-        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: 'c0abab0c31707c667c7043487073288e820bee79', class: "data-table__loading-overlay" }, h("div", { key: '6642deec260db85916618a9ce783e9ff134e69c4', class: "data-table__loading" }, "Loading...")))), h("div", { key: '217b9a73963afa30662e12cda84492e57bb72768', class: "data-table__pagination" }, h("div", { key: '104434d0970fa1928a3cb4b5bff41e5ce4c3b248', class: "data-table__pagination-info" }, this.state.totalRows > 0
+        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: '0821a9f06e3ed29f73e476d16e3d086fd2314c5c', class: "data-table__loading-overlay" }, h("div", { key: '86382d2529dbf91a81b8bb23e4d3d1a952f1b964', class: "data-table__loading" }, "Loading...")))), h("div", { key: '8f14b381671fb562a3b49f82e60a4c406a112c16', class: "data-table__pagination" }, h("div", { key: 'fe1fc05df8d7afcbc99e3ce7eec9d7f060a52cff', class: "data-table__pagination-info" }, this.state.totalRows > 0
             ? `${this.state.page * this.state.pageSize + 1}-${Math.min((this.state.page + 1) * this.state.pageSize, this.state.totalRows)} of ${this.state.totalRows}`
-            : '0 results'), h("div", { key: '62129574d1f9392e35deca42922df271b95ef31a', class: "data-table__pagination-controls" }, h("select", { key: '32fd2f1b12e77458b5b3562b9167913f2e83817a', class: "data-table__page-size", onChange: (e) => {
+            : '0 results'), h("div", { key: 'afb00fa601654ea5ad123129fda2c6f7aa5ed49e', class: "data-table__pagination-controls" }, h("select", { key: '92ce08e32cf7f57fdda8852f8b4bee900aeb6459', class: "data-table__page-size", onChange: (e) => {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 this.handlePageSizeChange(Number(e.target.value));
-            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: '7a42ff16b691c1ea6ff9e3ded83d68e908f5853d', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: '9f58d84f92e5550c3bae1b44c54b809c8af742f0', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: '371b3b3830178d61659a4706096dd9ef4c51bb31', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: '27a666fd053eb8890b062f804d5063ac4c526086', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: 'a65708add5277c60ff15dc78d17faf92e1975f34', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
+            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: '18a0881636ae994ccac79a229549c2d28f408d71', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: '724ce11a715e1b2ad206d3eb2852136694769b37', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: '0e8583c672d269d50fd1f7cd7ea892574c60a83f', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: 'b022c1f657f4254e69d144b997c074d5a54b1bcf', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: 'bf899c2b7d10db02e692126f6bd6eba86a791688', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
     }
     static get is() { return "seki-data-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dialog/seki-dialog-close.js

@@ -11,7 +11,7 @@ export class SekiDialogClose {
         this.closeDialog.emit();
     }
     render() {
-        return (h(Host, { key: '152353389d7978a42f8cf0e40600aa9b412e6744' }, h("button", { key: '6c5a2205efde82161250aba52dce74a7033ecaa8', part: "close", type: "button", class: "dialog-close", "aria-label": "Close" }, h("slot", { key: '69cff95be84344e3fe6c7361d548b49c06eda98a' }, h("svg", { key: 'a90cec05eaf2f6cbb0255ec5850d63419c778026', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '08d6531a039824b2413003663208da452c82463e', d: "M18 6 6 18" }), h("path", { key: 'a884ddcba44c9a5ba068f28af695c94b3f980e41', d: "m6 6 12 12" }))), h("span", { key: '0a60670dce35dbb16be58473cf518f36a166a944', class: "sr-only" }, "Close"))));
+        return (h(Host, { key: '33d78d6dfc026b769ea8300e210583ffc94c1125' }, h("button", { key: 'ff3363f5eb1863eee754b5dd814d1a066ccf93a2', part: "close", type: "button", class: "dialog-close", "aria-label": "Close" }, h("slot", { key: '95be22d412b263aa2783b641731056885541c09c' }, h("svg", { key: '0c52457859de464f14349b5811188cf91344f014', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'bf20dcc227c5623580743c294c4b6d0fe4df9b5d', d: "M18 6 6 18" }), h("path", { key: '7fe9c9a1e0429185f1a831a872ee0f30baafad32', d: "m6 6 12 12" }))), h("span", { key: '2377c48a324f51827305878bcfd0fb0884c3f97c', class: "sr-only" }, "Close"))));
     }
     static get is() { return "seki-dialog-close"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dialog/seki-dialog-description.js

@@ -14,7 +14,7 @@ export class SekiDialogDescription {
     }
     render() {
         const context = this.getContext();
-        return (h(Host, { key: 'eb57874041bd7a21d52a987c05a379da2e423f06' }, h("p", { key: '6050a8c3ca535f20b9b8fb98756c9db3f70c7a79', part: "description", id: context === null || context === void 0 ? void 0 : context.descriptionId, class: "dialog-description" }, h("slot", { key: '7d19cc55dc5afb4e20c4e8f9cc2dbcc2e0a7ec67' }))));
+        return (h(Host, { key: 'ece2acffbe9ca267f14409872bbe651ba42b9c38' }, h("p", { key: 'a78a75f9b75b1b8f062347b941fc3076a058f176', part: "description", id: context === null || context === void 0 ? void 0 : context.descriptionId, class: "dialog-description" }, h("slot", { key: 'f8e4436408f38878d185773fa352a298e4a8d996' }))));
     }
     static get is() { return "seki-dialog-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dialog/seki-dialog-footer.js

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiDialogFooter {
     render() {
-        return (h(Host, { key: 'c21d5fe0694d71a30a203a9022a4deffbf4a42ca' }, h("div", { key: 'dc17d2e6727e35fc46d796d9588139c1dc21363e', part: "footer", class: "dialog-footer" }, h("slot", { key: '16081671ff7c14e6d6947b4ce4ff1d239fd8cf17' }))));
+        return (h(Host, { key: '376fdc7802694d4935a40581139c599f2f87f609' }, h("div", { key: '2d0782b18e05573dfe73eb4a339ee8f592c45b9a', part: "footer", class: "dialog-footer" }, h("slot", { key: 'feee7bac75b1cc5fc6b0a07231f5320274c64489' }))));
     }
     static get is() { return "seki-dialog-footer"; }
     static get encapsulation() { return "shadow"; }