@spectrum-web-components/overlay 1.0.0 → 1.0.2

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 (83) hide show
  1. package/custom-elements.json +10 -2
  2. package/package.json +7 -8
  3. package/src/Overlay.d.ts +1 -1
  4. package/src/Overlay.dev.js +3 -2
  5. package/src/Overlay.dev.js.map +2 -2
  6. package/src/Overlay.js +1 -1
  7. package/src/Overlay.js.map +2 -2
  8. package/src/OverlayDialog.dev.js +1 -0
  9. package/src/OverlayDialog.dev.js.map +2 -2
  10. package/src/OverlayDialog.js +1 -1
  11. package/src/OverlayDialog.js.map +2 -2
  12. package/src/OverlayPopover.dev.js +3 -3
  13. package/src/OverlayPopover.dev.js.map +2 -2
  14. package/src/OverlayPopover.js +1 -1
  15. package/src/OverlayPopover.js.map +2 -2
  16. package/src/OverlayStack.d.ts +2 -2
  17. package/src/OverlayStack.dev.js +8 -5
  18. package/src/OverlayStack.dev.js.map +2 -2
  19. package/src/OverlayStack.js +1 -1
  20. package/src/OverlayStack.js.map +3 -3
  21. package/src/overlay.css.dev.js +1 -1
  22. package/src/overlay.css.dev.js.map +1 -1
  23. package/src/overlay.css.js +1 -1
  24. package/src/overlay.css.js.map +1 -1
  25. package/LICENSE +0 -201
  26. package/stories/index.js +0 -40
  27. package/stories/index.js.map +0 -7
  28. package/stories/overlay-directive.stories.js +0 -324
  29. package/stories/overlay-directive.stories.js.map +0 -7
  30. package/stories/overlay-element.stories.js +0 -675
  31. package/stories/overlay-element.stories.js.map +0 -7
  32. package/stories/overlay-story-components.js +0 -338
  33. package/stories/overlay-story-components.js.map +0 -7
  34. package/stories/overlay.stories.js +0 -1397
  35. package/stories/overlay.stories.js.map +0 -7
  36. package/test/benchmark/basic-test.js +0 -40
  37. package/test/benchmark/basic-test.js.map +0 -7
  38. package/test/benchmark/directive-test.js +0 -43
  39. package/test/benchmark/directive-test.js.map +0 -7
  40. package/test/benchmark/element-test.js +0 -40
  41. package/test/benchmark/element-test.js.map +0 -7
  42. package/test/benchmark/lazy-test.js +0 -47
  43. package/test/benchmark/lazy-test.js.map +0 -7
  44. package/test/index.js +0 -605
  45. package/test/index.js.map +0 -7
  46. package/test/overlay-directive.test-vrt.js +0 -5
  47. package/test/overlay-directive.test-vrt.js.map +0 -7
  48. package/test/overlay-directive.test.js +0 -162
  49. package/test/overlay-directive.test.js.map +0 -7
  50. package/test/overlay-element.test-vrt.js +0 -5
  51. package/test/overlay-element.test-vrt.js.map +0 -7
  52. package/test/overlay-element.test.js +0 -936
  53. package/test/overlay-element.test.js.map +0 -7
  54. package/test/overlay-lifecycle.test.js +0 -139
  55. package/test/overlay-lifecycle.test.js.map +0 -7
  56. package/test/overlay-memory.test.js +0 -10
  57. package/test/overlay-memory.test.js.map +0 -7
  58. package/test/overlay-timer.test.js +0 -118
  59. package/test/overlay-timer.test.js.map +0 -7
  60. package/test/overlay-trigger-click.test.js +0 -164
  61. package/test/overlay-trigger-click.test.js.map +0 -7
  62. package/test/overlay-trigger-directive.test.js +0 -75
  63. package/test/overlay-trigger-directive.test.js.map +0 -7
  64. package/test/overlay-trigger-extended.test.js +0 -235
  65. package/test/overlay-trigger-extended.test.js.map +0 -7
  66. package/test/overlay-trigger-hover-click.test.js +0 -225
  67. package/test/overlay-trigger-hover-click.test.js.map +0 -7
  68. package/test/overlay-trigger-hover.test.js +0 -308
  69. package/test/overlay-trigger-hover.test.js.map +0 -7
  70. package/test/overlay-trigger-longpress.test.js +0 -549
  71. package/test/overlay-trigger-longpress.test.js.map +0 -7
  72. package/test/overlay-trigger-sync.test.js +0 -5
  73. package/test/overlay-trigger-sync.test.js.map +0 -7
  74. package/test/overlay-trigger.test.js +0 -5
  75. package/test/overlay-trigger.test.js.map +0 -7
  76. package/test/overlay-update.test.js +0 -28
  77. package/test/overlay-update.test.js.map +0 -7
  78. package/test/overlay-v1.test.js +0 -569
  79. package/test/overlay-v1.test.js.map +0 -7
  80. package/test/overlay.test-vrt.js +0 -5
  81. package/test/overlay.test-vrt.js.map +0 -7
  82. package/test/overlay.test.js +0 -776
  83. package/test/overlay.test.js.map +0 -7
