@sekiui/elements 0.0.65 → 0.0.69

package/dist/collection/components/hover-card/seki-hover-card.js

@@ -0,0 +1,440 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Hover Card Container Component
+ *
+ * A hover-triggered card component for previewing content (e.g., user profiles, link previews).
+ * Shows a floating card with rich content when hovering over a trigger element.
+ *
+ * This container manages state and timing, providing context to child components
+ * (seki-hover-card-trigger and seki-hover-card-content).
+ *
+ * @slot - Default slot for trigger and content components
+ *
+ * @example
+ * ```html
+ * <seki-hover-card open-delay="100" close-delay="200">
+ *   <seki-hover-card-trigger>
+ *     <a href="/user/john">@john</a>
+ *   </seki-hover-card-trigger>
+ *   <seki-hover-card-content side="top">
+ *     <div class="user-preview">
+ *       <img src="avatar.jpg" alt="John's avatar" />
+ *       <h4>John Doe</h4>
+ *       <p>Software Engineer at Acme Inc.</p>
+ *     </div>
+ *   </seki-hover-card-content>
+ * </seki-hover-card>
+ * ```
+ */
+export class SekiHoverCard {
+    constructor() {
+        /**
+         * Milliseconds to delay before opening the hover card
+         * @default 200
+         */
+        this.openDelay = 200;
+        /**
+         * Milliseconds to delay before closing the hover card
+         * @default 300
+         */
+        this.closeDelay = 300;
+        /**
+         * Preferred side for hover card content placement
+         * @default 'bottom'
+         */
+        this.side = 'bottom';
+        /**
+         * Alignment along the side axis
+         * @default 'center'
+         */
+        this.align = 'center';
+        /**
+         * Disable hover card interactions
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Internal open state
+         */
+        this._isOpen = false;
+        // Timer references for cleanup
+        this.openTimer = null;
+        this.closeTimer = null;
+        // Bound scroll handler reference for cleanup
+        this.scrollHandler = null;
+        /**
+         * Request to open the hover card after openDelay
+         * Cancels any pending close timer
+         */
+        this.requestOpen = () => {
+            if (this.disabled)
+                return;
+            // Cancel any pending close
+            this.cancelClose();
+            // Start open timer
+            if (this.openTimer === null) {
+                this.openTimer = window.setTimeout(() => {
+                    this.openTimer = null;
+                    this.setOpen(true);
+                }, this.openDelay);
+            }
+        };
+        /**
+         * Request to close the hover card after closeDelay
+         * Cancels any pending open timer
+         */
+        this.requestClose = () => {
+            // Cancel any pending open
+            this.cancelOpen();
+            // Start close timer
+            if (this.closeTimer === null) {
+                this.closeTimer = window.setTimeout(() => {
+                    this.closeTimer = null;
+                    this.setOpen(false);
+                }, this.closeDelay);
+            }
+        };
+        /**
+         * Cancel any pending open timer
+         */
+        this.cancelOpen = () => {
+            if (this.openTimer !== null) {
+                clearTimeout(this.openTimer);
+                this.openTimer = null;
+            }
+        };
+        /**
+         * Cancel any pending close timer
+         */
+        this.cancelClose = () => {
+            if (this.closeTimer !== null) {
+                clearTimeout(this.closeTimer);
+                this.closeTimer = null;
+            }
+        };
+    }
+    disabledChanged(newValue) {
+        if (newValue && this._isOpen) {
+            this.setOpen(false);
+        }
+    }
+    /**
+     * Set the open state and emit change event
+     */
+    setOpen(open) {
+        if (this._isOpen === open)
+            return;
+        this._isOpen = open;
+        this.sekiOpenChange.emit({ open });
+        this.updateContext();
+        if (open) {
+            this.setupScrollListener();
+        }
+        else {
+            this.removeScrollListener();
+        }
+    }
+    /**
+     * Close the hover card immediately and focus the trigger
+     */
+    closeAndFocusTrigger() {
+        this.cancelOpen();
+        this.cancelClose();
+        this.setOpen(false);
+        // Focus the trigger element
+        const trigger = this.el.querySelector('seki-hover-card-trigger');
+        if (trigger) {
+            const focusable = trigger.querySelector('a, button, [tabindex]');
+            if (focusable) {
+                focusable.focus();
+            }
+        }
+    }
+    /**
+     * Setup scroll listener to close on scroll
+     */
+    setupScrollListener() {
+        this.scrollHandler = () => {
+            this.cancelOpen();
+            this.cancelClose();
+            this.setOpen(false);
+        };
+        // Listen on window for scroll events (capture phase to catch all scrolls)
+        window.addEventListener('scroll', this.scrollHandler, { capture: true, passive: true });
+    }
+    /**
+     * Remove scroll listener
+     */
+    removeScrollListener() {
+        if (this.scrollHandler) {
+            window.removeEventListener('scroll', this.scrollHandler, { capture: true });
+            this.scrollHandler = null;
+        }
+    }
+    /**
+     * Get the context object for child components
+     */
+    getContext() {
+        return {
+            isOpen: this._isOpen,
+            openDelay: this.openDelay,
+            closeDelay: this.closeDelay,
+            disabled: this.disabled,
+            side: this.side,
+            align: this.align,
+            requestOpen: this.requestOpen,
+            requestClose: this.requestClose,
+            cancelOpen: this.cancelOpen,
+            cancelClose: this.cancelClose,
+        };
+    }
+    /**
+     * Update the context on the element for child components to access
+     */
+    updateContext() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.el._hoverCardContext = this.getContext();
+    }
+    // Listen for custom events from child components
+    handleRequestOpen() {
+        this.requestOpen();
+    }
+    handleRequestClose() {
+        this.requestClose();
+    }
+    handleCancelOpen() {
+        this.cancelOpen();
+    }
+    handleCancelClose() {
+        this.cancelClose();
+    }
+    // Listen for Escape key to close the hover card
+    handleKeyDown(event) {
+        if (this._isOpen && event.key === 'Escape') {
+            event.preventDefault();
+            this.closeAndFocusTrigger();
+        }
+    }
+    componentDidLoad() {
+        this.updateContext();
+    }
+    componentDidUpdate() {
+        this.updateContext();
+    }
+    disconnectedCallback() {
+        // Clean up timers
+        this.cancelOpen();
+        this.cancelClose();
+        // Clean up scroll listener
+        this.removeScrollListener();
+    }
+    render() {
+        return (h(Host, { key: '138ea86b32a01185c6c686b52e9ce8abd3a6a93a', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'c400d20d6b9a96208f736f23773a562f5d40b929', class: "hover-card" }, h("slot", { key: '7b15d924ab5fde073ca090d94eae1173119e48bc' }))));
+    }
+    static get is() { return "seki-hover-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-hover-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-hover-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "openDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "200"
+                        }],
+                    "text": "Milliseconds to delay before opening the hover card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-delay",
+                "defaultValue": "200"
+            },
+            "closeDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "300"
+                        }],
+                    "text": "Milliseconds to delay before closing the hover card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-delay",
+                "defaultValue": "300"
+            },
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HoverCardSide",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "HoverCardSide": {
+                            "location": "local",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/hover-card/seki-hover-card.tsx",
+                            "id": "src/components/hover-card/seki-hover-card.tsx::HoverCardSide"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom'"
+                        }],
+                    "text": "Preferred side for hover card content placement"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side",
+                "defaultValue": "'bottom'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HoverCardAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "HoverCardAlign": {
+                            "location": "local",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/hover-card/seki-hover-card.tsx",
+                            "id": "src/components/hover-card/seki-hover-card.tsx::HoverCardAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'center'"
+                        }],
+                    "text": "Alignment along the side axis"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'center'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Disable hover card interactions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiOpenChange",
+                "name": "sekiOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when open state changes"
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "sekiHoverCardRequestOpen",
+                "method": "handleRequestOpen",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "sekiHoverCardRequestClose",
+                "method": "handleRequestClose",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "sekiHoverCardCancelOpen",
+                "method": "handleCancelOpen",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "sekiHoverCardCancelClose",
+                "method": "handleCancelClose",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/input/seki-input.css

@@ -845,6 +845,33 @@
   text-decoration: underline;
 }
 
+/* =============================================================================
+   INPUT GROUP SUPPORT
+   These styles apply when the input is inside a seki-input-group
+   ============================================================================= */
+
+/* First position - remove right border-radius */
+:host([data-group-first]) .input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Middle position - remove all border-radius */
+:host([data-group-middle]) .input {
+  border-radius: 0;
+}
+
+/* Last position - remove left border-radius */
+:host([data-group-last]) .input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* Single element in group - keep all corners rounded */
+:host([data-group-only]) .input {
+  border-radius: var(--seki-input-radius);
+}
+
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .input {

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

@@ -75,7 +75,7 @@ export class SekiInput {
         }
     }
     render() {
-        return (h("input", { key: '80caadaa760fdfbf8dd2310b257d72ff29872aa2', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("input", { key: 'e28567bd8b2b15ab47e8654eedac0b2ce97c9bfa', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-input"; }
     static get encapsulation() { return "shadow"; }