@sekiui/elements 0.0.60 → 0.0.63

package/dist/collection/components/aspect-ratio/seki-aspect-ratio.interface.js

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

package/dist/collection/components/aspect-ratio/seki-aspect-ratio.js

@@ -0,0 +1,69 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Aspect Ratio component for maintaining consistent aspect ratios
+ *
+ * @slot - The content to display within the aspect ratio container (images, videos, iframes, etc.)
+ *
+ * @part container - The inner container element
+ */
+export class SekiAspectRatio {
+    constructor() {
+        /**
+         * The desired aspect ratio as a number (width / height)
+         * Common values: 16/9 (widescreen), 4/3 (standard), 1 (square), 21/9 (ultrawide)
+         */
+        this.ratio = 1;
+    }
+    componentWillLoad() {
+        if (this.ratio <= 0 || !isFinite(this.ratio)) {
+            console.warn(`Invalid ratio "${this.ratio}". Ratio must be a positive finite number. Defaulting to 1.`);
+        }
+    }
+    getSafeRatio() {
+        if (this.ratio <= 0 || !isFinite(this.ratio)) {
+            return 1;
+        }
+        return this.ratio;
+    }
+    render() {
+        const safeRatio = this.getSafeRatio();
+        const paddingBottom = `${(1 / safeRatio) * 100}%`;
+        return (h(Host, { key: 'c0832cb4c1f210dfd7c3cd804e4635e09acff5fb' }, h("div", { key: 'f059142c437ddef939d2be86f0abad702eb0cbab', part: "container", class: "aspect-ratio", style: { paddingBottom } }, h("div", { key: '09d32a408a550029e052b81e309f7b524c7b1c9a', class: "aspect-ratio__content" }, h("slot", { key: '60f269facc890c7df6ebcec76fbdc7bacac3e727' })))));
+    }
+    static get is() { return "seki-aspect-ratio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-aspect-ratio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-aspect-ratio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ratio": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The desired aspect ratio as a number (width / height)\nCommon values: 16/9 (widescreen), 4/3 (standard), 1 (square), 21/9 (ultrawide)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ratio",
+                "defaultValue": "1"
+            }
+        };
+    }
+}

package/dist/collection/components/avatar/seki-avatar-fallback.css

@@ -0,0 +1,45 @@
+/* Avatar Fallback Styles */
+
+:host {
+  /* Typography tokens */
+  --seki-avatar-fallback-font-size: inherit;
+  --seki-avatar-fallback-font-weight: var(--seki-font-weight-medium, 500);
+  --seki-avatar-fallback-font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
+
+  /* Colors */
+  --seki-avatar-fallback-bg: var(--seki-muted, hsl(240 4.8% 95.9%));
+  --seki-avatar-fallback-text: var(--seki-muted-foreground, hsl(240 3.8% 46.1%));
+
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+/* Dark mode support */
+:host-context([data-theme='dark']) {
+  --seki-avatar-fallback-bg: var(--seki-muted, hsl(240 3.7% 15.9%));
+  --seki-avatar-fallback-text: var(--seki-muted-foreground, hsl(240 5% 64.9%));
+}
+
+.seki-avatar-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--seki-avatar-fallback-bg);
+  color: var(--seki-avatar-fallback-text);
+  font-family: var(--seki-avatar-fallback-font-family);
+  font-size: var(--seki-avatar-fallback-font-size);
+  font-weight: var(--seki-avatar-fallback-font-weight);
+  line-height: 1;
+  text-transform: uppercase;
+  user-select: none;
+}
+
+/* Accessibility: High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-avatar-fallback {
+    border: 1px solid currentColor;
+  }
+}

package/dist/collection/components/avatar/seki-avatar-fallback.js

@@ -0,0 +1,91 @@
+import { h } from "@stencil/core";
+/**
+ * seki-avatar-fallback: Fallback content for avatar when image fails to load
+ *
+ * @component AvatarFallback
+ * @example
+ * <seki-avatar>
+ *   <seki-avatar-image src="https://example.com/avatar.jpg" alt="User" />
+ *   <seki-avatar-fallback>JD</seki-avatar-fallback>
+ * </seki-avatar>
+ */
+export class SekiAvatarFallback {
+    constructor() {
+        /**
+         * Delay in milliseconds before showing the fallback
+         * Useful to avoid flickering when image loads quickly
+         * @default 0
+         */
+        this.delayMs = 0;
+        /**
+         * Whether to show the fallback content
+         */
+        this.canRender = false;
+    }
+    componentWillLoad() {
+        if (this.delayMs > 0) {
+            this.timeoutId = setTimeout(() => {
+                this.canRender = true;
+            }, this.delayMs);
+        }
+        else {
+            this.canRender = true;
+        }
+    }
+    disconnectedCallback() {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+    }
+    render() {
+        if (!this.canRender) {
+            return null;
+        }
+        return (h("span", { class: "seki-avatar-fallback" }, h("slot", null)));
+    }
+    static get is() { return "seki-avatar-fallback"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-avatar-fallback.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-avatar-fallback.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "delayMs": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0"
+                        }],
+                    "text": "Delay in milliseconds before showing the fallback\nUseful to avoid flickering when image loads quickly"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delay-ms",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "canRender": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/avatar/seki-avatar-image.css

