@sekiui/elements 0.0.55 → 0.0.57

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

@@ -0,0 +1,68 @@
+/**
+ * SekiSidebarTrigger Styles
+ */
+
+:host {
+  display: inline-block;
+}
+
+.trigger-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  color: var(--sidebar-foreground);
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
+}
+
+.trigger-button:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-color: var(--sidebar-border);
+}
+
+.trigger-button:active:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.trigger-button:focus-visible {
+  outline: 2px solid var(--sidebar-primary);
+  outline-offset: 2px;
+}
+
+.trigger-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.trigger-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.trigger-icon-default {
+  font-size: 1.25rem;
+}
+
+/* Dark mode */
+:host-context([data-theme="dark"]) .trigger-button:hover:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+:host-context([data-theme="dark"]) .trigger-button:active:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  .trigger-button {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,175 @@
+/**
+ * SekiSidebarTrigger Component
+ * @description Toggle button for opening/closing the sidebar
+ * Manages focus, keyboard activation (Space, Enter), and ARIA attributes
+ * @component
+ * @example
+ * <seki-sidebar-trigger aria-label="Toggle sidebar"></seki-sidebar-trigger>
+ */
+import { h, Host } from "@stencil/core";
+export class SekiSidebarTrigger {
+    constructor() {
+        /**
+         * Accessibility label for the button
+         * @type {string}
+         * @default 'Toggle sidebar'
+         */
+        this.ariaLabel = 'Toggle sidebar';
+        /**
+         * Track the sidebar's open state for aria-expanded attribute
+         */
+        this.isOpen = true;
+        /**
+         * Reference to parent sidebar
+         */
+        this.parentSidebar = null;
+        /**
+         * Handle button click - finds parent seki-sidebar or nearest sidebar in document
+         */
+        this.handleClick = async () => {
+            // First try to find parent sidebar
+            let sidebar = this.parentSidebar;
+            // If no parent found, look for nearest sidebar in the document
+            if (!sidebar) {
+                sidebar = document.querySelector('seki-sidebar');
+                this.parentSidebar = sidebar;
+            }
+            if (!sidebar)
+                return;
+            const state = await sidebar.getState();
+            await sidebar.setState({ isOpen: !state.isOpen });
+        };
+        /**
+         * Handle keyboard activation (Space, Enter)
+         */
+        this.handleKeyDown = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                this.handleClick();
+            }
+        };
+    }
+    /**
+     * Initialize - find parent sidebar and listen to state changes
+     */
+    connectedCallback() {
+        var _a, _b;
+        this.parentSidebar = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('seki-sidebar');
+        if (!this.parentSidebar) {
+            this.parentSidebar = document.querySelector('seki-sidebar');
+        }
+        // Get initial state from parent sidebar
+        if (this.parentSidebar) {
+            const sidebarEl = this.parentSidebar;
+            (_b = sidebarEl.getState) === null || _b === void 0 ? void 0 : _b.call(sidebarEl).then(state => {
+                this.isOpen = state.isOpen;
+            });
+        }
+    }
+    /**
+     * Listen to openChange event from parent sidebar
+     */
+    handleOpenChange(event) {
+        // Update local state when parent sidebar changes
+        if (event.detail && typeof event.detail.isOpen === 'boolean') {
+            this.isOpen = event.detail.isOpen;
+        }
+    }
+    /**
+     * Render the component
+     */
+    render() {
+        return (h(Host, { key: 'f031872df0db62782e7736739a4ec21890bedb5a' }, h("button", { key: 'f673e56848c712deca471b9b28c7f52ba346f809', class: "trigger-button", "aria-expanded": this.isOpen, "aria-label": this.ariaLabel, onClick: this.handleClick, onKeyDown: this.handleKeyDown, type: "button" }, this.icon && h("span", { key: '17a389fc5025ce39e9c7e7ac4711efa7bc8477ee', class: "trigger-icon", innerHTML: this.icon }), !this.icon && h("span", { key: 'a2e7692e62bc23ee325d2f3e02bf34a2900d1873', class: "trigger-icon-default" }, "\u2630"))));
+    }
+    static get is() { return "seki-sidebar-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar-trigger.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar-trigger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidebarTriggerProps['ariaLabel']",
+                    "resolved": "string | undefined",
+                    "references": {
+                        "SidebarTriggerProps": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::SidebarTriggerProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "'Toggle sidebar'"
+                        }],
+                    "text": "Accessibility label for the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'Toggle sidebar'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidebarTriggerProps['icon']",
+                    "resolved": "string | undefined",
+                    "references": {
+                        "SidebarTriggerProps": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::SidebarTriggerProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Icon name or SVG path (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "openChange",
+                "method": "handleOpenChange",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,352 @@
+/**
+ * Sidebar Component Styles
+ * @description Scoped styles for seki-sidebar and sub-components
+ * Includes design tokens for theming, responsive breakpoints, and accessibility
+ */
+
+/* ============================================================================
+   CSS Custom Properties (Design Tokens)
+   ============================================================================ */
+
+:host {
+  /* Background and text colors */
+  --sidebar-bg: var(--color-sidebar-bg, #f9fafb);
+  --sidebar-foreground: var(--color-sidebar-foreground, #1f2937);
+  --sidebar-primary: var(--color-sidebar-primary, #2563eb);
+  --sidebar-accent: var(--color-sidebar-accent, #10b981);
+  --sidebar-border: var(--color-sidebar-border, #e5e7eb);
+
+  /* Sizing */
+  --sidebar-width: var(--sizing-sidebar-width, 250px);
+  --sidebar-collapsed-width: var(--sizing-sidebar-collapsed-width, 64px);
+
+  /* Spacing */
+  --sidebar-padding: var(--spacing-sidebar-padding, 1rem);
+  --sidebar-gap: var(--spacing-sidebar-gap, 0.5rem);
+  --sidebar-item-padding: var(--spacing-sidebar-item-padding, 0.75rem 1rem);
+  --sidebar-item-height: var(--sizing-sidebar-item-height, 44px);
+
+  /* Styling */
+  --sidebar-item-border-radius: var(--radius-sidebar-item, 0.375rem);
+  --sidebar-transition-duration: var(--duration-sidebar-transition, 200ms);
+
+  /* Z-index layers */
+  --sidebar-z-header: 10;
+  --sidebar-z-footer: 10;
+  --sidebar-z-content: 1;
+  --sidebar-z-overlay: 40;
+}
+
+/* Dark mode overrides */
+:host([data-theme="dark"]),
+:host-context([data-theme="dark"]) {
+  --sidebar-bg: var(--color-sidebar-bg-dark, #1f2937);
+  --sidebar-foreground: var(--color-sidebar-foreground-dark, #f1f5f9);
+  --sidebar-primary: var(--color-sidebar-primary-dark, #60a5fa);
+  --sidebar-accent: var(--color-sidebar-accent-dark, #34d399);
+  --sidebar-border: var(--color-sidebar-border-dark, #374151);
+}
+
+/* ============================================================================
+   Main Container Layout
+   ============================================================================ */
+
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: var(--sidebar-width);
+  background-color: var(--sidebar-bg);
+  color: var(--sidebar-foreground);
+  border-right: 1px solid var(--sidebar-border);
+  transition: width 200ms ease-linear;
+  contain: layout style paint;
+}
+
+:host([data-state="closed"][data-collapse-mode="icon"]) {
+  width: var(--sidebar-collapsed-width);
+}
+
+/* Group-based selectors for child components to respond to sidebar state */
+:host([data-collapsible="icon"]) {
+  --group-collapsible: icon;
+}
+
+:host([data-collapsible="offcanvas"]) {
+  --group-collapsible: offcanvas;
+}
+
+:host([data-collapsible="none"]) {
+  --group-collapsible: none;
+}
+
+:host([data-state="closed"][data-collapse-mode="offcanvas"]) {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: var(--sidebar-width);
+  transform: translateX(-100%);
+  border-right: none;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+  z-index: var(--sidebar-z-overlay);
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host([data-state="open"][data-collapse-mode="offcanvas"]) {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: var(--sidebar-width);
+  transform: translateX(0);
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+  z-index: var(--sidebar-z-overlay);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Floating variant */
+:host([data-variant="floating"]) {
+  position: absolute;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--sidebar-border);
+}
+
+/* Inset variant - integrated into layout */
+:host([data-variant="inset"]) {
+  border-right: 1px solid var(--sidebar-border);
+}
+
+/* Container for all sidebar content */
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* ============================================================================
+   Header Section (Sticky Top)
+   ============================================================================ */
+
+.sidebar-header {
+  flex-shrink: 0;
+  padding: var(--sidebar-padding);
+  border-bottom: 1px solid var(--sidebar-border);
+  position: sticky;
+  top: 0;
+  z-index: var(--sidebar-z-header);
+  background-color: var(--sidebar-bg);
+}
+
+.sidebar-header:empty {
+  display: none;
+}
+
+/* Hide text in header when collapsed to icon mode */
+:host([data-state="closed"][data-collapse-mode="icon"]) .sidebar-header {
+  padding: 0.5rem;
+  justify-content: center;
+  align-items: center;
+}
+
+:host([data-state="closed"][data-collapse-mode="icon"]) .sidebar-header > * {
+  transition: margin 200ms ease-linear, opacity 200ms ease-linear;
+}
+
+:host([data-state="closed"][data-collapse-mode="icon"]) .sidebar-header > :not(svg) {
+  margin: -0.5rem 0;
+  opacity: 0;
+}
+
+/* ============================================================================
+   Content Section (Scrollable)
+   ============================================================================ */
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--sidebar-padding);
+  gap: var(--sidebar-gap);
+  display: flex;
+  flex-direction: column;
+
+  /* Smooth scroll behavior */
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+
+  /* Allow horizontal ellipsis in collapsed state */
+  min-width: 0;
+}
+
+/* Scrollbar styling */
+.sidebar-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.sidebar-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb {
+  background-color: var(--sidebar-accent);
+  border-radius: 4px;
+  opacity: 0.5;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb:hover {
+  opacity: 0.7;
+}
+
+/* ============================================================================
+   Footer Section (Sticky Bottom)
+   ============================================================================ */
+
+.sidebar-footer {
+  flex-shrink: 0;
+  padding: var(--sidebar-padding);
+  border-top: 1px solid var(--sidebar-border);
+  position: sticky;
+  bottom: 0;
+  z-index: var(--sidebar-z-footer);
+  background-color: var(--sidebar-bg);
+}
+
+.sidebar-footer:empty {
+  display: none;
+}
+
+/* Hide text in footer when collapsed to icon mode, but keep first child (avatar) */
+:host([data-state="closed"][data-collapse-mode="icon"]) .sidebar-footer {
+  padding: 0.5rem;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+:host([data-state="closed"][data-collapse-mode="icon"]) .sidebar-footer > * {
+  transition: margin 200ms ease-linear, opacity 200ms ease-linear;
+}
+
+:host([data-state="closed"][data-collapse-mode="icon"]) .sidebar-footer > :not(:first-child) {
+  margin: -0.5rem 0;
+  opacity: 0;
+}
+
+/* ============================================================================
+   Responsive Behavior
+   ============================================================================ */
+
+/* Mobile devices (<768px default) */
+@media (max-width: 767px) {
+  :host {
+    /* Default to offcanvas on mobile */
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    width: var(--sidebar-width);
+    transform: translateX(-100%);
+    transition: transform var(--sidebar-transition-duration) ease-in-out;
+    border-right: none;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+    z-index: var(--sidebar-z-overlay);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host([data-state="open"]) {
+    transform: translateX(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  :host([data-collapse-mode="none"]) {
+    /* Fixed sidebar on mobile */
+    position: static;
+    width: 100%;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--sidebar-border);
+  }
+}
+
+/* Tablet devices (768px - 1024px) */
+@media (min-width: 768px) and (max-width: 1023px) {
+  :host {
+    width: var(--sidebar-width);
+  }
+
+  :host([data-state="closed"][data-collapse-mode="icon"]) {
+    width: var(--sidebar-collapsed-width);
+  }
+}
+
+/* Desktop devices (1024px+) */
+@media (min-width: 1024px) {
+  :host {
+    position: relative;
+    width: var(--sidebar-width);
+    height: 100%;
+    transform: none;
+    z-index: auto;
+  }
+}
+
+/* ============================================================================
+   Accessibility Features
+   ============================================================================ */
+
+/* Focus indicators */
+:host-context(:focus-visible),
+:host:focus-visible {
+  outline: 2px solid var(--sidebar-primary);
+  outline-offset: -2px;
+}
+
+/* Reduce motion preference */
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    transition: none;
+  }
+
+  .sidebar-content {
+    scroll-behavior: auto;
+  }
+}
+
+/* Print styles */
+@media print {
+  :host {
+    display: none;
+  }
+}
+
+/* ============================================================================
+   High contrast mode
+   ============================================================================ */
+
+@media (prefers-contrast: more) {
+  :host {
+    border-width: 2px;
+  }
+
+  .sidebar-header,
+  .sidebar-footer {
+    border-width: 2px;
+  }
+}
+
+/* ============================================================================
+   Container queries (future enhancement)
+   ============================================================================ */
+
+@supports (container-type: inline-size) {
+  :host {
+    container-type: inline-size;
+  }
+}