@sekiui/elements 0.0.55 → 0.0.56

package/dist/types/components/card/seki-card-description.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Secondary descriptive text below the card title.
+ * Renders as paragraph with muted text color.
+ *
+ * @example
+ * <seki-card-description>Description text</seki-card-description>
+ */
+export declare class CardDescription {
+    /**
+     * Optional CSS class
+     */
+    class?: string;
+    render(): any;
+}

package/dist/types/components/card/seki-card-footer.d.ts

@@ -0,0 +1,24 @@
+type Alignment = 'flex-start' | 'center' | 'flex-end';
+/**
+ * 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 declare class CardFooter {
+    /**
+     * Flex alignment for footer items. Default: flex-start
+     * Options: flex-start, center, flex-end
+     */
+    alignment: Alignment;
+    /**
+     * Optional CSS class
+     */
+    class?: string;
+    render(): any;
+}
+export {};

package/dist/types/components/card/seki-card-header.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 declare class CardHeader {
+    /**
+     * Optional CSS class for custom styling
+     */
+    class?: string;
+    render(): any;
+}

package/dist/types/components/card/seki-card-title.d.ts

@@ -0,0 +1,20 @@
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/**
+ * 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 declare class CardTitle {
+    /**
+     * Semantic heading level (h1-h6). Default: h2
+     */
+    level: HeadingLevel;
+    /**
+     * Optional CSS class
+     */
+    class?: string;
+    render(): any;
+}
+export {};

