@sekiui/elements 0.0.88 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/dist/cdn/p-CQQRfw1L.js +18 -0
  2. package/dist/cdn/seki-date-picker.js +71 -36
  3. package/dist/cdn/seki-drawer.js +76 -32
  4. package/dist/cdn/seki-hover-card.js +58 -3
  5. package/dist/cdn/seki-select-content.js +21 -13
  6. package/dist/cdn/seki-select-group.js +3 -4
  7. package/dist/cdn/seki-select-option.js +33 -15
  8. package/dist/cdn/seki-select-trigger.js +6 -4
  9. package/dist/cdn/seki-sheet.js +71 -30
  10. package/dist/cdn/seki-tooltip.js +47 -2
  11. package/dist/cjs/loader.cjs.js +1 -1
  12. package/dist/cjs/option-id-wIa73qWK.js +20 -0
  13. package/dist/cjs/seki-date-picker.cjs.entry.js +64 -32
  14. package/dist/cjs/seki-drawer.cjs.entry.js +67 -27
  15. package/dist/cjs/seki-hover-card.cjs.entry.js +52 -2
  16. package/dist/cjs/seki-select-content.cjs.entry.js +20 -11
  17. package/dist/cjs/seki-select-group.cjs.entry.js +2 -2
  18. package/dist/cjs/seki-select-option.cjs.entry.js +32 -13
  19. package/dist/cjs/seki-select-trigger.cjs.entry.js +5 -2
  20. package/dist/cjs/seki-sheet.cjs.entry.js +62 -25
  21. package/dist/cjs/seki-tooltip.cjs.entry.js +43 -2
  22. package/dist/cjs/sekiui.cjs.js +1 -1
  23. package/dist/collection/components/date-picker/seki-date-picker.js +124 -36
  24. package/dist/collection/components/drawer/seki-drawer.js +132 -31
  25. package/dist/collection/components/hover-card/seki-hover-card.js +138 -2
  26. package/dist/collection/components/select-content/seki-select-content.css +8 -0
  27. package/dist/collection/components/select-content/seki-select-content.js +20 -11
  28. package/dist/collection/components/select-group/seki-select-group.js +2 -2
  29. package/dist/collection/components/select-option/seki-select-option.js +32 -13
  30. package/dist/collection/components/select-trigger/seki-select-trigger.js +5 -2
  31. package/dist/collection/components/sheet/seki-sheet.js +127 -29
  32. package/dist/collection/components/tooltip/seki-tooltip.js +92 -2
  33. package/dist/collection/utils/select/index.js +1 -0
  34. package/dist/collection/utils/select/option-id.js +16 -0
  35. package/dist/components/p-CQQRfw1L.js +18 -0
  36. package/dist/components/seki-date-picker.js +71 -36
  37. package/dist/components/seki-drawer.js +76 -32
  38. package/dist/components/seki-hover-card.js +58 -3
  39. package/dist/components/seki-select-content.js +21 -13
  40. package/dist/components/seki-select-group.js +3 -4
  41. package/dist/components/seki-select-option.js +33 -15
  42. package/dist/components/seki-select-trigger.js +6 -4
  43. package/dist/components/seki-sheet.js +71 -30
  44. package/dist/components/seki-tooltip.js +47 -2
  45. package/dist/esm/loader.js +1 -1
  46. package/dist/esm/option-id-CQQRfw1L.js +18 -0
  47. package/dist/esm/seki-date-picker.entry.js +64 -32
  48. package/dist/esm/seki-drawer.entry.js +67 -27
  49. package/dist/esm/seki-hover-card.entry.js +52 -2
  50. package/dist/esm/seki-select-content.entry.js +20 -11
  51. package/dist/esm/seki-select-group.entry.js +2 -2
  52. package/dist/esm/seki-select-option.entry.js +32 -13
  53. package/dist/esm/seki-select-trigger.entry.js +5 -2
  54. package/dist/esm/seki-sheet.entry.js +62 -25
  55. package/dist/esm/seki-tooltip.entry.js +43 -2
  56. package/dist/esm/sekiui.js +1 -1
  57. package/dist/sekiui/p-05b33a61.entry.js +1 -0
  58. package/dist/sekiui/p-1cd6b3e6.entry.js +1 -0
  59. package/dist/sekiui/p-3de5878b.entry.js +1 -0
  60. package/dist/sekiui/p-649dbdf0.entry.js +1 -0
  61. package/dist/sekiui/p-CQQRfw1L.js +1 -0
  62. package/dist/sekiui/p-a2ae6d1b.entry.js +1 -0
  63. package/dist/sekiui/p-b82c2267.entry.js +1 -0
  64. package/dist/sekiui/p-c0f21b6a.entry.js +1 -0
  65. package/dist/sekiui/p-c3ef507f.entry.js +1 -0
  66. package/dist/sekiui/p-fe3e661d.entry.js +1 -0
  67. package/dist/sekiui/sekiui.esm.js +1 -1
  68. package/dist/types/components/date-picker/seki-date-picker.d.ts +21 -5
  69. package/dist/types/components/drawer/seki-drawer.d.ts +22 -6
  70. package/dist/types/components/hover-card/seki-hover-card.d.ts +21 -0
  71. package/dist/types/components/select-content/seki-select-content.d.ts +8 -5
  72. package/dist/types/components/select-option/seki-select-option.d.ts +6 -4
  73. package/dist/types/components/sheet/seki-sheet.d.ts +22 -6
  74. package/dist/types/components/tooltip/seki-tooltip.d.ts +13 -0
  75. package/dist/types/components.d.ts +132 -9
  76. package/dist/types/utils/select/index.d.ts +1 -0
  77. package/dist/types/utils/select/option-id.d.ts +14 -0
  78. package/package.json +1 -1
  79. package/dist/sekiui/p-1866201e.entry.js +0 -1
  80. package/dist/sekiui/p-2e18933c.entry.js +0 -1
  81. package/dist/sekiui/p-779764c0.entry.js +0 -1
  82. package/dist/sekiui/p-786c153b.entry.js +0 -1
  83. package/dist/sekiui/p-87bcbb66.entry.js +0 -1
  84. package/dist/sekiui/p-9abfa3a5.entry.js +0 -1
  85. package/dist/sekiui/p-ac7bd611.entry.js +0 -1
  86. package/dist/sekiui/p-c62c4ad7.entry.js +0 -1
  87. package/dist/sekiui/p-e45e6992.entry.js +0 -1
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Deterministic, per-select-instance option id.
3
+ *
4
+ * seki-select's `contentId` (see `SelectContext.contentId` in
5
+ * `src/utils/select/types.ts`) is randomized once per `<seki-select>`
6
+ * instance. Prefixing the option id with it keeps ids collision-free across
7
+ * multiple `<seki-select>` instances on the same page that happen to share
8
+ * an option `value` — this only matters now that seki-select-option renders
9
+ * in scoped (non-shadow) mode and its `id` is a real, page-scoped DOM id
10
+ * assistive tech can actually resolve (see #300). Exported so both
11
+ * seki-select-option (which sets the id) and seki-select-trigger (which
12
+ * references it via aria-activedescendant) compute the exact same string.
13
+ */
14
+ function buildOptionId(contentId, value) {
15
+ return `${contentId}-option-${value}`;
16
+ }
17
+
18
+ export { buildOptionId as b };
@@ -13,6 +13,7 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
13
13
  this.sekiChange = createEvent(this, "sekiChange");
14
14
  this.sekiOpen = createEvent(this, "sekiOpen");
15
15
  this.sekiClose = createEvent(this, "sekiClose");
16
+ this.sekiOpenChange = createEvent(this, "sekiOpenChange");
16
17
  /**
17
18
  * Selection mode: single date or date range
18
19
  * @default 'single'
@@ -36,27 +37,25 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
36
37
  */
37
38
  this.required = false;
38
39
  /**
39
- * Whether the popover is open
40
+ * Controlled open state of the popover. Also readable/writable as the `open`
41
+ * attribute, so `<seki-date-picker open>` renders open with no script involved.
40
42
  */
41
- this.isOpen = false;
43
+ this.open = false;
44
+ /**
45
+ * Initial open state for uncontrolled usage
46
+ */
47
+ this.defaultOpen = false;
48
+ /**
49
+ * Internal state for whether the popover is open
50
+ */
51
+ this._isOpen = false;
42
52
  this.handleTriggerClick = () => {
43
- if (this.disabled)
44
- return;
45
- this.isOpen = !this.isOpen;
46
- if (this.isOpen) {
47
- this.sekiOpen.emit();
48
- requestAnimationFrame(() => {
49
- this.positionPopover();
50
- });
51
- }
52
- else {
53
- this.sekiClose.emit();
54
- }
53
+ this.toggleDatePicker();
55
54
  };
56
55
  this.handleDateSelect = (e) => {
57
56
  this.value = e.detail;
58
57
  this.sekiChange.emit(e.detail);
59
- this.close();
58
+ this.closeDatePicker();
60
59
  };
61
60
  this.handleRangeSelect = (e) => {
62
61
  var _a, _b;
@@ -64,16 +63,37 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
64
63
  this.rangeTo = (_b = e.detail.to) !== null && _b !== void 0 ? _b : undefined;
65
64
  if (e.detail.from && e.detail.to) {
66
65
  this.sekiChange.emit(e.detail);
67
- this.close();
66
+ this.closeDatePicker();
68
67
  }
69
68
  };
70
69
  }
