@sekiui/elements 0.0.87 → 0.1.0

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

@@ -74,7 +74,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);
@@ -889,7 +891,7 @@
 
 :host([data-theme='dark']) .thumb:hover,
 :host([data-theme='dark']) .thumb:active {
-  background: var(--seki-neutral-500, hsl(0, 0%, 45.1%));
+  background: var(--seki-neutral-500, hsl(0, 0%, 42%));
 }
 
 /* Dark mode via parent context */
@@ -903,7 +905,7 @@
 
 :host([data-theme='dark']) .thumb:hover,
 :host([data-theme='dark']) .thumb:active {
-  background: var(--seki-neutral-500, hsl(0, 0%, 45.1%));
+  background: var(--seki-neutral-500, hsl(0, 0%, 42%));
 }
 
 /* System preference dark mode fallback */
@@ -918,7 +920,7 @@
 
   :host(:not([data-theme="light"])) .thumb:hover,
   :host(:not([data-theme="light"])) .thumb:active {
-    background: var(--seki-neutral-500, hsl(0, 0%, 45.1%));
+    background: var(--seki-neutral-500, hsl(0, 0%, 42%));
   }
 }
 

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);
@@ -814,6 +816,14 @@
   min-width: 100%;
 }
 
+/* Hides the listbox (and, since it's no longer un-slotted, every option
+   inside it) while closed. See the comment on render()'s Host class in
+   seki-select-content.tsx for why this replaced a conditional `return null`.
+   Mirrors seki-combobox-content.css's identical :host(.hidden) rule. */
+:host(.hidden) {
+  display: none;
+}
+
 .content-container {
   background: var(--seki-select-content-bg);
   border: var(--seki-select-content-border);

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

@@ -52,11 +52,14 @@ export class SekiSelectContent {
     /**
      * Accessible name for the listbox.
      *
-     * It cannot borrow the trigger's name via aria-labelledby: the trigger's
-     * combobox and this listbox live in separate shadow roots, and IDREFs do not
-     * resolve across tree scopes. So the name is mirrored down as a literal
-     * string instead. An aria-labelledby on the <seki-select> host *can* be
-     * resolved here, because the host and its label sit in the same tree.
+     * As of #300, seki-select-trigger and this listbox render in the same real
+     * DOM tree scope (scoped, non-shadow mode), so an aria-labelledby pointing
+     * back at the trigger's combobox would technically resolve now. Kept as a
+     * mirrored literal string anyway — simpler and more robust than a live
+     * cross-component id reference, and it avoids coupling this component's
+     * accessible name to the trigger's specific DOM shape. An aria-labelledby
+     * on the <seki-select> host *can* still be resolved here, because the host
+     * and its label sit in the same tree (unchanged).
      */
     getAccessibleName(selectContext) {
         var _a, _b, _c;
@@ -81,16 +84,22 @@ export class SekiSelectContent {
             return null;
         }
         const isOpen = selectContext.open;
-        // Lazy rendering - only render when open
-        if (!isOpen) {
-            return null;
-        }
         const parent = this.el.closest('seki-select');
         const maxHeight = (parent === null || parent === void 0 ? void 0 : parent.maxHeight) || '12.5rem';
-        return (h(Host, null, h("div", { class: "content-container", role: "listbox", id: selectContext.contentId, "aria-label": this.getAccessibleName(selectContext), "aria-multiselectable": selectContext.multiple ? 'true' : undefined }, h("div", { ref: (el) => (this.scrollContainerRef = el), class: "content-scroll", style: { maxHeight } }, h("slot", null)))));
+        // Always render, hiding via CSS instead of `return null` when closed (the
+        // seki-combobox-content pattern this mirrors). Under shadow DOM this used
+        // to conditionally return null and rely on the browser's own behavior of
+        // never rendering un-slotted light-DOM children — with no <slot> to
+        // assign them to, the options were simply invisible. Scoped (non-shadow)
+        // mode has no such mechanism: each seki-select-option still renders its
+        // own role="option" div regardless of whether a parent slot exists for
+        // it, so returning null here left every option fully visible — and
+        // interactable — even while "closed" (#300 e2e regression). See
+        // :host(.hidden) in seki-select-content.css.
+        return (h(Host, { class: { hidden: !isOpen } }, h("div", { class: "content-container", role: "listbox", id: selectContext.contentId, "aria-label": this.getAccessibleName(selectContext), "aria-multiselectable": selectContext.multiple ? 'true' : undefined }, h("div", { ref: (el) => (this.scrollContainerRef = el), class: "content-scroll", style: { maxHeight } }, h("slot", null)))));
     }
     static get is() { return "seki-select-content"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select-content.css"]

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -15,10 +15,10 @@ export class SekiSelectGroup {
         syncTheme(this.el);
     }
     render() {
-        return (h(Host, { key: 'e221fca22d8e6fdf3addd112fb08afe46cf888ce' }, h("div", { key: '365fe2f5ed8990ebb80d41904a2cc79534567f9f', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: 'd2c7e82bf5cb0c3cd108d8428e44c8d1654f77a4', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '0a6737c20344303ce09bab49d0c1fe913f29a216', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'a492f1b53627832fdb1b801b4115f2d4954f30f0', name: "label" }, this.label)), h("div", { key: 'eef01caf57f171ab6ce6ac66840c1cb4fc995a79', class: "group-options" }, h("slot", { key: 'fdb252d3a0e2e75e863104a66469cff17730e0ce' })))));
+        return (h(Host, { key: 'e1cb8d09575a3851c93f823623cd9331be3e96cc' }, h("div", { key: 'ddb385f0668bb61461f9e5121be9b8394218b629', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: 'de153ac27303e514ab3f6c85547809523b41584a', class: "group-separator", "aria-hidden": "true" }), h("div", { key: 'f8e67ce663167d38ff6432b704abec5631c5d52c', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: '622315b7efb3aafc12b93f0b0bbf32a22292c95b', name: "label" }, this.label)), h("div", { key: 'beb13a0aeac5543fb9dcde5da98caf81d92a23e2', class: "group-options" }, h("slot", { key: '8919337fddfeb602538eaca3914a1e4bb36c65ee' })))));
     }
     static get is() { return "seki-select-group"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select-group.css"]

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { buildOptionId } from "../../utils/select";
 import { syncTheme } from "../../utils/theme-sync";
 import { subscribeToContextChange } from "../../utils/context-bridge";
 /**
@@ -15,19 +16,20 @@ export class SekiSelectOption {
         this.hasRegistered = false;
         this.contextSubscription = { parent: null, unsubscribe: () => { } };
         /**
-         * Refresh aria-selected/data-selected/data-focused directly on the shadow
-         * DOM whenever the parent's value/focus state changes post-mount. This is
-         * applied imperatively rather than through a Stencil @State bump + render()
+         * Refresh aria-selected/data-selected/data-focused directly on the
+         * rendered DOM whenever the parent's value/focus state changes post-mount.
+         * This is applied imperatively rather than through a Stencil @State bump +
+         * render()
          * — a component that reads a parent's state via closest() + an
          * addEventListener callback and relies on render() re-invoking to reflect
          * it is a confirmed-unreliable shape in this codebase (#244). Mutating the
-         * shadow DOM directly here side-steps that entirely.
+         * DOM directly here side-steps that entirely.
          */
         this.handleParentContextChange = () => {
-            var _a;
-            const optionEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.option');
+            const optionEl = this.el.querySelector('.option');
             if (!optionEl)
                 return;
+            optionEl.id = this.optionId;
             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;
@@ -75,15 +77,21 @@ export class SekiSelectOption {
     // ===========================
     // State
     // ===========================
-    // Deterministic id so it matches the `option-${value}` reference that
-    // seki-select-trigger emits as aria-activedescendant. (Note: full
-    // cross-shadow IDREF resolution still requires the trigger and options to
-    // share a tree scope — see seki-select-trigger for the known limitation.)
+    // Real, page-scoped DOM id as of #300 (scoped, non-shadow rendering) —
+    // seki-select-trigger's aria-activedescendant references this directly, so
+    // it must stay collision-free across multiple <seki-select> instances on
+    // one page. Prefixed with the parent select's own randomized contentId via
+    // buildOptionId (shared with seki-select-trigger so both compute the exact
+    // same string); falls back to the literal string 'select' if no parent
+    // context is available yet (e.g. before componentDidLoad registers it).
     get optionId() {
-        return `option-${this.value}`;
+        var _a;
+        const selectContext = this.getSelectContext();
+        return buildOptionId((_a = selectContext === null || selectContext === void 0 ? void 0 : selectContext.contentId) !== null && _a !== void 0 ? _a : 'select', this.value);
     }
     componentDidLoad() {
         this.registerWithParent();
+        this.refreshOptionId();
         this.contextSubscription = subscribeToContextChange(this.el, 'seki-select', this.handleParentContextChange);
     }
     connectedCallback() {
@@ -101,6 +109,17 @@ export class SekiSelectOption {
         selectContext === null || selectContext === void 0 ? void 0 : selectContext.unregisterOption(this.value);
         this.contextSubscription.unsubscribe();
     }
+    // If render() ran before the parent's selectContext was available (see the
+    // 'select' fallback in optionId's getter above), the DOM id was baked in as
+    // a non-unique placeholder. componentDidLoad and every later context change
+    // both call this to correct it once the real contentId is known — cheap
+    // because it's just an attribute write, not a structural re-render.
+    refreshOptionId() {
+        const optionEl = this.el.querySelector('.option');
+        if (optionEl) {
+            optionEl.id = this.optionId;
+        }
+    }
     registerWithParent() {
         var _a;
         const selectContext = this.getSelectContext();
@@ -126,10 +145,10 @@ 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: '80f56a01cb4d6d1bda0dbcb3ab1359fe5fe2fed6' }, h("div", { key: '4156cfb7bf1c8ae1512873b2756e587ce1737f8e', 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: '1be406f2b60f0db6541b251fbd0b63bc8eb38c9c', class: "option-label" }, h("slot", { key: 'ffa8957d52bbb1f6495751a2f60ed0ae0f8ea511' })), h("span", { key: '0d0611e058e543e2a16b216307cb4eff2c40efa0', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '45026741cdf28ed09b225732355c0b2959d5ffe2', name: "selected-indicator" }, h("svg", { key: '2c8e79a63e2ea207a3f13250525a59348f5cd7e2', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c4672365e7c2f99ba326ac104d9e0edfc572df78', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: '5e81a06da7048aeea965ec7a1f3be01c38610b14' }, h("div", { key: '3129f00c2f8be28153ea68d4ad3552d5fe5babf2', 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: 'fa3daec06f3f25a8339cde8ed9e19778bec0f515', class: "option-label" }, h("slot", { key: 'd778727c4ad82c8b155c6157b2f2c13f7b20bd56' })), h("span", { key: 'a0103ece80cb3a52cf1aa0afaaab801093fa9118', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '6d17a76a97fec448881f315bfbd41714604325f5', name: "selected-indicator" }, h("svg", { key: '1b4066f6025db32d6d0e9c4c6e3cc6ee12844631', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c60be1174d75bc7f6f96e87d6f90a1ba4185d43e', 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"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select-option.css"]

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { buildOptionId } from "../../utils/select";
 import { syncTheme } from "../../utils/theme-sync";
 import { subscribeToContextChange } from "../../utils/context-bridge";
 /**
@@ -124,14 +125,14 @@ export class SekiSelectTrigger {
         }
         const isOpen = selectContext.open;
         const isDisabled = selectContext.disabled;
-        return (h(Host, null, h("button", { ref: (el) => (this.buttonRef = el), type: "button", class: "trigger-button", role: "combobox", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": selectContext.contentId, "aria-activedescendant": selectContext.focusedOptionValue
-                ? `option-${selectContext.focusedOptionValue}`
+        return (h(Host, null, h("button", { ref: (el) => (this.buttonRef = el), type: "button", class: "trigger-button", role: "combobox", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": selectContext.contentId, "aria-activedescendant": selectContext.focusedOptionValue !== null
+                ? buildOptionId(selectContext.contentId, selectContext.focusedOptionValue)
                 : undefined, "aria-label": selectContext.ariaLabel, "aria-labelledby": selectContext.ariaLabelledby, "aria-disabled": isDisabled ? 'true' : undefined, disabled: isDisabled, "data-disabled": isDisabled ? 'true' : undefined, "data-state": isOpen ? 'open' : 'closed' }, selectContext.multiple
             ? this.renderMultiValue(selectContext)
             : this.renderSingleValue(selectContext), h("svg", { class: "trigger-chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     static get is() { return "seki-select-trigger"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select-trigger.css"]

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

@@ -20,66 +20,99 @@ import { syncTheme } from "../../utils/theme-sync";
  */
 export class SekiSheet {
     constructor() {
+        /**
+         * Controlled open state. Also readable/writable as the `open` attribute, so
+         * `<seki-sheet open>` renders open with no script involved.
+         */
+        this.open = false;
+        /**
+         * Initial open state for uncontrolled usage
+         */
+        this.defaultOpen = false;
         /**
          * Internal state for sheet open/closed
          */
-        this.isOpen = false;
+        this._isOpen = false;
+    }
+    componentWillLoad() {
+        this._isOpen = this.open || this.defaultOpen;
+        this.open = this._isOpen;
+    }
+    componentDidLoad() {
+        this.updateContext();
+    }
+    handleOpenPropChange(newValue) {
+        // An outside assignment (`sheet.open = true`) has to win after first render;
+        // `open` is only read once in componentWillLoad otherwise.
+        if (newValue === this._isOpen)
+            return;
+        if (newValue) {
+            this.openSheet();
+        }
+        else {
+            this.closeSheet();
+        }
     }
     /**
      * Opens the sheet
      */
-    async open() {
-        this.isOpen = true;
+    async openSheet() {
+        if (this._isOpen)
+            return;
+        this._isOpen = true;
+        this.open = true;
         this.updateContext();
         this.sheetOpen.emit();
+        this.sekiOpenChange.emit(true);
     }
     /**
      * Closes the sheet
      */
-    async close() {
-        this.isOpen = false;
+    async closeSheet() {
+        if (!this._isOpen)
+            return;
+        this._isOpen = false;
+        this.open = false;
         this.updateContext();
         this.sheetClose.emit();
-    }
-    updateContext() {
-        // seki-sheet-content has no other way to know this sheet's open state — it
-        // reads this off the host element via closest('seki-sheet').
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._sheetContext = { isOpen: this.isOpen };
-    }
-    componentDidLoad() {
-        this.updateContext();
+        this.sekiOpenChange.emit(false);
     }
     /**
      * Toggles the sheet
      */
-    async toggle() {
-        if (this.isOpen) {
-            await this.close();
+    async toggleSheet() {
+        if (this._isOpen) {
+            await this.closeSheet();
         }
         else {
-            await this.open();
+            await this.openSheet();
         }
     }
+    updateContext() {
+        // seki-sheet-content has no other way to know this sheet's open state — it
+        // reads this off the host element via closest('seki-sheet').
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.el._sheetContext = { isOpen: this._isOpen };
+    }
     handleTriggerClick() {
-        this.toggle();
+        this.toggleSheet();
     }
     handleCloseSheet() {
-        this.close();
+        this.closeSheet();
     }
     handleKeydown(ev) {
-        if (this.isOpen && ev.key === 'Escape') {
-            this.close();
+        if (this._isOpen && ev.key === 'Escape') {
+            this.closeSheet();
         }
     }
     connectedCallback() {
         syncTheme(this.el);
     }
     render() {
-        return (h("div", { key: '2cfec9307b44b6b51ce1414392b4c2463fc24c96', class: {
+        return (h("div", { key: '0d7f939728b7332e649e79b9189215f6ec2ee0ad', class: {
                 'seki-sheet': true,
-                'seki-sheet--open': this.isOpen,
-            }, part: "sheet" }, h("slot", { key: 'a8785aaf5f121ab236840527c54aefce477197d3' }), this.isOpen && (h("div", { key: '60727f47bb3426fded9d40202811d363e082c93e', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.close() }))));
+                'seki-sheet--open': this._isOpen,
+            }, part: "sheet" }, h("slot", { key: '2ab893341627204176329e2a40ac342f9d92f93c' }), this._isOpen && (h("div", { key: 'f7f131f3a2a287926d1547ad656f8125a00a1150', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.closeSheet() }))));
     }
     static get is() { return "seki-sheet"; }
     static get encapsulation() { return "shadow"; }
@@ -93,9 +126,53 @@ export class SekiSheet {
             "$": ["seki-sheet.css"]
         };
     }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled open state. Also readable/writable as the `open` attribute, so\n`<seki-sheet open>` renders open with no script involved."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial open state for uncontrolled usage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
+            }
+        };
+    }
     static get states() {
         return {
-            "isOpen": {}
+            "_isOpen": {}
         };
     }
     static get events() {
@@ -129,11 +206,26 @@ export class SekiSheet {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "sekiOpenChange",
+                "name": "sekiOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the open state changes. Matches the dialog/popover/collapsible\nevent shape so a consumer can listen to one event name across every overlay."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
         return {
-            "open": {
+            "openSheet": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -150,7 +242,7 @@ export class SekiSheet {
                     "tags": []
                 }
             },
-            "close": {
+            "closeSheet": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -167,7 +259,7 @@ export class SekiSheet {
                     "tags": []
                 }
             },
-            "toggle": {
+            "toggleSheet": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -187,6 +279,12 @@ export class SekiSheet {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenPropChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "triggerClick",

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);