@sekiui/elements 0.0.55 → 0.0.57

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"
+            }
+        };
+    }
+}