@sekiui/elements 0.0.65 → 0.0.70

package/dist/collection/components/resizable/seki-resizable-panel.js

@@ -0,0 +1,426 @@
+// src/components/resizable/seki-resizable-panel.tsx
+import { h, Host } from "@stencil/core";
+let panelIdCounter = 0;
+/**
+ * Resizable panel - individual content panel with size constraints
+ *
+ * @slot - Panel content
+ *
+ * @part panel - The panel container
+ */
+export class SekiResizablePanel {
+    constructor() {
+        this.panelId = '';
+        this.groupElement = null;
+        /**
+         * Minimum size as percentage
+         */
+        this.minSize = 0;
+        /**
+         * Maximum size as percentage
+         */
+        this.maxSize = 100;
+        /**
+         * Whether panel can collapse
+         */
+        this.collapsible = false;
+        /**
+         * Size when collapsed (percentage)
+         */
+        this.collapsedSize = 0;
+        this._size = 0;
+        this._isCollapsed = false;
+        this.handleLayoutChange = () => {
+            this.updateSize();
+        };
+    }
+    getContext() {
+        const group = this.el.closest('seki-resizable-panel-group');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return group ? group._resizableContext : null;
+    }
+    componentWillLoad() {
+        this.panelId = `panel-${++panelIdCounter}`;
+        const context = this.getContext();
+        if (context) {
+            context.registerPanel(this.panelId, {
+                defaultSize: this.defaultSize,
+                minSize: this.minSize,
+                maxSize: this.maxSize,
+                collapsible: this.collapsible,
+                collapsedSize: this.collapsedSize,
+            });
+        }
+    }
+    componentDidLoad() {
+        const group = this.el.closest('seki-resizable-panel-group');
+        if (group) {
+            this.groupElement = group;
+            group.addEventListener('sekiLayoutChange', this.handleLayoutChange);
+        }
+        this.updateSize();
+    }
+    disconnectedCallback() {
+        // Remove event listener to prevent memory leak
+        if (this.groupElement) {
+            this.groupElement.removeEventListener('sekiLayoutChange', this.handleLayoutChange);
+        }
+        // Unregister panel from group
+        const context = this.getContext();
+        if (context) {
+            context.unregisterPanel(this.panelId);
+        }
+    }
+    handleConstraintChange() {
+        const context = this.getContext();
+        if (context) {
+            // Re-register with new constraints
+            context.unregisterPanel(this.panelId);
+            context.registerPanel(this.panelId, {
+                defaultSize: this.defaultSize,
+                minSize: this.minSize,
+                maxSize: this.maxSize,
+                collapsible: this.collapsible,
+                collapsedSize: this.collapsedSize,
+            });
+        }
+    }
+    updateSize() {
+        const context = this.getContext();
+        if (context) {
+            const newSize = context.getPanelSize(this.panelId);
+            const wasCollapsed = this._isCollapsed;
+            this._isCollapsed = context.isCollapsed(this.panelId);
+            if (newSize !== this._size) {
+                this._size = newSize;
+                this.sekiResize.emit(newSize);
+            }
+            if (this._isCollapsed && !wasCollapsed) {
+                this.sekiCollapse.emit();
+            }
+            else if (!this._isCollapsed && wasCollapsed) {
+                this.sekiExpand.emit();
+            }
+        }
+    }
+    /**
+     * Collapse the panel
+     */
+    async collapse() {
+        const context = this.getContext();
+        if (context && this.collapsible) {
+            context.collapsePanel(this.panelId);
+        }
+    }
+    /**
+     * Expand the panel
+     */
+    async expand() {
+        const context = this.getContext();
+        if (context) {
+            context.expandPanel(this.panelId);
+        }
+    }
+    /**
+     * Get current size
+     */
+    async getSize() {
+        return this._size;
+    }
+    /**
+     * Check if collapsed
+     */
+    async isCollapsed() {
+        return this._isCollapsed;
+    }
+    /**
+     * Get panel ID (for internal use)
+     */
+    async getPanelId() {
+        return this.panelId;
+    }
+    render() {
+        return (h(Host, { key: 'e96a7712c2c2d12b7d2dac6b25d2c7a3a97ee833', style: {
+                flexBasis: `${this._size}%`,
+                flexGrow: '0',
+                flexShrink: '0',
+            } }, h("div", { key: 'f109b98ff2111304024390748b3cbc9ffcfa2e82', part: "panel", role: "region", class: {
+                'resizable-panel': true,
+                'resizable-panel--collapsed': this._isCollapsed,
+            } }, h("slot", { key: 'aa3877e54d7e62de29c65afc4e8764c12527b518' }))));
+    }
+    static get is() { return "seki-resizable-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-resizable-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-resizable-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "defaultSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Default size as percentage (0-100)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-size"
+            },
+            "minSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum size as percentage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-size",
+                "defaultValue": "0"
+            },
+            "maxSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum size as percentage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-size",
+                "defaultValue": "100"
+            },
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether panel can collapse"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsible",
+                "defaultValue": "false"
+            },
+            "collapsedSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size when collapsed (percentage)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsed-size",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_size": {},
+            "_isCollapsed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiResize",
+                "name": "sekiResize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when this panel resizes"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "sekiCollapse",
+                "name": "sekiCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when panel collapses"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "sekiExpand",
+                "name": "sekiExpand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when panel expands"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "collapse": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Collapse the panel",
+                    "tags": []
+                }
+            },
+            "expand": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Expand the panel",
+                    "tags": []
+                }
+            },
+            "getSize": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Get current size",
+                    "tags": []
+                }
+            },
+            "isCollapsed": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Check if collapsed",
+                    "tags": []
+                }
+            },
+            "getPanelId": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get panel ID (for internal use)",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "minSize",
+                "methodName": "handleConstraintChange"
+            }, {
+                "propName": "maxSize",
+                "methodName": "handleConstraintChange"
+            }, {
+                "propName": "collapsible",
+                "methodName": "handleConstraintChange"
+            }, {
+                "propName": "collapsedSize",
+                "methodName": "handleConstraintChange"
+            }];
+    }
+}

