@sekiui/elements 0.0.55 → 0.0.56

package/dist/cjs/seki-select.cjs.entry.js

@@ -340,7 +340,7 @@ const SekiSelect = class {
     // Render
     // ===========================
     render() {
-        return (index.h(index.Host, { key: '78edc08bd62bc19a1752ec58b966e57e5ef3afc8' }, index.h("slot", { key: 'adcf89b43702e2f62a60d73e693d9b5d362e3169' }), this.name && this.renderHiddenNativeElement()));
+        return (index.h(index.Host, { key: 'f9b0a239ecb0737c8341b1a2377d37d00374dfd7' }, index.h("slot", { key: '0245a9ff1da69043b08517ba859b305108710252' }), this.name && this.renderHiddenNativeElement()));
     }
     renderHiddenNativeElement() {
         if (this.multiple) {

package/dist/cjs/seki-skeleton.cjs.entry.js

@@ -17,7 +17,7 @@ const SekiSkeleton = class {
         }
     }
     render() {
-        return (index.h("div", { key: '11473c8f2d21d98f1836419fe0c628fbaf5e1e7d', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
+        return (index.h("div", { key: 'ccee706a38b0783b89dbdda8f1844caef95ea62b', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
     }
 };
 SekiSkeleton.style = sekiSkeletonCss;

package/dist/cjs/sekiui.cjs.js

@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["seki-field.cjs",[[257,"seki-field",{"orientation":[1],"invalid":[4]}]]],["seki-field-description.cjs",[[257,"seki-field-description",{"descriptorId":[1,"descriptor-id"],"componentId":[32],"getId":[64]}]]],["seki-field-error.cjs",[[257,"seki-field-error",{"errorId":[1,"error-id"],"visible":[4],"componentId":[32],"previousVisible":[32],"getId":[64],"setVisible":[64]},null,{"visible":["handleVisibleChange"]}]]],["seki-field-group.cjs",[[257,"seki-field-group",{"gap":[1]}]]],["seki-field-label.cjs",[[257,"seki-field-label",{"htmlFor":[1,"html-for"],"required":[4]}]]],["seki-field-legend.cjs",[[257,"seki-field-legend"]]],["seki-fieldset.cjs",[[257,"seki-fieldset",{"disabled":[4]}]]],["seki-input.cjs",[[321,"seki-input",{"type":[1],"value":[1537],"placeholder":[1],"disabled":[4],"readonly":[4],"required":[4],"name":[1],"autocomplete":[1],"min":[8],"max":[8],"step":[8],"pattern":[1],"minlength":[2],"maxlength":[2],"size":[1],"invalid":[4],"ariaLabel":[1,"aria-label"],"ariaDescribedby":[1,"aria-describedby"]}]]],["seki-select.cjs",[[257,"seki-select",{"value":[1032],"defaultValue":[8,"default-value"],"multiple":[4],"placeholder":[1],"disabled":[4],"required":[4],"open":[1028],"defaultOpen":[4,"default-open"],"name":[1],"maxVisiblePills":[2,"max-visible-pills"],"ariaLabel":[1,"aria-label"],"ariaLabelledby":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"placement":[1],"maxHeight":[1,"max-height"],"internalValue":[32],"isOpen":[32],"focusedOptionValue":[32],"registeredOptions":[32],"hasBeenActivated":[32],"searchBuffer":[32],"searchActive":[32],"openDropdown":[64],"closeDropdown":[64],"focusTrigger":[64],"clearSelection":[64],"handleKeyboard":[64]},null,{"value":["handleValuePropChange"],"open":["handleOpenPropChange"],"isOpen":["handleIsOpenChange"],"internalValue":["handleInternalValueChange"]}]]],["seki-select-content.cjs",[[257,"seki-select-content",{"forceUpdate":[32],"scrollToOption":[64]}]]],["seki-select-group.cjs",[[257,"seki-select-group",{"label":[1]}]]],["seki-select-option.cjs",[[257,"seki-select-option",{"value":[8],"label":[1],"disabled":[4]}]]],["seki-select-trigger.cjs",[[257,"seki-select-trigger",{"forceUpdate":[32]}]]],["seki-skeleton.cjs",[[257,"seki-skeleton",{"ariaLabel":[1,"aria-label"]}]]],["seki-switch.cjs",[[257,"seki-switch",{"checked":[4],"defaultChecked":[4,"default-checked"],"disabled":[4],"required":[4],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"internalChecked":[32]},[[0,"keydown","handleKeyDown"]]]]],["seki-tooltip.cjs",[[257,"seki-tooltip",{"delay":[2],"side":[1],"disabled":[4],"offset":[2],"isVisible":[32],"currentPosition":[32],"show":[64],"hide":[64],"updatePosition":[64]}]]]], options);
+  return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["seki-card.cjs",[[257,"seki-card",{"class":[1],"dataTestid":[1,"data-testid"]}]]],["seki-card-action.cjs",[[257,"seki-card-action",{"class":[1]}]]],["seki-card-content.cjs",[[257,"seki-card-content",{"class":[1]}]]],["seki-card-description.cjs",[[257,"seki-card-description",{"class":[1]}]]],["seki-card-footer.cjs",[[257,"seki-card-footer",{"alignment":[1],"class":[1]}]]],["seki-card-header.cjs",[[257,"seki-card-header",{"class":[1]}]]],["seki-card-title.cjs",[[257,"seki-card-title",{"level":[1],"class":[1]}]]],["seki-field.cjs",[[257,"seki-field",{"orientation":[1],"invalid":[4]}]]],["seki-field-description.cjs",[[257,"seki-field-description",{"descriptorId":[1,"descriptor-id"],"componentId":[32],"getId":[64]}]]],["seki-field-error.cjs",[[257,"seki-field-error",{"errorId":[1,"error-id"],"visible":[4],"componentId":[32],"previousVisible":[32],"getId":[64],"setVisible":[64]},null,{"visible":["handleVisibleChange"]}]]],["seki-field-group.cjs",[[257,"seki-field-group",{"gap":[1]}]]],["seki-field-label.cjs",[[257,"seki-field-label",{"htmlFor":[1,"html-for"],"required":[4]}]]],["seki-field-legend.cjs",[[257,"seki-field-legend"]]],["seki-fieldset.cjs",[[257,"seki-fieldset",{"disabled":[4]}]]],["seki-input.cjs",[[321,"seki-input",{"type":[1],"value":[1537],"placeholder":[1],"disabled":[4],"readonly":[4],"required":[4],"name":[1],"autocomplete":[1],"min":[8],"max":[8],"step":[8],"pattern":[1],"minlength":[2],"maxlength":[2],"size":[1],"invalid":[4],"ariaLabel":[1,"aria-label"],"ariaDescribedby":[1,"aria-describedby"]}]]],["seki-select.cjs",[[257,"seki-select",{"value":[1032],"defaultValue":[8,"default-value"],"multiple":[4],"placeholder":[1],"disabled":[4],"required":[4],"open":[1028],"defaultOpen":[4,"default-open"],"name":[1],"maxVisiblePills":[2,"max-visible-pills"],"ariaLabel":[1,"aria-label"],"ariaLabelledby":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"placement":[1],"maxHeight":[1,"max-height"],"internalValue":[32],"isOpen":[32],"focusedOptionValue":[32],"registeredOptions":[32],"hasBeenActivated":[32],"searchBuffer":[32],"searchActive":[32],"openDropdown":[64],"closeDropdown":[64],"focusTrigger":[64],"clearSelection":[64],"handleKeyboard":[64]},null,{"value":["handleValuePropChange"],"open":["handleOpenPropChange"],"isOpen":["handleIsOpenChange"],"internalValue":["handleInternalValueChange"]}]]],["seki-select-content.cjs",[[257,"seki-select-content",{"forceUpdate":[32],"scrollToOption":[64]}]]],["seki-select-group.cjs",[[257,"seki-select-group",{"label":[1]}]]],["seki-select-option.cjs",[[257,"seki-select-option",{"value":[8],"label":[1],"disabled":[4]}]]],["seki-select-trigger.cjs",[[257,"seki-select-trigger",{"forceUpdate":[32]}]]],["seki-skeleton.cjs",[[257,"seki-skeleton",{"ariaLabel":[1,"aria-label"]}]]],["seki-switch.cjs",[[257,"seki-switch",{"checked":[4],"defaultChecked":[4,"default-checked"],"disabled":[4],"required":[4],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"internalChecked":[32]},[[0,"keydown","handleKeyDown"]]]]],["seki-tooltip.cjs",[[257,"seki-tooltip",{"delay":[2],"side":[1],"disabled":[4],"offset":[2],"isVisible":[32],"currentPosition":[32],"show":[64],"hide":[64],"updatePosition":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -3,6 +3,13 @@
     "components/tooltip/seki-tooltip.js",
     "components/switch/seki-switch.js",
     "components/button/seki-button.js",
+    "components/card/seki-card-action.js",
+    "components/card/seki-card-content.js",
+    "components/card/seki-card-description.js",
+    "components/card/seki-card-footer.js",
+    "components/card/seki-card-header.js",
+    "components/card/seki-card-title.js",
+    "components/card/seki-card.js",
     "components/field/seki-field.js",
     "components/field-description/seki-field-description.js",
     "components/field-error/seki-field-error.js",

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

@@ -0,0 +1,50 @@
+import { h } from "@stencil/core";
+/**
+ * Optional action area within card header for buttons or menus.
+ * Provides flex layout with automatic right-alignment.
+ *
+ * @example
+ * <seki-card-action>
+ *   <button icon>⋯</button>
+ * </seki-card-action>
+ */
+export class CardAction {
+    render() {
+        return (h("div", { key: 'c8f99363f23bbd6c94f06e0c249f0c89dc247e29', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: 'f85df57714da50c418e8f49c4e2752743c1baddf' })));
+    }
+    static get is() { return "seki-card-action"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-card.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"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,51 @@
+import { h } from "@stencil/core";
+/**
+ * Main content body of the card.
+ * Flexible container for any content (text, forms, lists, etc.)
+ *
+ * @example
+ * <seki-card-content>
+ *   <input type="text" placeholder="Email" />
+ *   <input type="password" placeholder="Password" />
+ * </seki-card-content>
+ */
+export class CardContent {
+    render() {
+        return (h("div", { key: '64b134724c78946fb4bec0c7102996bdcdeb494f', class: `card-content ${this.class || ''}` }, h("slot", { key: 'ce65df86686f424f2faf7d43a5f31e00320be6d7' })));
+    }
+    static get is() { return "seki-card-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-card.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"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,48 @@
+import { h } from "@stencil/core";
+/**
+ * Secondary descriptive text below the card title.
+ * Renders as paragraph with muted text color.
+ *
+ * @example
+ * <seki-card-description>Description text</seki-card-description>
+ */
+export class CardDescription {
+    render() {
+        return (h("p", { key: 'b85330f24357ad2d6bf9335b75c52a38857663b3', class: `card-description ${this.class || ''}` }, h("slot", { key: '538d5ac32d92396c876ecbba6d759a3e39cae1a0' })));
+    }
+    static get is() { return "seki-card-description"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-card.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"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,83 @@
+import { h } from "@stencil/core";
+/**
+ * Bottom section of a card for action buttons or footer content.
+ * Provides flex layout with optional alignment control.
+ *
+ * @example
+ * <seki-card-footer alignment="flex-end">
+ *   <button>Cancel</button>
+ *   <button primary>Submit</button>
+ * </seki-card-footer>
+ */
+export class CardFooter {
+    constructor() {
+        /**
+         * Flex alignment for footer items. Default: flex-start
+         * Options: flex-start, center, flex-end
+         */
+        this.alignment = 'flex-start';
+    }
+    render() {
+        return (h("footer", { key: 'f6c603913f8e2fbbb71145ed5c875ee584a9c03f', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: 'b6a9e710e1deb6aa033b19f147b3ccdca07fa03c' })));
+    }
+    static get is() { return "seki-card-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Alignment",
+                    "resolved": "\"center\" | \"flex-end\" | \"flex-start\"",
+                    "references": {
+                        "Alignment": {
+                            "location": "global",
+                            "id": "global::Alignment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flex alignment for footer items. Default: flex-start\nOptions: flex-start, center, flex-end"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alignment",
+                "defaultValue": "'flex-start'"
+            },
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional CSS class"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,54 @@
+import { h } from "@stencil/core";
+/**
+ * Header section of a card, typically containing title and description.
+ * Provides flex layout for arranging title + action elements.
+ *
+ * @example
+ * <seki-card-header>
+ *   <seki-card-title>Title</seki-card-title>
+ *   <seki-card-description>Description</seki-card-description>
+ *   <seki-card-action>
+ *     <button>Action</button>
+ *   </seki-card-action>
+ * </seki-card-header>
+ */
+export class CardHeader {
+    render() {
+        return (h("header", { key: 'acf7629580ac04c641e5aac60f08cff19a6166ed', class: `card-header ${this.class || ''}` }, h("slot", { key: '39b9f7d682351be07ee9a1379fed77802fa172a1' })));
+    }
+    static get is() { return "seki-card-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-card.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/card/seki-card-title.js

@@ -0,0 +1,95 @@
+import { h } from "@stencil/core";
+/**
+ * Primary heading text within a card header.
+ * Renders as semantic heading (h1-h6) with typography tokens.
+ *
+ * @example
+ * <seki-card-title level="h2">My Card Title</seki-card-title>
+ */
+export class CardTitle {
+    constructor() {
+        /**
+         * Semantic heading level (h1-h6). Default: h2
+         */
+        this.level = 'h2';
+    }
+    render() {
+        const headingClass = `card-title ${this.class || ''}`;
+        switch (this.level) {
+            case 'h1':
+                return h("h1", { class: headingClass }, h("slot", null));
+            case 'h2':
+                return h("h2", { class: headingClass }, h("slot", null));
+            case 'h3':
+                return h("h3", { class: headingClass }, h("slot", null));
+            case 'h4':
+                return h("h4", { class: headingClass }, h("slot", null));
+            case 'h5':
+                return h("h5", { class: headingClass }, h("slot", null));
+            case 'h6':
+                return h("h6", { class: headingClass }, h("slot", null));
+            default:
+                return h("h2", { class: headingClass }, h("slot", null));
+        }
+    }
+    static get is() { return "seki-card-title"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "level": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeadingLevel",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "HeadingLevel": {
+                            "location": "global",
+                            "id": "global::HeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic heading level (h1-h6). Default: h2"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "level",
+                "defaultValue": "'h2'"
+            },
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional CSS class"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class"
+            }
+        };
+    }
+}