@sekiui/elements 0.0.61 → 0.0.64

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

@@ -0,0 +1,271 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Accordion root component that manages expanded state of items
+ *
+ * @slot - Accordion items
+ *
+ * @part accordion - The main container
+ */
+export class SekiAccordion {
+    constructor() {
+        /**
+         * Accordion type - single allows only one item open, multiple allows many
+         */
+        this.type = 'single';
+        /**
+         * Whether all items can be closed in single mode
+         */
+        this.collapsible = false;
+        /**
+         * Disable all accordion items
+         */
+        this.disabled = false;
+        /**
+         * Internal state for open items
+         */
+        this._openItems = [];
+    }
+    componentWillLoad() {
+        var _a;
+        // Initialize from value or defaultValue
+        const initialValue = (_a = this.value) !== null && _a !== void 0 ? _a : this.defaultValue;
+        if (initialValue) {
+            this._openItems = Array.isArray(initialValue) ? [...initialValue] : [initialValue];
+        }
+    }
+    valueChanged(newValue) {
+        if (newValue !== undefined) {
+            this._openItems = Array.isArray(newValue) ? [...newValue] : [newValue];
+        }
+    }
+    /**
+     * Toggle an item's open state
+     */
+    async toggleItem(itemValue) {
+        if (this.disabled)
+            return;
+        const isCurrentlyOpen = this._openItems.includes(itemValue);
+        if (this.type === 'single') {
+            if (isCurrentlyOpen) {
+                // Only close if collapsible
+                if (this.collapsible) {
+                    this._openItems = [];
+                    this.value = undefined;
+                    this.sekiValueChange.emit('');
+                }
+            }
+            else {
+                this._openItems = [itemValue];
+                this.value = itemValue;
+                this.sekiValueChange.emit(itemValue);
+            }
+        }
+        else {
+            // Multiple mode
+            if (isCurrentlyOpen) {
+                this._openItems = this._openItems.filter(v => v !== itemValue);
+            }
+            else {
+                this._openItems = [...this._openItems, itemValue];
+            }
+            this.value = [...this._openItems];
+            this.sekiValueChange.emit([...this._openItems]);
+        }
+        // Update context for child components
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.el._accordionContext = this.getContext();
+    }
+    isItemOpen(itemValue) {
+        return this._openItems.includes(itemValue);
+    }
+    getContext() {
+        return {
+            type: this.type,
+            value: this._openItems,
+            disabled: this.disabled,
+            collapsible: this.collapsible,
+            toggleItem: (itemValue) => this.toggleItem(itemValue),
+            isItemOpen: (itemValue) => this.isItemOpen(itemValue),
+        };
+    }
+    componentDidLoad() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.el._accordionContext = this.getContext();
+    }
+    componentDidUpdate() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.el._accordionContext = this.getContext();
+    }
+    render() {
+        return (h(Host, { key: 'ac021f2d11c4e4d5e4a3be5ae8523162ab242b5b', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: '6e00d2ceca10034a8a6f7bf07a773832151fb875', part: "accordion", class: "accordion" }, h("slot", { key: '3cf23aec93663359c2ffa4061fa34c1ed9c1ed92' }))));
+    }
+    static get is() { return "seki-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'single' | 'multiple'",
+                    "resolved": "\"multiple\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accordion type - single allows only one item open, multiple allows many"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'single'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled value - which items are open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Default value for uncontrolled usage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether all items can be closed in single mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsible",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable all accordion items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_openItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiValueChange",
+                "name": "sekiValueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when value changes"
+                },
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleItem": {
+                "complexType": {
+                    "signature": "(itemValue: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemValue",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle an item's open state",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,54 @@
+import { h } from "@stencil/core";
+/**
+ * Description text within an alert component.
+ * Renders supporting text with appropriate typography styles.
+ *
+ * @example
+ * <seki-alert>
+ *   <seki-alert-title>Heads up!</seki-alert-title>
+ *   <seki-alert-description>
+ *     You can add components to your app using the CLI.
+ *   </seki-alert-description>
+ * </seki-alert>
+ */
+export class SekiAlertDescription {
+    render() {
+        const descClass = `alert-description ${this.class || ''}`.trim();
+        return (h("div", { key: '1e9f5151f85a30137e50a83da1508b7aeb40baf4', class: descClass }, h("slot", { key: 'ef86b165c7c05082bcb2dcd022c4108e8b549752' })));
+    }
+    static get is() { return "seki-alert-description"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional CSS class for custom styling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class"
+            }
+        };
+    }
+}