package/dist/collection/components/resizable/types.js

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

package/dist/collection/components/scroll-area/seki-scroll-area.css

@@ -0,0 +1,74 @@
+/* Scroll Area Component Styles
+ * Hides native scrollbars and provides container for custom scrollbar elements
+ */
+
+:host {
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Viewport - the scrollable container */
+.viewport {
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+
+  /* Hide native scrollbars across browsers */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge legacy */
+  -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
+}
+
+/* Hide scrollbars in Chrome/Safari/Edge Chromium */
+.viewport::-webkit-scrollbar {
+  display: none;
+}
+
+/* Focus styles - no outline by default */
+.viewport:focus {
+  outline: none;
+}
+
+/* Focus visible for keyboard navigation */
+.viewport:focus-visible {
+  outline: 2px solid var(--seki-color-ring, hsl(240, 5%, 64.9%));
+  outline-offset: -2px;
+}
+
+/* Content wrapper - ensures proper sizing */
+.content {
+  min-width: 100%;
+  min-height: 100%;
+}
+
+/* Corner spacing when both scrollbars are present */
+:host([data-has-vertical-overflow][data-has-horizontal-overflow]) .viewport {
+  padding-right: 12px;
+  padding-bottom: 12px;
+}
+
+/* Accessibility: High contrast mode support */
+@media (prefers-contrast: more) {
+  .viewport:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .viewport {
+    scroll-behavior: auto;
+  }
+}
+
+/* Dark mode focus ring color */
+:host-context([data-theme="dark"]) .viewport:focus-visible {
+  outline-color: var(--seki-color-ring, hsl(240, 5%, 45%));
+}
+
+@media (prefers-color-scheme: dark) {
+  :host(:not([data-theme="light"])) .viewport:focus-visible {
+    outline-color: var(--seki-color-ring, hsl(240, 5%, 45%));
+  }
+}