@sekiui/elements 0.0.88 → 0.1.0

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/tooltip/seki-tooltip.js

@@ -41,6 +41,17 @@ export class SekiTooltip {
          * @min 0
          */
         this.offset = 8;
+        /**
+         * Controlled open state. Reflects to the `open` attribute, so
+         * `<seki-tooltip open>` renders visible with no script involved.
+         * @default false
+         */
+        this.open = false;
+        /**
+         * Initial open state for uncontrolled usage
+         * @default false
+         */
+        this.defaultOpen = false;
         /**
          * Internal state: whether tooltip is currently visible
          */
@@ -181,8 +192,11 @@ export class SekiTooltip {
      * @returns Promise resolves when tooltip is visible
      */
     async show() {
-        if (this.disabled)
+        if (this.disabled) {
+            // Keep the reflected prop honest when a show request is refused.
+            this.open = false;
             return;
+        }
         // Clear any pending hide timer
         if (this.hideTimer) {
             clearTimeout(this.hideTimer);
@@ -190,6 +204,7 @@ export class SekiTooltip {
         }
         // Set visible state
         this.isVisible = true;
+        this.open = true;
         // Calculate position
         this.calculatePosition();
         // Emit show event
@@ -207,6 +222,7 @@ export class SekiTooltip {
         }
         // Set hidden state
         this.isVisible = false;
+        this.open = false;
         // Emit hide event
         this.hideTooltip.emit({ reason: 'blur' });
     }
@@ -338,9 +354,31 @@ export class SekiTooltip {
         // here so it does not leak (and keep firing) after the tooltip is detached.
         document.removeEventListener('keydown', this.onEscapeKey);
     }
+    componentWillLoad() {
+        // `disabled` wins over a requested initial open state.
+        this.isVisible = (this.open || this.defaultOpen) && !this.disabled;
+        this.open = this.isVisible;
+    }
     componentDidLoad() {
         this.hasLoaded = true;
         this.attachTriggerListeners();
+        if (this.isVisible) {
+            // Children are only in place now, so the initial position can finally be
+            // measured against the trigger.
+            this.calculatePosition();
+        }
+    }
+    openChanged(newValue) {
+        // An outside assignment (`tooltip.open = true`) has to win after first render;
+        // `open` is only read once in componentWillLoad otherwise.
+        if (newValue === this.isVisible)
+            return;
+        if (newValue) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
     }
     connectedCallback() {
         syncTheme(this.el);
@@ -363,7 +401,7 @@ export class SekiTooltip {
             clearTimeout(this.longPressTimer);
     }
     render() {
-        return (h("div", { key: '70d4c876ab2b64a306893b555301ed08e438fff7', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: '6bcde89ad0903a7859e1717c45204416554bd78f', name: "content" }), h("div", { key: '481b96927ad6431e0415fce2695fc1c13011aa72', class: "tooltip-arrow" })));
+        return (h("div", { key: 'd934fb59ac9e6b47e208113f430dbdf151e4b9d8', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: '0fe73a7b7b0bcd405dec9a77ddcf0c4a7e2b4b09', name: "content" }), h("div", { key: '9917e3661c8740b69bdaca4e8e7aa168b0c7c47c', class: "tooltip-arrow" })));
     }
     static get is() { return "seki-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -485,6 +523,52 @@ export class SekiTooltip {
                 "reflect": false,
                 "attribute": "offset",
                 "defaultValue": "8"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Controlled open state. Reflects to the `open` attribute, so\n`<seki-tooltip open>` renders visible 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": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Initial open state for uncontrolled usage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
             }
         };
     }
@@ -622,4 +706,10 @@ export class SekiTooltip {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
 }

package/dist/collection/utils/select/index.js

@@ -4,3 +4,4 @@
  */
 export * from './types';
 export * from './select-context';
+export * from './option-id';

package/dist/collection/utils/select/option-id.js

