@sekiui/elements 0.0.59 → 0.0.61

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

@@ -0,0 +1,46 @@
+import { h } from "@stencil/core";
+/**
+ * seki-sheet-trigger: Button/element that opens the sheet
+ *
+ * @component SheetTrigger
+ */
+export class SekiSheetTrigger {
+    constructor() {
+        this.handleClick = () => {
+            this.triggerClick.emit();
+        };
+    }
+    render() {
+        return (h("div", { key: '5da1ecda4ab9bd031ca04447ababc5f4f7f6bece', class: "seki-sheet-trigger", part: "trigger", onClick: this.handleClick }, h("slot", { key: '112f37fa5a4c2aa564fe7a72e2e864f08fc10a32' })));
+    }
+    static get is() { return "seki-sheet-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "triggerClick",
+                "name": "triggerClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the trigger is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,244 @@
+/* Sheet Component Styles with Design Tokens */
+
+:host {
+  --seki-sheet-bg: var(--color-background, #ffffff);
+  --seki-sheet-border: var(--color-border, hsl(220 13% 91%));
+  --seki-sheet-text: var(--color-text-primary, hsl(220 9% 20%));
+  --seki-sheet-text-muted: var(--color-text-secondary, hsl(220 9% 46%));
+  --seki-sheet-overlay-bg: rgba(0, 0, 0, 0.5);
+  --seki-sheet-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --seki-sheet-font-family: var(--seki-font-sans, system-ui, -apple-system, sans-serif);
+  --seki-sheet-width: 24rem;
+  --seki-sheet-height: 24rem;
+  --seki-sheet-z-index: 50;
+  --seki-sheet-animation-duration: 0.3s;
+
+  display: contents;
+}
+
+/* Dark mode support */
+:host([data-theme='dark']) {
+  --seki-sheet-bg: var(--color-background-dark, hsl(215 20% 10%));
+  --seki-sheet-border: var(--color-border-dark, hsl(215 20% 25%));
+  --seki-sheet-text: var(--color-text-primary-dark, hsl(215 20% 85%));
+  --seki-sheet-text-muted: var(--color-text-secondary-dark, hsl(215 20% 65%));
+  --seki-sheet-overlay-bg: rgba(0, 0, 0, 0.7);
+}
+
+/* Root sheet container */
+.seki-sheet {
+  display: contents;
+}
+
+/* Overlay */
+.seki-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--seki-sheet-overlay-bg);
+  z-index: var(--seki-sheet-z-index);
+  animation: fadeIn var(--seki-sheet-animation-duration) ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Trigger */
+.seki-sheet-trigger {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+/* Content container */
+.seki-sheet-content {
+  position: fixed;
+  z-index: calc(var(--seki-sheet-z-index) + 1);
+  background: var(--seki-sheet-bg);
+  box-shadow: var(--seki-sheet-shadow);
+  font-family: var(--seki-sheet-font-family);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+/* Right side (default) */
+.seki-sheet-content--right {
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--seki-sheet-width);
+  max-width: 100%;
+  border-left: 1px solid var(--seki-sheet-border);
+  animation: slideInRight var(--seki-sheet-animation-duration) ease;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Left side */
+.seki-sheet-content--left {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: var(--seki-sheet-width);
+  max-width: 100%;
+  border-right: 1px solid var(--seki-sheet-border);
+  animation: slideInLeft var(--seki-sheet-animation-duration) ease;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Top side */
+.seki-sheet-content--top {
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: var(--seki-sheet-height);
+  max-height: 100%;
+  border-bottom: 1px solid var(--seki-sheet-border);
+  animation: slideInTop var(--seki-sheet-animation-duration) ease;
+}
+
+@keyframes slideInTop {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* Bottom side */
+.seki-sheet-content--bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: var(--seki-sheet-height);
+  max-height: 100%;
+  border-top: 1px solid var(--seki-sheet-border);
+  animation: slideInBottom var(--seki-sheet-animation-duration) ease;
+}
+
+@keyframes slideInBottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* Close button (built into content) */
+.seki-sheet-close-button {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--seki-sheet-text-muted);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+}
+
+.seki-sheet-close-button:hover {
+  opacity: 1;
+}
+
+.seki-sheet-close-button:focus-visible {
+  outline: 2px solid var(--color-primary, hsl(220 90% 56%));
+  outline-offset: 2px;
+}
+
+.seki-sheet-close-button svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Header */
+.seki-sheet-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 1.5rem;
+  padding-right: 3rem; /* Space for close button */
+}
+
+/* Title */
+.seki-sheet-title {
+  margin: 0;
+  font-size: var(--seki-font-size-lg, 18px);
+  font-weight: var(--seki-font-weight-semibold, 600);
+  color: var(--seki-sheet-text);
+  line-height: 1.4;
+}
+
+/* Description */
+.seki-sheet-description {
+  margin: 0;
+  font-size: var(--seki-font-size-sm, 14px);
+  color: var(--seki-sheet-text-muted);
+  line-height: 1.5;
+}
+
+/* Footer */
+.seki-sheet-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1.5rem;
+  margin-top: auto;
+}
+
+@media (min-width: 640px) {
+  .seki-sheet-footer {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+/* Close wrapper */
+.seki-sheet-close {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-sheet-overlay,
+  .seki-sheet-content--right,
+  .seki-sheet-content--left,
+  .seki-sheet-content--top,
+  .seki-sheet-content--bottom,
+  .seki-sheet-close-button {
+    animation: none;
+    transition: none;
+  }
+}

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

@@ -0,0 +1,195 @@
+import { h } from "@stencil/core";
+/**
+ * seki-sheet: Root sheet component (slide-out panel)
+ *
+ * @component Sheet
+ * @example
+ * <seki-sheet>
+ *   <seki-sheet-trigger>
+ *     <seki-button>Open Sheet</seki-button>
+ *   </seki-sheet-trigger>
+ *   <seki-sheet-content>
+ *     <seki-sheet-header>
+ *       <seki-sheet-title>Title</seki-sheet-title>
+ *       <seki-sheet-description>Description</seki-sheet-description>
+ *     </seki-sheet-header>
+ *     Content here
+ *   </seki-sheet-content>
+ * </seki-sheet>
+ */
+export class SekiSheet {
+    constructor() {
+        /**
+         * Internal state for sheet open/closed
+         */
+        this.isOpen = false;
+    }
+    /**
+     * Opens the sheet
+     */
+    async open() {
+        this.isOpen = true;
+        this.sheetOpen.emit();
+    }
+    /**
+     * Closes the sheet
+     */
+    async close() {
+        this.isOpen = false;
+        this.sheetClose.emit();
+    }
+    /**
+     * Toggles the sheet
+     */
+    async toggle() {
+        if (this.isOpen) {
+            await this.close();
+        }
+        else {
+            await this.open();
+        }
+    }
+    handleTriggerClick() {
+        this.toggle();
+    }
+    handleCloseSheet() {
+        this.close();
+    }
+    handleKeydown(ev) {
+        if (this.isOpen && ev.key === 'Escape') {
+            this.close();
+        }
+    }
+    render() {
+        return (h("div", { key: 'c9d0c8507da0d67e64c547dc716eb75906ba706f', class: {
+                'seki-sheet': true,
+                'seki-sheet--open': this.isOpen,
+            }, part: "sheet" }, h("slot", { key: '9402454749a8f805fde8b4650155b381695b139a' }), this.isOpen && (h("div", { key: '97765a21368e7a4f00857dd1db4ddd6825226dc7', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.close() }))));
+    }
+    static get is() { return "seki-sheet"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sheetOpen",
+                "name": "sheetOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the sheet opens"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "sheetClose",
+                "name": "sheetClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the sheet closes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the sheet",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the sheet",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the sheet",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "triggerClick",
+                "method": "handleTriggerClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "closeSheet",
+                "method": "handleCloseSheet",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}