@sekiui/elements 0.0.53 → 0.0.55

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

@@ -0,0 +1,608 @@
+import { h } from "@stencil/core";
+/**
+ * Tooltip Component
+ *
+ * A fully accessible tooltip component that displays contextual information
+ * on hover (desktop) and long-press (touch). Supports rich HTML content,
+ * intelligent positioning, keyboard navigation, and dark mode.
+ *
+ * @example
+ * ```html
+ * <seki-tooltip delay="300" side="top">
+ *   <button slot="trigger">Help</button>
+ *   <div slot="content">Helpful information</div>
+ * </seki-tooltip>
+ * ```
+ */
+export class SekiTooltip {
+    constructor() {
+        /**
+         * Milliseconds to delay before showing tooltip on hover
+         * @default 0
+         * @min 0
+         * @max 2000
+         */
+        this.delay = 0;
+        /**
+         * Preferred positioning side for tooltip
+         * 'auto' uses intelligent repositioning based on viewport space
+         * @default 'auto'
+         */
+        this.side = 'auto';
+        /**
+         * Disable tooltip interactions and visibility
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Pixels between tooltip and trigger element
+         * @default 8
+         * @min 0
+         */
+        this.offset = 8;
+        /**
+         * Internal state: whether tooltip is currently visible
+         */
+        this.isVisible = false;
+        /**
+         * Internal state: current calculated position
+         */
+        this.currentPosition = 'top';
+        // Internal state tracking
+        this.showTimer = null;
+        this.hideTimer = null;
+        this.triggerEl = null;
+        this.longPressTimer = null;
+        this.touchStartX = 0;
+        this.touchStartY = 0;
+        /**
+         * Handle mouse enter on trigger
+         */
+        this.onTriggerMouseEnter = () => {
+            if (this.disabled)
+                return;
+            // Clear hide timer if exists
+            if (this.hideTimer) {
+                clearTimeout(this.hideTimer);
+                this.hideTimer = null;
+            }
+            // Set show timer with delay
+            if (this.showTimer) {
+                clearTimeout(this.showTimer);
+            }
+            this.showTimer = window.setTimeout(() => {
+                this.show();
+            }, this.delay);
+        };
+        /**
+         * Handle mouse leave from trigger
+         */
+        this.onTriggerMouseLeave = () => {
+            // Clear show timer
+            if (this.showTimer) {
+                clearTimeout(this.showTimer);
+                this.showTimer = null;
+            }
+            // Debounce hide to allow moving back over trigger
+            if (this.hideTimer) {
+                clearTimeout(this.hideTimer);
+            }
+            this.hideTimer = window.setTimeout(() => {
+                this.hide();
+            }, 100);
+        };
+        /**
+         * Handle focus on trigger (accessibility)
+         */
+        this.onTriggerFocus = () => {
+            if (this.disabled)
+                return;
+            // Clear timers
+            if (this.showTimer)
+                clearTimeout(this.showTimer);
+            if (this.hideTimer)
+                clearTimeout(this.hideTimer);
+            this.showTimer = null;
+            this.hideTimer = null;
+            // Show immediately on focus (no delay)
+            this.show();
+        };
+        /**
+         * Handle blur from trigger
+         */
+        this.onTriggerBlur = () => {
+            // Clear timers
+            if (this.showTimer)
+                clearTimeout(this.showTimer);
+            if (this.hideTimer)
+                clearTimeout(this.hideTimer);
+            this.showTimer = null;
+            this.hideTimer = null;
+            // Hide immediately on blur
+            this.hide();
+        };
+        /**
+         * Handle touch start (long-press detection)
+         */
+        this.onTriggerTouchStart = (e) => {
+            if (this.disabled || !e.touches[0])
+                return;
+            this.touchStartX = e.touches[0].clientX;
+            this.touchStartY = e.touches[0].clientY;
+            // Start long-press timer (500ms)
+            if (this.longPressTimer)
+                clearTimeout(this.longPressTimer);
+            this.longPressTimer = window.setTimeout(() => {
+                this.show();
+            }, 500);
+        };
+        /**
+         * Handle touch move (cancel long-press if movement > 10px)
+         */
+        this.onTriggerTouchMove = (e) => {
+            if (!e.touches[0] || !this.longPressTimer)
+                return;
+            const dx = Math.abs(e.touches[0].clientX - this.touchStartX);
+            const dy = Math.abs(e.touches[0].clientY - this.touchStartY);
+            if (dx > 10 || dy > 10) {
+                // Movement too large, cancel long-press
+                clearTimeout(this.longPressTimer);
+                this.longPressTimer = null;
+            }
+        };
+        /**
+         * Handle touch end (cancel long-press if not yet fired)
+         */
+        this.onTriggerTouchEnd = () => {
+            if (this.longPressTimer) {
+                clearTimeout(this.longPressTimer);
+                this.longPressTimer = null;
+            }
+        };
+        /**
+         * Handle Escape key to dismiss tooltip
+         */
+        this.onEscapeKey = (event) => {
+            if (event.key === 'Escape' && this.isVisible) {
+                event.preventDefault();
+                this.hide();
+                // Keep focus on trigger
+                const trigger = this.el.querySelector('[slot="trigger"]');
+                if (trigger) {
+                    trigger.focus();
+                }
+            }
+        };
+    }
+    /**
+     * Show tooltip programmatically
+     * @returns Promise resolves when tooltip is visible
+     */
+    async show() {
+        if (this.disabled)
+            return;
+        // Clear any pending hide timer
+        if (this.hideTimer) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+        // Set visible state
+        this.isVisible = true;
+        // Calculate position
+        this.calculatePosition();
+        // Emit show event
+        this.showTooltip.emit({ triggerEl: this.triggerEl || this.el });
+    }
+    /**
+     * Hide tooltip programmatically
+     * @returns Promise resolves when tooltip is hidden
+     */
+    async hide() {
+        // Clear any pending show timer
+        if (this.showTimer) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        // Set hidden state
+        this.isVisible = false;
+        // Emit hide event
+        this.hideTooltip.emit({ reason: 'blur' });
+    }
+    /**
+     * Recalculate tooltip position
+     * Call after trigger element moves or window resizes
+     */
+    async updatePosition() {
+        if (this.isVisible) {
+            this.calculatePosition();
+        }
+    }
+    /**
+     * Calculate tooltip position based on viewport
+     */
+    calculatePosition() {
+        var _a;
+        // Get trigger element
+        const trigger = this.el.querySelector('[slot="trigger"]');
+        if (!trigger)
+            return;
+        this.triggerEl = trigger;
+        // Get tooltip element from shadow DOM
+        const tooltip = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tooltip');
+        if (!tooltip)
+            return;
+        // Get trigger bounds
+        const triggerRect = trigger.getBoundingClientRect();
+        const tooltipRect = tooltip.getBoundingClientRect();
+        const viewport = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+        // Calculate positions
+        const positions = {
+            top: {
+                x: triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2,
+                y: triggerRect.top - tooltipRect.height - this.offset,
+            },
+            bottom: {
+                x: triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2,
+                y: triggerRect.top + triggerRect.height + this.offset,
+            },
+            left: {
+                x: triggerRect.left - tooltipRect.width - this.offset,
+                y: triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2,
+            },
+            right: {
+                x: triggerRect.left + triggerRect.width + this.offset,
+                y: triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2,
+            },
+        };
+        // Check each position for viewport fit (8px margin minimum)
+        const margin = 8;
+        for (const [sideKey, pos] of Object.entries(positions)) {
+            const fits = pos.x >= margin &&
+                pos.x + tooltipRect.width <= viewport.width - margin &&
+                pos.y >= margin &&
+                pos.y + tooltipRect.height <= viewport.height - margin;
+            if (fits) {
+                this.currentPosition = sideKey;
+                this.applyPosition(tooltip, pos);
+                this.positioned.emit({ side: this.currentPosition, offset: this.offset });
+                return;
+            }
+        }
+        // Fallback: use preferred side, clamp to viewport
+        const preferredSide = this.side === 'auto' ? 'top' : this.side;
+        const pos = positions[preferredSide] || positions.top;
+        this.currentPosition = preferredSide;
+        // Clamp to viewport
+        pos.x = Math.max(margin, Math.min(pos.x, viewport.width - tooltipRect.width - margin));
+        pos.y = Math.max(margin, Math.min(pos.y, viewport.height - tooltipRect.height - margin));
+        this.applyPosition(tooltip, pos);
+        this.positioned.emit({ side: this.currentPosition, offset: this.offset });
+    }
+    /**
+     * Apply calculated position to tooltip element
+     */
+    applyPosition(tooltip, pos) {
+        tooltip.style.position = 'fixed';
+        tooltip.style.left = `${pos.x}px`;
+        tooltip.style.top = `${pos.y}px`;
+        tooltip.style.zIndex = '1000';
+    }
+    /**
+     * Attach event listeners to trigger
+     */
+    attachTriggerListeners() {
+        const trigger = this.el.querySelector('[slot="trigger"]');
+        if (!trigger)
+            return;
+        // Mouse events
+        trigger.addEventListener('mouseenter', this.onTriggerMouseEnter);
+        trigger.addEventListener('mouseleave', this.onTriggerMouseLeave);
+        // Keyboard events (focus/blur)
+        trigger.addEventListener('focus', this.onTriggerFocus);
+        trigger.addEventListener('blur', this.onTriggerBlur);
+        // Touch events (long-press)
+        trigger.addEventListener('touchstart', this.onTriggerTouchStart);
+        trigger.addEventListener('touchmove', this.onTriggerTouchMove);
+        trigger.addEventListener('touchend', this.onTriggerTouchEnd);
+        // Escape key on document
+        document.addEventListener('keydown', this.onEscapeKey);
+        // Apply aria-describedby to trigger
+        const contentSlot = this.el.querySelector('[slot="content"]');
+        if (contentSlot) {
+            const contentId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+            contentSlot.id = contentId;
+            trigger.setAttribute('aria-describedby', contentId);
+        }
+    }
+    /**
+     * Remove event listeners from trigger
+     */
+    detachTriggerListeners() {
+        const trigger = this.el.querySelector('[slot="trigger"]');
+        if (!trigger)
+            return;
+        trigger.removeEventListener('mouseenter', this.onTriggerMouseEnter);
+        trigger.removeEventListener('mouseleave', this.onTriggerMouseLeave);
+        trigger.removeEventListener('focus', this.onTriggerFocus);
+        trigger.removeEventListener('blur', this.onTriggerBlur);
+        trigger.removeEventListener('touchstart', this.onTriggerTouchStart);
+        trigger.removeEventListener('touchmove', this.onTriggerTouchMove);
+        trigger.removeEventListener('touchend', this.onTriggerTouchEnd);
+    }
+    componentDidLoad() {
+        this.attachTriggerListeners();
+    }
+    disconnectedCallback() {
+        this.detachTriggerListeners();
+        // Clean up timers
+        if (this.showTimer)
+            clearTimeout(this.showTimer);
+        if (this.hideTimer)
+            clearTimeout(this.hideTimer);
+        if (this.longPressTimer)
+            clearTimeout(this.longPressTimer);
+    }
+    render() {
+        return (h("div", { key: '26ad92440881dc154c9fd364dd59d621eb949ba1', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: 'f08dda70ba8fb3dc936e62c3fee51ddf60cd7585', name: "content" }), h("div", { key: '14daf9b8dcd099f01c6d4fb704c9dd4bc5081dc7', class: "tooltip-arrow" })));
+    }
+    static get is() { return "seki-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0"
+                        }, {
+                            "name": "min",
+                            "text": "0"
+                        }, {
+                            "name": "max",
+                            "text": "2000"
+                        }],
+                    "text": "Milliseconds to delay before showing tooltip on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delay",
+                "defaultValue": "0"
+            },
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipSide",
+                    "resolved": "\"auto\" | \"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "TooltipSide": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
+                            "id": "src/components/tooltip/seki-tooltip.tsx::TooltipSide"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'auto'"
+                        }],
+                    "text": "Preferred positioning side for tooltip\n'auto' uses intelligent repositioning based on viewport space"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side",
+                "defaultValue": "'auto'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Disable tooltip interactions and visibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "8"
+                        }, {
+                            "name": "min",
+                            "text": "0"
+                        }],
+                    "text": "Pixels between tooltip and trigger element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset",
+                "defaultValue": "8"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {},
+            "currentPosition": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "showTooltip",
+                "name": "showTooltip",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when tooltip becomes visible"
+                },
+                "complexType": {
+                    "original": "TooltipShowDetail",
+                    "resolved": "TooltipShowDetail",
+                    "references": {
+                        "TooltipShowDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
+                            "id": "src/components/tooltip/seki-tooltip.tsx::TooltipShowDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "hideTooltip",
+                "name": "hideTooltip",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when tooltip becomes hidden"
+                },
+                "complexType": {
+                    "original": "TooltipHideDetail",
+                    "resolved": "TooltipHideDetail",
+                    "references": {
+                        "TooltipHideDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
+                            "id": "src/components/tooltip/seki-tooltip.tsx::TooltipHideDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "positioned",
+                "name": "positioned",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted after tooltip position is calculated"
+                },
+                "complexType": {
+                    "original": "TooltipPositionedDetail",
+                    "resolved": "TooltipPositionedDetail",
+                    "references": {
+                        "TooltipPositionedDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
+                            "id": "src/components/tooltip/seki-tooltip.tsx::TooltipPositionedDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show tooltip programmatically",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise resolves when tooltip is visible"
+                        }]
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hide tooltip programmatically",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise resolves when tooltip is hidden"
+                        }]
+                }
+            },
+            "updatePosition": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Recalculate tooltip position\nCall after trigger element moves or window resizes",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/components/index.js

