@sekiui/elements 0.0.61 → 0.0.64

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

@@ -0,0 +1,426 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Popover component - floating content triggered by click
+ *
+ * @slot - Popover trigger and content
+ *
+ * @part popover - The main container
+ */
+export class SekiPopover {
+    constructor() {
+        /**
+         * Controlled open state
+         */
+        this.open = false;
+        /**
+         * Default open state
+         */
+        this.defaultOpen = false;
+        /**
+         * Preferred side for popover placement
+         */
+        this.side = 'bottom';
+        /**
+         * Alignment along the side
+         */
+        this.align = 'center';
+        /**
+         * Offset from the trigger element
+         */
+        this.sideOffset = 4;
+        /**
+         * Whether to close on outside click
+         */
+        this.closeOnOutsideClick = true;
+        /**
+         * Whether to close on escape key
+         */
+        this.closeOnEscape = true;
+        /**
+         * Internal open state
+         */
+        this._isOpen = false;
+    }
+    componentWillLoad() {
+        this._isOpen = this.open || this.defaultOpen;
+    }
+    openChanged(newValue) {
+        this._isOpen = newValue;
+        if (this._isOpen) {
+            this.setupClickOutside();
+        }
+        else {
+            this.removeClickOutside();
+        }
+    }
+    /**
+     * Open the popover
+     */
+    async openPopover() {
+        if (this._isOpen)
+            return;
+        this._isOpen = true;
+        this.open = true;
+        this.sekiOpenChange.emit(true);
+        this.setupClickOutside();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.el._popoverContext = this.getContext();
+    }
+    /**
+     * Close the popover
+     */
+    async closePopover() {
+        if (!this._isOpen)
+            return;
+        this._isOpen = false;
+        this.open = false;
+        this.sekiOpenChange.emit(false);
+        this.removeClickOutside();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.el._popoverContext = this.getContext();
+    }
+    /**
+     * Toggle the popover
+     */
+    async togglePopover() {
+        if (this._isOpen) {
+            await this.closePopover();
+        }
+        else {
+            await this.openPopover();
+        }
+    }
+    handleTriggerClick() {
+        this.togglePopover();
+    }
+    handleCloseRequest() {
+        this.closePopover();
+    }
+    handleKeyDown(event) {
+        if (this._isOpen && event.key === 'Escape' && this.closeOnEscape) {
+            event.preventDefault();
+            this.closePopover();
+        }
+    }
+    setupClickOutside() {
+        if (!this.closeOnOutsideClick)
+            return;
+        // Use setTimeout to avoid immediate close from the same click that opened it
+        setTimeout(() => {
+            this.clickOutsideHandler = (e) => {
+                const path = e.composedPath();
+                if (!path.includes(this.el)) {
+                    this.closePopover();
+                }
+            };
+            document.addEventListener('click', this.clickOutsideHandler, { capture: true });
+        }, 0);
+    }
+    removeClickOutside() {
+        if (this.clickOutsideHandler) {
+            document.removeEventListener('click', this.clickOutsideHandler, { capture: true });
+            this.clickOutsideHandler = undefined;
+        }
+    }
+    getContext() {
+        return {
+            isOpen: this._isOpen,
+            side: this.side,
+            align: this.align,
+            open: () => this.openPopover(),
+            close: () => this.closePopover(),
+            toggle: () => this.togglePopover(),
+        };
+    }
+    componentDidLoad() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.el._popoverContext = this.getContext();
+        if (this._isOpen) {
+            this.setupClickOutside();
+        }
+    }
+    componentDidUpdate() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.el._popoverContext = this.getContext();
+    }
+    disconnectedCallback() {
+        this.removeClickOutside();
+    }
+    render() {
+        return (h(Host, { key: 'cef5d98f8e1fb7ba9e12c480d94b30ef0dfbc9d4', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '64022373efb5c3835d3a6a2d58b5c8f7b5faba78', part: "popover", class: "popover" }, h("slot", { key: 'ada45ba79cb523fad6bbdf077b7f840ae4a37207' }))));
+    }
+    static get is() { return "seki-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled open state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default open state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
+            },
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverSide",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "PopoverSide": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/popover/seki-popover.tsx",
+                            "id": "src/components/popover/seki-popover.tsx::PopoverSide"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preferred side for popover placement"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side",
+                "defaultValue": "'bottom'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "PopoverAlign": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/popover/seki-popover.tsx",
+                            "id": "src/components/popover/seki-popover.tsx::PopoverAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alignment along the side"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'center'"
+            },
+            "sideOffset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offset from the trigger element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side-offset",
+                "defaultValue": "4"
+            },
+            "closeOnOutsideClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to close on outside click"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-outside-click",
+                "defaultValue": "true"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to close on escape key"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
+            }
+        };
+    }
+    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": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openPopover": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open the popover",
+                    "tags": []
+                }
+            },
+            "closePopover": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the popover",
+                    "tags": []
+                }
+            },
+            "togglePopover": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle the popover",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "sekiPopoverTriggerClick",
+                "method": "handleTriggerClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "sekiPopoverClose",
+                "method": "handleCloseRequest",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,88 @@
+/* Progress Component Styles with Design Tokens
+ * Displays completion progress with determinate and indeterminate states
+ */
+
+:host {
+  /* Layout tokens */
+  --seki-progress-height: 0.5rem;
+  --seki-progress-border-radius: var(--seki-radius-full, 9999px);
+
+  /* Color tokens */
+  --seki-progress-bg: var(--color-surface-secondary, #e5e7eb);
+  --seki-progress-indicator-bg: var(--color-primary, #2563eb);
+
+  /* Animation tokens */
+  --seki-progress-transition-duration: 300ms;
+  --seki-progress-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  display: block;
+  width: 100%;
+}
+
+/* Dark mode support */
+:host([data-theme='dark']) {
+  --seki-progress-bg: var(--color-surface-secondary-dark, #374151);
+  --seki-progress-indicator-bg: var(--color-primary-dark, #3b82f6);
+}
+
+/* Base progress bar styles */
+.seki-progress {
+  position: relative;
+  width: 100%;
+  height: var(--seki-progress-height);
+  overflow: hidden;
+  border-radius: var(--seki-progress-border-radius);
+  background-color: var(--seki-progress-bg);
+}
+
+/* Progress indicator */
+.seki-progress__indicator {
+  height: 100%;
+  width: 100%;
+  border-radius: var(--seki-progress-border-radius);
+  background-color: var(--seki-progress-indicator-bg);
+  transition: transform var(--seki-progress-transition-duration) var(--seki-progress-transition-timing);
+}
+
+/* Indeterminate animation */
+.seki-progress__indicator--indeterminate {
+  width: 50%;
+  animation: seki-progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes seki-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+/* State-based styling */
+.seki-progress[data-state='complete'] .seki-progress__indicator {
+  background-color: var(--seki-progress-indicator-bg);
+}
+
+/* Accessibility: High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-progress {
+    border: 2px solid var(--seki-progress-indicator-bg);
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-progress__indicator {
+    transition: none;
+  }
+
+  .seki-progress__indicator--indeterminate {
+    animation: none;
+    width: 100%;
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,162 @@
+import { h } from "@stencil/core";
+/**
+ * Progress component for displaying completion progress of a task.
+ * Supports determinate and indeterminate states with smooth animations.
+ *
+ * @example
+ * <seki-progress value="33"></seki-progress>
+ *
+ * @example
+ * <seki-progress value="66" max="100"></seki-progress>
+ *
+ * @example
+ * <!-- Indeterminate state -->
+ * <seki-progress></seki-progress>
+ */
+export class SekiProgress {
+    constructor() {
+        /**
+         * Maximum progress value.
+         * @default 100
+         */
+        this.max = 100;
+    }
+    componentWillLoad() {
+        this.validateProps();
+    }
+    validateProps() {
+        if (this.value !== null && this.value !== undefined) {
+            if (this.value < 0) {
+                console.warn('Progress value should not be less than 0');
+            }
+            if (this.value > this.max) {
+                console.warn(`Progress value should not exceed max (${this.max})`);
+            }
+        }
+        if (this.max <= 0) {
+            console.warn('Progress max should be greater than 0');
+        }
+    }
+    getState() {
+        if (this.value === null || this.value === undefined) {
+            return 'indeterminate';
+        }
+        if (this.value >= this.max) {
+            return 'complete';
+        }
+        return 'loading';
+    }
+    getPercentage() {
+        if (this.value === null || this.value === undefined) {
+            return 0;
+        }
+        const clampedValue = Math.min(Math.max(this.value, 0), this.max);
+        return (clampedValue / this.max) * 100;
+    }
+    getValueLabel() {
+        if (this.ariaLabel) {
+            return this.ariaLabel;
+        }
+        if (this.value === null || this.value === undefined) {
+            return 'Loading...';
+        }
+        return `${Math.round(this.getPercentage())}%`;
+    }
+    render() {
+        const state = this.getState();
+        const percentage = this.getPercentage();
+        const isIndeterminate = state === 'indeterminate';
+        return (h("div", { key: '96eccc43ef9afaa2cfe9cccdb8080f0fb2967717', class: "seki-progress", role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuetext": this.getValueLabel(), "aria-label": this.ariaLabel, "data-state": state, "data-value": this.value, "data-max": this.max }, h("div", { key: '764f8720a5b1c90ad08c56e0b2af74eb3a804116', class: {
+                'seki-progress__indicator': true,
+                'seki-progress__indicator--indeterminate': isIndeterminate,
+            }, "data-state": state, "data-value": this.value, "data-max": this.max, style: {
+                transform: isIndeterminate ? undefined : `translateX(-${100 - percentage}%)`,
+            } })));
+    }
+    static get is() { return "seki-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-progress.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current progress value (0 to max).\nWhen null or undefined, displays indeterminate state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "100"
+                        }],
+                    "text": "Maximum progress value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom aria-label for accessibility.\nIf not provided, uses percentage value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "validateProps"
+            }, {
+                "propName": "max",
+                "methodName": "validateProps"
+            }];
+    }
+}