@@ -0,0 +1,16 @@
+/**
+ * Deterministic, per-select-instance option id.
+ *
+ * seki-select's `contentId` (see `SelectContext.contentId` in
+ * `src/utils/select/types.ts`) is randomized once per `<seki-select>`
+ * instance. Prefixing the option id with it keeps ids collision-free across
+ * multiple `<seki-select>` instances on the same page that happen to share
+ * an option `value` — this only matters now that seki-select-option renders
+ * in scoped (non-shadow) mode and its `id` is a real, page-scoped DOM id
+ * assistive tech can actually resolve (see #300). Exported so both
+ * seki-select-option (which sets the id) and seki-select-trigger (which
+ * references it via aria-activedescendant) compute the exact same string.
+ */
+export function buildOptionId(contentId, value) {
+    return `${contentId}-option-${value}`;
+}

package/dist/components/p-CQQRfw1L.js

@@ -0,0 +1,18 @@
+/**
+ * Deterministic, per-select-instance option id.
+ *
+ * seki-select's `contentId` (see `SelectContext.contentId` in
+ * `src/utils/select/types.ts`) is randomized once per `<seki-select>`
+ * instance. Prefixing the option id with it keeps ids collision-free across
+ * multiple `<seki-select>` instances on the same page that happen to share
+ * an option `value` — this only matters now that seki-select-option renders
+ * in scoped (non-shadow) mode and its `id` is a real, page-scoped DOM id
+ * assistive tech can actually resolve (see #300). Exported so both
+ * seki-select-option (which sets the id) and seki-select-trigger (which
+ * references it via aria-activedescendant) compute the exact same string.
+ */
+function buildOptionId(contentId, value) {
+    return `${contentId}-option-${value}`;
+}
+
+export { buildOptionId as b };

package/dist/components/seki-date-picker.js

@@ -13,6 +13,7 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
         this.sekiChange = createEvent(this, "sekiChange");
         this.sekiOpen = createEvent(this, "sekiOpen");
         this.sekiClose = createEvent(this, "sekiClose");
+        this.sekiOpenChange = createEvent(this, "sekiOpenChange");
         /**
          * Selection mode: single date or date range
          * @default 'single'
@@ -36,27 +37,25 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
          */
         this.required = false;
         /**
-         * Whether the popover is open
+         * Controlled open state of the popover. Also readable/writable as the `open`
+         * attribute, so `<seki-date-picker open>` renders open with no script involved.
          */
-        this.isOpen = false;
+        this.open = false;
+        /**
+         * Initial open state for uncontrolled usage
+         */
+        this.defaultOpen = false;
+        /**
+         * Internal state for whether the popover is open
+         */
+        this._isOpen = false;
         this.handleTriggerClick = () => {
-            if (this.disabled)
-                return;
-            this.isOpen = !this.isOpen;
-            if (this.isOpen) {
-                this.sekiOpen.emit();
-                requestAnimationFrame(() => {
-                    this.positionPopover();
-                });
-            }
-            else {
-                this.sekiClose.emit();
-            }
+            this.toggleDatePicker();
         };
         this.handleDateSelect = (e) => {
             this.value = e.detail;
             this.sekiChange.emit(e.detail);
-            this.close();
+            this.closeDatePicker();
         };
         this.handleRangeSelect = (e) => {
             var _a, _b;
@@ -64,16 +63,37 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
             this.rangeTo = (_b = e.detail.to) !== null && _b !== void 0 ? _b : undefined;
             if (e.detail.from && e.detail.to) {
                 this.sekiChange.emit(e.detail);
-                this.close();
+                this.closeDatePicker();
             }
         };
     }
     componentWillLoad() {
+        this._isOpen = (this.open || this.defaultOpen) && !this.disabled;
+        this.open = this._isOpen;
         if ('attachInternals' in H.prototype) {
             this.internals = this.el.attachInternals();
         }
         this.updateFormValue();
     }