package/dist/types/components/card/seki-card.a11y.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/card/seki-card.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Flexible container for organizing related content with optional header,
+ * content, and footer sections. Composition-based using subcomponents.
+ *
+ * @example
+ * <seki-card>
+ *   <seki-card-header>
+ *     <seki-card-title>Title</seki-card-title>
+ *   </seki-card-header>
+ *   <seki-card-content>Content here</seki-card-content>
+ * </seki-card>
+ */
+export declare class Card {
+    /**
+     * Optional CSS class for custom styling hooks
+     */
+    class?: string;
+    /**
+     * Optional data attribute for testing
+     */
+    dataTestid?: string;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -38,6 +38,116 @@ export namespace Components {
          */
         "variant": 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
     }
+    /**
+     * Flexible container for organizing related content with optional header,
+     * content, and footer sections. Composition-based using subcomponents.
+     * @example <seki-card>
+     *   <seki-card-header>
+     *     <seki-card-title>Title</seki-card-title>
+     *   </seki-card-header>
+     *   <seki-card-content>Content here</seki-card-content>
+     * </seki-card>
+     */
+    interface SekiCard {
+        /**
+          * Optional CSS class for custom styling hooks
+         */
+        "class"?: string;
+        /**
+          * Optional data attribute for testing
+         */
+        "dataTestid"?: string;
+    }
+    /**
+     * 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>
+     */
+    interface SekiCardAction {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * 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>
+     */
+    interface SekiCardContent {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * Secondary descriptive text below the card title.
+     * Renders as paragraph with muted text color.
+     * @example <seki-card-description>Description text</seki-card-description>
+     */
+    interface SekiCardDescription {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * 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>
+     */
+    interface SekiCardFooter {
+        /**
+          * Flex alignment for footer items. Default: flex-start Options: flex-start, center, flex-end
+          * @default 'flex-start'
+         */
+        "alignment": Alignment;
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * 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>
+     */
+    interface SekiCardHeader {
+        /**
+          * Optional CSS class for custom styling
+         */
+        "class"?: string;
+    }
+    /**
+     * 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>
+     */
+    interface SekiCardTitle {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+        /**
+          * Semantic heading level (h1-h6). Default: h2
+          * @default 'h2'
+         */
+        "level": HeadingLevel;
+    }
     interface SekiField {
         /**
           * Whether the field is in an invalid/error state Applies data-invalid attribute for styling
@@ -439,6 +549,102 @@ declare global {
         prototype: HTMLSekiButtonElement;
         new (): HTMLSekiButtonElement;
     };
+    /**
+     * Flexible container for organizing related content with optional header,
+     * content, and footer sections. Composition-based using subcomponents.
+     * @example <seki-card>
+     *   <seki-card-header>
+     *     <seki-card-title>Title</seki-card-title>
+     *   </seki-card-header>
+     *   <seki-card-content>Content here</seki-card-content>
+     * </seki-card>
+     */
+    interface HTMLSekiCardElement extends Components.SekiCard, HTMLStencilElement {
+    }
+    var HTMLSekiCardElement: {
+        prototype: HTMLSekiCardElement;
+        new (): HTMLSekiCardElement;
+    };
+    /**
+     * 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>
+     */
+    interface HTMLSekiCardActionElement extends Components.SekiCardAction, HTMLStencilElement {
+    }
+    var HTMLSekiCardActionElement: {
+        prototype: HTMLSekiCardActionElement;
+        new (): HTMLSekiCardActionElement;
+    };
+    /**
+     * 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>
+     */
+    interface HTMLSekiCardContentElement extends Components.SekiCardContent, HTMLStencilElement {
+    }
+    var HTMLSekiCardContentElement: {
+        prototype: HTMLSekiCardContentElement;
+        new (): HTMLSekiCardContentElement;
+    };
+    /**
+     * Secondary descriptive text below the card title.
+     * Renders as paragraph with muted text color.
+     * @example <seki-card-description>Description text</seki-card-description>
+     */
+    interface HTMLSekiCardDescriptionElement extends Components.SekiCardDescription, HTMLStencilElement {
+    }
+    var HTMLSekiCardDescriptionElement: {
+        prototype: HTMLSekiCardDescriptionElement;
+        new (): HTMLSekiCardDescriptionElement;
+    };
+    /**
+     * 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>
+     */
+    interface HTMLSekiCardFooterElement extends Components.SekiCardFooter, HTMLStencilElement {
+    }
+    var HTMLSekiCardFooterElement: {
+        prototype: HTMLSekiCardFooterElement;
+        new (): HTMLSekiCardFooterElement;
+    };
+    /**
+     * 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>
+     */
+    interface HTMLSekiCardHeaderElement extends Components.SekiCardHeader, HTMLStencilElement {
+    }
+    var HTMLSekiCardHeaderElement: {
+        prototype: HTMLSekiCardHeaderElement;
+        new (): HTMLSekiCardHeaderElement;
+    };
+    /**
+     * 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>
+     */
+    interface HTMLSekiCardTitleElement extends Components.SekiCardTitle, HTMLStencilElement {
+    }
+    var HTMLSekiCardTitleElement: {
+        prototype: HTMLSekiCardTitleElement;
+        new (): HTMLSekiCardTitleElement;
+    };
     interface HTMLSekiFieldElement extends Components.SekiField, HTMLStencilElement {
     }
     var HTMLSekiFieldElement: {
@@ -625,6 +831,13 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "seki-button": HTMLSekiButtonElement;
+        "seki-card": HTMLSekiCardElement;
+        "seki-card-action": HTMLSekiCardActionElement;
+        "seki-card-content": HTMLSekiCardContentElement;
+        "seki-card-description": HTMLSekiCardDescriptionElement;
+        "seki-card-footer": HTMLSekiCardFooterElement;
+        "seki-card-header": HTMLSekiCardHeaderElement;
+        "seki-card-title": HTMLSekiCardTitleElement;
         "seki-field": HTMLSekiFieldElement;
         "seki-field-description": HTMLSekiFieldDescriptionElement;
         "seki-field-error": HTMLSekiFieldErrorElement;
@@ -670,6 +883,116 @@ declare namespace LocalJSX {
          */
         "variant"?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
     }
+    /**
+     * Flexible container for organizing related content with optional header,
+     * content, and footer sections. Composition-based using subcomponents.
+     * @example <seki-card>
+     *   <seki-card-header>
+     *     <seki-card-title>Title</seki-card-title>
+     *   </seki-card-header>
+     *   <seki-card-content>Content here</seki-card-content>
+     * </seki-card>
+     */
+    interface SekiCard {
+        /**
+          * Optional CSS class for custom styling hooks
+         */
+        "class"?: string;
+        /**
+          * Optional data attribute for testing
+         */
+        "dataTestid"?: string;
+    }
+    /**
+     * 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>
+     */
+    interface SekiCardAction {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * 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>
+     */
+    interface SekiCardContent {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * Secondary descriptive text below the card title.
+     * Renders as paragraph with muted text color.
+     * @example <seki-card-description>Description text</seki-card-description>
+     */
+    interface SekiCardDescription {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * 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>
+     */
+    interface SekiCardFooter {
+        /**
+          * Flex alignment for footer items. Default: flex-start Options: flex-start, center, flex-end
+          * @default 'flex-start'
+         */
+        "alignment"?: Alignment;
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * 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>
+     */
+    interface SekiCardHeader {
+        /**
+          * Optional CSS class for custom styling
+         */
+        "class"?: string;
+    }
+    /**
+     * 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>
+     */
+    interface SekiCardTitle {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+        /**
+          * Semantic heading level (h1-h6). Default: h2
+          * @default 'h2'
+         */
+        "level"?: HeadingLevel;
+    }
     interface SekiField {
         /**
           * Whether the field is in an invalid/error state Applies data-invalid attribute for styling
@@ -1047,6 +1370,13 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "seki-button": SekiButton;
+        "seki-card": SekiCard;
+        "seki-card-action": SekiCardAction;
+        "seki-card-content": SekiCardContent;
+        "seki-card-description": SekiCardDescription;
+        "seki-card-footer": SekiCardFooter;
+        "seki-card-header": SekiCardHeader;
+        "seki-card-title": SekiCardTitle;
         "seki-field": SekiField;
         "seki-field-description": SekiFieldDescription;
         "seki-field-error": SekiFieldError;
@@ -1070,6 +1400,67 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "seki-button": LocalJSX.SekiButton & JSXBase.HTMLAttributes<HTMLSekiButtonElement>;
+            /**
+             * Flexible container for organizing related content with optional header,
+             * content, and footer sections. Composition-based using subcomponents.
+             * @example <seki-card>
+             *   <seki-card-header>
+             *     <seki-card-title>Title</seki-card-title>
+             *   </seki-card-header>
+             *   <seki-card-content>Content here</seki-card-content>
+             * </seki-card>
+             */
+            "seki-card": LocalJSX.SekiCard & JSXBase.HTMLAttributes<HTMLSekiCardElement>;
+            /**
+             * 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>
+             */
+            "seki-card-action": LocalJSX.SekiCardAction & JSXBase.HTMLAttributes<HTMLSekiCardActionElement>;
+            /**
+             * 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>
+             */
+            "seki-card-content": LocalJSX.SekiCardContent & JSXBase.HTMLAttributes<HTMLSekiCardContentElement>;
+            /**
+             * Secondary descriptive text below the card title.
+             * Renders as paragraph with muted text color.
+             * @example <seki-card-description>Description text</seki-card-description>
+             */
+            "seki-card-description": LocalJSX.SekiCardDescription & JSXBase.HTMLAttributes<HTMLSekiCardDescriptionElement>;
+            /**
+             * 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>
+             */
+            "seki-card-footer": LocalJSX.SekiCardFooter & JSXBase.HTMLAttributes<HTMLSekiCardFooterElement>;
+            /**
+             * 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>
+             */
+            "seki-card-header": LocalJSX.SekiCardHeader & JSXBase.HTMLAttributes<HTMLSekiCardHeaderElement>;
+            /**
+             * 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>
+             */
+            "seki-card-title": LocalJSX.SekiCardTitle & JSXBase.HTMLAttributes<HTMLSekiCardTitleElement>;
             "seki-field": LocalJSX.SekiField & JSXBase.HTMLAttributes<HTMLSekiFieldElement>;
             "seki-field-description": LocalJSX.SekiFieldDescription & JSXBase.HTMLAttributes<HTMLSekiFieldDescriptionElement>;
             "seki-field-error": LocalJSX.SekiFieldError & JSXBase.HTMLAttributes<HTMLSekiFieldErrorElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sekiui/elements",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "Modern, accessible Web Components with shadcn/ui-inspired design",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",