@sekiui/elements 0.0.59 → 0.0.61

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

@@ -383,6 +383,80 @@
   --seki-radius-xl: 1rem;      /* 16px */
 }
 
+/**
+ * SekiUI Design Tokens - Sidebar
+ * Based on shadcn/ui sidebar component
+ */
+
+/* =============================================================================
+   SIDEBAR TOKENS (Layer 3: Component-Specific)
+   ============================================================================= */
+
+:host {
+  /* Sidebar Sizing */
+  --seki-sidebar-width: 16rem;
+  --seki-sidebar-width-icon: 3rem;
+  --seki-sidebar-width-mobile: 18rem;
+
+  /* Sidebar Colors - Light Mode */
+  --seki-sidebar-background: hsl(0, 0%, 98.5%);
+  --seki-sidebar-foreground: hsl(0, 0%, 9%);
+  --seki-sidebar-primary: hsl(0, 0%, 12%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 97%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 12%);
+  --seki-sidebar-border: hsl(0, 0%, 90%);
+  --seki-sidebar-ring: hsl(0, 0%, 64%);
+
+  /* Menu Button Sizing */
+  --seki-sidebar-menu-button-height: 2rem;
+  --seki-sidebar-menu-button-height-lg: 3rem;
+  --seki-sidebar-menu-button-padding: 0.5rem;
+  --seki-sidebar-menu-button-gap: 0.5rem;
+  --seki-sidebar-menu-button-radius: var(--seki-radius-md, 0.375rem);
+
+  /* Menu Sub */
+  --seki-sidebar-menu-sub-padding-left: 1.75rem;
+  --seki-sidebar-menu-sub-border-width: 1px;
+
+  /* Group */
+  --seki-sidebar-group-padding: 0.5rem;
+  --seki-sidebar-group-label-height: 2rem;
+  --seki-sidebar-group-label-padding: 0.5rem;
+
+  /* Header/Footer */
+  --seki-sidebar-header-height: auto;
+  --seki-sidebar-footer-height: auto;
+  --seki-sidebar-header-padding: 0.5rem;
+  --seki-sidebar-footer-padding: 0.5rem;
+
+  /* Content */
+  --seki-sidebar-content-padding: 0.5rem;
+
+  /* Rail */
+  --seki-sidebar-rail-width: 1rem;
+
+  /* Transitions */
+  --seki-sidebar-transition-duration: 200ms;
+  --seki-sidebar-transition-timing: ease-in-out;
+
+  /* Mobile */
+  --seki-sidebar-mobile-breakpoint: 768px;
+  --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);
+}
+
+/* Dark Mode Sidebar Tokens */
+:host([data-theme='dark']) {
+  --seki-sidebar-background: hsl(0, 0%, 12%);
+  --seki-sidebar-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-primary: hsl(264, 100%, 60%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 18%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-border: hsla(0, 0%, 100%, 0.1);
+  --seki-sidebar-ring: hsl(0, 0%, 40%);
+}
+
 
 
 :host {

package/dist/collection/components/select-group/seki-select-group.js

@@ -11,7 +11,7 @@ export class SekiSelectGroup {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '64132ea9cd3ff6aaa32471c06d40c4cabb6f4c0e' }, h("div", { key: 'e6303076210a7bbe91fd731e2d65bbf03e889340', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: 'cc14401bbb24c24199ac1f9b245190e85b8be1bf', class: "group-separator", "aria-hidden": "true" }), h("div", { key: 'f9457100bafadee24178984f04e6b2e44898d480', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'f8e5530dc70464609ae3df68dacd6780d41f0543', name: "label" }, this.label)), h("div", { key: '39db5505344715019ddc5fbc0c70121cbaa6f7d9', class: "group-options" }, h("slot", { key: 'c9a35e3f34c28818fdf581eb9f982de36e1a837f' })))));
+        return (h(Host, { key: 'a366e0cdcf720f0f1f4ee79daa0bed3ae4c12754' }, h("div", { key: '44f90562d6b6f4f620e4f9362bc8a917bbf13ac6', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: 'aad37ef4197ea7afb23a161ef3987a6ac19c4617', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '49eecdfb4d951fbcbc7f97f59bc320a7ffb732c6', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: '4c781dc892e57d4f78b5339d06cd26f654d6e058', name: "label" }, this.label)), h("div", { key: '06dd0c65eddbf3e53b9f2cad7189e58dd9c30b0c', class: "group-options" }, h("slot", { key: '2f249ea40e7fcbd35bb05ca8b7fec66cfc81f819' })))));
     }
     static get is() { return "seki-select-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-option/seki-select-option.css

@@ -383,6 +383,80 @@
   --seki-radius-xl: 1rem;      /* 16px */
 }
 
