@sekiui/elements 0.0.56 → 0.0.59

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

@@ -0,0 +1,140 @@
+/* Badge Component Styles with Design Tokens
+ * Uses typography system for text sizing (seki-small class)
+ * Reference: src/styles/typography/variants.css
+ */
+
+:host {
+  --seki-badge-default-bg: var(--color-primary, #2563eb);
+  --seki-badge-default-text: var(--color-white, #ffffff);
+  --seki-badge-default-border: transparent;
+
+  --seki-badge-secondary-bg: var(--color-surface-secondary, #e5e7eb);
+  --seki-badge-secondary-text: var(--color-text-primary, #1f2937);
+  --seki-badge-secondary-border: transparent;
+
+  --seki-badge-destructive-bg: var(--color-destructive, #ef4444);
+  --seki-badge-destructive-text: var(--color-white, #ffffff);
+  --seki-badge-destructive-border: transparent;
+
+  --seki-badge-outline-bg: transparent;
+  --seki-badge-outline-text: var(--color-text-primary, #1f2937);
+  --seki-badge-outline-border: var(--color-border, #d1d5db);
+
+  /* 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-font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
+
+  /* Spacing tokens */
+  --seki-badge-spacing: var(--spacing-unit, 8px);
+  --seki-badge-padding-x: calc(var(--seki-badge-spacing) * 0.75);
+  --seki-badge-padding-y: calc(var(--seki-badge-spacing) * 0.5);
+  --seki-badge-border-radius: var(--radius-sm, 4px);
+  --seki-badge-border-radius-rounded: 999px;
+
+  --seki-badge-icon-size: 1em;
+  --seki-badge-icon-margin: 2px;
+}
+
+/* Dark mode support */
+:host([data-theme='dark']) {
+  --seki-badge-secondary-bg: var(--color-surface-secondary-dark, #374151);
+  --seki-badge-secondary-text: var(--color-text-primary-dark, #f3f4f6);
+  --seki-badge-outline-text: var(--color-text-primary-dark, #f3f4f6);
+  --seki-badge-outline-border: var(--color-border-dark, #4b5563);
+}
+
+/* Base badge styles */
+.seki-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--seki-badge-icon-margin);
+  padding: var(--seki-badge-padding-y) var(--seki-badge-padding-x);
+  border-radius: var(--seki-badge-border-radius);
+  border: 1px solid var(--seki-badge-default-border);
+  font-family: var(--seki-badge-font-family);
+  font-size: var(--seki-badge-font-size);
+  font-weight: var(--seki-badge-font-weight);
+  line-height: var(--seki-badge-line-height);
+  white-space: nowrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* Rounded variant */
+.seki-badge--rounded {
+  border-radius: var(--seki-badge-border-radius-rounded);
+}
+
+/* Default variant */
+.seki-badge--default {
+  background-color: var(--seki-badge-default-bg);
+  color: var(--seki-badge-default-text);
+  border-color: var(--seki-badge-default-border);
+}
+
+/* Secondary variant */
+.seki-badge--secondary {
+  background-color: var(--seki-badge-secondary-bg);
+  color: var(--seki-badge-secondary-text);
+  border-color: var(--seki-badge-secondary-border);
+}
+
+/* Destructive variant */
+.seki-badge--destructive {
+  background-color: var(--seki-badge-destructive-bg);
+  color: var(--seki-badge-destructive-text);
+  border-color: var(--seki-badge-destructive-border);
+}
+
+/* Outline variant */
+.seki-badge--outline {
+  background-color: var(--seki-badge-outline-bg);
+  color: var(--seki-badge-outline-text);
+  border-color: var(--seki-badge-outline-border);
+}
+
+/* Icon styles */
+.seki-badge__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--seki-badge-icon-size);
+  line-height: 1;
+}
+
+/* Text styles */
+.seki-badge__text {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+/* Ensure text doesn't overflow */
+.seki-badge__text::slotted(*) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+
+/* Accessibility: High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-badge {
+    border-width: 2px;
+  }
+
+  .seki-badge--outline {
+    border-width: 2px;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-badge {
+    transition: none;
+  }
+}

package/dist/collection/components/badge/seki-badge.interface.js

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

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

@@ -0,0 +1,199 @@
+import { h } from "@stencil/core";
+/**
+ * seki-badge: Presentational badge component for displaying small pieces of information
+ *
+ * @component Badge
+ * @example
+ * <seki-badge variant="default">Label</seki-badge>
+ * <seki-badge variant="secondary">
+ *   <span slot="icon">ℹ</span>
+ *   Secondary
+ * </seki-badge>
+ */
+export class SekiBadge {
+    constructor() {
+        /**
+         * Visual variant of the badge
+         * @default 'default'
+         */
+        this.variant = 'default';
+        /**
+         * Enable rounded pill styling
+         * @default false
+         */
+        this.rounded = false;
+    }
+    componentWillLoad() {
+        // Validate props
+        const validVariants = ['default', 'secondary', 'destructive', 'outline'];
+        if (this.variant && !validVariants.includes(this.variant)) {
+            console.warn(`Invalid variant "${this.variant}". Must be one of: ${validVariants.join(', ')}`);
+            this.variant = 'default';
+        }
+    }
+    render() {
+        // Check if using number badge mode
+        const isNumberBadge = typeof this.number === 'number';
+        if (isNumberBadge) {
+            return this.renderNumberBadge();
+        }
+        return this.renderTextBadge();
+    }
+    renderNumberBadge() {
+        // Calculate display number
+        let displayNumber;
+        if (this.max !== undefined && this.number > this.max) {
+            displayNumber = `${this.max}+`;
+        }
+        else {
+            displayNumber = String(this.number);
+        }
+        const badgeClasses = {
+            'seki-badge': true,
+            [`seki-badge--${this.variant}`]: !!this.variant,
+            'seki-badge--rounded': !!this.rounded,
+            'seki-badge--number': true,
+        };
+        const classString = Object.entries(badgeClasses)
+            .filter(([, active]) => active)
+            .map(([name]) => name)
+            .join(' ');
+        return (h("span", { class: classString }, displayNumber));
+    }
+    renderTextBadge() {
+        const hasIcon = this.hasSlot('icon');
+        const hasText = this.hasSlot('default');
+        // Validate that at least one of text or icon is present
+        if (!hasIcon && !hasText) {
+            console.warn('Badge requires at least text or icon content');
+        }
+        const badgeClasses = {
+            'seki-badge': true,
+            [`seki-badge--${this.variant}`]: !!this.variant,
+            'seki-badge--rounded': !!this.rounded,
+        };
+        const classString = Object.entries(badgeClasses)
+            .filter(([, active]) => active)
+            .map(([name]) => name)
+            .join(' ');
+        return (h("div", { class: classString }, hasIcon && (h("span", { class: "seki-badge__icon" }, h("slot", { name: "icon" }))), hasText && (h("span", { class: "seki-badge__text" }, h("slot", null)))));
+    }
+    hasSlot(name) {
+        var _a;
+        const slot = this.el.querySelector(`[slot="${name}"]`);
+        return !!slot || (name === 'default' && ((_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
+    }
+    static get is() { return "seki-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeVariant",
+                    "resolved": "\"default\" | \"destructive\" | \"outline\" | \"secondary\" | undefined",
+                    "references": {
+                        "BadgeVariant": {
+                            "location": "import",
+                            "path": "./seki-badge.interface",
+                            "id": "src/components/badge/seki-badge.interface.ts::BadgeVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "Visual variant of the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "rounded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enable rounded pill styling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rounded",
+                "defaultValue": "false"
+            },
+            "number": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Number to display in the badge\nWhen set, displays the number instead of text content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "number"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Maximum limit for number badge\nIf number exceeds this, shows \"max+\" instead\nOnly used when number prop is set"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/sidebar/seki-sidebar-content.css

@@ -0,0 +1,82 @@
+/**
+ * SekiSidebarContent CSS
+ * Styling for the scrollable main content area of the sidebar
+ */
+
+:host {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--sidebar-padding, 0.5rem);
+  gap: var(--sidebar-gap, 0.5rem);
+}
+
+/* Custom scrollbar styling */
+.content-wrapper::-webkit-scrollbar {
+  width: var(--scrollbar-width, 6px);
+}
+
+.content-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.content-wrapper::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb, #d1d5db);
+  border-radius: var(--scrollbar-radius, 3px);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.content-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover, #9ca3af);
+  background-clip: content-box;
+}
+
+:host([data-theme="dark"]) .content-wrapper::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-dark, #52525b);
+  background-clip: content-box;
+}
+
+:host([data-theme="dark"]) .content-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover-dark, #71717a);
+  background-clip: content-box;
+}
+
+/* Firefox scrollbar */
+.content-wrapper {
+  scrollbar-color: var(--scrollbar-thumb, #d1d5db) transparent;
+  scrollbar-width: thin;
+}
+
+:host([data-theme="dark"]) .content-wrapper {
+  scrollbar-color: var(--scrollbar-thumb-dark, #52525b) transparent;
+}
+
+/* Print styles */
+@media print {
+  :host {
+    overflow: visible;
+  }
+
+  .content-wrapper {
+    overflow: visible;
+    padding: 0;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  .content-wrapper::-webkit-scrollbar-thumb {
+    border-width: 1px;
+  }
+}

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

@@ -0,0 +1,33 @@
+/**
+ * SekiSidebarContent Component
+ * @description Scrollable main content area of the sidebar
+ * Contains menu items, groups, and other sidebar content
+ * @component
+ * @example
+ * <seki-sidebar-content>
+ *   <seki-sidebar-group title="Navigation">
+ *     <!-- Menu items -->
+ *   </seki-sidebar-group>
+ * </seki-sidebar-content>
+ */
+import { h, Host } from "@stencil/core";
+export class SekiSidebarContent {
+    /**
+     * Render the component
+     */
+    render() {
+        return (h(Host, { key: 'e0fbac0ce2f3013667eadd8ad31c3de5f598490c' }, h("div", { key: '6a9015ee078aa4434b07d77c16f90362646786f6', class: "content-wrapper" }, h("slot", { key: '7490825d408800a5ba57f8f07a64f7b8abbbd4fd' }))));
+    }
+    static get is() { return "seki-sidebar-content"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar-content.css"]
+        };
+    }
+}

package/dist/collection/components/sidebar/seki-sidebar-footer.css

@@ -0,0 +1,44 @@
+/**
+ * SekiSidebarFooter CSS
+ * Styling for the sticky footer section of the sidebar
+ */
+
+:host {
+  display: block;
+  padding: var(--sidebar-padding, 0.5rem);
+  border-top: 1px solid var(--sidebar-border, #e5e7eb);
+  background-color: var(--sidebar-bg, #ffffff);
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  min-height: var(--sidebar-footer-height, auto);
+  flex-shrink: 0;
+}
+
+:host([data-theme="dark"]) {
+  border-top-color: var(--sidebar-border-dark, #27272a);
+  background-color: var(--sidebar-bg-dark, #09090b);
+}
+
+.footer-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  gap: var(--sidebar-gap, 0.5rem);
+}
+
+/* Print styles */
+@media print {
+  :host {
+    display: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  :host {
+    border-top-width: 2px;
+  }
+}

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

@@ -0,0 +1,31 @@
+/**
+ * SekiSidebarFooter Component
+ * @description Sticky footer section at the bottom of the sidebar
+ * Provides a slot for footer content (user info, settings, logout button)
+ * @component
+ * @example
+ * <seki-sidebar-footer>
+ *   <div class="user-info">User Name</div>
+ * </seki-sidebar-footer>
+ */
+import { h, Host } from "@stencil/core";
+export class SekiSidebarFooter {
+    /**
+     * Render the component
+     */
+    render() {
+        return (h(Host, { key: '1ce49f79758c8281d9b5c8c2589f938c1a731ceb' }, h("div", { key: '28992ba4de35c194c9c2f76e8d14f0299a23b242', class: "footer-wrapper" }, h("slot", { key: '7896c9c1823da9d65a4f99206840823372e5b174' }))));
+    }
+    static get is() { return "seki-sidebar-footer"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar-footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar-footer.css"]
+        };
+    }
+}

package/dist/collection/components/sidebar/seki-sidebar-group.css

@@ -0,0 +1,158 @@
+/**
+ * SekiSidebarGroup CSS
+ * Styling for sidebar groups with optional collapsible sections
+ */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.group-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sidebar-gap, 0.5rem);
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  gap: var(--sidebar-gap, 0.5rem);
+  padding: var(--sidebar-padding-sm, 0.25rem 0);
+  color: var(--sidebar-muted, var(--seki-color-text-muted));
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: margin-top 200ms ease-linear, opacity 200ms ease-linear;
+  /* Use built-in typography */
+  font-size: var(--seki-font-size-xs);
+  font-weight: var(--seki-font-weight-semibold);
+  font-family: var(--seki-font-sans);
+}
+
+:host([data-theme="dark"]) .group-header {
+  color: var(--sidebar-muted-dark, #a1a1aa);
+}
+
+.group-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  font-size: 0.75rem;
+  transition: transform var(--sidebar-transition, 200ms) ease-out;
+  border-radius: var(--sidebar-radius-sm, 0.25rem);
+}
+
+.group-toggle:hover {
+  background-color: var(--sidebar-hover-bg, #f3f4f6);
+}
+
+.group-toggle:focus-visible {
+  outline: 2px solid var(--sidebar-primary, #3b82f6);
+  outline-offset: 2px;
+}
+
+:host([data-theme="dark"]) .group-toggle:hover {
+  background-color: var(--sidebar-hover-bg-dark, #27272a);
+}
+
+:host([data-collapsed="true"]) .group-toggle .toggle-icon {
+  transform: rotate(-90deg);
+}
+
+.toggle-icon {
+  display: inline-block;
+  transition: transform var(--sidebar-transition, 200ms) ease-out;
+}
+
+.group-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.group-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  transition: background-color var(--sidebar-transition, 200ms) ease-out;
+  border-radius: var(--sidebar-radius-sm, 0.25rem);
+}
+
+.group-action:hover {
+  background-color: var(--sidebar-hover-bg, #f3f4f6);
+}
+
+.group-action:focus-visible {
+  outline: 2px solid var(--sidebar-primary, #3b82f6);
+  outline-offset: 2px;
+}
+
+:host([data-theme="dark"]) .group-action:hover {
+  background-color: var(--sidebar-hover-bg-dark, #27272a);
+}
+
+.group-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sidebar-gap, 0.5rem);
+  animation: slideDown var(--sidebar-transition, 200ms) ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 1000px;
+  }
+}
+
+/* Print styles */
+@media print {
+  .group-toggle,
+  .group-action {
+    display: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  .group-toggle,
+  .group-action {
+    border: 1px solid currentColor;
+  }
+}
+
+/* Collapsed icon mode - hide group title with smooth transitions */
+:host-context(seki-sidebar[data-state="closed"][data-collapse-mode="icon"]) .group-header {
+  margin-top: -2rem;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* Expanded - show group title */
+:host-context(seki-sidebar[data-state="open"]) .group-header,
+:host-context(seki-sidebar:not([data-state="closed"])) .group-header {
+  margin-top: 0;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}