@sekiui/elements 0.0.64 → 0.0.69

package/dist/collection/components/scroll-area/seki-scroll-bar.js

@@ -0,0 +1,233 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Scroll Bar Component
+ *
+ * Custom scrollbar that syncs with the parent scroll area's scroll position.
+ * Supports vertical and horizontal orientations.
+ *
+ * @part scrollbar - The scrollbar track
+ * @part thumb - The draggable thumb
+ */
+export class SekiScrollBar {
+    constructor() {
+        this.isDragging = false;
+        this.dragStartPosition = 0;
+        this.dragStartScroll = 0;
+        this.scrollHandler = () => this.updateFromContext();
+        /**
+         * Scrollbar orientation
+         */
+        this.orientation = 'vertical';
+        /**
+         * Thumb size as percentage
+         */
+        this.thumbSize = 0;
+        /**
+         * Thumb position as percentage
+         */
+        this.thumbPosition = 0;
+        /**
+         * Whether scrollbar should be visible (has overflow)
+         */
+        this.hasOverflow = false;
+        this.handleTrackClick = (event) => {
+            if (event.target === this.thumbRef)
+                return;
+            if (!this.trackRef)
+                return;
+            const context = this.getContext();
+            if (!(context === null || context === void 0 ? void 0 : context.viewportEl))
+                return;
+            const rect = this.trackRef.getBoundingClientRect();
+            const isVertical = this.orientation === 'vertical';
+            if (isVertical) {
+                const clickPosition = (event.clientY - rect.top) / rect.height;
+                const maxScroll = context.scrollHeight - context.clientHeight;
+                context.viewportEl.scrollTop = clickPosition * maxScroll;
+            }
+            else {
+                const clickPosition = (event.clientX - rect.left) / rect.width;
+                const maxScroll = context.scrollWidth - context.clientWidth;
+                context.viewportEl.scrollLeft = clickPosition * maxScroll;
+            }
+        };
+        this.handleThumbMouseDown = (event) => {
+            event.preventDefault();
+            this.startDrag(event.clientX, event.clientY);
+        };
+        this.handleThumbTouchStart = (event) => {
+            const touch = event.touches[0];
+            this.startDrag(touch.clientX, touch.clientY);
+        };
+        this.handleMouseMove = (event) => {
+            if (!this.isDragging)
+                return;
+            this.handleDrag(event.clientX, event.clientY);
+        };
+        this.handleTouchMove = (event) => {
+            if (!this.isDragging)
+                return;
+            event.preventDefault();
+            const touch = event.touches[0];
+            this.handleDrag(touch.clientX, touch.clientY);
+        };
+        this.handleMouseUp = () => {
+            this.endDrag();
+        };
+        this.handleTouchEnd = () => {
+            this.endDrag();
+        };
+    }
+    getContext() {
+        const scrollArea = this.el.closest('seki-scroll-area');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return scrollArea ? scrollArea._scrollAreaContext : null;
+    }
+    componentDidLoad() {
+        this.updateFromContext();
+        // Listen for scroll changes
+        const scrollArea = this.el.closest('seki-scroll-area');
+        if (scrollArea) {
+            this.scrollAreaRef = scrollArea;
+            scrollArea.addEventListener('sekiScroll', this.scrollHandler);
+            // Also update on resize
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateFromContext();
+            });
+            this.resizeObserver.observe(scrollArea);
+        }
+        // Setup drag listeners
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+        document.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+        document.addEventListener('touchend', this.handleTouchEnd);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+        document.removeEventListener('touchmove', this.handleTouchMove);
+        document.removeEventListener('touchend', this.handleTouchEnd);
+        (_a = this.scrollAreaRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiScroll', this.scrollHandler);
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    updateFromContext() {
+        const context = this.getContext();
+        if (!context)
+            return;
+        const isVertical = this.orientation === 'vertical';
+        if (isVertical) {
+            const { scrollTop, scrollHeight, clientHeight } = context;
+            this.hasOverflow = scrollHeight > clientHeight;
+            if (this.hasOverflow) {
+                // Thumb size as percentage of track
+                this.thumbSize = (clientHeight / scrollHeight) * 100;
+                // Thumb position as percentage
+                const maxScroll = scrollHeight - clientHeight;
+                this.thumbPosition = maxScroll > 0 ? (scrollTop / maxScroll) * (100 - this.thumbSize) : 0;
+            }
+        }
+        else {
+            const { scrollLeft, scrollWidth, clientWidth } = context;
+            this.hasOverflow = scrollWidth > clientWidth;
+            if (this.hasOverflow) {
+                this.thumbSize = (clientWidth / scrollWidth) * 100;
+                const maxScroll = scrollWidth - clientWidth;
+                this.thumbPosition = maxScroll > 0 ? (scrollLeft / maxScroll) * (100 - this.thumbSize) : 0;
+            }
+        }
+    }
+    startDrag(clientX, clientY) {
+        this.isDragging = true;
+        const context = this.getContext();
+        if (!context)
+            return;
+        const isVertical = this.orientation === 'vertical';
+        this.dragStartPosition = isVertical ? clientY : clientX;
+        this.dragStartScroll = isVertical ? context.scrollTop : context.scrollLeft;
+        document.body.style.userSelect = 'none';
+    }
+    handleDrag(clientX, clientY) {
+        const context = this.getContext();
+        if (!(context === null || context === void 0 ? void 0 : context.viewportEl) || !this.trackRef)
+            return;
+        const rect = this.trackRef.getBoundingClientRect();
+        const isVertical = this.orientation === 'vertical';
+        const trackSize = isVertical ? rect.height : rect.width;
+        const currentPosition = isVertical ? clientY : clientX;
+        const delta = currentPosition - this.dragStartPosition;
+        // Convert pixel delta to scroll delta
+        const scrollableDistance = isVertical
+            ? context.scrollHeight - context.clientHeight
+            : context.scrollWidth - context.clientWidth;
+        const thumbSizePixels = (this.thumbSize / 100) * trackSize;
+        const scrollRatio = scrollableDistance / (trackSize - thumbSizePixels);
+        const scrollDelta = delta * scrollRatio;
+        if (isVertical) {
+            context.viewportEl.scrollTop = this.dragStartScroll + scrollDelta;
+        }
+        else {
+            context.viewportEl.scrollLeft = this.dragStartScroll + scrollDelta;
+        }
+    }
+    endDrag() {
+        if (this.isDragging) {
+            this.isDragging = false;
+            document.body.style.userSelect = '';
+        }
+    }
+    render() {
+        if (!this.hasOverflow) {
+            return null;
+        }
+        const isVertical = this.orientation === 'vertical';
+        const thumbStyle = isVertical
+            ? { height: `${this.thumbSize}%`, top: `${this.thumbPosition}%` }
+            : { width: `${this.thumbSize}%`, left: `${this.thumbPosition}%` };
+        return (h(Host, { "aria-hidden": "true" }, h("div", { ref: (el) => (this.trackRef = el), part: "scrollbar", class: "scrollbar", "data-orientation": this.orientation, onClick: this.handleTrackClick }, h("div", { ref: (el) => (this.thumbRef = el), part: "thumb", class: "thumb", style: thumbStyle, onMouseDown: this.handleThumbMouseDown, onTouchStart: this.handleThumbTouchStart }))));
+    }
+    static get is() { return "seki-scroll-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-scroll-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-scroll-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scrollbar orientation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "thumbSize": {},
+            "thumbPosition": {},
+            "hasOverflow": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -334,7 +334,7 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: 'c110550a601aa08d5abba413735d357240a5d9b3' }, h("slot", { key: '14139afd23b220b0f3081f7381aa5510131af8e8' }), this.name && this.renderHiddenNativeElement()));
+        return (h(Host, { key: '1713817f2c41e61b4970ab0bddddf3f5c235c438' }, h("slot", { key: '7c48491fd67c6825da7b1182491ec2c8c7c7a1ff' }), this.name && this.renderHiddenNativeElement()));
     }
     renderHiddenNativeElement() {
         if (this.multiple) {

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

@@ -11,7 +11,7 @@ export class SekiSelectGroup {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: 'dca8fbe31e5c41a84c02d3d74c05b321c11d5a82' }, h("div", { key: 'ef8bee775f0d82ed8d07f9d0b6536b6e3260ebff', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: '146deb5607ba94f23a46b3f5baeafcabeec52658', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '30ebf405317419271134651f39dce7ec74041078', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: '36da05fa59cb940572280c746ea3975e4b93df72', name: "label" }, this.label)), h("div", { key: '4d0ce029f20b7d100d459e41549562f8d371e442', class: "group-options" }, h("slot", { key: 'fb5d98ef6ac46382df96a191d58965eb2d57ecbf' })))));
+        return (h(Host, { key: '854700579da301ebc8597750668ccafa2e6c6818' }, h("div", { key: '50d2f32f63e24cbaf675f3c7bbaa47b8e1a4eb34', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: 'd291e0af0bfa3f22e4f4e3025d185073f76de6eb', class: "group-separator", "aria-hidden": "true" }), h("div", { key: 'ada4a971353afbb4f50e58e6f68b4cd6ae18266f', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'a0dcfef4f9a983642c1fa14fc33287dbf4222956', name: "label" }, this.label)), h("div", { key: '959a0c9abb6786d06d517cd9729c45349daf53af', class: "group-options" }, h("slot", { key: '8aa1d51c58c45f6d806445bd2ca34ec94e07b51e' })))));
     }
     static get is() { return "seki-select-group"; }
     static get encapsulation() { return "shadow"; }

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: '34b0054a9810a9717159d13938bc0a6714823972' }, h("div", { key: 'bdffceb8a1bc408998484bcf5fbc45b894854660', 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: '240b1b1ac7a97f029ead79838d88fcab8ec44324', class: "option-label" }, h("slot", { key: '6b425f82130d506460cee4278aaf11e5636ca41e' })), isSelected && (h("span", { key: '44e1260f0b069176051acabd2c0d068a907c2be0', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '1bc3a477d945c10ba5dcd443f7dc08e87ab6632f', name: "selected-indicator" }, h("svg", { key: 'fb645a2cae4ab9379e8214569146d8cfa2e2d880', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'edf1ef0fd7578c7a3442741e36040a65a377db2e', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '7021e96b4449873f1f3e4ed233c3a07411842cf6' }, h("div", { key: '8365465c9e0ba0ce6e73c178c6109417eba79e00', 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: '119293548ea068f0592831da9dbac61fb006400c', class: "option-label" }, h("slot", { key: '6c04339bc92a5aecb93644877fbe79facb29fea5' })), isSelected && (h("span", { key: '037fcde68ad103086e10bba094cb1392ab7d1324', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '36c57502ae75f7a12ea4782a49666c0d183db46a', name: "selected-indicator" }, h("svg", { key: '4d1bb4155561689746197b843f86f0b8b0d2bb28', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e1d8ae985b099ae5837f456743e34bdc777a8e9d', 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/separator/seki-separator.css

@@ -2,7 +2,7 @@
 
 :host {
   /* Border color token */
-  --seki-separator-color: var(--color-border, hsl(220 13% 91%));
+  --seki-separator-color: var(--seki-border, hsl(240 5.9% 90%));
 
   /* Sizing tokens */
   --seki-separator-thickness: 1px;
@@ -18,7 +18,7 @@
 
 /* Dark mode support */
 :host([data-theme='dark']) {
-  --seki-separator-color: var(--color-border-dark, hsl(215 20% 25%));
+  --seki-separator-color: var(--seki-border, hsl(240 3.7% 15.9%));
 }
 
 /* Base separator styles */

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

@@ -23,7 +23,7 @@ export class SekiSeparator {
     }
     render() {
         const isVertical = this.orientation === 'vertical';
-        return (h("div", { key: '9bc05b90262f215a1f56971d4839317de947ec31', class: {
+        return (h("div", { key: 'd6500758d59a1b77298824ffab5f9fd7ecc2f2b0', class: {
                 'seki-separator': true,
                 'seki-separator--horizontal': !isVertical,
                 'seki-separator--vertical': isVertical,

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

@@ -11,7 +11,7 @@ export class SekiSheetClose {
         };
     }
     render() {
-        return (h("div", { key: '7f8eacd7ccc7434d2e618ac5c54ccde1ba623a05', class: "seki-sheet-close", part: "close", onClick: this.handleClick }, h("slot", { key: 'f38e1ff6f5842c5d9fb60a9a1323601ba851b795' })));
+        return (h("div", { key: '733293c78f93b7e3bee4589dd674d85734de8139', class: "seki-sheet-close", part: "close", onClick: this.handleClick }, h("slot", { key: '264e1f2cb61df37474cbf1c295b3188259c17070' })));
     }
     static get is() { return "seki-sheet-close"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,10 +23,10 @@ export class SekiSheetContent {
         }
     }
     render() {
-        return (h(Host, { key: 'ed1ff16d14f6b4018da1618edb1038a570123879', "data-side": this.side }, h("div", { key: '0fa8afd6ba15e0a32dd14d68c05d701e0b1f12e6', role: "dialog", "aria-modal": "true", class: {
+        return (h(Host, { key: '652d09db19bf28de5ed62a9cb002344ca7e2f22a', "data-side": this.side }, h("div", { key: 'c589924dafc9169302fe56b2d551856c50fe7875', role: "dialog", "aria-modal": "true", class: {
                 'seki-sheet-content': true,
                 [`seki-sheet-content--${this.side}`]: true,
-            }, part: "content" }, h("button", { key: 'fdcdc83fc3f7bc2cfe19a4e40db391e640c398e8', type: "button", class: "seki-sheet-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, h("svg", { key: 'efc7b88ae3123e0e76fc82af69e1648ae56b63d8', 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: '7fc51c72b57108da90c03a4ef5a209f52cf4e518', d: "M18 6 6 18" }), h("path", { key: 'a43b7d1e5d81e46b729376dd1e3949ae00ae933f', d: "m6 6 12 12" }))), h("slot", { key: '9b979b500288b9293ea6df3d38204795e230d2c9' }))));
+            }, part: "content" }, h("button", { key: '359d587f63a59f382e73a850034fb351f5a4305c', type: "button", class: "seki-sheet-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, h("svg", { key: 'c388e78609e4233fbfbc98afda060919afd4631f', 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: '53dd128a38cf28f77c4b1f23cf4321b27f86baba', d: "M18 6 6 18" }), h("path", { key: '2a47e222327416e6b1edb31bce0742f3e69de539', d: "m6 6 12 12" }))), h("slot", { key: '2a0b004fc71a14404b9b642a955022bb67297fb0' }))));
     }
     static get is() { return "seki-sheet-content"; }
     static get encapsulation() { return "shadow"; }
@@ -51,7 +51,7 @@ export class SekiSheetContent {
                     "references": {
                         "SheetSide": {
                             "location": "local",
-                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/sheet/seki-sheet-content.tsx",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/sheet/seki-sheet-content.tsx",
                             "id": "src/components/sheet/seki-sheet-content.tsx::SheetSide"
                         }
                     }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiSheetDescription {
     render() {
-        return (h("p", { key: '9fbe3f677aba8e70c32f2bff2cf21e0013dc17fa', class: "seki-sheet-description", part: "description" }, h("slot", { key: 'd42cf576101d5c6a7f1dae4fb8916dbb8cf52bc1' })));
+        return (h("p", { key: '3309e9c4f8c55ec6c35281866a3d4dc28fb53625', class: "seki-sheet-description", part: "description" }, h("slot", { key: '9028f2b865c6eb96fd50d42a83a9b21b0e8e7ae5' })));
     }
     static get is() { return "seki-sheet-description"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiSheetFooter {
     render() {
-        return (h("div", { key: 'ec2e5a79224929f7dadba9d92dd8909ed6756677', class: "seki-sheet-footer", part: "footer" }, h("slot", { key: 'e17445b1ec97a254bfa043bd082f9e9a2176d58e' })));
+        return (h("div", { key: 'd8250ffda74fbb802b7bc874157c40c730821ce7', class: "seki-sheet-footer", part: "footer" }, h("slot", { key: 'b7cbcb553d21e727a96876c55a695fde2901c4ff' })));
     }
     static get is() { return "seki-sheet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiSheetHeader {
     render() {
-        return (h("div", { key: '2aeb8dc8c9c739f20656e8436ca57a05fd1deaba', class: "seki-sheet-header", part: "header" }, h("slot", { key: '5135f9a81ad77e6c69433f737b1d62c11d8a6921' })));
+        return (h("div", { key: '7b98f20366a5ed4800cd984ca9787b97e3749df0', class: "seki-sheet-header", part: "header" }, h("slot", { key: 'c036551ac51c066ffe84bb6106e57708765740bb' })));
     }
     static get is() { return "seki-sheet-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiSheetTitle {
     render() {
-        return (h("h2", { key: '09748dc861d9d3e1ff77cd488c535f8beef72661', class: "seki-sheet-title", part: "title" }, h("slot", { key: 'ca2f9a8f9ca917d13b788dab40c95642fd6d269e' })));
+        return (h("h2", { key: '77a62e9941ef7a26037962fcda360b09716665fb', class: "seki-sheet-title", part: "title" }, h("slot", { key: '718987c1aed326e0d94278e98245891a70e7b506' })));
     }
     static get is() { return "seki-sheet-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class SekiSheetTrigger {
         };
     }
     render() {
-        return (h("div", { key: '7944f71598de1c7029cd12d56c9f6005e8b585ce', class: "seki-sheet-trigger", part: "trigger", onClick: this.handleClick }, h("slot", { key: 'e876c1ad18ac2e76b6d0b510bc740021ff30bf97' })));
+        return (h("div", { key: 'cf15768bc7e6ed460c073b57f07d124e075431ae', class: "seki-sheet-trigger", part: "trigger", onClick: this.handleClick }, h("slot", { key: '6470172a96064c99b04e12d6ba0bc364ba2e2bbb' })));
     }
     static get is() { return "seki-sheet-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,10 +1,10 @@
 /* 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-bg: var(--seki-background, hsl(0 0% 100%));
+  --seki-sheet-border: var(--seki-border, hsl(240 5.9% 90%));
+  --seki-sheet-text: var(--seki-foreground, hsl(240 10% 3.9%));
+  --seki-sheet-text-muted: var(--seki-muted-foreground, hsl(240 3.8% 46.1%));
   --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);
@@ -18,10 +18,10 @@
 
 /* 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-bg: var(--seki-background, hsl(240 10% 3.9%));
+  --seki-sheet-border: var(--seki-border, hsl(240 3.7% 15.9%));
+  --seki-sheet-text: var(--seki-foreground, hsl(0 0% 98%));
+  --seki-sheet-text-muted: var(--seki-muted-foreground, hsl(240 5% 64.9%));
   --seki-sheet-overlay-bg: rgba(0, 0, 0, 0.7);
 }
 
@@ -173,7 +173,7 @@
 }
 
 .seki-sheet-close-button:focus-visible {
-  outline: 2px solid var(--color-primary, hsl(220 90% 56%));
+  outline: 2px solid var(--seki-ring, hsl(240 5.9% 10%));
   outline-offset: 2px;
 }
 

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

@@ -61,10 +61,10 @@ export class SekiSheet {
         }
     }
     render() {
-        return (h("div", { key: '874c68220787799bdaa3ae8ed29ca86c1b587823', class: {
+        return (h("div", { key: '1272647e7d9b293d49d5f898df37dfb7cfd8db71', class: {
                 'seki-sheet': true,
                 'seki-sheet--open': this.isOpen,
-            }, part: "sheet" }, h("slot", { key: '7137d6e580a7b54b1fd40dcbbe150420755dd2a6' }), this.isOpen && (h("div", { key: 'bd643a315d033026f995d5169ea3c81b39db4287', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.close() }))));
+            }, part: "sheet" }, h("slot", { key: 'f6b172998b0726a733e2c73074f88c144b69ba0e' }), this.isOpen && (h("div", { key: '38f44eadb22bbfdceb23602f455cb1ca72be999d', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.close() }))));
     }
     static get is() { return "seki-sheet"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarContent {
     render() {
-        return (h("div", { key: '440800f4a55551a29c0a1570c6e1b7fcb0aaa3be', class: "sidebar-content" }, h("slot", { key: 'ded6225e91fb6b155e90f55c7aa469fbed4a49e5' })));
+        return (h("div", { key: 'c470cba177e1786b48205272dbea57df708c6668', class: "sidebar-content" }, h("slot", { key: 'bcbedee88979cec9020d9c91904fd680d2cf255c' })));
     }
     static get is() { return "seki-sidebar-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class SekiSidebarFooter {
         this._isIconMode = !event.detail.open && !event.detail.isMobile;
     }
     render() {
-        return (h(Host, { key: '7533108aae72a1fc510668de33c0265315fa09f2', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: '004b64c3d9afee004807ad9db13e6fc233ccd407', class: { 'sidebar-footer': true, 'sidebar-footer--icon-mode': this._isIconMode } }, h("slot", { key: '80493bb142f326bb31ced8e8553794dbe66703f6' }))));
+        return (h(Host, { key: '7a49115c8008bbd824b7f75679ef18d83f2cf94c', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: 'c02cb53ed0394049c4b56028b6a2848474640032', class: { 'sidebar-footer': true, 'sidebar-footer--icon-mode': this._isIconMode } }, h("slot", { key: '609c52d13a68af9e5581478e21dd58ebe5bfb309' }))));
     }
     static get is() { return "seki-sidebar-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-group-action.js

@@ -7,7 +7,7 @@ export class SekiSidebarGroupAction {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '80f23ed1303997491b01245989dc6ef0d1a1097c' }, h("button", { key: 'c6e71e6a2e6fea6a6b075a461141f4f0590eb9c6', class: "sidebar-group-action", type: "button", disabled: this.disabled, "aria-label": this.ariaLabel }, h("slot", { key: '41db36bee9d1bf6421808c3107e1a9d99e429d08' }))));
+        return (h(Host, { key: '0ec72375fae1159d0d4cdbea7b71979cc28e35e1' }, h("button", { key: 'ecc25c261ec630d50b957a52815a3b40d92926d2', class: "sidebar-group-action", type: "button", disabled: this.disabled, "aria-label": this.ariaLabel }, h("slot", { key: 'cd44ed5293665d3a3b023fe1749724c98693fa3c' }))));
     }
     static get is() { return "seki-sidebar-group-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarGroupContent {
     render() {
-        return (h("div", { key: 'b6abc168dfb77d0fadd60727fec0d662b3ef915b', class: "sidebar-group-content" }, h("slot", { key: '178dd847412c2f894fddb4c6d25e15b21f2c9558' })));
+        return (h("div", { key: 'b83f6deff78f0444f1b6039c11761b5a3a67c8be', class: "sidebar-group-content" }, h("slot", { key: '1927a7ff9e4cf1689b5695d80c908af7609a3b7b' })));
     }
     static get is() { return "seki-sidebar-group-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-group-label.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarGroupLabel {
     render() {
-        return (h("div", { key: 'bdcf100832378dc3635726b014a6a3ea641c42ba', class: "sidebar-group-label" }, h("slot", { key: 'a085589cffd5b226b9ac859edf800d814b4d83a6' })));
+        return (h("div", { key: 'babdf544e746d4a42da109220ac0f4e5cc1c35d3', class: "sidebar-group-label" }, h("slot", { key: '74dd7fb83a8f6b374428142620e6aed7e455cf2a' })));
     }
     static get is() { return "seki-sidebar-group-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarGroup {
     render() {
-        return (h("div", { key: 'b7c7c38de6eaa2437d14c64d1a75b58a2775b9e3', class: "sidebar-group" }, this.label && (h("seki-sidebar-group-label", { key: '77314d079fde51fe6b6d4c083dc07f5ffef98f65' }, this.label)), h("div", { key: '7d7e9ff88e755758fcaa5fe518d663a2d6b46060', class: "sidebar-group-content" }, h("slot", { key: '70c4a637ff684409f14424ac8c669aefa53a141c' }))));
+        return (h("div", { key: 'dc83c269a0e1e967863f01bab6d391aaeff6c529', class: "sidebar-group" }, this.label && (h("seki-sidebar-group-label", { key: 'bcb35e686fafb33a8f90153cb8eb405015c1f801' }, this.label)), h("div", { key: '805d5086d34b32428f1204709810f0b540084427', class: "sidebar-group-content" }, h("slot", { key: 'ebbad1c2a1ea54b3cf1d935e74e50ca6164482cd' }))));
     }
     static get is() { return "seki-sidebar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class SekiSidebarHeader {
         this._isIconMode = !event.detail.open && !event.detail.isMobile;
     }
     render() {
-        return (h(Host, { key: '80fa3e3f3114904e540aeed90055875cba54bd9d', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: 'f9e361e8f673dc6a5cf7d220f2e532b39dd35a9e', class: { 'sidebar-header': true, 'sidebar-header--icon-mode': this._isIconMode } }, h("slot", { key: '4597be6db31279cdcabc16fa52d317d6f5ed7a80' }))));
+        return (h(Host, { key: 'c4cba12a6a02472ba62b6a41c39cc3bc86e6a921', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: '68fc42d30aa3b8a07a8720a686812c945e51df8d', class: { 'sidebar-header': true, 'sidebar-header--icon-mode': this._isIconMode } }, h("slot", { key: '99d0abb43ee282c52ba53315f892dde9bef6da84' }))));
     }
     static get is() { return "seki-sidebar-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarInset {
     render() {
-        return (h("div", { key: 'f5e0668608715a3baee9aeb62db2727373f93355', class: "sidebar-inset" }, h("slot", { key: '282318b6efd605111a5669f59c8cd111f28f8fc3' })));
+        return (h("div", { key: 'e31080befeb07b99548644fd7898745b4f64ceaf', class: "sidebar-inset" }, h("slot", { key: '7631ba0966e199e2a806e1c0844ee3c4abd658dd' })));
     }
     static get is() { return "seki-sidebar-inset"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-menu-action.js

@@ -7,7 +7,7 @@ export class SekiSidebarMenuAction {
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '2b0cfc60d4435f5542fe69b32a61c4e6f4bac7b3', class: "sidebar-menu-action", disabled: this.disabled, type: "button", "aria-label": "More options" }, h("slot", { key: 'bd496508028b5b579d5d54b7be4e5354d8d02852' })));
+        return (h("button", { key: 'eebc7af3c060402ceedffaac78a9b937392762f9', class: "sidebar-menu-action", disabled: this.disabled, type: "button", "aria-label": "More options" }, h("slot", { key: '91018cbf484c203c5c134ce45b549f4d822dcf7a' })));
     }
     static get is() { return "seki-sidebar-menu-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarMenuBadge {
     render() {
-        return (h("span", { key: 'bd8c865ae2c4608299012cab994a6b4340db748c', class: "sidebar-menu-badge" }, h("slot", { key: 'ea28d94f9058c392b1ae77b6e3a03a259b574d38' })));
+        return (h("span", { key: '80ff9dccd43ef5ca5f4790892d3f297be92e51ef', class: "sidebar-menu-badge" }, h("slot", { key: '0a65ce157e4bc68f40fddbe8727eeec830c55766' })));
     }
     static get is() { return "seki-sidebar-menu-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-menu-button.js

@@ -68,7 +68,7 @@ export class SekiSidebarMenuButton {
                 buttonProps.tabIndex = -1;
             }
         }
-        return (h(Tag, Object.assign({ key: '089f3657d4a5e3e7d36f1970d3d048257ee838a6' }, buttonProps), h("span", { key: '3db7e5f530a34e7e547c98c3ee549e522d8b0d8e', class: "sidebar-menu-button-content" }, h("slot", { key: 'd75951d5ea727caa8dec556efe21c1116038c0c1' })), this._isIconMode && this.tooltipText && (h("span", { key: '1907a24cff0aa545f5f069b04ce822760bbaefb4', class: "sr-only" }, this.tooltipText))));
+        return (h(Tag, Object.assign({ key: 'db1008aceefb2f8573ae49bdac432dc5d95b247f' }, buttonProps), h("span", { key: '4f249c4ade199ba487bca1087f6baf71350be810', class: "sidebar-menu-button-content" }, h("slot", { key: 'f96cdb058e69d102a5667c4a0e337b37dcbf4e67' })), this._isIconMode && this.tooltipText && (h("span", { key: 'd24c134ec227fde5a7962e71e93ac2d681873227', class: "sr-only" }, this.tooltipText))));
     }
     static get is() { return "seki-sidebar-menu-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-menu-item.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarMenuItem {
     render() {
-        return (h("li", { key: '04f297c6a73cf5b838edaa84eb75df5660c9d1a6', class: "sidebar-menu-item", role: "none" }, h("slot", { key: '16f03115765577233d2dda3837cc64c7e70ae698' })));
+        return (h("li", { key: '3d481de2d3118616d7576f44d4bf7bfccd550f65', class: "sidebar-menu-item", role: "none" }, h("slot", { key: 'b8c34d9314660e5c93298689622ce3b95b096dfd' })));
     }
     static get is() { return "seki-sidebar-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-menu-skeleton.js

@@ -7,7 +7,7 @@ export class SekiSidebarMenuSkeleton {
         this.showIcon = false;
     }
     render() {
-        return (h("div", { key: '590cbb890e448303c4363b4acd9fbf9fe5edac49', class: "sidebar-menu-skeleton" }, this.showIcon && h("div", { key: '31fe3117640c6bdaf1d12dd4659041dd56d7ea0c', class: "sidebar-menu-skeleton-icon" }), h("div", { key: '4f6313760e452a7a8483c33a9955783b16e8c0f1', class: "sidebar-menu-skeleton-text" })));
+        return (h("div", { key: '03c23eafe3c39e8d5303bbe587600300c57e2a42', class: "sidebar-menu-skeleton" }, this.showIcon && h("div", { key: '1cc9bbdd981668e227f78cf0401fc9096fc69ced', class: "sidebar-menu-skeleton-icon" }), h("div", { key: '1a0d17e3a00783e9814579928d06123ab5c0e4c2', class: "sidebar-menu-skeleton-text" })));
     }
     static get is() { return "seki-sidebar-menu-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-menu-sub-button.js

@@ -11,10 +11,10 @@ export class SekiSidebarMenuSubButton {
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '6bf08f32b14152c0a6f99536d711a3c2d3ab47d5', class: {
+        return (h("button", { key: '521f97bd1b7ed25dc54827783de27bae45d4bb1b', class: {
                 'sidebar-menu-sub-button': true,
                 'sidebar-menu-sub-button--active': this.active,
-            }, disabled: this.disabled, type: "button", role: "menuitem" }, h("slot", { key: 'd925e659cd1af0ae739cc99e108923ac9a0c7b77' })));
+            }, disabled: this.disabled, type: "button", role: "menuitem" }, h("slot", { key: '037ef1075c017f1f0828492260371fce7360703a' })));
     }
     static get is() { return "seki-sidebar-menu-sub-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-menu-sub-item.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarMenuSubItem {
     render() {
-        return (h("li", { key: 'fdc5c44c48bdca7ed4d7c9c2ff13498ef8c4b192', class: "sidebar-menu-sub-item", role: "none" }, h("slot", { key: 'c8acb7d91828c783565eb6357a27f691f2b295ec' })));
+        return (h("li", { key: 'aed5cd3ec911836d8de10f129bc116874e6e8d6b', class: "sidebar-menu-sub-item", role: "none" }, h("slot", { key: '501518d341e0669a7acb177a589e94684acd4d7f' })));
     }
     static get is() { return "seki-sidebar-menu-sub-item"; }
     static get encapsulation() { return "shadow"; }