71
70
  componentWillLoad() {
71
+ this._isOpen = (this.open || this.defaultOpen) && !this.disabled;
72
+ this.open = this._isOpen;
72
73
  if ('attachInternals' in H.prototype) {
73
74
  this.internals = this.el.attachInternals();
74
75
  }
75
76
  this.updateFormValue();
76
77
  }
78
+ componentDidLoad() {
79
+ if (this._isOpen) {
80
+ requestAnimationFrame(() => {
81
+ this.positionPopover();
82
+ });
83
+ }
84
+ }
85
+ handleOpenPropChange(newValue) {
86
+ // An outside assignment (`picker.open = true`) has to win after first render;
87
+ // `open` is only read once in componentWillLoad otherwise.
88
+ if (newValue === this._isOpen)
89
+ return;
90
+ if (newValue) {
91
+ this.openDatePicker();
92
+ }
93
+ else {
94
+ this.closeDatePicker();
95
+ }
96
+ }
77
97
  updateFormValue() {
78
98
  if (this.internals && typeof this.internals.setFormValue === 'function') {
79
99
  const value = this.parseDate(this.value);
@@ -138,28 +158,35 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
138
158
  }
139
159
  handleKeyDown(event) {
140
160
  var _a;
141
- if (event.key === 'Escape' && this.isOpen) {
161
+ if (event.key === 'Escape' && this._isOpen) {
142
162
  event.preventDefault();
143
- this.close();
163
+ this.closeDatePicker();
144
164
  (_a = this.triggerRef) === null || _a === void 0 ? void 0 : _a.focus();
145
165
  }
146
166
  }
147
167
  handleDocumentClick(event) {
148
- if (!this.isOpen)
168
+ if (!this._isOpen)
149
169
  return;
150
170
  const target = event.target;
151
171
  if (!this.el.contains(target)) {
152
- this.close();
172
+ this.closeDatePicker();
153
173
  }
154
174
  }
155
175
  /**
156
176
  * Open the date picker popover
157
177
  */
158
- async open() {
159
- if (this.disabled)
178
+ async openDatePicker() {
179
+ if (this.disabled) {
180
+ // Keep the reflected prop honest when an open request is refused.
181
+ this.open = false;
182
+ return;
183
+ }
184
+ if (this._isOpen)
160
185
  return;
161
- this.isOpen = true;
186
+ this._isOpen = true;
187
+ this.open = true;
162
188
  this.sekiOpen.emit();
189
+ this.sekiOpenChange.emit(true);
163
190
  requestAnimationFrame(() => {
164
191
  this.positionPopover();
165
192
  });
@@ -167,19 +194,23 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
167
194
  /**
168
195
  * Close the date picker popover
169
196
  */
170
- async close() {
171
- this.isOpen = false;
197
+ async closeDatePicker() {
198
+ if (!this._isOpen)
199
+ return;
200
+ this._isOpen = false;
201
+ this.open = false;
172
202
  this.sekiClose.emit();
203
+ this.sekiOpenChange.emit(false);
173
204
  }
174
205
  /**
175
206
  * Toggle the date picker popover
176
207
  */
177
- async toggle() {
178
- if (this.isOpen) {
179
- await this.close();
208
+ async toggleDatePicker() {
209
+ if (this._isOpen) {
210
+ await this.closeDatePicker();
180
211
  }
181
212
  else {
182
- await this.open();
213
+ await this.openDatePicker();
183
214
  }
184
215
  }
185
216
  connectedCallback() {
@@ -191,16 +222,17 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
191
222
  const selectedDate = this.parseDate(this.value);
192
223
  const rangeFrom = this.parseDate(this.rangeFrom);
193
224
  const rangeTo = this.parseDate(this.rangeTo);
194
- return (h("div", { key: 'a3d95b5462a9acf744d73e4572b42ad0d64372a0', class: "seki-date-picker" }, h("button", { key: '75df88046597e51a5c1126d2c2a24575fb94bd80', type: "button", ref: el => (this.triggerRef = el), class: {
225
+ return (h("div", { key: '79b9eec6c71d77d2af7f006ee03f6a836f5405df', class: "seki-date-picker" }, h("button", { key: '54460e6603c806d24eb0c36baa1b5dbdd7aeb90d', type: "button", ref: el => (this.triggerRef = el), class: {
195
226
  'seki-date-picker__trigger': true,
196
- 'seki-date-picker__trigger--open': this.isOpen,
227
+ 'seki-date-picker__trigger--open': this._isOpen,
197
228
  'seki-date-picker__trigger--disabled': this.disabled,
198
229
  'seki-date-picker__trigger--has-value': hasValue,
199
- }, 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 })))));
230
+ }, 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 })))));
200
231
  }
201
232
  static get formAssociated() { return true; }
202
233
  get el() { return this; }
203
234
  static get watchers() { return {
235
+ "open": ["handleOpenPropChange"],
204
236
  "value": ["updateFormValue"],
205
237
  "rangeFrom": ["updateFormValue"],
206
238
  "rangeTo": ["updateFormValue"]
@@ -219,11 +251,14 @@ const SekiDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SekiDatePicker e
219
251
  "name": [1],
220
252
  "required": [4],
221
253
  "ariaLabel": [1, "aria-label"],
222
- "isOpen": [32],
223
- "open": [64],
224
- "close": [64],
225
- "toggle": [64]
254
+ "open": [1540],
255
+ "defaultOpen": [4, "default-open"],
256
+ "_isOpen": [32],
257
+ "openDatePicker": [64],
258
+ "closeDatePicker": [64],
259
+ "toggleDatePicker": [64]
226
260
  }, [[0, "keydown", "handleKeyDown"], [4, "click", "handleDocumentClick"]], {
261
+ "open": ["handleOpenPropChange"],
227
262
  "value": ["updateFormValue"],
228
263
  "rangeFrom": ["updateFormValue"],
229
264
  "rangeTo": ["updateFormValue"]
@@ -12,51 +12,76 @@ const SekiDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SekiDrawer extends H
12
12
  this.drawerOpen = createEvent(this, "drawerOpen");
13
13
  this.drawerClose = createEvent(this, "drawerClose");
14
14
  this.drawerSnap = createEvent(this, "drawerSnap");
15
+ this.sekiOpenChange = createEvent(this, "sekiOpenChange");
16
+ /**
17
+ * Controlled open state. Also readable/writable as the `open` attribute, so
18
+ * `<seki-drawer open>` renders open with no script involved.
19
+ */
20
+ this.open = false;
21
+ /**
22
+ * Initial open state for uncontrolled usage
23
+ */
24
+ this.defaultOpen = false;
15
25
  /**
16
26
  * Internal state for drawer open/closed
17
27
  */
18
- this.isOpen = false;
28
+ this._isOpen = false;
19
29
  /**
20
30
  * Current snap point (0-1)
21
31
  */
22
32
  this.currentSnapPoint = 1;
23
33
  }
34
+ componentWillLoad() {
35
+ this._isOpen = this.open || this.defaultOpen;
36
+ this.open = this._isOpen;
37
+ this.currentSnapPoint = this._isOpen ? 1 : 0;
38
+ }
39
+ componentDidLoad() {
40
+ this.updateContext();
41
+ }
42
+ handleOpenPropChange(newValue) {
43
+ // An outside assignment (`drawer.open = true`) has to win after first render;
44
+ // `open` is only read once in componentWillLoad otherwise.
45
+ if (newValue === this._isOpen)
46
+ return;
47
+ if (newValue) {
48
+ this.openDrawer();
49
+ }
50
+ else {
51
+ this.closeDrawer();
52
+ }
53
+ }
24
54
  /**
25
55
  * Opens the drawer
26
56
  */
27
- async open() {
28
- this.isOpen = true;
57
+ async openDrawer() {
58
+ this._isOpen = true;
59
+ this.open = true;
29
60
  this.currentSnapPoint = 1;
30
61
  this.updateContext();
31
62
  this.drawerOpen.emit();
63
+ this.sekiOpenChange.emit(true);
32
64
  }
33
65
  /**
34
66
  * Closes the drawer
35
67
  */
36
- async close() {
37
- this.isOpen = false;
68
+ async closeDrawer() {
69
+ this._isOpen = false;
70
+ this.open = false;
38
71
  this.currentSnapPoint = 0;
39
72
  this.updateContext();
40
73
  this.drawerClose.emit();
41
- }
42
- updateContext() {
43
- // seki-drawer-content has no other way to know this drawer's open state —
44
- // it reads this off the host element via closest('seki-drawer').
45
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
46
- this.el._drawerContext = { isOpen: this.isOpen };
47
- }
48
- componentDidLoad() {
49
- this.updateContext();
74
+ this.sekiOpenChange.emit(false);
50
75
  }
51
76
  /**
52
77
  * Toggles the drawer
53
78
  */
54
- async toggle() {
55
- if (this.isOpen) {
56
- await this.close();
79
+ async toggleDrawer() {
80
+ if (this._isOpen) {
81
+ await this.closeDrawer();
57
82
  }
58
83
  else {
59
- await this.open();
84
+ await this.openDrawer();
60
85
  }
61
86
  }
62
87
  /**
@@ -64,48 +89,67 @@ const SekiDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SekiDrawer extends H
64
89
  */
65
90
  async snapTo(point) {
66
91
  if (point <= 0) {
67
- await this.close();
92
+ await this.closeDrawer();
68
93
  }
69
94
  else {
70
95
  this.currentSnapPoint = point;
71
- this.isOpen = true;
96
+ const wasOpen = this._isOpen;
97
+ this._isOpen = true;
98
+ this.open = true;
72
99
  this.updateContext();
100
+ if (!wasOpen) {
101
+ this.drawerOpen.emit();
102
+ this.sekiOpenChange.emit(true);
103
+ }
73
104
  this.drawerSnap.emit({ point });
74
105
  }
75
106
  }
107
+ updateContext() {
108
+ // seki-drawer-content has no other way to know this drawer's open state —
109
+ // it reads this off the host element via closest('seki-drawer').
110
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
111
+ this.el._drawerContext = { isOpen: this._isOpen };
112
+ }
76
113
  handleTriggerClick() {
77
- this.toggle();
114
+ this.toggleDrawer();
78
115
  }
79
116
  handleRequestClose() {
80
- this.close();
117
+ this.closeDrawer();
81
118
  }
82
119
  handleRequestSnap(event) {
83
120
  this.snapTo(event.detail.point);
84
121
  }
85
122
  handleKeydown(ev) {
86
- if (this.isOpen && ev.key === 'Escape') {
87
- this.close();
123
+ if (this._isOpen && ev.key === 'Escape') {
124
+ this.closeDrawer();
88
125
  }
89
126
  }
90
127
  connectedCallback() {
91
128
  syncTheme(this.el);
92
129
  }
93
130
  render() {
94
- return (h("div", { key: '7ae3c36bf05c4e2d9957083912da105b559a47e6', class: {
131
+ return (h("div", { key: '824d218c42cd41a0a79bef604e940f6c95a64470', class: {
95
132
  'seki-drawer': true,
96
- 'seki-drawer--open': this.isOpen,
97
- }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: '6ef97e42496716b572d85d460dc25b63fdb8ff56' }), this.isOpen && (h("div", { key: 'fd17a0aa91fbd193a47ac1449eb85e6b972fe586', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.close() }))));
133
+ 'seki-drawer--open': this._isOpen,
134
+ }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: '26982c14006c01915390898306d79fa665e30463' }), this._isOpen && (h("div", { key: 'a0f90520c0deaa5c320bbc027ca5b6a4edc4d9ff', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.closeDrawer() }))));
98
135
  }
99
136
  get el() { return this; }
137
+ static get watchers() { return {
138
+ "open": ["handleOpenPropChange"]
139
+ }; }
100
140
  static get style() { return sekiDrawerCss; }
101
141
  }, [257, "seki-drawer", {
102
- "isOpen": [32],
142
+ "open": [1540],
143
+ "defaultOpen": [4, "default-open"],
144
+ "_isOpen": [32],
103
145
  "currentSnapPoint": [32],
104
- "open": [64],
105
- "close": [64],
106
- "toggle": [64],
146
+ "openDrawer": [64],
147
+ "closeDrawer": [64],
148
+ "toggleDrawer": [64],
107
149
  "snapTo": [64]
108
- }, [[0, "triggerClick", "handleTriggerClick"], [0, "requestClose", "handleRequestClose"], [0, "requestSnap", "handleRequestSnap"], [8, "keydown", "handleKeydown"]]]);
150
+ }, [[0, "triggerClick", "handleTriggerClick"], [0, "requestClose", "handleRequestClose"], [0, "requestSnap", "handleRequestSnap"], [8, "keydown", "handleKeydown"]], {
151
+ "open": ["handleOpenPropChange"]
152
+ }]);
109
153
  function defineCustomElement$1() {
110
154
  if (typeof customElements === "undefined") {
111
155
  return;
@@ -35,6 +35,17 @@ const SekiHoverCard$1 = /*@__PURE__*/ proxyCustomElement(class SekiHoverCard ext
35
35
  * @default false
36
36
  */
37
37
  this.disabled = false;
38
+ /**
39
+ * Controlled open state. Reflects to the `open` attribute, so
40
+ * `<seki-hover-card open>` renders open with no script involved.
41
+ * @default false
42
+ */
43
+ this.open = false;
44
+ /**
45
+ * Initial open state for uncontrolled usage
46
+ * @default false
47
+ */
48
+ this.defaultOpen = false;
38
49
  /**
39
50
  * Internal open state
40
51
  */
@@ -95,6 +106,20 @@ const SekiHoverCard$1 = /*@__PURE__*/ proxyCustomElement(class SekiHoverCard ext
95
106
  }
96
107
  };
97
108
  }
109
+ componentWillLoad() {
110
+ // `disabled` wins over a requested initial open state.
111
+ this._isOpen = (this.open || this.defaultOpen) && !this.disabled;
112
+ this.open = this._isOpen;
113
+ }
114
+ openChanged(newValue) {
115
+ // An outside assignment (`card.open = true`) has to win after first render;
116
+ // `open` is only read once in componentWillLoad otherwise.
117
+ if (newValue === this._isOpen)
118
+ return;
119
+ this.cancelOpen();
120
+ this.cancelClose();
121
+ this.setOpen(newValue);
122
+ }
98
123
  disabledChanged(newValue) {
99
124
  if (newValue && this._isOpen) {
100
125
  this.setOpen(false);
@@ -104,9 +129,17 @@ const SekiHoverCard$1 = /*@__PURE__*/ proxyCustomElement(class SekiHoverCard ext
104
129
  * Set the open state and emit change event
105
130
  */
106
131
  setOpen(open) {
107
- if (this._isOpen === open)
132
+ if (open && this.disabled) {
133
+ // Keep the reflected prop honest when an open request is refused.
134
+ this.open = false;
135
+ return;
136
+ }
137
+ if (this._isOpen === open) {
138
+ this.open = open;
108
139
  return;
140
+ }
109
141
  this._isOpen = open;
142
+ this.open = open;
110
143
  this.updateContext();
111
144
  this.sekiOpenChange.emit({ open });
112
145
  if (open) {
@@ -116,6 +149,22 @@ const SekiHoverCard$1 = /*@__PURE__*/ proxyCustomElement(class SekiHoverCard ext
116
149
  this.removeScrollListener();
117
150
  }
118
151
  }
152
+ /**
153
+ * Open the hover card immediately, skipping `openDelay`
154
+ */
155
+ async openHoverCard() {
156
+ this.cancelOpen();
157
+ this.cancelClose();
158
+ this.setOpen(true);
159
+ }
160
+ /**
161
+ * Close the hover card immediately, skipping `closeDelay`
162
+ */
163
+ async closeHoverCard() {
164
+ this.cancelOpen();
165
+ this.cancelClose();
166
+ this.setOpen(false);
167
+ }
119
168
  /**
120
169
  * Close the hover card immediately and focus the trigger
121
170
  */
@@ -214,10 +263,11 @@ const SekiHoverCard$1 = /*@__PURE__*/ proxyCustomElement(class SekiHoverCard ext
214
263
  this.removeScrollListener();
215
264
  }
216
265
  render() {
217
- return (h(Host, { key: '228ce747491865bdc97fdef9b6da751f5833c588', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '777dade24e948b0e8ed21ebfa9595beb33fdf7a9', class: "hover-card" }, h("slot", { key: 'e5db3d1887de0241a95a7529aa3c5cb8d9c79ed2' }))));
266
+ return (h(Host, { key: '2a5bed9d9abe8647cdbd202d97984a05c8bb9eb1', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'c3f1e0be795cea7a59c08d2a341c7a40d8754e04', class: "hover-card" }, h("slot", { key: '0021d9d0ede67170a903db785c6b334ffc5aaba7' }))));
218
267
  }
219
268
  get el() { return this; }
220
269
  static get watchers() { return {
270
+ "open": ["openChanged"],
221
271
  "disabled": ["disabledChanged"]
222
272
  }; }
223
273
  static get style() { return sekiHoverCardCss; }
@@ -227,8 +277,13 @@ const SekiHoverCard$1 = /*@__PURE__*/ proxyCustomElement(class SekiHoverCard ext
227
277
  "side": [1],
228
278
  "align": [1],
229
279
  "disabled": [4],
230
- "_isOpen": [32]
280
+ "open": [1540],
281
+ "defaultOpen": [4, "default-open"],
282
+ "_isOpen": [32],
283
+ "openHoverCard": [64],
284
+ "closeHoverCard": [64]
231
285
  }, [[0, "sekiHoverCardRequestOpen", "handleRequestOpen"], [0, "sekiHoverCardRequestClose", "handleRequestClose"], [0, "sekiHoverCardCancelOpen", "handleCancelOpen"], [0, "sekiHoverCardCancelClose", "handleCancelClose"], [8, "keydown", "handleKeyDown"]], {
286
+ "open": ["openChanged"],
232
287
  "disabled": ["disabledChanged"]
233
288
  }]);
234
289
  function defineCustomElement$1() {
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, d as syncTheme, h, e as Host } from './p-DOY9Igbu.js';
2
2
 
3
- const sekiSelectContentCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%);--seki-chart-1:hsl(12, 76%, 61%);--seki-chart-2:hsl(173, 58%, 39%);--seki-chart-3:hsl(197, 37%, 24%);--seki-chart-4:hsl(43, 74%, 66%);--seki-chart-5:hsl(27, 87%, 67%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 42%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-primary-tint:hsl(0, 0%, 9%, 0.06);--seki-primary-tint-foreground:var(--seki-foreground);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-destructive-bg:hsl(0, 86%, 97%);--seki-destructive-soft-foreground:hsl(0, 63%, 31%);--seki-success:hsl(142, 71%, 45%);--seki-success-foreground:hsl(142, 64%, 24%);--seki-success-bg:hsl(142, 76%, 97%);--seki-warning:hsl(38, 92%, 50%);--seki-warning-foreground:hsl(21, 77%, 27%);--seki-warning-bg:hsl(48, 96%, 96%);--seki-info:hsl(217, 91%, 60%);--seki-info-foreground:hsl(224, 64%, 33%);--seki-info-bg:hsl(214, 100%, 97%);--seki-ring:hsl(0, 0%, 3.9%);--seki-ring-shadow:hsl(0, 0%, 3.9%, 0.1);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-primary-tint:hsl(0, 0%, 98%, 0.1);--seki-primary-tint-foreground:var(--seki-foreground);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-destructive-bg:rgba(239, 68, 68, 0.1);--seki-destructive-soft-foreground:hsl(0, 91%, 71%);--seki-success:hsl(142, 69%, 58%);--seki-success-foreground:hsl(142, 69%, 58%);--seki-success-bg:rgba(34, 197, 94, 0.1);--seki-warning:hsl(43, 96%, 56%);--seki-warning-foreground:hsl(43, 96%, 56%);--seki-warning-bg:rgba(245, 158, 11, 0.1);--seki-info:hsl(217, 92%, 68%);--seki-info-foreground:hsl(217, 92%, 68%);--seki-info-bg:rgba(59, 130, 246, 0.1);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);--seki-shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-none:1;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;--seki-radius-full:9999px;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:hsl(0, 0%, 98%);--seki-sidebar-foreground:hsl(240, 5.3%, 26.1%);--seki-sidebar-primary:hsl(240, 5.9%, 10%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98%);--seki-sidebar-accent:hsl(240, 4.8%, 95.9%);--seki-sidebar-accent-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-border:hsl(220, 13%, 91%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 3.8%, 46.1%);--seki-sidebar-menu-button-height:2rem;--seki-sidebar-menu-button-height-lg:3rem;--seki-sidebar-menu-button-padding:0.5rem;--seki-sidebar-menu-button-gap:0.5rem;--seki-sidebar-menu-button-radius:var(--seki-radius-md, 0.375rem);--seki-sidebar-menu-sub-padding-left:1.75rem;--seki-sidebar-menu-sub-border-width:1px;--seki-sidebar-group-padding:0.5rem;--seki-sidebar-group-label-height:2rem;--seki-sidebar-group-label-padding:0.5rem;--seki-sidebar-header-height:auto;--seki-sidebar-footer-height:auto;--seki-sidebar-header-padding:0.5rem;--seki-sidebar-footer-padding:0.5rem;--seki-sidebar-content-padding:0.5rem;--seki-sidebar-rail-width:1rem;--seki-sidebar-transition-duration:200ms;--seki-sidebar-transition-timing:ease-in-out;--seki-sidebar-mobile-breakpoint:768px;--seki-sidebar-overlay-bg:hsla(0, 0%, 0%, 0.8)}:host([data-theme='dark']){--seki-sidebar-background:hsl(240, 5.9%, 10%);--seki-sidebar-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-primary:hsl(0, 0%, 98%);--seki-sidebar-primary-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-accent:hsl(240, 3.7%, 15.9%);--seki-sidebar-accent-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-border:hsl(240, 3.7%, 15.9%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 5%, 64.9%)}:host{--seki-animation-fast:150ms;--seki-animation-normal:200ms;--seki-animation-slow:300ms;--seki-ease-in:cubic-bezier(0.4, 0, 1, 1);--seki-ease-out:cubic-bezier(0, 0, 0.2, 1);--seki-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--seki-accordion-content-height:auto}@keyframes seki-fade-in{from{opacity:0}to{opacity:1}}@keyframes seki-fade-out{from{opacity:1}to{opacity:0}}@keyframes seki-scale-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes seki-scale-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}@keyframes seki-slide-in-from-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-top{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes seki-slide-in-from-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-bottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes seki-slide-in-from-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes seki-slide-in-from-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-right{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes seki-accordion-down{from{height:0;opacity:0}to{height:var(--seki-accordion-content-height);opacity:1}}@keyframes seki-accordion-up{from{height:var(--seki-accordion-content-height);opacity:1}to{height:0;opacity:0}}@keyframes seki-zoom-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}@keyframes seki-zoom-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.96)}}@keyframes seki-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes seki-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@keyframes seki-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}@keyframes seki-collapsible-open{from{height:0;overflow:hidden}to{height:var(--seki-collapsible-content-height, auto)}}@keyframes seki-collapsible-close{from{height:var(--seki-collapsible-content-height, auto)}to{height:0;overflow:hidden}}@keyframes seki-toast-slide-in-right{from{transform:translateX(calc(100% + 1rem))}to{transform:translateX(0)}}@keyframes seki-toast-slide-out-right{from{transform:translateX(0)}to{transform:translateX(calc(100% + 1rem))}}@keyframes seki-toast-swipe-out{from{transform:translateX(var(--seki-toast-swipe-end-x, 0))}to{transform:translateX(calc(100% + 1rem))}}.seki-animate-fade-in{animation:seki-fade-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-fade-out{animation:seki-fade-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-scale-in{animation:seki-scale-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-scale-out{animation:seki-scale-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-spin{animation:seki-spin 1s linear infinite}.seki-animate-pulse{animation:seki-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.seki-animate-bounce{animation:seki-bounce 1s infinite}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}:host{display:block;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;min-width:100%}.content-container{background:var(--seki-select-content-bg);border:var(--seki-select-content-border);border-radius:var(--seki-select-content-radius);box-shadow:var(--seki-select-content-shadow);padding:var(--seki-select-content-padding, 0.5rem 0);width:100%}.content-scroll{overflow-y:auto;overflow-x:hidden}.content-scroll::-webkit-scrollbar{width:8px}.content-scroll::-webkit-scrollbar-track{background:transparent}.content-scroll::-webkit-scrollbar-thumb{background:var(--seki-border);border-radius:var(--seki-radius-sm, 4px)}.content-scroll::-webkit-scrollbar-thumb:hover{background:var(--seki-muted-foreground)}:host([data-theme='dark']) .content-container{background:var(--seki-select-content-bg);border-color:var(--seki-border)}";
3
+ const sekiSelectContentCss = ".sc-seki-select-content-h{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%);--seki-chart-1:hsl(12, 76%, 61%);--seki-chart-2:hsl(173, 58%, 39%);--seki-chart-3:hsl(197, 37%, 24%);--seki-chart-4:hsl(43, 74%, 66%);--seki-chart-5:hsl(27, 87%, 67%)}.sc-seki-select-content-h{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 42%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-primary-tint:hsl(0, 0%, 9%, 0.06);--seki-primary-tint-foreground:var(--seki-foreground);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-destructive-bg:hsl(0, 86%, 97%);--seki-destructive-soft-foreground:hsl(0, 63%, 31%);--seki-success:hsl(142, 71%, 45%);--seki-success-foreground:hsl(142, 64%, 24%);--seki-success-bg:hsl(142, 76%, 97%);--seki-warning:hsl(38, 92%, 50%);--seki-warning-foreground:hsl(21, 77%, 27%);--seki-warning-bg:hsl(48, 96%, 96%);--seki-info:hsl(217, 91%, 60%);--seki-info-foreground:hsl(224, 64%, 33%);--seki-info-bg:hsl(214, 100%, 97%);--seki-ring:hsl(0, 0%, 3.9%);--seki-ring-shadow:hsl(0, 0%, 3.9%, 0.1);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}[data-theme='dark'].sc-seki-select-content-h{--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-primary-tint:hsl(0, 0%, 98%, 0.1);--seki-primary-tint-foreground:var(--seki-foreground);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-destructive-bg:rgba(239, 68, 68, 0.1);--seki-destructive-soft-foreground:hsl(0, 91%, 71%);--seki-success:hsl(142, 69%, 58%);--seki-success-foreground:hsl(142, 69%, 58%);--seki-success-bg:rgba(34, 197, 94, 0.1);--seki-warning:hsl(43, 96%, 56%);--seki-warning-foreground:hsl(43, 96%, 56%);--seki-warning-bg:rgba(245, 158, 11, 0.1);--seki-info:hsl(217, 92%, 68%);--seki-info-foreground:hsl(217, 92%, 68%);--seki-info-bg:rgba(59, 130, 246, 0.1);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}.sc-seki-select-content-h{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}.sc-seki-select-content-h{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}.sc-seki-select-content-h{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);--seki-shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}.sc-seki-select-content-h{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-none:1;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}.sc-seki-select-content-h{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;--seki-radius-full:9999px}.sc-seki-select-content-h{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:hsl(0, 0%, 98%);--seki-sidebar-foreground:hsl(240, 5.3%, 26.1%);--seki-sidebar-primary:hsl(240, 5.9%, 10%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98%);--seki-sidebar-accent:hsl(240, 4.8%, 95.9%);--seki-sidebar-accent-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-border:hsl(220, 13%, 91%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 3.8%, 46.1%);--seki-sidebar-menu-button-height:2rem;--seki-sidebar-menu-button-height-lg:3rem;--seki-sidebar-menu-button-padding:0.5rem;--seki-sidebar-menu-button-gap:0.5rem;--seki-sidebar-menu-button-radius:var(--seki-radius-md, 0.375rem);--seki-sidebar-menu-sub-padding-left:1.75rem;--seki-sidebar-menu-sub-border-width:1px;--seki-sidebar-group-padding:0.5rem;--seki-sidebar-group-label-height:2rem;--seki-sidebar-group-label-padding:0.5rem;--seki-sidebar-header-height:auto;--seki-sidebar-footer-height:auto;--seki-sidebar-header-padding:0.5rem;--seki-sidebar-footer-padding:0.5rem;--seki-sidebar-content-padding:0.5rem;--seki-sidebar-rail-width:1rem;--seki-sidebar-transition-duration:200ms;--seki-sidebar-transition-timing:ease-in-out;--seki-sidebar-mobile-breakpoint:768px;--seki-sidebar-overlay-bg:hsla(0, 0%, 0%, 0.8)}[data-theme='dark'].sc-seki-select-content-h{--seki-sidebar-background:hsl(240, 5.9%, 10%);--seki-sidebar-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-primary:hsl(0, 0%, 98%);--seki-sidebar-primary-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-accent:hsl(240, 3.7%, 15.9%);--seki-sidebar-accent-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-border:hsl(240, 3.7%, 15.9%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 5%, 64.9%)}.sc-seki-select-content-h{--seki-animation-fast:150ms;--seki-animation-normal:200ms;--seki-animation-slow:300ms;--seki-ease-in:cubic-bezier(0.4, 0, 1, 1);--seki-ease-out:cubic-bezier(0, 0, 0.2, 1);--seki-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--seki-accordion-content-height:auto}@keyframes seki-fade-in{from{opacity:0}to{opacity:1}}@keyframes seki-fade-out{from{opacity:1}to{opacity:0}}@keyframes seki-scale-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes seki-scale-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}@keyframes seki-slide-in-from-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-top{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes seki-slide-in-from-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-bottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes seki-slide-in-from-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes seki-slide-in-from-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-right{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes seki-accordion-down{from{height:0;opacity:0}to{height:var(--seki-accordion-content-height);opacity:1}}@keyframes seki-accordion-up{from{height:var(--seki-accordion-content-height);opacity:1}to{height:0;opacity:0}}@keyframes seki-zoom-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}@keyframes seki-zoom-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.96)}}@keyframes seki-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes seki-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@keyframes seki-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}@keyframes seki-collapsible-open{from{height:0;overflow:hidden}to{height:var(--seki-collapsible-content-height, auto)}}@keyframes seki-collapsible-close{from{height:var(--seki-collapsible-content-height, auto)}to{height:0;overflow:hidden}}@keyframes seki-toast-slide-in-right{from{transform:translateX(calc(100% + 1rem))}to{transform:translateX(0)}}@keyframes seki-toast-slide-out-right{from{transform:translateX(0)}to{transform:translateX(calc(100% + 1rem))}}@keyframes seki-toast-swipe-out{from{transform:translateX(var(--seki-toast-swipe-end-x, 0))}to{transform:translateX(calc(100% + 1rem))}}.seki-animate-fade-in.sc-seki-select-content{animation:seki-fade-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-fade-out.sc-seki-select-content{animation:seki-fade-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-scale-in.sc-seki-select-content{animation:seki-scale-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-scale-out.sc-seki-select-content{animation:seki-scale-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-spin.sc-seki-select-content{animation:seki-spin 1s linear infinite}.seki-animate-pulse.sc-seki-select-content{animation:seki-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.seki-animate-bounce.sc-seki-select-content{animation:seki-bounce 1s infinite}@media (prefers-reduced-motion: reduce){*.sc-seki-select-content,*.sc-seki-select-content::before,*.sc-seki-select-content::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}.sc-seki-select-content-h{display:block;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;min-width:100%}.hidden.sc-seki-select-content-h{display:none}.content-container.sc-seki-select-content{background:var(--seki-select-content-bg);border:var(--seki-select-content-border);border-radius:var(--seki-select-content-radius);box-shadow:var(--seki-select-content-shadow);padding:var(--seki-select-content-padding, 0.5rem 0);width:100%}.content-scroll.sc-seki-select-content{overflow-y:auto;overflow-x:hidden}.content-scroll.sc-seki-select-content::-webkit-scrollbar{width:8px}.content-scroll.sc-seki-select-content::-webkit-scrollbar-track{background:transparent}.content-scroll.sc-seki-select-content::-webkit-scrollbar-thumb{background:var(--seki-border);border-radius:var(--seki-radius-sm, 4px)}.content-scroll.sc-seki-select-content::-webkit-scrollbar-thumb:hover{background:var(--seki-muted-foreground)}[data-theme='dark'].sc-seki-select-content-h .content-container.sc-seki-select-content{background:var(--seki-select-content-bg);border-color:var(--seki-border)}";
4
4
 
5
5
  const SekiSelectContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelectContent extends H {
6
6
  constructor(registerHost) {
@@ -8,7 +8,6 @@ const SekiSelectContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelectCon
8
8
  if (registerHost !== false) {
9
9
  this.__registerHost();
10
10
  }
11
- this.__attachShadow();
12
11
  this.forceUpdate = 0; // Used to force re-renders
13
12
  this.handleParentOpenChange = () => {
14
13
  // Force re-render when parent's open state changes
@@ -56,11 +55,14 @@ const SekiSelectContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelectCon
56
55
  /**
57
56
  * Accessible name for the listbox.
58
57
  *
59
- * It cannot borrow the trigger's name via aria-labelledby: the trigger's
60
- * combobox and this listbox live in separate shadow roots, and IDREFs do not
61
- * resolve across tree scopes. So the name is mirrored down as a literal
62
- * string instead. An aria-labelledby on the <seki-select> host *can* be
63
- * resolved here, because the host and its label sit in the same tree.
58
+ * As of #300, seki-select-trigger and this listbox render in the same real
59
+ * DOM tree scope (scoped, non-shadow mode), so an aria-labelledby pointing
60
+ * back at the trigger's combobox would technically resolve now. Kept as a
61
+ * mirrored literal string anyway — simpler and more robust than a live
62
+ * cross-component id reference, and it avoids coupling this component's
63
+ * accessible name to the trigger's specific DOM shape. An aria-labelledby
64
+ * on the <seki-select> host *can* still be resolved here, because the host
65
+ * and its label sit in the same tree (unchanged).
64
66
  */
65
67
  getAccessibleName(selectContext) {
66
68
  var _a, _b, _c;
@@ -85,17 +87,23 @@ const SekiSelectContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelectCon
85
87
  return null;
86
88
  }
87
89
  const isOpen = selectContext.open;
88
- // Lazy rendering - only render when open
89
- if (!isOpen) {
90
- return null;
91
- }
92
90
  const parent = this.el.closest('seki-select');
93
91
  const maxHeight = (parent === null || parent === void 0 ? void 0 : parent.maxHeight) || '12.5rem';
94
- 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)))));
92
+ // Always render, hiding via CSS instead of `return null` when closed (the
93
+ // seki-combobox-content pattern this mirrors). Under shadow DOM this used
94
+ // to conditionally return null and rely on the browser's own behavior of
95
+ // never rendering un-slotted light-DOM children — with no <slot> to
96
+ // assign them to, the options were simply invisible. Scoped (non-shadow)
97
+ // mode has no such mechanism: each seki-select-option still renders its
98
+ // own role="option" div regardless of whether a parent slot exists for
99
+ // it, so returning null here left every option fully visible — and
100
+ // interactable — even while "closed" (#300 e2e regression). See
101
+ // :host(.hidden) in seki-select-content.css.
102
+ 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)))));
95
103
  }
96
104
  get el() { return this; }
97
105
  static get style() { return sekiSelectContentCss; }
98
- }, [257, "seki-select-content", {
106
+ }, [262, "seki-select-content", {
99
107
  "forceUpdate": [32],
100
108
  "scrollToOption": [64]
101
109
  }]);