package/stories/overlay-element.stories.js DELETED
@@ -1,675 +0,0 @@
1
- "use strict";
2
- import { html, render } from "@spectrum-web-components/base";
3
- import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
4
- import "@spectrum-web-components/dialog/sp-dialog.js";
5
- import "@spectrum-web-components/overlay/sp-overlay.js";
6
- import "@spectrum-web-components/action-button/sp-action-button.js";
7
- import "@spectrum-web-components/action-menu/sp-action-menu.js";
8
- import "@spectrum-web-components/action-group/sp-action-group.js";
9
- import "@spectrum-web-components/popover/sp-popover.js";
10
- import "@spectrum-web-components/menu/sp-menu-group.js";
11
- import "@spectrum-web-components/menu/sp-menu-item.js";
12
- import "@spectrum-web-components/menu/sp-menu-divider.js";
13
- import "@spectrum-web-components/link/sp-link.js";
14
- import "@spectrum-web-components/tooltip/sp-tooltip.js";
15
- import "@spectrum-web-components/slider/sp-slider.js";
16
- import "@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js";
17
- import "@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js";
18
- import "@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js";
19
- import { notAgain } from "../../dialog/stories/dialog-base.stories.js";
20
- import "./overlay-story-components.js";
21
- import {
22
- removeSlottableRequest
23
- } from "../src/slottable-request-event.js";
24
- export default {
25
- title: "Overlay Element",
26
- component: "sp-overlay",
27
- args: {
28
- open: true,
29
- delayed: false
30
- },
31
- argTypes: {
32
- open: {
33
- name: "open",
34
- type: { name: "boolean", required: false },
35
- description: "Whether the second accordion item is open.",
36
- table: {
37
- type: { summary: "boolean" },
38
- defaultValue: { summary: false }
39
- },
40
- control: {
41
- type: "boolean"
42
- }
43
- },
44
- delayed: {
45
- name: "delayed",
46
- type: { name: "boolean", required: false },
47
- description: "Whether the tooltips are delayed.",
48
- table: {
49
- type: { summary: "boolean" },
50
- defaultValue: { summary: false }
51
- },
52
- control: {
53
- type: "boolean"
54
- }
55
- }
56
- }
57
- };
58
- const Template = ({
59
- interaction,
60
- open,
61
- placement,
62
- type,
63
- delayed,
64
- style
65
- }) => html`
66
- ${style === "will-change" ? html`
67
- <style>
68
- .wrapper {
69
- will-change: transform;
70
- }
71
- </style>
72
- ` : html`
73
- <style>
74
- .wrapper {
75
- container-type: size;
76
- }
77
- </style>
78
- `}
79
- <div class="wrapper">
80
- <sp-action-button id="trigger">Open the overlay</sp-action-button>
81
- <sp-overlay
82
- ?open=${open}
83
- trigger="trigger@${interaction}"
84
- type=${ifDefined(type)}
85
- placement=${ifDefined(placement)}
86
- offset="-10"
87
- >
88
- <sp-popover ?delayed=${delayed}>
89
- <sp-dialog size="s" no-divider>
90
- <p>
91
- Content goes here.
92
- ${type === "modal" || type === "page" ? html`
93
- Or, a link,
94
- <sp-link
95
- href="https://opensource.adobe.com/spectrum-web-components"
96
- >
97
- Spectrum Web Components
98
- </sp-link>
99
- .
100
- ` : ""}
101
- </p>
102
- </sp-dialog>
103
- </sp-popover>
104
- </sp-overlay>
105
- </div>
106
- `;
107
- export const modal = (args) => Template(args);
108
- modal.args = {
109
- interaction: "click",
110
- placement: "right",
111
- style: "will-change",
112
- type: "modal"
113
- };
114
- export const page = ({
115
- interaction,
116
- open,
117
- placement,
118
- type
119
- }) => html`
120
- <sp-action-button id="trigger">Open the overlay</sp-action-button>
121
- <sp-overlay
122
- ?open=${open}
123
- trigger="trigger@${interaction}"
124
- type=${ifDefined(type)}
125
- placement=${ifDefined(placement)}
126
- >
127
- ${notAgain()}
128
- </sp-overlay>
129
- `;
130
- page.args = {
131
- interaction: "click",
132
- placement: "right",
133
- type: "page"
134
- };
135
- export const click = (args) => Template(args);
136
- click.args = {
137
- interaction: "click",
138
- placement: "right",
139
- style: "container-type",
140
- type: "auto"
141
- };
142
- export const withSlider = () => html`
143
- <sp-button id="triggerEl" variant="primary">Button popover</sp-button>
144
- <sp-overlay trigger="triggerEl@click" placement="bottom">
145
- <sp-popover tip>
146
- <sp-dialog no-divider class="options-popover-content">
147
- <p>Try clicking the slider after popover opens</p>
148
- <p>It shouldn't close the popover</p>
149
- <sp-slider
150
- value="5"
151
- step="0.5"
152
- min="0"
153
- max="20"
154
- label="Awesomeness"
155
- ></sp-slider>
156
- <sp-button>Press me</sp-button>
157
- </sp-dialog>
158
- </sp-popover>
159
- </sp-overlay>
160
- `;
161
- withSlider.swc_vrt = {
162
- skip: true
163
- };
164
- export const hover = (args) => Template(args);
165
- hover.args = {
166
- interaction: "hover",
167
- placement: "right",
168
- style: "will-change"
169
- };
170
- export const hoverTooltip = ({
171
- interaction,
172
- open,
173
- placement,
174
- type
175
- }) => html`
176
- <style>
177
- .wrapper {
178
- will-change: transform;
179
- }
180
- </style>
181
- <div class="wrapper">
182
- <sp-action-button id="trigger">Open the overlay</sp-action-button>
183
- <sp-overlay
184
- ?open=${open}
185
- trigger="trigger@${interaction}"
186
- type=${ifDefined(type)}
187
- placement=${ifDefined(placement)}
188
- offset="-10"
189
- >
190
- <sp-tooltip>Tooltip goes here.</sp-tooltip>
191
- </sp-overlay>
192
- </div>
193
- `;
194
- hoverTooltip.args = {
195
- interaction: "hover",
196
- placement: "right"
197
- };
198
- export const longpress = (args) => Template(args);
199
- longpress.args = {
200
- interaction: "longpress",
201
- placement: "right",
202
- style: "container-type",
203
- type: "auto"
204
- };
205
- export const receivesFocus = ({
206
- interaction,
207
- open,
208
- placement,
209
- receivesFocus: receivesFocus2,
210
- type
211
- }) => html`
212
- <sp-action-button id="trigger">
213
- Open the overlay (with focus)
214
- </sp-action-button>
215
- <sp-overlay
216
- ?open=${open}
217
- trigger="trigger@${interaction}"
218
- type=${ifDefined(type)}
219
- placement=${ifDefined(placement)}
220
- .receivesFocus=${receivesFocus2}
221
- >
222
- <sp-popover>
223
- <sp-dialog size="s" no-divider>
224
- <a href="https://example.com">Click Content</a>
225
- </sp-dialog>
226
- </sp-popover>
227
- </sp-overlay>
228
- `;
229
- receivesFocus.args = {
230
- interaction: "click",
231
- placement: "bottom-start",
232
- type: "auto",
233
- receivesFocus: "true"
234
- };
235
- export const transformed = (args) => html`
236
- <style>
237
- .transformed {
238
- transform: translateX(-50%);
239
- position: absolute;
240
- inset: auto;
241
- inset-inline-start: 200px;
242
- inset-block-start: 200px;
243
- inline-size: 100px;
244
- block-size: 50px;
245
- }
246
- </style>
247
- <div class="transformed">${Template(args)}</div>
248
- `;
249
- transformed.args = {
250
- interaction: "click",
251
- placement: "right",
252
- type: "auto"
253
- };
254
- export const contained = (args) => html`
255
- <style>
256
- .contained {
257
- contain: strict;
258
- position: absolute;
259
- inset: auto;
260
- inset-inline-start: 200px;
261
- inset-block-start: 200px;
262
- inline-size: 200px;
263
- block-size: 50px;
264
- padding-block: 75px;
265
- padding-inline-start: 300px;
266
- }
267
- </style>
268
- <div class="contained">${Template(args)}</div>
269
- `;
270
- contained.args = {
271
- interaction: "click",
272
- placement: "right",
273
- type: "auto"
274
- };
275
- export const all = ({ delayed }) => html`
276
- <sp-action-button id="trigger" hold-affordance>
277
- Open the overlay
278
- </sp-action-button>
279
- <sp-overlay trigger="trigger@click" type="auto" placement="right">
280
- <sp-popover>
281
- <sp-dialog size="s" no-divider>Click content</sp-dialog>
282
- </sp-popover>
283
- </sp-overlay>
284
- <sp-overlay ?delayed=${delayed} trigger="trigger@hover" type="hint">
285
- <sp-tooltip>Hover content</sp-tooltip>
286
- </sp-overlay>
287
- <sp-overlay trigger="trigger@longpress" type="auto" placement="right">
288
- <sp-popover>
289
- <sp-dialog size="s" no-divider>Longpress content</sp-dialog>
290
- </sp-popover>
291
- </sp-overlay>
292
- `;
293
- export const actionGroup = ({ delayed }) => {
294
- const popoverOffset = [6, -13];
295
- return html`
296
- <style>
297
- sp-popover sp-action-group {
298
- padding: calc(
299
- var(--spectrum-actiongroup-vertical-spacing-regular) *
300
- 0.75
301
- )
302
- calc(
303
- var(--spectrum-actiongroup-vertical-spacing-regular) / 2
304
- );
305
- }
306
- .root {
307
- inset-inline-end: 0em;
308
- inset-block-start: 3em;
309
- padding-block-end: 3em;
310
- }
311
- .root > sp-action-group > sp-action-button,
312
- .root > sp-action-group > sp-action-menu {
313
- top: 3em;
314
- position: relative;
315
- }
316
- </style>
317
- <sp-popover open class="root">
318
- <sp-action-group vertical quiet emphasized selects="single">
319
- <sp-action-button id="trigger-1" hold-affordance>
320
- <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
321
- </sp-action-button>
322
- <sp-action-button id="trigger-2" hold-affordance>
323
- <sp-icon-polygon-select
324
- slot="icon"
325
- ></sp-icon-polygon-select>
326
- </sp-action-button>
327
- <sp-action-button id="trigger-3" hold-affordance>
328
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
329
- </sp-action-button>
330
- <sp-action-menu label="More Actions" placement="left">
331
- <sp-menu-group id="cms">
332
- <span slot="header">cms</span>
333
- <sp-menu-item value="updateAllSiteContent">
334
- Update All Content
335
- </sp-menu-item>
336
- <sp-menu-item value="refreshAllXDs">
337
- Refresh All XDs
338
- </sp-menu-item>
339
- </sp-menu-group>
340
- <sp-menu-group id="ssg">
341
- <span slot="header">ssg</span>
342
- <sp-menu-item value="clearCache">
343
- Clear Cache
344
- </sp-menu-item>
345
- </sp-menu-group>
346
- <sp-menu-group id="vrt">
347
- <span slot="header">vrt</span>
348
- <sp-menu-item value="vrt-contributions">
349
- Contributions
350
- </sp-menu-item>
351
- <sp-menu-item value="vrt-internal">
352
- Internal
353
- </sp-menu-item>
354
- <sp-menu-item value="vrt-public">Public</sp-menu-item>
355
- <sp-menu-item value="vrt-patterns">
356
- Patterns
357
- </sp-menu-item>
358
- <sp-menu-item value="vrt">All</sp-menu-item>
359
- </sp-menu-group>
360
- <sp-menu-divider></sp-menu-divider>
361
- <sp-menu-group id="misc">
362
- <sp-menu-item value="logout">Logout</sp-menu-item>
363
- </sp-menu-group>
364
- </sp-action-menu>
365
- </sp-action-group>
366
- </sp-popover>
367
- <sp-overlay ?delayed=${delayed} trigger="trigger-1@hover" type="hint">
368
- <sp-tooltip>Hover</sp-tooltip>
369
- </sp-overlay>
370
- <sp-overlay
371
- trigger="trigger-1@longpress"
372
- type="auto"
373
- placement="right-start"
374
- .offset=${popoverOffset}
375
- >
376
- <sp-popover tip>
377
- <sp-action-group vertical quiet>
378
- <sp-action-button>
379
- <sp-icon-anchor-select
380
- slot="icon"
381
- ></sp-icon-anchor-select>
382
- </sp-action-button>
383
- <sp-action-button>
384
- <sp-icon-polygon-select
385
- slot="icon"
386
- ></sp-icon-polygon-select>
387
- </sp-action-button>
388
- <sp-action-button>
389
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
390
- </sp-action-button>
391
- </sp-action-group>
392
- </sp-popover>
393
- </sp-overlay>
394
- <sp-overlay ?delayed=${delayed} trigger="trigger-2@hover" type="hint">
395
- <sp-tooltip>Hover</sp-tooltip>
396
- </sp-overlay>
397
- <sp-overlay
398
- trigger="trigger-2@longpress"
399
- type="auto"
400
- placement="right-start"
401
- .offset=${popoverOffset}
402
- >
403
- <sp-popover tip>
404
- <sp-action-group vertical quiet>
405
- <sp-action-button>
406
- <sp-icon-anchor-select
407
- slot="icon"
408
- ></sp-icon-anchor-select>
409
- </sp-action-button>
410
- <sp-action-button>
411
- <sp-icon-polygon-select
412
- slot="icon"
413
- ></sp-icon-polygon-select>
414
- </sp-action-button>
415
- <sp-action-button>
416
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
417
- </sp-action-button>
418
- </sp-action-group>
419
- </sp-popover>
420
- </sp-overlay>
421
- <sp-overlay
422
- ?delayed=${delayed}
423
- trigger="trigger-3@hover"
424
- type="hint"
425
- open
426
- >
427
- <sp-tooltip>Hover</sp-tooltip>
428
- </sp-overlay>
429
- <sp-overlay
430
- trigger="trigger-3@longpress"
431
- type="auto"
432
- placement="right-start"
433
- .offset=${popoverOffset}
434
- >
435
- <sp-popover tip>
436
- <sp-action-group vertical quiet>
437
- <sp-action-button>
438
- <sp-icon-anchor-select
439
- slot="icon"
440
- ></sp-icon-anchor-select>
441
- </sp-action-button>
442
- <sp-action-button>
443
- <sp-icon-polygon-select
444
- slot="icon"
445
- ></sp-icon-polygon-select>
446
- </sp-action-button>
447
- <sp-action-button>
448
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
449
- </sp-action-button>
450
- </sp-action-group>
451
- </sp-popover>
452
- </sp-overlay>
453
- `;
454
- };
455
- export const actionGroupWithFilters = ({
456
- delayed
457
- }) => {
458
- const popoverOffset = [6, -13];
459
- return html`
460
- <style>
461
- sp-popover sp-action-group {
462
- padding: calc(
463
- var(--spectrum-actiongroup-vertical-spacing-regular) *
464
- 0.75
465
- )
466
- calc(
467
- var(--spectrum-actiongroup-vertical-spacing-regular) / 2
468
- );
469
- }
470
- .root {
471
- inset-inline-end: 0em;
472
- inset-block-start: 3em;
473
- padding-block-end: 3em;
474
- overflow: hidden;
475
- }
476
- .root > sp-action-group > sp-action-button,
477
- .root > sp-action-group > sp-action-menu {
478
- top: 3em;
479
- position: relative;
480
- }
481
- sp-action-button,
482
- sp-action-menu {
483
- background-image: linear-gradient(
484
- rgba(125, 125, 125, 0.2),
485
- rgba(125, 125, 125, 0.2)
486
- );
487
- background-blend-mode: multiply;
488
- filter: brightness(1) saturate(1);
489
- }
490
- </style>
491
- <p>
492
- This story outlines some CSS usage that is not yet covered by the
493
- placement calculations within the Overlay API.
494
- </p>
495
- <sp-popover open class="root">
496
- <sp-action-group vertical quiet emphasized selects="single">
497
- <sp-action-button id="trigger-1" hold-affordance>
498
- <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
499
- <sp-tooltip ?delayed=${delayed} self-managed>
500
- Hover
501
- </sp-tooltip>
502
- <sp-overlay
503
- trigger="trigger-1@longpress"
504
- type="auto"
505
- placement="right-start"
506
- .offset=${popoverOffset}
507
- >
508
- <sp-popover tip>
509
- <sp-action-group vertical quiet>
510
- <sp-action-button>
511
- <sp-icon-anchor-select
512
- slot="icon"
513
- ></sp-icon-anchor-select>
514
- </sp-action-button>
515
- <sp-action-button>
516
- <sp-icon-polygon-select
517
- slot="icon"
518
- ></sp-icon-polygon-select>
519
- </sp-action-button>
520
- <sp-action-button>
521
- <sp-icon-rect-select
522
- slot="icon"
523
- ></sp-icon-rect-select>
524
- </sp-action-button>
525
- </sp-action-group>
526
- </sp-popover>
527
- </sp-overlay>
528
- </sp-action-button>
529
- <sp-action-button id="trigger-2" hold-affordance>
530
- <sp-icon-polygon-select
531
- slot="icon"
532
- ></sp-icon-polygon-select>
533
- </sp-action-button>
534
- <sp-action-button id="trigger-3" hold-affordance>
535
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
536
- <sp-tooltip ?delayed=${delayed} self-managed>
537
- Hover
538
- </sp-tooltip>
539
- </sp-action-button>
540
- <sp-action-menu label="More Actions">
541
- <sp-menu-group id="cms">
542
- <span slot="header">cms</span>
543
- <sp-menu-item value="updateAllSiteContent">
544
- Update All Content
545
- </sp-menu-item>
546
- <sp-menu-item value="refreshAllXDs">
547
- Refresh All XDs
548
- </sp-menu-item>
549
- </sp-menu-group>
550
- <sp-menu-group id="ssg">
551
- <span slot="header">ssg</span>
552
- <sp-menu-item value="clearCache">
553
- Clear Cache
554
- </sp-menu-item>
555
- </sp-menu-group>
556
- <sp-menu-group id="vrt">
557
- <span slot="header">vrt</span>
558
- <sp-menu-item value="vrt-contributions">
559
- Contributions
560
- </sp-menu-item>
561
- <sp-menu-item value="vrt-internal">
562
- Internal
563
- </sp-menu-item>
564
- <sp-menu-item value="vrt-public">Public</sp-menu-item>
565
- <sp-menu-item value="vrt-patterns">
566
- Patterns
567
- </sp-menu-item>
568
- <sp-menu-item value="vrt">All</sp-menu-item>
569
- </sp-menu-group>
570
- <sp-menu-divider></sp-menu-divider>
571
- <sp-menu-group id="misc">
572
- <sp-menu-item value="logout">Logout</sp-menu-item>
573
- </sp-menu-group>
574
- </sp-action-menu>
575
- </sp-action-group>
576
- </sp-popover>
577
- <sp-overlay ?delayed=${delayed} trigger="trigger-2@hover" type="hint">
578
- <sp-tooltip>Hover</sp-tooltip>
579
- </sp-overlay>
580
- <sp-overlay
581
- trigger="trigger-2@longpress"
582
- type="auto"
583
- placement="right-start"
584
- .offset=${popoverOffset}
585
- >
586
- <sp-popover tip>
587
- <sp-action-group vertical quiet>
588
- <sp-action-button>
589
- <sp-icon-anchor-select
590
- slot="icon"
591
- ></sp-icon-anchor-select>
592
- </sp-action-button>
593
- <sp-action-button>
594
- <sp-icon-polygon-select
595
- slot="icon"
596
- ></sp-icon-polygon-select>
597
- </sp-action-button>
598
- <sp-action-button>
599
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
600
- </sp-action-button>
601
- </sp-action-group>
602
- </sp-popover>
603
- </sp-overlay>
604
- <sp-overlay
605
- trigger="trigger-3@longpress"
606
- type="auto"
607
- placement="right-start"
608
- .offset=${popoverOffset}
609
- >
610
- <sp-popover tip>
611
- <sp-action-group vertical quiet>
612
- <sp-action-button>
613
- <sp-icon-anchor-select
614
- slot="icon"
615
- ></sp-icon-anchor-select>
616
- </sp-action-button>
617
- <sp-action-button>
618
- <sp-icon-polygon-select
619
- slot="icon"
620
- ></sp-icon-polygon-select>
621
- </sp-action-button>
622
- <sp-action-button>
623
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
624
- </sp-action-button>
625
- </sp-action-group>
626
- </sp-popover>
627
- </sp-overlay>
628
- `;
629
- };
630
- export const transientHover = () => html`
631
- <transient-hover></transient-hover>
632
- `;
633
- transientHover.swc_vrt = {
634
- skip: true
635
- };
636
- export const lazyElements = () => {
637
- const handleSlottableRequest = (event) => {
638
- const template = event.data === removeSlottableRequest ? void 0 : html`
639
- <sp-popover>
640
- <sp-dialog no-divider>
641
- <sp-slider
642
- value="5"
643
- step="0.5"
644
- min="0"
645
- max="20"
646
- label="Awesomeness"
647
- ></sp-slider>
648
- <div id="styled-div">
649
- The background of this div should be blue
650
- </div>
651
- <sp-button>
652
- Press Me
653
- <sp-tooltip self-managed delayed>
654
- Click to open another popover.
655
- </sp-tooltip>
656
- </sp-button>
657
- </sp-dialog>
658
- </sp-popover>
659
- `;
660
- render(template, event.target);
661
- };
662
- return html`
663
- <sp-button id="button">Trigger</sp-button>
664
- <sp-overlay
665
- placement="bottom"
666
- type="auto"
667
- trigger="button@click"
668
- @slottable-request=${handleSlottableRequest}
669
- ></sp-overlay>
670
- `;
671
- };
672
- lazyElements.swc_vrt = {
673
- skip: true
674
- };
675
- //# sourceMappingURL=overlay-element.stories.js.map