@@ -81,7 +81,7 @@ const SekiSwitch = /*@__PURE__*/ proxyCustomElement(class SekiSwitch extends H {
     render() {
         const isChecked = this.isChecked;
         const dataState = isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: 'af5412cee9d097e57d8e626522619913b7459e4b', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: 'a2c15a3f6b33b4e98e215d82c14cba9dd47bd951', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: '51fb815c2710b8fd5ac12bdc90b09c44a3bf9b24', class: "thumb", part: "thumb" })), this.name && (h("input", { key: '37f059d43e01b82c9fc3e6f1f1df5c894e8a6102', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
+        return (h(Host, { key: '3046a6647d7cfd10bf9789aa9cf3b7a88b9a3a10', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: 'cd8423b9f7295e5e3ef9d7e64ead3fe6502386a2', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: '618ab67d5fab80323f64ec0b1b342561be2585b0', class: "thumb", part: "thumb" })), this.name && (h("input", { key: 'd51e9108038b8796175082231ca3ce7e61106f31', 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 style() { return sekiSwitchCss; }
 }, [257, "seki-switch", {

package/dist/components/seki-button.js

@@ -35,7 +35,7 @@ const SekiButton$1 = /*@__PURE__*/ proxyCustomElement(class SekiButton extends H
         }
     }
     render() {
-        return (h("button", { key: '3cc4cf0af6075fbe012388fa5adb953b64a2b1ca', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.ariaLabel }, h("slot", { key: '7c90c49539e6721b6580a07c3f97e20148734b05' })));
+        return (h("button", { key: '17841111481259910cd72cdcb861872918c86452', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.ariaLabel }, h("slot", { key: '1a4dfb3cb9eb88af7065cd765c0056a93c94ecc1' })));
     }
     static get style() { return sekiButtonCss; }
 }, [257, "seki-button", {

package/dist/components/seki-field-description.js

@@ -37,7 +37,7 @@ const SekiFieldDescription$1 = /*@__PURE__*/ proxyCustomElement(class SekiFieldD
         return this.componentId;
     }
     render() {
-        return (h("div", { key: '8dd37eb65e7c8c7608b070762681bb8586c53c9e', id: this.componentId, class: "description" }, h("slot", { key: '508d77bad3bf08741dc4c4e6e0f6167d7bf11688' })));
+        return (h("div", { key: '944a6268efe02b6b69725daf7503a9bcf8482f94', id: this.componentId, class: "description" }, h("slot", { key: '900d5afcf9662fe2e8f32acf55b21823389dbb59' })));
     }
     static get style() { return sekiFieldDescriptionCss; }
 }, [257, "seki-field-description", {

package/dist/components/seki-field-error.js

@@ -57,7 +57,7 @@ const SekiFieldError$1 = /*@__PURE__*/ proxyCustomElement(class SekiFieldError e
     }
     render() {
         const style = this.visible ? {} : { display: 'none' };
-        return (h("div", { key: 'aa140f9212c3f47d50113f77af0c33cf106177ed', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '6fcdf53d218e817fa12792fadb3a946229b2dcf3' })));
+        return (h("div", { key: '23898d8cdf6e79e0710776895ac8a36c06262524', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '7c40a36d065602eb635180ed0805bca9216c5015' })));
     }
     static get watchers() { return {
         "visible": ["handleVisibleChange"]

package/dist/components/seki-field-group.js

@@ -19,7 +19,7 @@ const SekiFieldGroup$1 = /*@__PURE__*/ proxyCustomElement(class SekiFieldGroup e
         const style = {
             '--seki-field-group-gap': this.gap,
         };
-        return (h("div", { key: '479c3e657ce82b3ab5243b10ef5cccd26e17478b', class: "field-group", style: style }, h("slot", { key: '15d665a73e3d2d2eca773bdb216b4276feaf2071' })));
+        return (h("div", { key: '32e2881723467de4e83135f38f339bd1334ea19f', class: "field-group", style: style }, h("slot", { key: '3909c9108222772376d916718003600d9d84f10f' })));
     }
     static get style() { return sekiFieldGroupCss; }
 }, [257, "seki-field-group", {

package/dist/components/seki-field-label.js

@@ -17,7 +17,7 @@ const SekiFieldLabel$1 = /*@__PURE__*/ proxyCustomElement(class SekiFieldLabel e
     }
     render() {
         const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
-        return (h("label", Object.assign({ key: 'f9f2b492f80fe46110f4f8766c88a1aec53342be' }, labelProps), h("slot", { key: '35564e4ea62df56807c7d2a90a4f9e66a7c09c4c' }), this.required && h("span", { key: '8f6f7a454790995b9d968fb1e0078fb9951fcba6', class: "required-indicator" }, " *")));
+        return (h("label", Object.assign({ key: 'c57011f8722920f073fc05ae3b260e581689c43e' }, labelProps), h("slot", { key: '6e807e411376526b20cf66d694766ce11065b734' }), this.required && h("span", { key: '53d676c377fa93c6d41c50856b4db598cf3c2c15', class: "required-indicator" }, " *")));
     }
     static get style() { return sekiFieldLabelCss; }
 }, [257, "seki-field-label", {

package/dist/components/seki-field-legend.js

@@ -11,7 +11,7 @@ const SekiFieldLegend$1 = /*@__PURE__*/ proxyCustomElement(class SekiFieldLegend
         this.__attachShadow();
     }
     render() {
-        return (h("legend", { key: '34aa222c29443bbded4ba43c8592212e5328fb52' }, h("slot", { key: '59fddfd2160e0c3a512dc92f38465ed015b860ca' })));
+        return (h("legend", { key: 'adcc0cb95335522fc66dc791a3cc063d2493c36b' }, h("slot", { key: '90a382f1eac9b23133f8daf927a2163491f09c38' })));
     }
     static get style() { return sekiFieldLegendCss; }
 }, [257, "seki-field-legend"]);