@rcarls/rc-popover 0.0.0-next-20261020171337
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.
- package/CHANGELOG.md +57 -0
- package/README.md +33 -0
- package/dist/custom-elements.json +654 -0
- package/dist/rc-popover-Ce7OggTp.js +173 -0
- package/dist/rc-popover-Ce7OggTp.js.map +1 -0
- package/dist/rc-popover-define.js +6 -0
- package/dist/rc-popover-define.js.map +1 -0
- package/dist/rc-popover.js +5 -0
- package/dist/rc-popover.js.map +1 -0
- package/dist/types/packages/rc-popover/src/define.d.ts +1 -0
- package/dist/types/packages/rc-popover/src/index.d.ts +2 -0
- package/dist/types/packages/rc-popover/src/rc-popover.d.ts +108 -0
- package/dist/types/packages/rc-popover/src/rc-popover.styles.d.ts +2 -0
- package/package.json +65 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# @rcarls/rc-popover
|
|
2
|
+
|
|
3
|
+
## 0.0.0-next-20261020171337
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- f1ca82d: Add an anchored, non-modal popover package with a Material rich-tooltip recipe. Share native Popover API visibility and fallback behavior across existing popup components.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 1179f24: Drop the `@oddbird/css-anchor-positioning` polyfill. Browsers without full
|
|
12
|
+
native anchor positioning now use `AnchorController`'s script positioning,
|
|
13
|
+
which applies the same placement and flip rules and re-positions when the page
|
|
14
|
+
scrolls or the viewport, anchor, or floating element resizes. Those browsers no
|
|
15
|
+
longer download the 41 kB polyfill the first time a popup opens.
|
|
16
|
+
- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
|
|
17
|
+
and light-DOM structural styles through Lightning CSS, removing comments and
|
|
18
|
+
whitespace while keeping source maps that resolve to each template. Rendered
|
|
19
|
+
styles are unchanged.
|
|
20
|
+
|
|
21
|
+
`@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
|
|
22
|
+
string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
|
|
23
|
+
depend on `@rcarls/rc-common` for it.
|
|
24
|
+
|
|
25
|
+
- 622a4f8: Theme popovers and tooltips through the shared token layers. `rc-popover` now
|
|
26
|
+
reads the shared `--rc-popup-*` surface tokens before its own fallbacks, like
|
|
27
|
+
menus and listboxes, and `rc-tooltip` takes its default corner from
|
|
28
|
+
`--rc-radius-sm`. The Material theme sets its popover and tooltip tokens on the
|
|
29
|
+
theme root, so surfaces inside other shadow roots inherit them, and the
|
|
30
|
+
Substrate theme adds popover and tooltip styles.
|
|
31
|
+
- Updated dependencies [e3dfa59]
|
|
32
|
+
- Updated dependencies [50d5610]
|
|
33
|
+
- Updated dependencies [9ee769c]
|
|
34
|
+
- Updated dependencies [1179f24]
|
|
35
|
+
- Updated dependencies [38cd00c]
|
|
36
|
+
- Updated dependencies [5c006de]
|
|
37
|
+
- Updated dependencies [a6553ff]
|
|
38
|
+
- Updated dependencies [2205478]
|
|
39
|
+
- Updated dependencies [4341311]
|
|
40
|
+
- Updated dependencies [899bb5e]
|
|
41
|
+
- Updated dependencies [25fcfe0]
|
|
42
|
+
- Updated dependencies [51f6403]
|
|
43
|
+
- Updated dependencies [9caca6b]
|
|
44
|
+
- Updated dependencies [b9175e9]
|
|
45
|
+
- Updated dependencies [f7f0270]
|
|
46
|
+
- Updated dependencies [f1ca82d]
|
|
47
|
+
- Updated dependencies [b87f27b]
|
|
48
|
+
- Updated dependencies [32ebead]
|
|
49
|
+
- Updated dependencies [bfefedd]
|
|
50
|
+
- Updated dependencies [c130173]
|
|
51
|
+
- Updated dependencies [11680b6]
|
|
52
|
+
- Updated dependencies [223d36c]
|
|
53
|
+
- Updated dependencies [7b91a44]
|
|
54
|
+
- Updated dependencies [aa04ead]
|
|
55
|
+
- Updated dependencies [afcfef8]
|
|
56
|
+
- Updated dependencies [11ef1ad]
|
|
57
|
+
- @rcarls/rc-common@0.0.0-next-20261020171337
|
package/README.md
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# `@rcarls/rc-popover`
|
|
2
|
+
|
|
3
|
+
Anchored non-modal surface around a native trigger and consumer-owned content.
|
|
4
|
+
|
|
5
|
+
Docs: [rc-popover](https://richardcarls.github.io/rc-webcomponents/components/rc-popover).
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install @rcarls/rc-popover
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
```js
|
|
12
|
+
import '@rcarls/rc-popover/define';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<rc-popover placement="block-end-start">
|
|
17
|
+
<button slot="trigger" type="button" popovertarget="help-panel" aria-haspopup="dialog">
|
|
18
|
+
Help
|
|
19
|
+
</button>
|
|
20
|
+
<section slot="content" id="help-panel" popover role="dialog" aria-labelledby="help-title">
|
|
21
|
+
<h2 id="help-title">About this setting</h2>
|
|
22
|
+
<p>Changes here affect future exports.</p>
|
|
23
|
+
<a href="/help/exports">Learn more</a>
|
|
24
|
+
</section>
|
|
25
|
+
</rc-popover>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
The native button and popover work before the component upgrades. After upgrade,
|
|
29
|
+
`rc-popover` positions the surface and handles native and fallback visibility.
|
|
30
|
+
The author supplies the content's role, accessible name, and keyboard behavior.
|
|
31
|
+
`open` is controlled and host writes are silent; use `default-open` for initial
|
|
32
|
+
uncontrolled state. `trigger-action="none"` disables click activation, while
|
|
33
|
+
`open-on-hover` and `open-on-focus` opt into those activation paths.
|
|
@@ -0,0 +1,654 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/define.ts",
|
|
8
|
+
"declarations": [],
|
|
9
|
+
"exports": [
|
|
10
|
+
{
|
|
11
|
+
"kind": "custom-element-definition",
|
|
12
|
+
"name": "rc-popover",
|
|
13
|
+
"declaration": {
|
|
14
|
+
"name": "RCPopover",
|
|
15
|
+
"module": "/src/index.js"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"kind": "js",
|
|
20
|
+
"name": "*",
|
|
21
|
+
"declaration": {
|
|
22
|
+
"name": "*",
|
|
23
|
+
"module": "src/index.js"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
]
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"kind": "javascript-module",
|
|
30
|
+
"path": "src/index.ts",
|
|
31
|
+
"declarations": [],
|
|
32
|
+
"exports": [
|
|
33
|
+
{
|
|
34
|
+
"kind": "js",
|
|
35
|
+
"name": "RCPopover",
|
|
36
|
+
"declaration": {
|
|
37
|
+
"name": "default",
|
|
38
|
+
"module": "./rc-popover.js"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"kind": "js",
|
|
43
|
+
"name": "RCPopoverPlacement",
|
|
44
|
+
"declaration": {
|
|
45
|
+
"name": "RCPopoverPlacement",
|
|
46
|
+
"module": "./rc-popover.js"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"kind": "js",
|
|
51
|
+
"name": "RCPopoverTriggerAction",
|
|
52
|
+
"declaration": {
|
|
53
|
+
"name": "RCPopoverTriggerAction",
|
|
54
|
+
"module": "./rc-popover.js"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"kind": "js",
|
|
59
|
+
"name": "RCPopoverToggleDetail",
|
|
60
|
+
"declaration": {
|
|
61
|
+
"name": "RCPopoverToggleDetail",
|
|
62
|
+
"module": "./rc-popover.js"
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"kind": "javascript-module",
|
|
69
|
+
"path": "src/rc-popover.ts",
|
|
70
|
+
"declarations": [
|
|
71
|
+
{
|
|
72
|
+
"kind": "class",
|
|
73
|
+
"description": "Anchored non-modal surface around a native trigger and consumer-owned content.\nThe component manages visibility and positioning; the author supplies the\ncontent's role, accessible name, and any widget-specific keyboard behavior.\nA native `popovertarget` on the trigger and `popover` on the content provide\na usable pre-upgrade path; the component restores those attributes on disconnect.",
|
|
74
|
+
"name": "RCPopover",
|
|
75
|
+
"cssProperties": [
|
|
76
|
+
{
|
|
77
|
+
"description": "Maximum inline size.",
|
|
78
|
+
"name": "--rc-popover-max-inline-size",
|
|
79
|
+
"default": "min(20rem, 100dvi - 1rem)"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"description": "Maximum block size.",
|
|
83
|
+
"name": "--rc-popover-max-block-size",
|
|
84
|
+
"default": "calc(100dvb - 1rem)"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"description": "Block padding.",
|
|
88
|
+
"name": "--rc-popover-padding-block",
|
|
89
|
+
"default": "0.75rem"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"description": "Inline padding.",
|
|
93
|
+
"name": "--rc-popover-padding-inline",
|
|
94
|
+
"default": "0.75rem"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"description": "Surface border.",
|
|
98
|
+
"name": "--rc-popover-border",
|
|
99
|
+
"default": "var(--rc-popup-border)"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"description": "Corner radius.",
|
|
103
|
+
"name": "--rc-popover-radius",
|
|
104
|
+
"default": "var(--rc-popup-radius)"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"description": "Surface background.",
|
|
108
|
+
"name": "--rc-popover-background",
|
|
109
|
+
"default": "var(--rc-popup-background)"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"description": "Surface text color.",
|
|
113
|
+
"name": "--rc-popover-color",
|
|
114
|
+
"default": "var(--rc-popup-color)"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"description": "Surface shadow.",
|
|
118
|
+
"name": "--rc-popover-shadow",
|
|
119
|
+
"default": "var(--rc-popup-shadow)"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"description": "Fallback stacking order.",
|
|
123
|
+
"name": "--rc-popover-z-index",
|
|
124
|
+
"default": "1"
|
|
125
|
+
}
|
|
126
|
+
],
|
|
127
|
+
"cssParts": [
|
|
128
|
+
{
|
|
129
|
+
"description": "Shadow wrapper for the two slots.",
|
|
130
|
+
"name": "root"
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
"slots": [
|
|
134
|
+
{
|
|
135
|
+
"description": "Direct child native trigger, usually a `<button>`.",
|
|
136
|
+
"name": "trigger"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"description": "Direct child popover surface with author-owned semantics.",
|
|
140
|
+
"name": "content"
|
|
141
|
+
}
|
|
142
|
+
],
|
|
143
|
+
"members": [
|
|
144
|
+
{
|
|
145
|
+
"kind": "field",
|
|
146
|
+
"name": "_styledRoots",
|
|
147
|
+
"privacy": "private",
|
|
148
|
+
"static": true,
|
|
149
|
+
"readonly": true,
|
|
150
|
+
"default": "new WeakSet<Document | ShadowRoot>()"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"kind": "field",
|
|
154
|
+
"name": "placement",
|
|
155
|
+
"type": {
|
|
156
|
+
"text": "RCPopoverPlacement"
|
|
157
|
+
},
|
|
158
|
+
"default": "'block-end-start'",
|
|
159
|
+
"description": "Preferred logical placement.",
|
|
160
|
+
"attribute": "placement"
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"kind": "field",
|
|
164
|
+
"name": "triggerAction",
|
|
165
|
+
"type": {
|
|
166
|
+
"text": "RCPopoverTriggerAction"
|
|
167
|
+
},
|
|
168
|
+
"default": "'toggle'",
|
|
169
|
+
"description": "Whether trigger activation toggles the surface.",
|
|
170
|
+
"attribute": "trigger-action"
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
"kind": "field",
|
|
174
|
+
"name": "openOnHover",
|
|
175
|
+
"type": {
|
|
176
|
+
"text": "boolean"
|
|
177
|
+
},
|
|
178
|
+
"default": "false",
|
|
179
|
+
"description": "Open while the pointer is over trigger or content.",
|
|
180
|
+
"attribute": "open-on-hover"
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"kind": "field",
|
|
184
|
+
"name": "openOnFocus",
|
|
185
|
+
"type": {
|
|
186
|
+
"text": "boolean"
|
|
187
|
+
},
|
|
188
|
+
"default": "false",
|
|
189
|
+
"description": "Open while focus is within trigger or content.",
|
|
190
|
+
"attribute": "open-on-focus"
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"kind": "field",
|
|
194
|
+
"name": "_controlledOpen",
|
|
195
|
+
"type": {
|
|
196
|
+
"text": "boolean | undefined"
|
|
197
|
+
},
|
|
198
|
+
"privacy": "private"
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"kind": "field",
|
|
202
|
+
"name": "_uncontrolledOpen",
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "boolean"
|
|
205
|
+
},
|
|
206
|
+
"privacy": "private",
|
|
207
|
+
"default": "false"
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"kind": "field",
|
|
211
|
+
"name": "_defaultOpen",
|
|
212
|
+
"type": {
|
|
213
|
+
"text": "boolean"
|
|
214
|
+
},
|
|
215
|
+
"privacy": "private",
|
|
216
|
+
"default": "false"
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"kind": "field",
|
|
220
|
+
"name": "_initialized",
|
|
221
|
+
"type": {
|
|
222
|
+
"text": "boolean"
|
|
223
|
+
},
|
|
224
|
+
"privacy": "private",
|
|
225
|
+
"default": "false"
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"kind": "field",
|
|
229
|
+
"name": "open",
|
|
230
|
+
"type": {
|
|
231
|
+
"text": "boolean"
|
|
232
|
+
},
|
|
233
|
+
"description": "Controlled open state. A host write never emits `rc-popover-toggle`.",
|
|
234
|
+
"attribute": "open",
|
|
235
|
+
"reflects": true
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"kind": "field",
|
|
239
|
+
"name": "defaultOpen",
|
|
240
|
+
"type": {
|
|
241
|
+
"text": "boolean"
|
|
242
|
+
},
|
|
243
|
+
"description": "Initial open state used until the host or user changes the state.",
|
|
244
|
+
"attribute": "default-open"
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"kind": "field",
|
|
248
|
+
"name": "_$triggerSlot",
|
|
249
|
+
"type": {
|
|
250
|
+
"text": "HTMLSlotElement"
|
|
251
|
+
},
|
|
252
|
+
"privacy": "private"
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
"kind": "field",
|
|
256
|
+
"name": "_$contentSlot",
|
|
257
|
+
"type": {
|
|
258
|
+
"text": "HTMLSlotElement"
|
|
259
|
+
},
|
|
260
|
+
"privacy": "private"
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"kind": "field",
|
|
264
|
+
"name": "_$trigger",
|
|
265
|
+
"type": {
|
|
266
|
+
"text": "HTMLElement | null"
|
|
267
|
+
},
|
|
268
|
+
"privacy": "private",
|
|
269
|
+
"default": "null"
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"kind": "field",
|
|
273
|
+
"name": "_$content",
|
|
274
|
+
"type": {
|
|
275
|
+
"text": "HTMLElement | null"
|
|
276
|
+
},
|
|
277
|
+
"privacy": "private",
|
|
278
|
+
"default": "null"
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"kind": "field",
|
|
282
|
+
"name": "_triggerState",
|
|
283
|
+
"type": {
|
|
284
|
+
"text": "TriggerState | null"
|
|
285
|
+
},
|
|
286
|
+
"privacy": "private",
|
|
287
|
+
"default": "null"
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
"kind": "field",
|
|
291
|
+
"name": "_contentState",
|
|
292
|
+
"type": {
|
|
293
|
+
"text": "ContentState | null"
|
|
294
|
+
},
|
|
295
|
+
"privacy": "private",
|
|
296
|
+
"default": "null"
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"kind": "field",
|
|
300
|
+
"name": "_slotSyncQueued",
|
|
301
|
+
"type": {
|
|
302
|
+
"text": "boolean"
|
|
303
|
+
},
|
|
304
|
+
"privacy": "private",
|
|
305
|
+
"default": "false"
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
"kind": "field",
|
|
309
|
+
"name": "_pointerWithin",
|
|
310
|
+
"type": {
|
|
311
|
+
"text": "boolean"
|
|
312
|
+
},
|
|
313
|
+
"privacy": "private",
|
|
314
|
+
"default": "false"
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"kind": "field",
|
|
318
|
+
"name": "_focusWithin",
|
|
319
|
+
"type": {
|
|
320
|
+
"text": "boolean"
|
|
321
|
+
},
|
|
322
|
+
"privacy": "private",
|
|
323
|
+
"default": "false"
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
"kind": "field",
|
|
327
|
+
"name": "_pinnedByClick",
|
|
328
|
+
"type": {
|
|
329
|
+
"text": "boolean"
|
|
330
|
+
},
|
|
331
|
+
"privacy": "private",
|
|
332
|
+
"default": "false"
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
"kind": "field",
|
|
336
|
+
"name": "_dismissedUntilLeave",
|
|
337
|
+
"type": {
|
|
338
|
+
"text": "boolean"
|
|
339
|
+
},
|
|
340
|
+
"privacy": "private",
|
|
341
|
+
"default": "false"
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
"kind": "field",
|
|
345
|
+
"name": "_anchor",
|
|
346
|
+
"privacy": "private",
|
|
347
|
+
"readonly": true,
|
|
348
|
+
"default": "new AnchorController(this, { anchor: () => this._$trigger, floating: () => this._$content, placement: this.placement, offset: 4, disabled: () => !this.open, })"
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"kind": "field",
|
|
352
|
+
"name": "_popover",
|
|
353
|
+
"privacy": "private",
|
|
354
|
+
"readonly": true,
|
|
355
|
+
"default": "new PopoverController(this, { element: () => this._$content })"
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
"kind": "method",
|
|
359
|
+
"name": "_ensureBaseStyles",
|
|
360
|
+
"privacy": "private",
|
|
361
|
+
"static": true,
|
|
362
|
+
"return": {
|
|
363
|
+
"type": {
|
|
364
|
+
"text": "void"
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
"parameters": [
|
|
368
|
+
{
|
|
369
|
+
"name": "root",
|
|
370
|
+
"type": {
|
|
371
|
+
"text": "Document | ShadowRoot"
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
]
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
"kind": "field",
|
|
378
|
+
"name": "_onSlotChange",
|
|
379
|
+
"privacy": "private"
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
"kind": "method",
|
|
383
|
+
"name": "_queueSlotSync",
|
|
384
|
+
"privacy": "private",
|
|
385
|
+
"return": {
|
|
386
|
+
"type": {
|
|
387
|
+
"text": "void"
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
},
|
|
391
|
+
{
|
|
392
|
+
"kind": "method",
|
|
393
|
+
"name": "_syncSlots",
|
|
394
|
+
"privacy": "private",
|
|
395
|
+
"return": {
|
|
396
|
+
"type": {
|
|
397
|
+
"text": "void"
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
"kind": "method",
|
|
403
|
+
"name": "_prepareContent",
|
|
404
|
+
"privacy": "private",
|
|
405
|
+
"return": {
|
|
406
|
+
"type": {
|
|
407
|
+
"text": "void"
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
},
|
|
411
|
+
{
|
|
412
|
+
"kind": "method",
|
|
413
|
+
"name": "_prepareTrigger",
|
|
414
|
+
"privacy": "private",
|
|
415
|
+
"return": {
|
|
416
|
+
"type": {
|
|
417
|
+
"text": "void"
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
},
|
|
421
|
+
{
|
|
422
|
+
"kind": "method",
|
|
423
|
+
"name": "_restoreTrigger",
|
|
424
|
+
"privacy": "private",
|
|
425
|
+
"return": {
|
|
426
|
+
"type": {
|
|
427
|
+
"text": "void"
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
},
|
|
431
|
+
{
|
|
432
|
+
"kind": "method",
|
|
433
|
+
"name": "_restoreContent",
|
|
434
|
+
"privacy": "private",
|
|
435
|
+
"return": {
|
|
436
|
+
"type": {
|
|
437
|
+
"text": "void"
|
|
438
|
+
}
|
|
439
|
+
}
|
|
440
|
+
},
|
|
441
|
+
{
|
|
442
|
+
"kind": "method",
|
|
443
|
+
"name": "_restoreAttribute",
|
|
444
|
+
"privacy": "private",
|
|
445
|
+
"return": {
|
|
446
|
+
"type": {
|
|
447
|
+
"text": "void"
|
|
448
|
+
}
|
|
449
|
+
},
|
|
450
|
+
"parameters": [
|
|
451
|
+
{
|
|
452
|
+
"name": "element",
|
|
453
|
+
"type": {
|
|
454
|
+
"text": "HTMLElement"
|
|
455
|
+
}
|
|
456
|
+
},
|
|
457
|
+
{
|
|
458
|
+
"name": "name",
|
|
459
|
+
"type": {
|
|
460
|
+
"text": "string"
|
|
461
|
+
}
|
|
462
|
+
},
|
|
463
|
+
{
|
|
464
|
+
"name": "value",
|
|
465
|
+
"type": {
|
|
466
|
+
"text": "string | null"
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
]
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
"kind": "method",
|
|
473
|
+
"name": "_syncOpen",
|
|
474
|
+
"privacy": "private",
|
|
475
|
+
"return": {
|
|
476
|
+
"type": {
|
|
477
|
+
"text": "void"
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
},
|
|
481
|
+
{
|
|
482
|
+
"kind": "method",
|
|
483
|
+
"name": "_requestOpen",
|
|
484
|
+
"privacy": "private",
|
|
485
|
+
"return": {
|
|
486
|
+
"type": {
|
|
487
|
+
"text": "void"
|
|
488
|
+
}
|
|
489
|
+
},
|
|
490
|
+
"parameters": [
|
|
491
|
+
{
|
|
492
|
+
"name": "open",
|
|
493
|
+
"type": {
|
|
494
|
+
"text": "boolean"
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
]
|
|
498
|
+
},
|
|
499
|
+
{
|
|
500
|
+
"kind": "method",
|
|
501
|
+
"name": "_inside",
|
|
502
|
+
"privacy": "private",
|
|
503
|
+
"return": {
|
|
504
|
+
"type": {
|
|
505
|
+
"text": "boolean"
|
|
506
|
+
}
|
|
507
|
+
},
|
|
508
|
+
"parameters": [
|
|
509
|
+
{
|
|
510
|
+
"name": "event",
|
|
511
|
+
"type": {
|
|
512
|
+
"text": "Event"
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
]
|
|
516
|
+
},
|
|
517
|
+
{
|
|
518
|
+
"kind": "field",
|
|
519
|
+
"name": "_onClick",
|
|
520
|
+
"privacy": "private"
|
|
521
|
+
},
|
|
522
|
+
{
|
|
523
|
+
"kind": "field",
|
|
524
|
+
"name": "_onPointerOver",
|
|
525
|
+
"privacy": "private"
|
|
526
|
+
},
|
|
527
|
+
{
|
|
528
|
+
"kind": "field",
|
|
529
|
+
"name": "_onPointerOut",
|
|
530
|
+
"privacy": "private"
|
|
531
|
+
},
|
|
532
|
+
{
|
|
533
|
+
"kind": "field",
|
|
534
|
+
"name": "_onFocusIn",
|
|
535
|
+
"privacy": "private"
|
|
536
|
+
},
|
|
537
|
+
{
|
|
538
|
+
"kind": "field",
|
|
539
|
+
"name": "_onFocusOut",
|
|
540
|
+
"privacy": "private"
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"kind": "method",
|
|
544
|
+
"name": "_reconcileAutomaticOpen",
|
|
545
|
+
"privacy": "private",
|
|
546
|
+
"return": {
|
|
547
|
+
"type": {
|
|
548
|
+
"text": "void"
|
|
549
|
+
}
|
|
550
|
+
}
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
"kind": "field",
|
|
554
|
+
"name": "_onDocumentPointerDown",
|
|
555
|
+
"privacy": "private"
|
|
556
|
+
},
|
|
557
|
+
{
|
|
558
|
+
"kind": "field",
|
|
559
|
+
"name": "_onDocumentKeyDown",
|
|
560
|
+
"privacy": "private"
|
|
561
|
+
}
|
|
562
|
+
],
|
|
563
|
+
"events": [
|
|
564
|
+
{
|
|
565
|
+
"name": "rc-popover-toggle",
|
|
566
|
+
"type": {
|
|
567
|
+
"text": "CustomEvent"
|
|
568
|
+
},
|
|
569
|
+
"description": "User requested open-state change; detail: `{open: boolean}`."
|
|
570
|
+
}
|
|
571
|
+
],
|
|
572
|
+
"attributes": [
|
|
573
|
+
{
|
|
574
|
+
"description": "Controlled open state. A host write never emits `rc-popover-toggle`.",
|
|
575
|
+
"name": "open",
|
|
576
|
+
"type": {
|
|
577
|
+
"text": "boolean"
|
|
578
|
+
},
|
|
579
|
+
"fieldName": "open"
|
|
580
|
+
},
|
|
581
|
+
{
|
|
582
|
+
"description": "Initial open state used until the host or user changes the state.",
|
|
583
|
+
"name": "default-open",
|
|
584
|
+
"type": {
|
|
585
|
+
"text": "boolean"
|
|
586
|
+
},
|
|
587
|
+
"fieldName": "defaultOpen"
|
|
588
|
+
},
|
|
589
|
+
{
|
|
590
|
+
"description": "Preferred logical placement.",
|
|
591
|
+
"name": "placement",
|
|
592
|
+
"type": {
|
|
593
|
+
"text": "RCPopoverPlacement"
|
|
594
|
+
},
|
|
595
|
+
"default": "'block-end-start'",
|
|
596
|
+
"fieldName": "placement"
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
"description": "Whether trigger activation toggles the surface.",
|
|
600
|
+
"name": "trigger-action",
|
|
601
|
+
"type": {
|
|
602
|
+
"text": "RCPopoverTriggerAction"
|
|
603
|
+
},
|
|
604
|
+
"default": "'toggle'",
|
|
605
|
+
"fieldName": "triggerAction"
|
|
606
|
+
},
|
|
607
|
+
{
|
|
608
|
+
"description": "Open while the pointer is over trigger or content.",
|
|
609
|
+
"name": "open-on-hover",
|
|
610
|
+
"type": {
|
|
611
|
+
"text": "boolean"
|
|
612
|
+
},
|
|
613
|
+
"default": "false",
|
|
614
|
+
"fieldName": "openOnHover"
|
|
615
|
+
},
|
|
616
|
+
{
|
|
617
|
+
"description": "Open while focus is within trigger or content.",
|
|
618
|
+
"name": "open-on-focus",
|
|
619
|
+
"type": {
|
|
620
|
+
"text": "boolean"
|
|
621
|
+
},
|
|
622
|
+
"default": "false",
|
|
623
|
+
"fieldName": "openOnFocus"
|
|
624
|
+
}
|
|
625
|
+
],
|
|
626
|
+
"superclass": {
|
|
627
|
+
"name": "LitElement",
|
|
628
|
+
"package": "lit"
|
|
629
|
+
},
|
|
630
|
+
"tagName": "rc-popover",
|
|
631
|
+
"customElement": true
|
|
632
|
+
}
|
|
633
|
+
],
|
|
634
|
+
"exports": [
|
|
635
|
+
{
|
|
636
|
+
"kind": "js",
|
|
637
|
+
"name": "RCPopover",
|
|
638
|
+
"declaration": {
|
|
639
|
+
"name": "RCPopover",
|
|
640
|
+
"module": "src/rc-popover.ts"
|
|
641
|
+
}
|
|
642
|
+
},
|
|
643
|
+
{
|
|
644
|
+
"kind": "js",
|
|
645
|
+
"name": "default",
|
|
646
|
+
"declaration": {
|
|
647
|
+
"name": "RCPopover",
|
|
648
|
+
"module": "src/rc-popover.ts"
|
|
649
|
+
}
|
|
650
|
+
}
|
|
651
|
+
]
|
|
652
|
+
}
|
|
653
|
+
]
|
|
654
|
+
}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import { css as d, LitElement as u, html as _ } from "lit";
|
|
2
|
+
import { property as a, query as l } from "lit/decorators.js";
|
|
3
|
+
import { AnchorController as f, PopoverController as g, cssText as v } from "@rcarls/rc-common";
|
|
4
|
+
const m = d`:host{color-scheme:inherit;display:inline-block}[part=root]{display:inline-block}@media (forced-colors:active){slot[name=content]::slotted(*){color:canvastext;background:canvas;border-color:canvastext}}`;
|
|
5
|
+
var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (h, t, e, i) => {
|
|
6
|
+
for (var r = i > 1 ? void 0 : i ? b(t, e) : t, c = h.length - 1, p; c >= 0; c--)
|
|
7
|
+
(p = h[c]) && (r = (i ? p(t, e, r) : p(r)) || r);
|
|
8
|
+
return i && r && y(t, e, r), r;
|
|
9
|
+
};
|
|
10
|
+
let O = 0;
|
|
11
|
+
const S = v`@layer rc-base{rc-popover>[slot=content]{box-sizing:border-box;max-inline-size:var(--rc-popover-max-inline-size,min(20rem, 100dvi - 1rem));max-block-size:var(--rc-popover-max-block-size,calc(100dvb - 1rem));padding-block:var(--rc-popover-padding-block,.75rem);padding-inline:var(--rc-popover-padding-inline,.75rem);border:var(--rc-popover-border,var(--rc-popup-border,var(--rc-border,1px solid ButtonBorder)));border-radius:var(--rc-popover-radius,var(--rc-popup-radius,var(--rc-radius-sm,.25rem)));background:var(--rc-popover-background,var(--rc-popup-background,var(--rc-surface,Canvas)));color:var(--rc-popover-color,var(--rc-popup-color,var(--rc-field-text,CanvasText)));box-shadow:var(--rc-popover-shadow,var(--rc-popup-shadow,var(--rc-shadow,0 2px 8px color-mix(in srgb, CanvasText 15%, transparent))));font:inherit;z-index:var(--rc-popover-z-index,1);margin:0;display:none;position:fixed;overflow:auto}rc-popover>[slot=content]:is(:popover-open,[data-rc-popover-fallback-open]){display:block}rc-popover>[slot=content][hidden]{display:none!important}}`;
|
|
12
|
+
var n;
|
|
13
|
+
const o = (n = class extends u {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments), this.placement = "block-end-start", this.triggerAction = "toggle", this.openOnHover = !1, this.openOnFocus = !1, this._uncontrolledOpen = !1, this._defaultOpen = !1, this._initialized = !1, this._$trigger = null, this._$content = null, this._triggerState = null, this._contentState = null, this._slotSyncQueued = !1, this._pointerWithin = !1, this._focusWithin = !1, this._pinnedByClick = !1, this._dismissedUntilLeave = !1, this._anchor = new f(this, {
|
|
16
|
+
anchor: () => this._$trigger,
|
|
17
|
+
floating: () => this._$content,
|
|
18
|
+
placement: this.placement,
|
|
19
|
+
offset: 4,
|
|
20
|
+
disabled: () => !this.open
|
|
21
|
+
}), this._popover = new g(this, { element: () => this._$content }), this._onSlotChange = () => this._queueSlotSync(), this._onClick = (t) => {
|
|
22
|
+
this.triggerAction !== "toggle" || !this._$trigger || !t.composedPath().includes(this._$trigger) || (this.open ? (this._pinnedByClick = !1, this._dismissedUntilLeave = !0, this._requestOpen(!1)) : (this._dismissedUntilLeave = !1, this._pinnedByClick = !0, this._requestOpen(!0)));
|
|
23
|
+
}, this._onPointerOver = (t) => {
|
|
24
|
+
!this.openOnHover || t.pointerType === "touch" || !this._inside(t) || (this._pointerWithin = !0, this._reconcileAutomaticOpen());
|
|
25
|
+
}, this._onPointerOut = (t) => {
|
|
26
|
+
!this.openOnHover || t.pointerType === "touch" || !this._inside(t) || t.relatedTarget instanceof Node && this.contains(t.relatedTarget) || (this._pointerWithin = !1, this._reconcileAutomaticOpen());
|
|
27
|
+
}, this._onFocusIn = (t) => {
|
|
28
|
+
!this.openOnFocus || !this._inside(t) || (this._focusWithin = !0, this._reconcileAutomaticOpen());
|
|
29
|
+
}, this._onFocusOut = (t) => {
|
|
30
|
+
!this.openOnFocus || !this._inside(t) || t.relatedTarget instanceof Node && this.contains(t.relatedTarget) || (this._focusWithin = !1, this._reconcileAutomaticOpen());
|
|
31
|
+
}, this._onDocumentPointerDown = (t) => {
|
|
32
|
+
!this.open || t.composedPath().includes(this) || (this._pinnedByClick = !1, this._dismissedUntilLeave = !0, this._requestOpen(!1));
|
|
33
|
+
}, this._onDocumentKeyDown = (t) => {
|
|
34
|
+
!this.open || t.key !== "Escape" || (this._pinnedByClick = !1, this._dismissedUntilLeave = !0, this._requestOpen(!1), this._$content?.contains(this.ownerDocument.activeElement) && this._$trigger?.focus());
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
get open() {
|
|
38
|
+
return this._controlledOpen ?? this._uncontrolledOpen;
|
|
39
|
+
}
|
|
40
|
+
set open(t) {
|
|
41
|
+
const e = this.open;
|
|
42
|
+
this._controlledOpen = t, this._initialized = t !== void 0 || this._initialized, this.requestUpdate("open", e), this._syncOpen();
|
|
43
|
+
}
|
|
44
|
+
get defaultOpen() {
|
|
45
|
+
return this._defaultOpen;
|
|
46
|
+
}
|
|
47
|
+
set defaultOpen(t) {
|
|
48
|
+
const e = this._defaultOpen;
|
|
49
|
+
this._defaultOpen = t, !this._initialized && this._controlledOpen === void 0 && (this._uncontrolledOpen = t), this.requestUpdate("defaultOpen", e), this._syncOpen();
|
|
50
|
+
}
|
|
51
|
+
connectedCallback() {
|
|
52
|
+
super.connectedCallback(), n._ensureBaseStyles(this.getRootNode()), this.addEventListener("click", this._onClick), this.addEventListener("pointerover", this._onPointerOver), this.addEventListener("pointerout", this._onPointerOut), this.addEventListener("focusin", this._onFocusIn), this.addEventListener("focusout", this._onFocusOut), this.ownerDocument.addEventListener("pointerdown", this._onDocumentPointerDown), this.ownerDocument.addEventListener("keydown", this._onDocumentKeyDown), this.hasUpdated && this._queueSlotSync();
|
|
53
|
+
}
|
|
54
|
+
disconnectedCallback() {
|
|
55
|
+
this.removeEventListener("click", this._onClick), this.removeEventListener("pointerover", this._onPointerOver), this.removeEventListener("pointerout", this._onPointerOut), this.removeEventListener("focusin", this._onFocusIn), this.removeEventListener("focusout", this._onFocusOut), this.ownerDocument.removeEventListener("pointerdown", this._onDocumentPointerDown), this.ownerDocument.removeEventListener("keydown", this._onDocumentKeyDown), this._popover.sync(!1), this._restoreTrigger(), this._restoreContent(), this._$trigger = null, this._$content = null, this._pointerWithin = !1, this._focusWithin = !1, this._pinnedByClick = !1, this._dismissedUntilLeave = !1, super.disconnectedCallback();
|
|
56
|
+
}
|
|
57
|
+
firstUpdated() {
|
|
58
|
+
this._queueSlotSync();
|
|
59
|
+
}
|
|
60
|
+
updated(t) {
|
|
61
|
+
t.has("placement") && this._anchor.setOptions({ placement: this.placement }), this._syncOpen();
|
|
62
|
+
}
|
|
63
|
+
render() {
|
|
64
|
+
return _`<div part="root">
|
|
65
|
+
<slot name="trigger" @slotchange=${this._onSlotChange}></slot>
|
|
66
|
+
<slot name="content" @slotchange=${this._onSlotChange}></slot>
|
|
67
|
+
</div>`;
|
|
68
|
+
}
|
|
69
|
+
static _ensureBaseStyles(t) {
|
|
70
|
+
if (n._styledRoots.has(t))
|
|
71
|
+
return;
|
|
72
|
+
n._styledRoots.add(t);
|
|
73
|
+
const e = (t instanceof Document ? t : t.ownerDocument).createElement("style");
|
|
74
|
+
e.setAttribute("data-rc-light-dom-base", "rc-popover"), e.textContent = S, t instanceof Document ? t.head.append(e) : t.append(e);
|
|
75
|
+
}
|
|
76
|
+
_queueSlotSync() {
|
|
77
|
+
this._slotSyncQueued || (this._slotSyncQueued = !0, queueMicrotask(() => {
|
|
78
|
+
this._slotSyncQueued = !1, this.isConnected && this._syncSlots();
|
|
79
|
+
}));
|
|
80
|
+
}
|
|
81
|
+
_syncSlots() {
|
|
82
|
+
const t = this._$triggerSlot?.assignedElements().find((i) => i instanceof HTMLElement) ?? null, e = this._$contentSlot?.assignedElements().find((i) => i instanceof HTMLElement) ?? null;
|
|
83
|
+
e !== this._$content && (this._popover.sync(!1), this._restoreContent(), this._$content = e, this._contentState = null), t !== this._$trigger && (this._restoreTrigger(), this._$trigger = t, this._triggerState = null), this._prepareContent(), this._prepareTrigger(), this._syncOpen();
|
|
84
|
+
}
|
|
85
|
+
_prepareContent() {
|
|
86
|
+
const t = this._$content;
|
|
87
|
+
t && (this._contentState || (this._contentState = {
|
|
88
|
+
id: t.getAttribute("id"),
|
|
89
|
+
popover: t.getAttribute("popover"),
|
|
90
|
+
hidden: t.hidden
|
|
91
|
+
}), t.id || (t.id = `rc-popover-${++O}`), t.setAttribute("popover", "manual"));
|
|
92
|
+
}
|
|
93
|
+
_prepareTrigger() {
|
|
94
|
+
const t = this._$trigger, e = this._$content;
|
|
95
|
+
if (t && (this._triggerState || (this._triggerState = {
|
|
96
|
+
ariaControls: t.getAttribute("aria-controls"),
|
|
97
|
+
ariaExpanded: t.getAttribute("aria-expanded"),
|
|
98
|
+
popoverTarget: t.getAttribute("popovertarget")
|
|
99
|
+
}), t.hasAttribute("popovertarget") && t.removeAttribute("popovertarget"), t instanceof HTMLButtonElement && e?.id)) {
|
|
100
|
+
const i = this._triggerState.ariaControls?.split(/\s+/).filter(Boolean) ?? [];
|
|
101
|
+
i.includes(e.id) || i.push(e.id), t.setAttribute("aria-controls", i.join(" ")), t.setAttribute("aria-expanded", String(this.open));
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
_restoreTrigger() {
|
|
105
|
+
const t = this._$trigger, e = this._triggerState;
|
|
106
|
+
!t || !e || (this._restoreAttribute(t, "aria-controls", e.ariaControls), this._restoreAttribute(t, "aria-expanded", e.ariaExpanded), this._restoreAttribute(t, "popovertarget", e.popoverTarget), this._triggerState = null);
|
|
107
|
+
}
|
|
108
|
+
_restoreContent() {
|
|
109
|
+
const t = this._$content, e = this._contentState;
|
|
110
|
+
!t || !e || (this._restoreAttribute(t, "id", e.id), this._restoreAttribute(t, "popover", e.popover), t.hidden = e.hidden, this._contentState = null);
|
|
111
|
+
}
|
|
112
|
+
_restoreAttribute(t, e, i) {
|
|
113
|
+
i === null ? t.removeAttribute(e) : t.setAttribute(e, i);
|
|
114
|
+
}
|
|
115
|
+
_syncOpen() {
|
|
116
|
+
!this.isConnected || !this._$content || (this.open ? (this._$content.hidden = !1, this._popover.sync(!0)) : (this._popover.sync(!1), this._$content.hidden = !0), this._prepareTrigger(), this.open && this._anchor.update());
|
|
117
|
+
}
|
|
118
|
+
_requestOpen(t) {
|
|
119
|
+
if (t !== this.open) {
|
|
120
|
+
if (this._controlledOpen === void 0) {
|
|
121
|
+
const e = this.open;
|
|
122
|
+
this._uncontrolledOpen = t, this._initialized = !0, this.requestUpdate("open", e), this._syncOpen();
|
|
123
|
+
}
|
|
124
|
+
this.dispatchEvent(
|
|
125
|
+
new CustomEvent("rc-popover-toggle", {
|
|
126
|
+
bubbles: !0,
|
|
127
|
+
composed: !0,
|
|
128
|
+
detail: { open: t }
|
|
129
|
+
})
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
_inside(t) {
|
|
134
|
+
const e = t.composedPath();
|
|
135
|
+
return e.includes(this._$trigger) || e.includes(this._$content);
|
|
136
|
+
}
|
|
137
|
+
_reconcileAutomaticOpen() {
|
|
138
|
+
if (!this._pointerWithin && !this._focusWithin) {
|
|
139
|
+
this._dismissedUntilLeave = !1, this._pinnedByClick || this._requestOpen(!1);
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
this._dismissedUntilLeave || this._requestOpen(!0);
|
|
143
|
+
}
|
|
144
|
+
}, n.styles = m, n._styledRoots = /* @__PURE__ */ new WeakSet(), n);
|
|
145
|
+
s([
|
|
146
|
+
a({ type: String })
|
|
147
|
+
], o.prototype, "placement", 2);
|
|
148
|
+
s([
|
|
149
|
+
a({ type: String, attribute: "trigger-action" })
|
|
150
|
+
], o.prototype, "triggerAction", 2);
|
|
151
|
+
s([
|
|
152
|
+
a({ type: Boolean, attribute: "open-on-hover" })
|
|
153
|
+
], o.prototype, "openOnHover", 2);
|
|
154
|
+
s([
|
|
155
|
+
a({ type: Boolean, attribute: "open-on-focus" })
|
|
156
|
+
], o.prototype, "openOnFocus", 2);
|
|
157
|
+
s([
|
|
158
|
+
a({ type: Boolean, reflect: !0 })
|
|
159
|
+
], o.prototype, "open", 1);
|
|
160
|
+
s([
|
|
161
|
+
a({ type: Boolean, attribute: "default-open" })
|
|
162
|
+
], o.prototype, "defaultOpen", 1);
|
|
163
|
+
s([
|
|
164
|
+
l("slot[name='trigger']")
|
|
165
|
+
], o.prototype, "_$triggerSlot", 2);
|
|
166
|
+
s([
|
|
167
|
+
l("slot[name='content']")
|
|
168
|
+
], o.prototype, "_$contentSlot", 2);
|
|
169
|
+
let x = o;
|
|
170
|
+
export {
|
|
171
|
+
x as R
|
|
172
|
+
};
|
|
173
|
+
//# sourceMappingURL=rc-popover-Ce7OggTp.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-popover-Ce7OggTp.js","sources":["../src/rc-popover.styles.ts","../src/rc-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const popoverStyles = css`\n :host {\n display: inline-block;\n color-scheme: inherit;\n }\n\n [part='root'] {\n display: inline-block;\n }\n\n @media (forced-colors: active) {\n slot[name='content']::slotted(*) {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n }\n`;\n\nexport default popoverStyles;\n","import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport {\n AnchorController,\n type AnchorPlacement,\n cssText,\n PopoverController,\n} from '@rcarls/rc-common';\n\nimport popoverStyles from './rc-popover.styles.js';\n\nexport type RCPopoverPlacement = AnchorPlacement;\nexport type RCPopoverTriggerAction = 'toggle' | 'none';\n\n/** Detail of a user-requested open-state change. */\nexport interface RCPopoverToggleDetail {\n open: boolean;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-popover': RCPopover;\n }\n\n interface HTMLElementEventMap {\n 'rc-popover-toggle': CustomEvent<RCPopoverToggleDetail>;\n }\n}\n\ntype TriggerState = {\n ariaControls: string | null;\n ariaExpanded: string | null;\n popoverTarget: string | null;\n};\n\ntype ContentState = {\n id: string | null;\n popover: string | null;\n hidden: boolean;\n};\n\nlet popoverId = 0;\n\nconst LIGHT_DOM_CSS = cssText`\n@layer rc-base {\n rc-popover > [slot='content'] {\n position: fixed;\n display: none;\n box-sizing: border-box;\n max-inline-size: var(--rc-popover-max-inline-size, min(20rem, 100dvi - 1rem));\n max-block-size: var(--rc-popover-max-block-size, calc(100dvb - 1rem));\n margin: 0;\n padding-block: var(--rc-popover-padding-block, 0.75rem);\n padding-inline: var(--rc-popover-padding-inline, 0.75rem);\n border: var(\n --rc-popover-border,\n var(--rc-popup-border, var(--rc-border, 1px solid ButtonBorder))\n );\n border-radius: var(\n --rc-popover-radius,\n var(--rc-popup-radius, var(--rc-radius-sm, 0.25rem))\n );\n background: var(\n --rc-popover-background,\n var(--rc-popup-background, var(--rc-surface, Canvas))\n );\n color: var(\n --rc-popover-color,\n var(--rc-popup-color, var(--rc-field-text, CanvasText))\n );\n box-shadow: var(\n --rc-popover-shadow,\n var(\n --rc-popup-shadow,\n var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent))\n )\n );\n font: inherit;\n overflow: auto;\n z-index: var(--rc-popover-z-index, 1);\n }\n\n rc-popover > [slot='content']:is(:popover-open, [data-rc-popover-fallback-open]) {\n display: block;\n }\n\n rc-popover > [slot='content'][hidden] {\n display: none !important;\n }\n}\n`;\n\n/**\n * Anchored non-modal surface around a native trigger and consumer-owned content.\n * The component manages visibility and positioning; the author supplies the\n * content's role, accessible name, and any widget-specific keyboard behavior.\n * A native `popovertarget` on the trigger and `popover` on the content provide\n * a usable pre-upgrade path; the component restores those attributes on disconnect.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-popover rc-popover docs}\n * @see {@link https://html.spec.whatwg.org/multipage/popover.html HTML popover}\n *\n * @slot trigger - Direct child native trigger, usually a `<button>`.\n * @slot content - Direct child popover surface with author-owned semantics.\n * @csspart root - Shadow wrapper for the two slots.\n * @fires rc-popover-toggle - User requested open-state change; detail: `{open: boolean}`.\n * @attr open - Controlled open state; host writes are silent.\n * @attr default-open - Initial uncontrolled open state.\n * @attr placement - Preferred logical placement relative to the trigger.\n * @attr trigger-action - `toggle` (default) or `none` for hover/focus/programmatic use.\n * @attr open-on-hover - Opens while pointer is over trigger or content.\n * @attr open-on-focus - Opens while focus is within trigger or content.\n * @cssprop [--rc-popover-max-inline-size=min(20rem, 100dvi - 1rem)] - Maximum inline size.\n * @cssprop [--rc-popover-max-block-size=calc(100dvb - 1rem)] - Maximum block size.\n * @cssprop [--rc-popover-padding-block=0.75rem] - Block padding.\n * @cssprop [--rc-popover-padding-inline=0.75rem] - Inline padding.\n * @cssprop [--rc-popover-border=var(--rc-popup-border)] - Surface border.\n * @cssprop [--rc-popover-radius=var(--rc-popup-radius)] - Corner radius.\n * @cssprop [--rc-popover-background=var(--rc-popup-background)] - Surface background.\n * @cssprop [--rc-popover-color=var(--rc-popup-color)] - Surface text color.\n * @cssprop [--rc-popover-shadow=var(--rc-popup-shadow)] - Surface shadow.\n * @cssprop [--rc-popover-z-index=1] - Fallback stacking order.\n */\nexport class RCPopover extends LitElement {\n static override styles = popoverStyles;\n\n private static readonly _styledRoots = new WeakSet<Document | ShadowRoot>();\n\n /** Preferred logical placement. */\n @property({ type: String })\n placement: RCPopoverPlacement = 'block-end-start';\n\n /** Whether trigger activation toggles the surface. */\n @property({ type: String, attribute: 'trigger-action' })\n triggerAction: RCPopoverTriggerAction = 'toggle';\n\n /** Open while the pointer is over trigger or content. */\n @property({ type: Boolean, attribute: 'open-on-hover' })\n openOnHover = false;\n\n /** Open while focus is within trigger or content. */\n @property({ type: Boolean, attribute: 'open-on-focus' })\n openOnFocus = false;\n\n private _controlledOpen: boolean | undefined;\n private _uncontrolledOpen = false;\n private _defaultOpen = false;\n private _initialized = false;\n\n /** Controlled open state. A host write never emits `rc-popover-toggle`. */\n @property({ type: Boolean, reflect: true })\n get open(): boolean {\n return this._controlledOpen ?? this._uncontrolledOpen;\n }\n\n set open(value: boolean | undefined) {\n const old = this.open;\n\n this._controlledOpen = value;\n this._initialized = value !== undefined || this._initialized;\n this.requestUpdate('open', old);\n this._syncOpen();\n }\n\n /** Initial open state used until the host or user changes the state. */\n @property({ type: Boolean, attribute: 'default-open' })\n get defaultOpen(): boolean {\n return this._defaultOpen;\n }\n\n set defaultOpen(value: boolean) {\n const old = this._defaultOpen;\n\n this._defaultOpen = value;\n\n if (!this._initialized && this._controlledOpen === undefined) {\n this._uncontrolledOpen = value;\n }\n\n this.requestUpdate('defaultOpen', old);\n this._syncOpen();\n }\n\n @query(\"slot[name='trigger']\")\n private _$triggerSlot!: HTMLSlotElement;\n\n @query(\"slot[name='content']\")\n private _$contentSlot!: HTMLSlotElement;\n\n private _$trigger: HTMLElement | null = null;\n private _$content: HTMLElement | null = null;\n private _triggerState: TriggerState | null = null;\n private _contentState: ContentState | null = null;\n private _slotSyncQueued = false;\n private _pointerWithin = false;\n private _focusWithin = false;\n private _pinnedByClick = false;\n private _dismissedUntilLeave = false;\n\n private readonly _anchor = new AnchorController(this, {\n anchor: () => this._$trigger,\n floating: () => this._$content,\n placement: this.placement,\n offset: 4,\n disabled: () => !this.open,\n });\n\n private readonly _popover = new PopoverController(this, { element: () => this._$content });\n\n override connectedCallback(): void {\n super.connectedCallback();\n RCPopover._ensureBaseStyles(this.getRootNode() as Document | ShadowRoot);\n this.addEventListener('click', this._onClick);\n this.addEventListener('pointerover', this._onPointerOver);\n this.addEventListener('pointerout', this._onPointerOut);\n this.addEventListener('focusin', this._onFocusIn);\n this.addEventListener('focusout', this._onFocusOut);\n this.ownerDocument.addEventListener('pointerdown', this._onDocumentPointerDown);\n this.ownerDocument.addEventListener('keydown', this._onDocumentKeyDown);\n\n if (this.hasUpdated) {\n this._queueSlotSync();\n }\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('click', this._onClick);\n this.removeEventListener('pointerover', this._onPointerOver);\n this.removeEventListener('pointerout', this._onPointerOut);\n this.removeEventListener('focusin', this._onFocusIn);\n this.removeEventListener('focusout', this._onFocusOut);\n this.ownerDocument.removeEventListener('pointerdown', this._onDocumentPointerDown);\n this.ownerDocument.removeEventListener('keydown', this._onDocumentKeyDown);\n this._popover.sync(false);\n this._restoreTrigger();\n this._restoreContent();\n this._$trigger = null;\n this._$content = null;\n this._pointerWithin = false;\n this._focusWithin = false;\n this._pinnedByClick = false;\n this._dismissedUntilLeave = false;\n super.disconnectedCallback();\n }\n\n protected override firstUpdated(): void {\n this._queueSlotSync();\n\n if (import.meta.env.DEV && !this.querySelector(':scope > [slot=\"trigger\"]')) {\n console.warn('[rc-popover] No direct [slot=\"trigger\"] child found.', this);\n }\n\n if (import.meta.env.DEV && !this.querySelector(':scope > [slot=\"content\"]')) {\n console.warn('[rc-popover] No direct [slot=\"content\"] child found.', this);\n }\n }\n\n protected override updated(changed: Map<PropertyKey, unknown>): void {\n if (changed.has('placement')) {\n this._anchor.setOptions({ placement: this.placement });\n }\n\n this._syncOpen();\n }\n\n protected override render() {\n return html`<div part=\"root\">\n <slot name=\"trigger\" @slotchange=${this._onSlotChange}></slot>\n <slot name=\"content\" @slotchange=${this._onSlotChange}></slot>\n </div>`;\n }\n\n private static _ensureBaseStyles(root: Document | ShadowRoot): void {\n if (RCPopover._styledRoots.has(root)) {\n return;\n }\n\n RCPopover._styledRoots.add(root);\n\n const style = (root instanceof Document ? root : root.ownerDocument).createElement('style');\n\n style.setAttribute('data-rc-light-dom-base', 'rc-popover');\n style.textContent = LIGHT_DOM_CSS;\n\n if (root instanceof Document) {\n root.head.append(style);\n } else {\n root.append(style);\n }\n }\n\n private _onSlotChange = (): void => this._queueSlotSync();\n\n private _queueSlotSync(): void {\n if (this._slotSyncQueued) {\n return;\n }\n\n this._slotSyncQueued = true;\n\n queueMicrotask(() => {\n this._slotSyncQueued = false;\n\n if (this.isConnected) {\n this._syncSlots();\n }\n });\n }\n\n private _syncSlots(): void {\n const trigger =\n this._$triggerSlot\n ?.assignedElements()\n .find((element): element is HTMLElement => element instanceof HTMLElement) ?? null;\n const content =\n this._$contentSlot\n ?.assignedElements()\n .find((element): element is HTMLElement => element instanceof HTMLElement) ?? null;\n\n if (content !== this._$content) {\n this._popover.sync(false);\n this._restoreContent();\n this._$content = content;\n this._contentState = null;\n }\n\n if (trigger !== this._$trigger) {\n this._restoreTrigger();\n this._$trigger = trigger;\n this._triggerState = null;\n }\n\n this._prepareContent();\n this._prepareTrigger();\n this._syncOpen();\n }\n\n private _prepareContent(): void {\n const content = this._$content;\n\n if (!content) {\n return;\n }\n\n if (!this._contentState) {\n this._contentState = {\n id: content.getAttribute('id'),\n popover: content.getAttribute('popover'),\n hidden: content.hidden,\n };\n }\n\n if (!content.id) {\n content.id = `rc-popover-${++popoverId}`;\n }\n\n content.setAttribute('popover', 'manual');\n }\n\n private _prepareTrigger(): void {\n const trigger = this._$trigger;\n const content = this._$content;\n\n if (!trigger) {\n return;\n }\n\n if (!this._triggerState) {\n this._triggerState = {\n ariaControls: trigger.getAttribute('aria-controls'),\n ariaExpanded: trigger.getAttribute('aria-expanded'),\n popoverTarget: trigger.getAttribute('popovertarget'),\n };\n }\n\n if (trigger.hasAttribute('popovertarget')) {\n trigger.removeAttribute('popovertarget');\n }\n\n if (trigger instanceof HTMLButtonElement && content?.id) {\n const controls = this._triggerState.ariaControls?.split(/\\s+/).filter(Boolean) ?? [];\n\n if (!controls.includes(content.id)) {\n controls.push(content.id);\n }\n\n trigger.setAttribute('aria-controls', controls.join(' '));\n trigger.setAttribute('aria-expanded', String(this.open));\n }\n }\n\n private _restoreTrigger(): void {\n const trigger = this._$trigger;\n const state = this._triggerState;\n\n if (!trigger || !state) {\n return;\n }\n\n this._restoreAttribute(trigger, 'aria-controls', state.ariaControls);\n this._restoreAttribute(trigger, 'aria-expanded', state.ariaExpanded);\n this._restoreAttribute(trigger, 'popovertarget', state.popoverTarget);\n this._triggerState = null;\n }\n\n private _restoreContent(): void {\n const content = this._$content;\n const state = this._contentState;\n\n if (!content || !state) {\n return;\n }\n\n this._restoreAttribute(content, 'id', state.id);\n this._restoreAttribute(content, 'popover', state.popover);\n content.hidden = state.hidden;\n this._contentState = null;\n }\n\n private _restoreAttribute(element: HTMLElement, name: string, value: string | null): void {\n if (value === null) {\n element.removeAttribute(name);\n } else {\n element.setAttribute(name, value);\n }\n }\n\n private _syncOpen(): void {\n if (!this.isConnected || !this._$content) {\n return;\n }\n\n if (this.open) {\n this._$content.hidden = false;\n this._popover.sync(true);\n } else {\n this._popover.sync(false);\n this._$content.hidden = true;\n }\n\n this._prepareTrigger();\n\n if (this.open) {\n this._anchor.update();\n }\n }\n\n private _requestOpen(open: boolean): void {\n if (open === this.open) {\n return;\n }\n\n if (this._controlledOpen === undefined) {\n const old = this.open;\n\n this._uncontrolledOpen = open;\n this._initialized = true;\n this.requestUpdate('open', old);\n this._syncOpen();\n }\n\n this.dispatchEvent(\n new CustomEvent<RCPopoverToggleDetail>('rc-popover-toggle', {\n bubbles: true,\n composed: true,\n detail: { open },\n }),\n );\n }\n\n private _inside(event: Event): boolean {\n const path = event.composedPath();\n\n return (\n path.includes(this._$trigger as EventTarget) || path.includes(this._$content as EventTarget)\n );\n }\n\n private _onClick = (event: MouseEvent): void => {\n if (\n this.triggerAction !== 'toggle' ||\n !this._$trigger ||\n !event.composedPath().includes(this._$trigger)\n ) {\n return;\n }\n\n if (this.open) {\n this._pinnedByClick = false;\n this._dismissedUntilLeave = true;\n this._requestOpen(false);\n } else {\n this._dismissedUntilLeave = false;\n this._pinnedByClick = true;\n this._requestOpen(true);\n }\n };\n\n private _onPointerOver = (event: PointerEvent): void => {\n if (!this.openOnHover || event.pointerType === 'touch' || !this._inside(event)) {\n return;\n }\n\n this._pointerWithin = true;\n this._reconcileAutomaticOpen();\n };\n\n private _onPointerOut = (event: PointerEvent): void => {\n if (!this.openOnHover || event.pointerType === 'touch' || !this._inside(event)) {\n return;\n }\n\n if (event.relatedTarget instanceof Node && this.contains(event.relatedTarget)) {\n return;\n }\n\n this._pointerWithin = false;\n this._reconcileAutomaticOpen();\n };\n\n private _onFocusIn = (event: FocusEvent): void => {\n if (!this.openOnFocus || !this._inside(event)) {\n return;\n }\n\n this._focusWithin = true;\n this._reconcileAutomaticOpen();\n };\n\n private _onFocusOut = (event: FocusEvent): void => {\n if (!this.openOnFocus || !this._inside(event)) {\n return;\n }\n\n if (event.relatedTarget instanceof Node && this.contains(event.relatedTarget)) {\n return;\n }\n\n this._focusWithin = false;\n this._reconcileAutomaticOpen();\n };\n\n private _reconcileAutomaticOpen(): void {\n if (!this._pointerWithin && !this._focusWithin) {\n this._dismissedUntilLeave = false;\n\n if (!this._pinnedByClick) {\n this._requestOpen(false);\n }\n\n return;\n }\n\n if (!this._dismissedUntilLeave) {\n this._requestOpen(true);\n }\n }\n\n private _onDocumentPointerDown = (event: PointerEvent): void => {\n if (!this.open || event.composedPath().includes(this)) {\n return;\n }\n\n this._pinnedByClick = false;\n this._dismissedUntilLeave = true;\n this._requestOpen(false);\n };\n\n private _onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (!this.open || event.key !== 'Escape') {\n return;\n }\n\n this._pinnedByClick = false;\n this._dismissedUntilLeave = true;\n this._requestOpen(false);\n\n if (this._$content?.contains(this.ownerDocument.activeElement)) {\n this._$trigger?.focus();\n }\n };\n}\n\nexport default RCPopover;\n"],"names":["popoverStyles","css","popoverId","LIGHT_DOM_CSS","cssText","_RCPopover","_a","LitElement","AnchorController","PopoverController","event","value","old","changed","html","root","style","trigger","element","content","controls","state","name","open","path","__decorateClass","property","query","RCPopover"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-popover-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCPopover } from './index.js';\n\ncustomElements.get('rc-popover') || customElements.define('rc-popover', RCPopover);\n\nexport * from './index.js';\n"],"names":["RCPopover"],"mappings":";AAEA,eAAe,IAAI,YAAY,KAAK,eAAe,OAAO,cAAcA,CAAS;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-popover.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './index.js';
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { AnchorPlacement } from '@rcarls/rc-common';
|
|
3
|
+
export type RCPopoverPlacement = AnchorPlacement;
|
|
4
|
+
export type RCPopoverTriggerAction = 'toggle' | 'none';
|
|
5
|
+
/** Detail of a user-requested open-state change. */
|
|
6
|
+
export interface RCPopoverToggleDetail {
|
|
7
|
+
open: boolean;
|
|
8
|
+
}
|
|
9
|
+
declare global {
|
|
10
|
+
interface HTMLElementTagNameMap {
|
|
11
|
+
'rc-popover': RCPopover;
|
|
12
|
+
}
|
|
13
|
+
interface HTMLElementEventMap {
|
|
14
|
+
'rc-popover-toggle': CustomEvent<RCPopoverToggleDetail>;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Anchored non-modal surface around a native trigger and consumer-owned content.
|
|
19
|
+
* The component manages visibility and positioning; the author supplies the
|
|
20
|
+
* content's role, accessible name, and any widget-specific keyboard behavior.
|
|
21
|
+
* A native `popovertarget` on the trigger and `popover` on the content provide
|
|
22
|
+
* a usable pre-upgrade path; the component restores those attributes on disconnect.
|
|
23
|
+
*
|
|
24
|
+
* @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-popover rc-popover docs}
|
|
25
|
+
* @see {@link https://html.spec.whatwg.org/multipage/popover.html HTML popover}
|
|
26
|
+
*
|
|
27
|
+
* @slot trigger - Direct child native trigger, usually a `<button>`.
|
|
28
|
+
* @slot content - Direct child popover surface with author-owned semantics.
|
|
29
|
+
* @csspart root - Shadow wrapper for the two slots.
|
|
30
|
+
* @fires rc-popover-toggle - User requested open-state change; detail: `{open: boolean}`.
|
|
31
|
+
* @attr open - Controlled open state; host writes are silent.
|
|
32
|
+
* @attr default-open - Initial uncontrolled open state.
|
|
33
|
+
* @attr placement - Preferred logical placement relative to the trigger.
|
|
34
|
+
* @attr trigger-action - `toggle` (default) or `none` for hover/focus/programmatic use.
|
|
35
|
+
* @attr open-on-hover - Opens while pointer is over trigger or content.
|
|
36
|
+
* @attr open-on-focus - Opens while focus is within trigger or content.
|
|
37
|
+
* @cssprop [--rc-popover-max-inline-size=min(20rem, 100dvi - 1rem)] - Maximum inline size.
|
|
38
|
+
* @cssprop [--rc-popover-max-block-size=calc(100dvb - 1rem)] - Maximum block size.
|
|
39
|
+
* @cssprop [--rc-popover-padding-block=0.75rem] - Block padding.
|
|
40
|
+
* @cssprop [--rc-popover-padding-inline=0.75rem] - Inline padding.
|
|
41
|
+
* @cssprop [--rc-popover-border=var(--rc-popup-border)] - Surface border.
|
|
42
|
+
* @cssprop [--rc-popover-radius=var(--rc-popup-radius)] - Corner radius.
|
|
43
|
+
* @cssprop [--rc-popover-background=var(--rc-popup-background)] - Surface background.
|
|
44
|
+
* @cssprop [--rc-popover-color=var(--rc-popup-color)] - Surface text color.
|
|
45
|
+
* @cssprop [--rc-popover-shadow=var(--rc-popup-shadow)] - Surface shadow.
|
|
46
|
+
* @cssprop [--rc-popover-z-index=1] - Fallback stacking order.
|
|
47
|
+
*/
|
|
48
|
+
export declare class RCPopover extends LitElement {
|
|
49
|
+
static styles: import('lit').CSSResult;
|
|
50
|
+
private static readonly _styledRoots;
|
|
51
|
+
/** Preferred logical placement. */
|
|
52
|
+
placement: RCPopoverPlacement;
|
|
53
|
+
/** Whether trigger activation toggles the surface. */
|
|
54
|
+
triggerAction: RCPopoverTriggerAction;
|
|
55
|
+
/** Open while the pointer is over trigger or content. */
|
|
56
|
+
openOnHover: boolean;
|
|
57
|
+
/** Open while focus is within trigger or content. */
|
|
58
|
+
openOnFocus: boolean;
|
|
59
|
+
private _controlledOpen;
|
|
60
|
+
private _uncontrolledOpen;
|
|
61
|
+
private _defaultOpen;
|
|
62
|
+
private _initialized;
|
|
63
|
+
/** Controlled open state. A host write never emits `rc-popover-toggle`. */
|
|
64
|
+
get open(): boolean;
|
|
65
|
+
set open(value: boolean | undefined);
|
|
66
|
+
/** Initial open state used until the host or user changes the state. */
|
|
67
|
+
get defaultOpen(): boolean;
|
|
68
|
+
set defaultOpen(value: boolean);
|
|
69
|
+
private _$triggerSlot;
|
|
70
|
+
private _$contentSlot;
|
|
71
|
+
private _$trigger;
|
|
72
|
+
private _$content;
|
|
73
|
+
private _triggerState;
|
|
74
|
+
private _contentState;
|
|
75
|
+
private _slotSyncQueued;
|
|
76
|
+
private _pointerWithin;
|
|
77
|
+
private _focusWithin;
|
|
78
|
+
private _pinnedByClick;
|
|
79
|
+
private _dismissedUntilLeave;
|
|
80
|
+
private readonly _anchor;
|
|
81
|
+
private readonly _popover;
|
|
82
|
+
connectedCallback(): void;
|
|
83
|
+
disconnectedCallback(): void;
|
|
84
|
+
protected firstUpdated(): void;
|
|
85
|
+
protected updated(changed: Map<PropertyKey, unknown>): void;
|
|
86
|
+
protected render(): import('lit-html').TemplateResult<1>;
|
|
87
|
+
private static _ensureBaseStyles;
|
|
88
|
+
private _onSlotChange;
|
|
89
|
+
private _queueSlotSync;
|
|
90
|
+
private _syncSlots;
|
|
91
|
+
private _prepareContent;
|
|
92
|
+
private _prepareTrigger;
|
|
93
|
+
private _restoreTrigger;
|
|
94
|
+
private _restoreContent;
|
|
95
|
+
private _restoreAttribute;
|
|
96
|
+
private _syncOpen;
|
|
97
|
+
private _requestOpen;
|
|
98
|
+
private _inside;
|
|
99
|
+
private _onClick;
|
|
100
|
+
private _onPointerOver;
|
|
101
|
+
private _onPointerOut;
|
|
102
|
+
private _onFocusIn;
|
|
103
|
+
private _onFocusOut;
|
|
104
|
+
private _reconcileAutomaticOpen;
|
|
105
|
+
private _onDocumentPointerDown;
|
|
106
|
+
private _onDocumentKeyDown;
|
|
107
|
+
}
|
|
108
|
+
export default RCPopover;
|
package/package.json
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@rcarls/rc-popover",
|
|
3
|
+
"publishConfig": {
|
|
4
|
+
"access": "public"
|
|
5
|
+
},
|
|
6
|
+
"version": "0.0.0-next-20261020171337",
|
|
7
|
+
"description": "Anchored non-modal surface around a native trigger and consumer-owned content.",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/richardcarls/rc-webcomponents.git",
|
|
11
|
+
"directory": "packages/rc-popover"
|
|
12
|
+
},
|
|
13
|
+
"homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-popover",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"type": "module",
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"module": "./dist/rc-popover.js",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"import": {
|
|
23
|
+
"types": "./dist/types/packages/rc-popover/src/index.d.ts",
|
|
24
|
+
"default": "./dist/rc-popover.js"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"./define": {
|
|
28
|
+
"import": {
|
|
29
|
+
"types": "./dist/types/packages/rc-popover/src/define.d.ts",
|
|
30
|
+
"default": "./dist/rc-popover-define.js"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"types": "./dist/types/packages/rc-popover/src/index.d.ts",
|
|
35
|
+
"sideEffects": [
|
|
36
|
+
"./dist/rc-popover-define.js"
|
|
37
|
+
],
|
|
38
|
+
"customElements": "dist/custom-elements.json",
|
|
39
|
+
"scripts": {
|
|
40
|
+
"build": "tsc && vite build && cem analyze",
|
|
41
|
+
"cem:analyze": "cem analyze",
|
|
42
|
+
"preview": "vite preview",
|
|
43
|
+
"test:browser": "vitest --run",
|
|
44
|
+
"test:browser:chrome": "vitest --run --project=chromium",
|
|
45
|
+
"test:browser:firefox": "vitest --run --project=firefox"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@rcarls/rc-common": "0.0.0-next-20261020171337"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@custom-elements-manifest/analyzer": "0.11.0",
|
|
52
|
+
"@vitest/browser-playwright": "4.1.5",
|
|
53
|
+
"lit": "^3.0.0",
|
|
54
|
+
"playwright": "^1.56.0",
|
|
55
|
+
"rollup": "^4.60.2",
|
|
56
|
+
"typescript": "~5.9.3",
|
|
57
|
+
"vite": "^7.1.7",
|
|
58
|
+
"vite-plugin-dts": "^4.5.4",
|
|
59
|
+
"vitest": "^4.0.6",
|
|
60
|
+
"vitest-browser-lit": "^1.0.1"
|
|
61
|
+
},
|
|
62
|
+
"peerDependencies": {
|
|
63
|
+
"lit": "^3.0.0"
|
|
64
|
+
}
|
|
65
|
+
}
|