+/**
+ * SekiUI Design Tokens - Sidebar
+ * Based on shadcn/ui sidebar component
+ */
+
+/* =============================================================================
+   SIDEBAR TOKENS (Layer 3: Component-Specific)
+   ============================================================================= */
+
+:host {
+  /* Sidebar Sizing */
+  --seki-sidebar-width: 16rem;
+  --seki-sidebar-width-icon: 3rem;
+  --seki-sidebar-width-mobile: 18rem;
+
+  /* Sidebar Colors - Light Mode */
+  --seki-sidebar-background: hsl(0, 0%, 98.5%);
+  --seki-sidebar-foreground: hsl(0, 0%, 9%);
+  --seki-sidebar-primary: hsl(0, 0%, 12%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 97%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 12%);
+  --seki-sidebar-border: hsl(0, 0%, 90%);
+  --seki-sidebar-ring: hsl(0, 0%, 64%);
+
+  /* Menu Button Sizing */
+  --seki-sidebar-menu-button-height: 2rem;
+  --seki-sidebar-menu-button-height-lg: 3rem;
+  --seki-sidebar-menu-button-padding: 0.5rem;
+  --seki-sidebar-menu-button-gap: 0.5rem;
+  --seki-sidebar-menu-button-radius: var(--seki-radius-md, 0.375rem);
+
+  /* Menu Sub */
+  --seki-sidebar-menu-sub-padding-left: 1.75rem;
+  --seki-sidebar-menu-sub-border-width: 1px;
+
+  /* Group */
+  --seki-sidebar-group-padding: 0.5rem;
+  --seki-sidebar-group-label-height: 2rem;
+  --seki-sidebar-group-label-padding: 0.5rem;
+
+  /* Header/Footer */
+  --seki-sidebar-header-height: auto;
+  --seki-sidebar-footer-height: auto;
+  --seki-sidebar-header-padding: 0.5rem;
+  --seki-sidebar-footer-padding: 0.5rem;
+
+  /* Content */
+  --seki-sidebar-content-padding: 0.5rem;
+
+  /* Rail */
+  --seki-sidebar-rail-width: 1rem;
+
+  /* Transitions */
+  --seki-sidebar-transition-duration: 200ms;
+  --seki-sidebar-transition-timing: ease-in-out;
+
+  /* Mobile */
+  --seki-sidebar-mobile-breakpoint: 768px;
+  --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);
+}
+
+/* Dark Mode Sidebar Tokens */
+:host([data-theme='dark']) {
+  --seki-sidebar-background: hsl(0, 0%, 12%);
+  --seki-sidebar-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-primary: hsl(264, 100%, 60%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 18%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-border: hsla(0, 0%, 100%, 0.1);
+  --seki-sidebar-ring: hsl(0, 0%, 40%);
+}
+
 
 
 :host {

package/dist/collection/components/select-option/seki-select-option.js

@@ -75,7 +75,7 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         const isSelected = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isValueSelected(this.value)) || false;
         const isFocused = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.focusedOptionValue) === this.value;