+    componentDidLoad() {
+        if (this._isOpen) {
+            requestAnimationFrame(() => {
+                this.positionPopover();
+            });
+        }
+    }
+    handleOpenPropChange(newValue) {
+        // An outside assignment (`picker.open = true`) has to win after first render;
+        // `open` is only read once in componentWillLoad otherwise.
+        if (newValue === this._isOpen)
+            return;
+        if (newValue) {
+            this.openDatePicker();
+        }
+        else {
+            this.closeDatePicker();
+        }
+    }
     updateFormValue() {
         if (this.internals && typeof this.internals.setFormValue === 'function') {
             const value = this.parseDate(this.value);
@@ -138,28 +158,35 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
     }
     handleKeyDown(event) {
         var _a;
-        if (event.key === 'Escape' && this.isOpen) {
+        if (event.key === 'Escape' && this._isOpen) {
             event.preventDefault();
-            this.close();
+            this.closeDatePicker();
             (_a = this.triggerRef) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
     handleDocumentClick(event) {
-        if (!this.isOpen)
+        if (!this._isOpen)
             return;
         const target = event.target;
         if (!this.el.contains(target)) {
-            this.close();
+            this.closeDatePicker();
         }
     }
     /**
      * Open the date picker popover
      */
-    async open() {
-        if (this.disabled)
+    async openDatePicker() {
+        if (this.disabled) {
+            // Keep the reflected prop honest when an open request is refused.
+            this.open = false;
+            return;
+        }
+        if (this._isOpen)
             return;
-        this.isOpen = true;
+        this._isOpen = true;
+        this.open = true;
         this.sekiOpen.emit();
+        this.sekiOpenChange.emit(true);
         requestAnimationFrame(() => {
             this.positionPopover();
         });
@@ -167,19 +194,23 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
     /**
      * Close the date picker popover
      */
-    async close() {
-        this.isOpen = false;
+    async closeDatePicker() {
+        if (!this._isOpen)
+            return;
+        this._isOpen = false;
+        this.open = false;
         this.sekiClose.emit();
+        this.sekiOpenChange.emit(false);
     }
     /**
      * Toggle the date picker popover
      */
-    async toggle() {
-        if (this.isOpen) {
-            await this.close();
+    async toggleDatePicker() {
+        if (this._isOpen) {
+            await this.closeDatePicker();
         }
         else {
-            await this.open();
+            await this.openDatePicker();
         }
     }
     connectedCallback() {
@@ -191,16 +222,17 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
         const selectedDate = this.parseDate(this.value);
         const rangeFrom = this.parseDate(this.rangeFrom);
         const rangeTo = this.parseDate(this.rangeTo);
-        return (h("div", { key: 'a3d95b5462a9acf744d73e4572b42ad0d64372a0', class: "seki-date-picker" }, h("button", { key: '75df88046597e51a5c1126d2c2a24575fb94bd80', type: "button", ref: el => (this.triggerRef = el), class: {
+        return (h("div", { key: '79b9eec6c71d77d2af7f006ee03f6a836f5405df', class: "seki-date-picker" }, h("button", { key: '54460e6603c806d24eb0c36baa1b5dbdd7aeb90d', type: "button", ref: el => (this.triggerRef = el), class: {
                 'seki-date-picker__trigger': true,
-                'seki-date-picker__trigger--open': this.isOpen,
+                'seki-date-picker__trigger--open': this._isOpen,
                 'seki-date-picker__trigger--disabled': this.disabled,
                 'seki-date-picker__trigger--has-value': hasValue,
-            }, disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.ariaLabel || this.placeholder, onClick: this.handleTriggerClick }, h("svg", { key: '51d3e52e4ff4fe0ff6607f1accddb3b2307e3ad9', class: "seki-date-picker__icon", 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" }, h("rect", { key: 'a0682b1fe6eb713698f34f0af5faff55e2f53191', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: 'f18a51a0b1f98743dab69923ee12e6565716e141', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: 'd3488713bec1c91106d9a5987788cc1d49548275', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: 'e6275d8fd1a8fd664771f908735b62d8a8278ca9', x1: "3", y1: "10", x2: "21", y2: "10" })), h("span", { key: 'b7f5ddea3a0332f29aac7cfe9fcb6a895a3e1226', class: "seki-date-picker__value" }, hasValue ? displayValue : this.placeholder)), this.isOpen && (h("div", { key: 'eded3f27883fd65ac76e860d23e3009693fea06f', ref: el => (this.popoverRef = el), class: "seki-date-picker__popover", role: "dialog", "aria-modal": "true", "aria-label": "Choose date" }, h("seki-calendar", { key: '5013ae98d89933c8051d3699981a38817fc0e49e', mode: this.mode, selected: selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toISOString(), "range-from": rangeFrom === null || rangeFrom === void 0 ? void 0 : rangeFrom.toISOString(), "range-to": rangeTo === null || rangeTo === void 0 ? void 0 : rangeTo.toISOString(), "min-date": this.minDate, "max-date": this.maxDate, onSekiSelect: this.handleDateSelect, onSekiRangeSelect: this.handleRangeSelect })))));
+            }, disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-label": this.ariaLabel || this.placeholder, onClick: this.handleTriggerClick }, h("svg", { key: 'b65b7e82e5ad5485f5f2dd5934fb00fe7a2df0e4', class: "seki-date-picker__icon", 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" }, h("rect", { key: 'be93574c133eb04d61d765fa0d4d893dfd18de5b', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: 'f60deabd7d2c3061b08b8245650935a85068937a', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: 'e6dba2b6b7501a6e2de21a29edcafe1927f1ad4d', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '4ca41a9af0155298fcaf2f1273f3833ba1df379a', x1: "3", y1: "10", x2: "21", y2: "10" })), h("span", { key: 'f9ef3166165413282928920a7a1b726b1edc4d54', class: "seki-date-picker__value" }, hasValue ? displayValue : this.placeholder)), this._isOpen && (h("div", { key: '561b160f14e86b0a7c043a30ed6e315465d6160b', ref: el => (this.popoverRef = el), class: "seki-date-picker__popover", role: "dialog", "aria-modal": "true", "aria-label": "Choose date" }, h("seki-calendar", { key: '96688e161b3a3814ed27135905de95df437c8bbc', mode: this.mode, selected: selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toISOString(), "range-from": rangeFrom === null || rangeFrom === void 0 ? void 0 : rangeFrom.toISOString(), "range-to": rangeTo === null || rangeTo === void 0 ? void 0 : rangeTo.toISOString(), "min-date": this.minDate, "max-date": this.maxDate, onSekiSelect: this.handleDateSelect, onSekiRangeSelect: this.handleRangeSelect })))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
     static get watchers() { return {
+        "open": ["handleOpenPropChange"],
         "value": ["updateFormValue"],
         "rangeFrom": ["updateFormValue"],
         "rangeTo": ["updateFormValue"]
@@ -219,11 +251,14 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
         "name": [1],
         "required": [4],
         "ariaLabel": [1, "aria-label"],
-        "isOpen": [32],
-        "open": [64],
-        "close": [64],
-        "toggle": [64]
+        "open": [1540],
+        "defaultOpen": [4, "default-open"],
+        "_isOpen": [32],
+        "openDatePicker": [64],
+        "closeDatePicker": [64],
+        "toggleDatePicker": [64]
     }, [[0, "keydown", "handleKeyDown"], [4, "click", "handleDocumentClick"]], {
+        "open": ["handleOpenPropChange"],
         "value": ["updateFormValue"],
         "rangeFrom": ["updateFormValue"],
         "rangeTo": ["updateFormValue"]