@@ -0,0 +1,28 @@
+/* Avatar Image Styles */
+
+:host {
+  display: contents;
+}
+
+.seki-avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 150ms ease-in-out;
+}
+
+.seki-avatar-image--loaded {
+  opacity: 1;
+}
+
+.seki-avatar-image--error {
+  display: none;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-avatar-image {
+    transition: none;
+  }
+}

package/dist/collection/components/avatar/seki-avatar-image.js

@@ -0,0 +1,147 @@
+import { h } from "@stencil/core";
+/**
+ * seki-avatar-image: Image element for the avatar with load/error handling
+ *
+ * @component AvatarImage
+ * @example
+ * <seki-avatar>
+ *   <seki-avatar-image src="https://example.com/avatar.jpg" alt="User" />
+ *   <seki-avatar-fallback>JD</seki-avatar-fallback>
+ * </seki-avatar>
+ */
+export class SekiAvatarImage {
+    constructor() {
+        /**
+         * Alt text for the avatar image
+         */
+        this.alt = '';
+        /**
+         * Tracks whether the image has loaded
+         */
+        this.loaded = false;
+        /**
+         * Tracks whether the image has errored
+         */
+        this.hasError = false;
+        this.handleLoad = () => {
+            this.loaded = true;
+            this.hasError = false;
+            this.avatarImageLoad.emit();
+        };
+        this.handleError = () => {
+            this.loaded = false;
+            this.hasError = true;
+            this.avatarImageError.emit();
+        };
+    }
+    render() {
+        if (!this.src) {
+            return null;
+        }
+        const classes = {
+            'seki-avatar-image': true,
+            'seki-avatar-image--loaded': this.loaded,
+            'seki-avatar-image--error': this.hasError,
+        };
+        const classString = Object.entries(classes)
+            .filter(([, active]) => active)
+            .map(([name]) => name)
+            .join(' ');
+        return (h("img", { class: classString, src: this.src, alt: this.alt, onLoad: this.handleLoad, onError: this.handleError }));
+    }
+    static get is() { return "seki-avatar-image"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-avatar-image.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-avatar-image.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Source URL of the avatar image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the avatar image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loaded": {},
+            "hasError": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "avatarImageLoad",
+                "name": "avatarImageLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the image loads successfully"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "avatarImageError",
+                "name": "avatarImageError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the image fails to load"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,115 @@
+/* Avatar Component Styles
+ * Uses design tokens for consistent sizing and styling
+ */
+
+:host {
+  /* Size tokens */
+  --seki-avatar-size-xs: 24px;
+  --seki-avatar-size-sm: 32px;
+  --seki-avatar-size-md: 40px;
+  --seki-avatar-size-lg: 48px;
+  --seki-avatar-size-xl: 64px;
+
+  /* Border radius tokens */
+  --seki-avatar-radius-circle: 9999px;
+  --seki-avatar-radius-square: var(--radius-md, 8px);
+
+  /* Colors */
+  --seki-avatar-bg: var(--seki-muted, hsl(240 4.8% 95.9%));
+  --seki-avatar-border: var(--seki-border, hsl(240 5.9% 90%));
+
+  display: inline-block;
+}
+
+/* Dark mode support */
+:host-context([data-theme='dark']) {
+  --seki-avatar-bg: var(--seki-muted, hsl(240 3.7% 15.9%));
+  --seki-avatar-border: var(--seki-border, hsl(240 3.7% 15.9%));
+}
+
+/* Base avatar styles */
+.seki-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  background-color: var(--seki-avatar-bg);
+  flex-shrink: 0;
+}
+
+/* Size variants */
+.seki-avatar--xs {
+  width: var(--seki-avatar-size-xs);
+  height: var(--seki-avatar-size-xs);
+  font-size: 10px;
+}
+
+.seki-avatar--sm {
+  width: var(--seki-avatar-size-sm);
+  height: var(--seki-avatar-size-sm);
+  font-size: 12px;
+}
+
+.seki-avatar--md {
+  width: var(--seki-avatar-size-md);
+  height: var(--seki-avatar-size-md);
+  font-size: 14px;
+}
+
+.seki-avatar--lg {
+  width: var(--seki-avatar-size-lg);
+  height: var(--seki-avatar-size-lg);
+  font-size: 16px;
+}
+
+.seki-avatar--xl {
+  width: var(--seki-avatar-size-xl);
+  height: var(--seki-avatar-size-xl);
+  font-size: 20px;
+}
+
+/* Shape variants */
+.seki-avatar--circle {
+  border-radius: var(--seki-avatar-radius-circle);
+}
+
+.seki-avatar--square {
+  border-radius: var(--seki-avatar-radius-square);
+}
+
+/* Slotted content styling */
+::slotted(seki-avatar-image) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+::slotted(seki-avatar-fallback) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* Hide fallback when image is loaded */
+.seki-avatar--image-loaded ::slotted(seki-avatar-fallback) {
+  display: none;
+}
+
+/* Accessibility: High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-avatar {
+    border: 2px solid var(--seki-avatar-border);
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-avatar {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,176 @@
+import { h } from "@stencil/core";
+/**
+ * seki-avatar: Container for avatar image with fallback support
+ *
+ * @component Avatar
+ * @example
+ * <seki-avatar>
+ *   <seki-avatar-image src="https://example.com/avatar.jpg" alt="User" />
+ *   <seki-avatar-fallback>JD</seki-avatar-fallback>
+ * </seki-avatar>
+ */
+export class SekiAvatar {
+    constructor() {
+        /**
+         * Size of the avatar
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Shape of the avatar
+         * @default 'circle'
+         */
+        this.shape = 'circle';
+        /**
+         * Tracks whether the image has loaded successfully
+         */
+        this.imageLoaded = false;
+        /**
+         * Tracks whether the image has errored
+         */
+        this.imageError = false;
+    }
+    validateSize(newValue) {
+        const validSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+        if (!validSizes.includes(newValue)) {
+            console.warn(`Invalid size "${newValue}". Must be one of: ${validSizes.join(', ')}`);
+        }
+    }
+    validateShape(newValue) {
+        const validShapes = ['circle', 'square'];
+        if (!validShapes.includes(newValue)) {
+            console.warn(`Invalid shape "${newValue}". Must be one of: ${validShapes.join(', ')}`);
+        }
+    }
+    handleImageLoad() {
+        this.imageLoaded = true;
+        this.imageError = false;
+    }
+    handleImageError() {
+        this.imageLoaded = false;
+        this.imageError = true;
+    }
+    componentWillLoad() {
+        this.validateSize(this.size);
+        this.validateShape(this.shape);
+    }
+    render() {
+        const classes = {
+            'seki-avatar': true,
+            [`seki-avatar--${this.size}`]: true,
+            [`seki-avatar--${this.shape}`]: true,
+            'seki-avatar--image-loaded': this.imageLoaded,
+            'seki-avatar--image-error': this.imageError,
+        };
+        const classString = Object.entries(classes)
+            .filter(([, active]) => active)
+            .map(([name]) => name)
+            .join(' ');
+        return (h("span", { key: '29505452c9dc31731095f816f18cbf96579b2ed0', class: classString, role: "img" }, h("slot", { key: 'fe73f8e582a31ace433a7e3d1f514679bb58dffa' })));
+    }
+    static get is() { return "seki-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "AvatarSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/avatar/seki-avatar.tsx",
+                            "id": "src/components/avatar/seki-avatar.tsx::AvatarSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'md'"
+                        }],
+                    "text": "Size of the avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarShape",
+                    "resolved": "\"circle\" | \"square\"",
+                    "references": {
+                        "AvatarShape": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/avatar/seki-avatar.tsx",
+                            "id": "src/components/avatar/seki-avatar.tsx::AvatarShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'circle'"
+                        }],
+                    "text": "Shape of the avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'circle'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "imageLoaded": {},
+            "imageError": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "validateSize"
+            }, {
+                "propName": "shape",
+                "methodName": "validateShape"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "avatarImageLoad",
+                "method": "handleImageLoad",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "avatarImageError",
+                "method": "handleImageError",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -23,7 +23,7 @@
   /* Typography tokens from seki-small (.seki-small in typography/variants.css) */
   --seki-badge-font-size: var(--seki-font-size-sm, 12px);
   --seki-badge-font-weight: var(--seki-font-weight-medium, 500);
-  --seki-badge-line-height: 1.25rem;
+  --seki-badge-line-height: var(--seki-line-height-tight, 1.25);
   --seki-badge-font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
 
   /* Spacing tokens */