-        return (h(Host, { key: 'a094d52197f71ea608c5d6864a9e1144c5cbb214' }, h("div", { key: '664ef7d213d976c25575dacec8fedf4270127894', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: 'bf8997e6251d4bb205631c316e0bb61cc7dacafc', class: "option-label" }, h("slot", { key: 'cac04b726bb0a021e019ec305dbf133f9ec6eafc' })), isSelected && (h("span", { key: '07e161e78770a780978e82e372d982a5ed8ee183', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '3ff2360575e24d76753d9c73690fc08851f7d2ce', name: "selected-indicator" }, h("svg", { key: '2379ac109dd1a3acb2645d3ea9040329670b5ce4', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '99acd47c4077be2b703022441a283b74508271c7', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '353cf2552f1b11fbb1dac56a52c1ec910e4dacb9' }, h("div", { key: 'bc36cd890f160965975b2210d0f0e5650c31a593', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: 'b22d553ac28276d1a7c62fbac329c63d1944a1a5', class: "option-label" }, h("slot", { key: '3db6becae65edac405f71f1b13e8687149868401' })), isSelected && (h("span", { key: '136a0a6e05eaea43335e6e9c2c87e4c6d9ac30ac', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: 'b3ae2593aec93153b53f701ae4014c62d2d211b4', name: "selected-indicator" }, h("svg", { key: '6b4a097f8d2d8910935d475c62a9264953180ac9', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b4740a35ddff78c005a15b02cfc380c462b4f332', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "seki-select-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -383,6 +383,80 @@
   --seki-radius-xl: 1rem;      /* 16px */
 }
 
+/**
+ * SekiUI Design Tokens - Sidebar
+ * Based on shadcn/ui sidebar component
+ */
+
+/* =============================================================================
+   SIDEBAR TOKENS (Layer 3: Component-Specific)
+   ============================================================================= */
+
+:host {
+  /* Sidebar Sizing */
+  --seki-sidebar-width: 16rem;
+  --seki-sidebar-width-icon: 3rem;
+  --seki-sidebar-width-mobile: 18rem;
+
+  /* Sidebar Colors - Light Mode */
+  --seki-sidebar-background: hsl(0, 0%, 98.5%);
+  --seki-sidebar-foreground: hsl(0, 0%, 9%);
+  --seki-sidebar-primary: hsl(0, 0%, 12%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 97%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 12%);
+  --seki-sidebar-border: hsl(0, 0%, 90%);
+  --seki-sidebar-ring: hsl(0, 0%, 64%);
+
+  /* Menu Button Sizing */
+  --seki-sidebar-menu-button-height: 2rem;
+  --seki-sidebar-menu-button-height-lg: 3rem;
+  --seki-sidebar-menu-button-padding: 0.5rem;
+  --seki-sidebar-menu-button-gap: 0.5rem;
+  --seki-sidebar-menu-button-radius: var(--seki-radius-md, 0.375rem);
+
+  /* Menu Sub */
+  --seki-sidebar-menu-sub-padding-left: 1.75rem;
+  --seki-sidebar-menu-sub-border-width: 1px;
+
+  /* Group */
+  --seki-sidebar-group-padding: 0.5rem;
+  --seki-sidebar-group-label-height: 2rem;
+  --seki-sidebar-group-label-padding: 0.5rem;
+
+  /* Header/Footer */
+  --seki-sidebar-header-height: auto;
+  --seki-sidebar-footer-height: auto;
+  --seki-sidebar-header-padding: 0.5rem;
+  --seki-sidebar-footer-padding: 0.5rem;
+
+  /* Content */
+  --seki-sidebar-content-padding: 0.5rem;
+
+  /* Rail */
+  --seki-sidebar-rail-width: 1rem;
+
+  /* Transitions */
+  --seki-sidebar-transition-duration: 200ms;
+  --seki-sidebar-transition-timing: ease-in-out;
+
+  /* Mobile */
+  --seki-sidebar-mobile-breakpoint: 768px;
+  --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);
+}
+
+/* Dark Mode Sidebar Tokens */
+:host([data-theme='dark']) {
+  --seki-sidebar-background: hsl(0, 0%, 12%);
+  --seki-sidebar-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-primary: hsl(264, 100%, 60%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 18%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-border: hsla(0, 0%, 100%, 0.1);
+  --seki-sidebar-ring: hsl(0, 0%, 40%);
+}
+
 
 
 :host {

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

@@ -0,0 +1,48 @@
+/* Separator Component Styles with Design Tokens */
+
+:host {
+  /* Border color token */
+  --seki-separator-color: var(--color-border, hsl(220 13% 91%));
+
+  /* Sizing tokens */
+  --seki-separator-thickness: 1px;
+
+  display: block;
+}
+
+/* Vertical orientation requires explicit height from parent */
+:host([orientation='vertical']) {
+  display: inline-block;
+  height: 100%;
+}
+
+/* Dark mode support */
+:host([data-theme='dark']) {
+  --seki-separator-color: var(--color-border-dark, hsl(215 20% 25%));
+}
+
+/* Base separator styles */
+.seki-separator {
+  background-color: var(--seki-separator-color);
+  flex-shrink: 0;
+}
+
+/* Horizontal separator (default) */
+.seki-separator--horizontal {
+  width: 100%;
+  height: var(--seki-separator-thickness);
+}
+
+/* Vertical separator */
+.seki-separator--vertical {
+  width: var(--seki-separator-thickness);
+  height: 100%;
+  min-height: 1rem;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-separator {
+    --seki-separator-thickness: 2px;
+  }
+}

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

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

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

@@ -0,0 +1,100 @@
+import { h } from "@stencil/core";
+/**
+ * seki-separator: Visual divider for separating content
+ *
+ * @component Separator
+ * @example
+ * <seki-separator></seki-separator>
+ * <seki-separator orientation="vertical"></seki-separator>
+ */
+export class SekiSeparator {
+    constructor() {
+        /**
+         * Orientation of the separator
+         * @default 'horizontal'
+         */
+        this.orientation = 'horizontal';
+        /**
+         * Whether the separator is purely decorative
+         * When true, removes the separator from accessibility tree
+         * @default false
+         */
+        this.decorative = false;
+    }
+    render() {
+        const isVertical = this.orientation === 'vertical';
+        return (h("div", { key: 'bc2f267cb2c0598201eac86a9fe5db40833e2bfe', class: {
+                'seki-separator': true,
+                'seki-separator--horizontal': !isVertical,
+                'seki-separator--vertical': isVertical,
+            }, role: this.decorative ? 'none' : 'separator', "aria-orientation": this.decorative ? undefined : this.orientation, "data-orientation": this.orientation, part: "separator" }));
+    }
+    static get is() { return "seki-separator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-separator.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-separator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SeparatorOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\" | undefined",
+                    "references": {
+                        "SeparatorOrientation": {
+                            "location": "import",
+                            "path": "./seki-separator.interface",
+                            "id": "src/components/separator/seki-separator.interface.ts::SeparatorOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'horizontal'"
+                        }],
+                    "text": "Orientation of the separator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "decorative": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the separator is purely decorative\nWhen true, removes the separator from accessibility tree"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "decorative",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,46 @@
+import { h } from "@stencil/core";
+/**
+ * seki-sheet-close: Close button for the sheet
+ *
+ * @component SheetClose
+ */
+export class SekiSheetClose {
+    constructor() {
+        this.handleClick = () => {
+            this.closeSheet.emit();
+        };
+    }
+    render() {
+        return (h("div", { key: '311c0fb386bdfde2ea3b8185a0fdde3d9b2cde39', class: "seki-sheet-close", part: "close", onClick: this.handleClick }, h("slot", { key: 'd71178267459ab7c56ab7bb74a6a91caa24f5d7b' })));
+    }
+    static get is() { return "seki-sheet-close"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeSheet",
+                "name": "closeSheet",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when close is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,95 @@
+import { h, Host } from "@stencil/core";
+/**
+ * seki-sheet-content: Container for sheet content
+ *
+ * @component SheetContent
+ */
+export class SekiSheetContent {
+    constructor() {
+        /**
+         * Side of the screen the sheet slides in from
+         * @default 'right'
+         */
+        this.side = 'right';
+        this.handleCloseClick = () => {
+            this.closeSheet.emit();
+        };
+    }
+    componentWillLoad() {
+        // Propagate side attribute to parent for CSS targeting
+        const parent = this.el.closest('seki-sheet');
+        if (parent) {
+            parent.setAttribute('data-side', this.side || 'right');
+        }
+    }
+    render() {
+        return (h(Host, { key: 'a7a3186c487b85174956265b8f96248d894f18ce', "data-side": this.side }, h("div", { key: 'f58649f7229bfa4db98bdd970a7c324c9210b0f7', role: "dialog", "aria-modal": "true", class: {
+                'seki-sheet-content': true,
+                [`seki-sheet-content--${this.side}`]: true,
+            }, part: "content" }, h("button", { key: '8f3c0fd77e7014f83ca06d10db20a4fff19430ec', type: "button", class: "seki-sheet-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, h("svg", { key: '9ab19f10d29fdea43eacfbfd5cdc0454448c31d6', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'e110195ab15d38c431cf9dfcbef96abf08b89c58', d: "M18 6 6 18" }), h("path", { key: '1ed8568241d7d7c628131f23d751d12af50eec8b', d: "m6 6 12 12" }))), h("slot", { key: 'f18d2a5a87d5d2653ce92766bc34c4506b88d4f4' }))));
+    }
+    static get is() { return "seki-sheet-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SheetSide",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
+                    "references": {
+                        "SheetSide": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/sheet/seki-sheet-content.tsx",
+                            "id": "src/components/sheet/seki-sheet-content.tsx::SheetSide"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'right'"
+                        }],
+                    "text": "Side of the screen the sheet slides in from"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side",
+                "defaultValue": "'right'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeSheet",
+                "name": "closeSheet",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when close is requested"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-sheet-description: Descriptive text in the sheet header
+ *
+ * @component SheetDescription
+ */
+export class SekiSheetDescription {
+    render() {
+        return (h("p", { key: '578cf7969904ced76a2e60eb760c1a8cb9287e04', class: "seki-sheet-description", part: "description" }, h("slot", { key: 'a7b0ffe385d21dcb4da9ee3a5173747f384399ef' })));
+    }
+    static get is() { return "seki-sheet-description"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+}

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

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-sheet-footer: Footer section of the sheet for actions
+ *
+ * @component SheetFooter
+ */
+export class SekiSheetFooter {
+    render() {
+        return (h("div", { key: '94a068d8899bc7b4b0bbc6e8841a590f3018b773', class: "seki-sheet-footer", part: "footer" }, h("slot", { key: '984efb4ac8d84b0d455249dc3ae314eca2f0f0e2' })));
+    }
+    static get is() { return "seki-sheet-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+}

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

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-sheet-header: Header section of the sheet
+ *
+ * @component SheetHeader
+ */
+export class SekiSheetHeader {
+    render() {
+        return (h("div", { key: 'c77e5e07910a2cecf7fc8bb45dca0561eb3ce56d', class: "seki-sheet-header", part: "header" }, h("slot", { key: 'fa82acc36ad1ba04ce9a11664fb3b36dbeb61f07' })));
+    }
+    static get is() { return "seki-sheet-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+}

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

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-sheet-title: Title text in the sheet header
+ *
+ * @component SheetTitle
+ */
+export class SekiSheetTitle {
+    render() {
+        return (h("h2", { key: '9c3d557d95289dd84362bccabf780cc44c83c9a3', class: "seki-sheet-title", part: "title" }, h("slot", { key: '439a7f18092f9df5e2165a31e2ae9fffe0a34b81' })));
+    }
+    static get is() { return "seki-sheet-title"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sheet.css"]
+        };
+    }
+}