package/dist/collection/components/alert/seki-alert-title.js

@@ -0,0 +1,51 @@
+import { h } from "@stencil/core";
+/**
+ * Title text within an alert component.
+ * Renders as a heading with appropriate typography styles.
+ *
+ * @example
+ * <seki-alert>
+ *   <seki-alert-title>Heads up!</seki-alert-title>
+ * </seki-alert>
+ */
+export class SekiAlertTitle {
+    render() {
+        const titleClass = `alert-title ${this.class || ''}`.trim();
+        return (h("h5", { key: '3e8015294e45c372adeddc054e74f4f07ae61885', class: titleClass }, h("slot", { key: '6516819bbcb1e045b6b5e08f178348de644b9f18' })));
+    }
+    static get is() { return "seki-alert-title"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional CSS class for custom styling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,159 @@
+/* Alert Component Styles with Design Tokens
+ * Contextual feedback messages with icon, title, and description support
+ */
+
+:host {
+  /* Layout tokens */
+  --seki-alert-padding: 1rem;
+  --seki-alert-gap: 0.75rem;
+  --seki-alert-border-radius: var(--seki-radius-lg, 0.5rem);
+  --seki-alert-border-width: 1px;
+
+  /* Default variant */
+  --seki-alert-default-bg: var(--color-background, #ffffff);
+  --seki-alert-default-border: var(--color-border, #e5e7eb);
+  --seki-alert-default-text: var(--color-foreground, #0f172a);
+  --seki-alert-default-icon: var(--color-foreground, #0f172a);
+
+  /* Destructive variant */
+  --seki-alert-destructive-bg: var(--color-destructive-bg, #fef2f2);
+  --seki-alert-destructive-border: var(--color-destructive, #ef4444);
+  --seki-alert-destructive-text: var(--color-destructive, #dc2626);
+  --seki-alert-destructive-icon: var(--color-destructive, #dc2626);
+
+  /* Typography tokens from system */
+  --seki-alert-title-font-size: var(--seki-font-size-base, 1rem);
+  --seki-alert-title-font-weight: var(--seki-font-weight-medium, 500);
+  --seki-alert-title-line-height: var(--seki-line-height-tight, 1.25);
+  --seki-alert-title-letter-spacing: -0.025em;
+
+  --seki-alert-desc-font-size: var(--seki-font-size-sm, 0.875rem);
+  --seki-alert-desc-font-weight: var(--seki-font-weight-normal, 400);
+  --seki-alert-desc-line-height: var(--seki-line-height-normal, 1.5);
+
+  --seki-alert-font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+
+  /* Icon tokens */
+  --seki-alert-icon-size: 1rem;
+
+  display: block;
+}
+
+/* Dark mode support */
+:host([data-theme='dark']) {
+  --seki-alert-default-bg: var(--color-background-dark, #1f2937);
+  --seki-alert-default-border: var(--color-border-dark, #374151);
+  --seki-alert-default-text: var(--color-foreground-dark, #f9fafb);
+  --seki-alert-default-icon: var(--color-foreground-dark, #f9fafb);
+
+  --seki-alert-destructive-bg: rgba(239, 68, 68, 0.1);
+  --seki-alert-destructive-border: var(--color-destructive-dark, #f87171);
+  --seki-alert-destructive-text: var(--color-destructive-dark, #f87171);
+  --seki-alert-destructive-icon: var(--color-destructive-dark, #f87171);
+}
+
+/* Base alert styles */
+.seki-alert {
+  position: relative;
+  display: flex;
+  width: 100%;
+  padding: var(--seki-alert-padding);
+  border-radius: var(--seki-alert-border-radius);
+  border: var(--seki-alert-border-width) solid;
+  font-family: var(--seki-alert-font-family);
+  box-sizing: border-box;
+}
+
+/* Default variant */
+.seki-alert--default {
+  background-color: var(--seki-alert-default-bg);
+  border-color: var(--seki-alert-default-border);
+  color: var(--seki-alert-default-text);
+}
+
+.seki-alert--default .seki-alert__icon {
+  color: var(--seki-alert-default-icon);
+}
+
+/* Destructive variant */
+.seki-alert--destructive {
+  background-color: var(--seki-alert-destructive-bg);
+  border-color: var(--seki-alert-destructive-border);
+  color: var(--seki-alert-destructive-text);
+}
+
+.seki-alert--destructive .seki-alert__icon {
+  color: var(--seki-alert-destructive-icon);
+}
+
+/* Icon styles */
+.seki-alert__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: var(--seki-alert-icon-size);
+  height: var(--seki-alert-icon-size);
+  margin-right: var(--seki-alert-gap);
+  margin-top: 0.125rem; /* Align with first line of text */
+}
+
+.seki-alert__icon ::slotted(*) {
+  width: 100%;
+  height: 100%;
+}
+
+/* Content wrapper */
+.seki-alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Accessibility: High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-alert {
+    border-width: 2px;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-alert {
+    transition: none;
+  }
+}
+
+/* ========================
+   Alert Title Styles
+   ======================== */
+.alert-title {
+  margin: 0;
+  font-family: var(--seki-alert-font-family);
+  font-size: var(--seki-alert-title-font-size);
+  font-weight: var(--seki-alert-title-font-weight);
+  line-height: var(--seki-alert-title-line-height);
+  letter-spacing: var(--seki-alert-title-letter-spacing);
+}
+
+/* When title has a sibling description, add spacing */
+.alert-title + .alert-description,
+.alert-title:has(+ .alert-description) {
+  margin-bottom: 0.25rem;
+}
+
+/* ========================
+   Alert Description Styles
+   ======================== */
+.alert-description {
+  margin: 0;
+  font-family: var(--seki-alert-font-family);
+  font-size: var(--seki-alert-desc-font-size);
+  font-weight: var(--seki-alert-desc-font-weight);
+  line-height: var(--seki-alert-desc-line-height);
+  opacity: 0.9;
+}
+
+/* First description after title needs top margin */
+.alert-title + .alert-description {
+  margin-top: 0.25rem;
+}

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

@@ -0,0 +1,97 @@
+import { h } from "@stencil/core";
+/**
+ * Alert component for displaying contextual feedback messages.
+ * Supports icons, titles, and descriptions with multiple visual variants.
+ *
+ * @example
+ * <seki-alert>
+ *   <seki-alert-title>Heads up!</seki-alert-title>
+ *   <seki-alert-description>You can add components using the CLI.</seki-alert-description>
+ * </seki-alert>
+ *
+ * @example
+ * <seki-alert variant="destructive">
+ *   <svg slot="icon">...</svg>
+ *   <seki-alert-title>Error</seki-alert-title>
+ *   <seki-alert-description>Your session has expired.</seki-alert-description>
+ * </seki-alert>
+ */
+export class SekiAlert {
+    constructor() {
+        /**
+         * Visual variant of the alert
+         * @default 'default'
+         */
+        this.variant = 'default';
+    }
+    componentWillLoad() {
+        const validVariants = ['default', 'destructive'];
+        if (this.variant && !validVariants.includes(this.variant)) {
+            console.warn(`Invalid variant "${this.variant}". Must be one of: ${validVariants.join(', ')}`);
+            this.variant = 'default';
+        }
+    }
+    render() {
+        const hasIcon = this.hasSlot('icon');
+        const alertClasses = {
+            'seki-alert': true,
+            [`seki-alert--${this.variant}`]: !!this.variant,
+            'seki-alert--has-icon': hasIcon,
+        };
+        const classString = Object.entries(alertClasses)
+            .filter(([, active]) => active)
+            .map(([name]) => name)
+            .join(' ');
+        return (h("div", { key: '6e4bb29a618fbabfab42aadd2a92c7f2d92c7a5b', class: classString, role: "alert" }, hasIcon && (h("span", { key: '0db676887f66efd8c0ddce4e5ab1ff9aaac73582', class: "seki-alert__icon" }, h("slot", { key: '0e30b9a3eb7e249ca8643a468d95dacc4a5063f2', name: "icon" }))), h("div", { key: '9a567dccf495baeab9e8f23954bbccc8d16d94d0', class: "seki-alert__content" }, h("slot", { key: '0b505306482a05111cddc5cfb07fdc6204f10851' }))));
+    }
+    hasSlot(name) {
+        const slot = this.el.querySelector(`[slot="${name}"]`);
+        return !!slot;
+    }
+    static get is() { return "seki-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlertVariant",
+                    "resolved": "\"default\" | \"destructive\" | undefined",
+                    "references": {
+                        "AlertVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/alert/seki-alert.tsx",
+                            "id": "src/components/alert/seki-alert.tsx::AlertVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "Visual variant of the alert"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}