@spectrum-web-components/dialog 0.8.3-express.0 → 0.9.1

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 (16) hide show
  1. package/custom-elements.json +151 -9
  2. package/package.json +14 -14
  3. package/src/Dialog.d.ts +12 -2
  4. package/src/Dialog.js +61 -22
  5. package/src/Dialog.js.map +1 -1
  6. package/src/DialogWrapper.d.ts +17 -0
  7. package/src/DialogWrapper.js +66 -12
  8. package/src/DialogWrapper.js.map +1 -1
  9. package/src/dialog.css.js +5 -5
  10. package/src/dialog.css.js.map +1 -1
  11. package/src/spectrum-dialog.css.js +5 -5
  12. package/src/spectrum-dialog.css.js.map +1 -1
  13. package/stories/dialog-wrapper.stories.js +112 -13
  14. package/stories/dialog-wrapper.stories.js.map +1 -1
  15. package/stories/dialog.stories.js +13 -33
  16. package/stories/dialog.stories.js.map +1 -1
package/custom-elements.json CHANGED
@@ -63,6 +63,13 @@
63
63
  }
64
64
  ],
65
65
  "members": [
66
+ {
67
+ "kind": "field",
68
+ "name": "closeButton",
69
+ "type": {
70
+ "text": "ActionButton | undefined"
71
+ }
72
+ },
66
73
  {
67
74
  "kind": "field",
68
75
  "name": "contentElement",
@@ -150,7 +157,7 @@
150
157
  },
151
158
  {
152
159
  "kind": "method",
153
- "name": "focus",
160
+ "name": "close",
154
161
  "privacy": "public",
155
162
  "return": {
156
163
  "type": {
@@ -158,20 +165,65 @@
158
165
  }
159
166
  }
160
167
  },
168
+ {
169
+ "kind": "field",
170
+ "name": "shouldManageTabOrderForScrolling",
171
+ "privacy": "public"
172
+ },
173
+ {
174
+ "kind": "field",
175
+ "name": "instanceCount",
176
+ "type": {
177
+ "text": "number"
178
+ },
179
+ "static": true,
180
+ "default": "0"
181
+ },
182
+ {
183
+ "kind": "field",
184
+ "name": "labelledbyId",
185
+ "privacy": "private",
186
+ "default": "`sp-dialog-label-${Dialog.instanceCount++}`"
187
+ },
188
+ {
189
+ "kind": "field",
190
+ "name": "conditionLabelledby",
191
+ "type": {
192
+ "text": "() => void | undefined"
193
+ },
194
+ "privacy": "private"
195
+ },
196
+ {
197
+ "kind": "field",
198
+ "name": "conditionDescribedby",
199
+ "type": {
200
+ "text": "() => void | undefined"
201
+ },
202
+ "privacy": "private"
203
+ },
161
204
  {
162
205
  "kind": "method",
163
- "name": "close",
164
- "privacy": "public",
206
+ "name": "onHeadingSlotchange",
207
+ "privacy": "private",
165
208
  "return": {
166
209
  "type": {
167
210
  "text": "void"
168
211
  }
169
- }
212
+ },
213
+ "parameters": [
214
+ {
215
+ "name": "{\n target,\n }",
216
+ "type": {
217
+ "text": "Event & { target: HTMLSlotElement }"
218
+ }
219
+ }
220
+ ]
170
221
  },
171
222
  {
172
223
  "kind": "field",
173
- "name": "shouldManageTabOrderForScrolling",
174
- "privacy": "public"
224
+ "name": "describedbyId",
225
+ "privacy": "private",
226
+ "default": "`sp-dialog-description-${Dialog.instanceCount++}`"
175
227
  },
176
228
  {
177
229
  "kind": "method",
@@ -181,7 +233,15 @@
181
233
  "type": {
182
234
  "text": "void"
183
235
  }
184
- }
236
+ },
237
+ "parameters": [
238
+ {
239
+ "name": "{\n target,\n }",
240
+ "type": {
241
+ "text": "Event & { target: HTMLSlotElement }"
242
+ }
243
+ }
244
+ ]
185
245
  }
186
246
  ],
187
247
  "events": [
@@ -421,6 +481,19 @@
421
481
  "default": "false",
422
482
  "attribute": "responsive"
423
483
  },
484
+ {
485
+ "kind": "field",
486
+ "name": "transitionPromise",
487
+ "privacy": "private"
488
+ },
489
+ {
490
+ "kind": "field",
491
+ "name": "resolveTransitionPromise",
492
+ "type": {
493
+ "text": "() => void"
494
+ },
495
+ "privacy": "private"
496
+ },
424
497
  {
425
498
  "kind": "field",
426
499
  "name": "underlay",
@@ -449,6 +522,16 @@
449
522
  }
450
523
  }
451
524
  },
525
+ {
526
+ "kind": "method",
527
+ "name": "overlayWillCloseCallback",
528
+ "privacy": "public",
529
+ "return": {
530
+ "type": {
531
+ "text": "boolean"
532
+ }
533
+ }
534
+ },
452
535
  {
453
536
  "kind": "method",
454
537
  "name": "dismiss",
@@ -489,6 +572,24 @@
489
572
  }
490
573
  }
491
574
  },
575
+ {
576
+ "kind": "method",
577
+ "name": "handleClose",
578
+ "privacy": "protected",
579
+ "return": {
580
+ "type": {
581
+ "text": "void"
582
+ }
583
+ },
584
+ "parameters": [
585
+ {
586
+ "name": "event",
587
+ "type": {
588
+ "text": "Event"
589
+ }
590
+ }
591
+ ]
592
+ },
492
593
  {
493
594
  "kind": "method",
494
595
  "name": "close",
@@ -498,6 +599,47 @@
498
599
  "text": "void"
499
600
  }
500
601
  }
602
+ },
603
+ {
604
+ "kind": "method",
605
+ "name": "dispatchClosed",
606
+ "privacy": "private",
607
+ "return": {
608
+ "type": {
609
+ "text": "void"
610
+ }
611
+ }
612
+ },
613
+ {
614
+ "kind": "method",
615
+ "name": "handleUnderlayTransitionend",
616
+ "privacy": "protected",
617
+ "return": {
618
+ "type": {
619
+ "text": "void"
620
+ }
621
+ }
622
+ },
623
+ {
624
+ "kind": "method",
625
+ "name": "handleModalTransitionend",
626
+ "privacy": "protected",
627
+ "return": {
628
+ "type": {
629
+ "text": "void"
630
+ }
631
+ }
632
+ },
633
+ {
634
+ "kind": "method",
635
+ "name": "getUpdateComplete",
636
+ "privacy": "protected",
637
+ "return": {
638
+ "type": {
639
+ "text": "Promise<boolean>"
640
+ }
641
+ },
642
+ "description": "Bind the open/close transition into the update complete lifecycle so\nthat the overlay system can wait for it to be \"visibly ready\" before\nattempting to throw focus into the content contained herein. Not\nwaiting for this can cause small amounts of page scroll to happen\nwhile opening the Tray when focusable content is included: e.g. Menu\nelements whose selected Menu Item is not the first Menu Item."
501
643
  }
502
644
  ],
503
645
  "events": [
@@ -682,7 +824,7 @@
682
824
  {
683
825
  "kind": "variable",
684
826
  "name": "styles",
685
- "default": "css`\n:host{--spectrum-dialog-fullscreen-header-text-size:28px;--spectrum-dialog-confirm-small-width:400px;--spectrum-dialog-confirm-medium-width:480px;--spectrum-dialog-confirm-large-width:640px;--spectrum-dialog-error-width:var(--spectrum-dialog-confirm-medium-width);--spectrum-dialog-confirm-hero-height:var(\n--spectrum-global-dimension-size-1600\n);--spectrum-dialog-confirm-description-padding:var(\n--spectrum-global-dimension-size-25\n);--spectrum-dialog-confirm-description-margin:calc(var(--spectrum-global-dimension-size-25)*-1);--spectrum-dialog-confirm-footer-padding-top:var(\n--spectrum-global-dimension-static-size-500,40px\n);--spectrum-dialog-confirm-gap-size:var(\n--spectrum-global-dimension-size-200\n);--spectrum-dialog-confirm-buttongroup-padding-top:var(\n--spectrum-global-dimension-static-size-500,40px\n);--spectrum-dialog-confirm-close-button-size:var(\n--spectrum-global-dimension-size-400\n);--spectrum-dialog-confirm-close-button-padding:calc(26px - var(--spectrum-global-dimension-size-175));--spectrum-dialog-confirm-divider-height:var(\n--spectrum-global-dimension-static-size-25,2px\n)}:host{box-sizing:border-box;display:flex;max-height:inherit;max-width:100%;min-width:var(\n--spectrum-dialog-confirm-min-width,var(--spectrum-global-dimension-static-size-3600)\n);outline:none;width:-moz-fit-content;width:fit-content}:host([size=s]){width:var(\n--spectrum-dialog-confirm-small-width\n)}:host([size=m]){width:var(\n--spectrum-dialog-confirm-medium-width\n)}:host([size=l]){width:var(\n--spectrum-dialog-confirm-large-width\n)}::slotted([slot=hero]){background-position:50%;background-size:cover;border-top-left-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)\n);border-top-right-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)\n);grid-area:hero;height:var(--spectrum-dialog-confirm-hero-height);overflow:hidden}.grid{display:grid;grid-template-areas:\"hero hero hero hero hero hero\" \". . . . . .\" \". heading header header typeIcon .\" \". divider divider divider divider .\" \". content content content content .\" \". footer footer buttonGroup buttonGroup .\" \". . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n);width:100%}:host([dir=ltr]) ::slotted([slot=heading]){padding-right:var(\n--spectrum-dialog-confirm-gap-size\n)}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(\n--spectrum-dialog-confirm-gap-size\n)}::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size);font-weight:var(\n--spectrum-dialog-confirm-title-text-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)\n);grid-area:heading;line-height:var(\n--spectrum-dialog-confirm-title-text-line-height,var(--spectrum-alias-heading-text-line-height)\n);margin:0;outline:none}:host([dir=ltr]) .no-header::slotted([slot=heading]){padding-right:0}:host([dir=rtl]) .no-header::slotted([slot=heading]){padding-left:0}.no-header::slotted([slot=heading]){grid-area:heading-start/heading-start/header-end/header-end}.header{align-items:center;box-sizing:border-box;display:flex;grid-area:header;justify-content:flex-end;outline:none}.type-icon{grid-area:typeIcon}.divider{grid-area:divider;margin-bottom:var(\n--spectrum-dialog-confirm-divider-margin-bottom,var(--spectrum-global-dimension-static-size-200)\n);margin-top:var(\n--spectrum-dialog-confirm-divider-margin-top,var(--spectrum-global-dimension-static-size-150)\n);width:100%}:host([no-divider]) .divider{display:none}:host([no-divider]) ::slotted([slot=heading]){padding-bottom:calc(var(\n--spectrum-dialog-confirm-divider-margin-top,\nvar(--spectrum-global-dimension-static-size-150)\n) + var(\n--spectrum-dialog-confirm-divider-margin-bottom,\nvar(--spectrum-global-dimension-static-size-200)\n) + var(\n--spectrum-dialog-confirm-divider-height,\nvar(--spectrum-global-dimension-size-25)\n))}.content{-webkit-overflow-scrolling:touch;box-sizing:border-box;font-size:var(--spectrum-dialog-confirm-description-text-size);font-weight:var(\n--spectrum-dialog-confirm-description-text-font-weight,var(--spectrum-global-font-weight-regular)\n);grid-area:content;line-height:var(\n--spectrum-dialog-confirm-description-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0 var(--spectrum-dialog-confirm-description-margin);overflow-y:auto;padding:0 var(--spectrum-dialog-confirm-description-padding)}.content,.footer{outline:none}.footer{display:flex;flex-wrap:wrap;grid-area:footer;padding-top:var(--spectrum-dialog-confirm-footer-padding-top)}.footer>.button+.button,.footer>::slotted(*){margin-bottom:0}:host([dir=ltr]) .button-group{padding-left:var(\n--spectrum-dialog-confirm-gap-size\n)}:host([dir=rtl]) .button-group{padding-right:var(\n--spectrum-dialog-confirm-gap-size\n)}.button-group{display:flex;grid-area:buttonGroup;justify-content:flex-end;padding-top:var(--spectrum-dialog-confirm-buttongroup-padding-top)}.button-group.button-group--noFooter{grid-area:footer-start/footer-start/buttonGroup-end/buttonGroup-end}:host([dismissable]) .grid{grid-template-areas:\"hero hero hero hero hero hero hero\" \". . . . . closeButton closeButton\" \". heading header header typeIcon closeButton closeButton\" \". divider divider divider divider divider .\" \". content content content content content .\" \". footer footer buttonGroup buttonGroup buttonGroup .\" \". . . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) minmax(0,var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([dismissable]) .grid .button-group{display:none}:host([dismissable]) .grid .footer{grid-area:footer/footer/buttonGroup/buttonGroup}:host([dir=ltr]) .close-button{margin-right:var(\n--spectrum-dialog-confirm-close-button-padding\n)}:host([dir=rtl]) .close-button{margin-left:var(\n--spectrum-dialog-confirm-close-button-padding\n)}.close-button{align-self:start;grid-area:closeButton;justify-self:end;margin-top:var(--spectrum-dialog-confirm-close-button-padding)}:host([error]){width:var(\n--spectrum-dialog-error-width,90%\n)}:host([mode=fullscreen]){height:100%;width:100%}:host([mode=fullscreenTakeover]){border-radius:0;height:100%;width:100%}:host([mode=fullscreen]),:host([mode=fullscreenTakeover]){max-height:none;max-width:none}:host([mode=fullscreen]) .grid,:host([mode=fullscreenTakeover]) .grid{display:grid;grid-template-areas:\". . . . .\" \". heading header buttonGroup .\" \". divider divider divider .\" \". content content content .\" \". . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) 1fr auto auto var(\n--spectrum-dialog-confirm-padding\n);grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto 1fr var(\n--spectrum-dialog-confirm-padding\n)}:host([mode=fullscreen]) ::slotted([slot=heading]),:host([mode=fullscreenTakeover]) ::slotted([slot=heading]){font-size:var(\n--spectrum-dialog-fullscreen-header-text-size\n)}:host([mode=fullscreen]) .content,:host([mode=fullscreenTakeover]) .content{max-height:none}:host([mode=fullscreen]) .button-group,:host([mode=fullscreen]) .footer,:host([mode=fullscreenTakeover]) .button-group,:host([mode=fullscreenTakeover]) .footer{padding-top:0}:host([mode=fullscreen]) .footer,:host([mode=fullscreenTakeover]) .footer{display:none}:host([mode=fullscreen]) .button-group,:host([mode=fullscreenTakeover]) .button-group{align-self:start;grid-area:buttonGroup}@media screen and (max-width:700px){.grid{grid-template-areas:\"hero hero hero hero hero hero\" \". . . . . .\" \". heading heading heading typeIcon .\" \". header header header header .\" \". divider divider divider divider .\" \". content content content content .\" \". footer footer buttonGroup buttonGroup .\" \". . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([dismissable]) .grid{grid-template-areas:\"hero hero hero hero hero hero hero\" \". . . . . closeButton closeButton\" \". heading heading heading typeIcon closeButton closeButton\" \". header header header header header .\" \". divider divider divider divider divider .\" \". content content content content content .\" \". footer footer buttonGroup buttonGroup buttonGroup .\" \". . . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) minmax(0,var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}.header{justify-content:flex-start}:host([mode=fullscreen]) .grid,:host([mode=fullscreenTakeover]) .grid{display:grid;grid-template-areas:\". . .\" \". heading .\" \". header .\" \". divider .\" \". content .\" \". buttonGroup .\" \". . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) 1fr var(\n--spectrum-dialog-confirm-padding\n);grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([mode=fullscreen]) .button-group,:host([mode=fullscreenTakeover]) .button-group{padding-top:var(--spectrum-dialog-confirm-buttongroup-padding-top)}:host([mode=fullscreen]) ::slotted([slot=heading]),:host([mode=fullscreenTakeover]) ::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size)}}@media (forced-colors:active){:host{border:solid}}::slotted([slot=heading]){color:var(\n--spectrum-dialog-confirm-title-text-color,var(--spectrum-alias-heading-text-color)\n)}.content,.footer{color:var(\n--spectrum-dialog-confirm-description-text-color,var(--spectrum-global-color-gray-800)\n)}.type-icon{color:var(\n--spectrum-dialog-confirm-icon-color,var(--spectrum-global-color-gray-900)\n)}:host([error]) .type-icon{color:var(\n--spectrum-dialog-error-icon-color,var(--spectrum-semantic-negative-icon-color)\n)}.content{overflow:hidden}.footer{color:var(\n--spectrum-dialog-confirm-description-text-color,var(--spectrum-global-color-gray-800)\n)}.content[tabindex]{overflow:auto}::slotted(img[slot=hero]){height:auto;width:100%}\n`"
827
+ "default": "css`\n:host{--spectrum-dialog-fullscreen-header-text-size:28px;--spectrum-dialog-confirm-small-width:400px;--spectrum-dialog-confirm-medium-width:480px;--spectrum-dialog-confirm-large-width:640px;--spectrum-dialog-error-width:var(--spectrum-dialog-confirm-medium-width);--spectrum-dialog-confirm-hero-height:var(\n--spectrum-global-dimension-size-1600\n);--spectrum-dialog-confirm-description-padding:var(\n--spectrum-global-dimension-size-25\n);--spectrum-dialog-confirm-description-margin:calc(var(--spectrum-global-dimension-size-25)*-1);--spectrum-dialog-confirm-footer-padding-top:var(\n--spectrum-global-dimension-static-size-500,40px\n);--spectrum-dialog-confirm-gap-size:var(\n--spectrum-global-dimension-size-200\n);--spectrum-dialog-confirm-buttongroup-padding-top:var(\n--spectrum-global-dimension-static-size-500,40px\n);--spectrum-dialog-confirm-close-button-size:var(\n--spectrum-global-dimension-size-400\n);--spectrum-dialog-confirm-close-button-padding:calc(26px - var(--spectrum-global-dimension-size-175));--spectrum-dialog-confirm-divider-height:var(\n--spectrum-global-dimension-static-size-25,2px\n)}:host{box-sizing:border-box;display:flex;max-height:inherit;max-width:100%;min-width:var(\n--spectrum-dialog-confirm-min-width,var(--spectrum-global-dimension-static-size-3600)\n);outline:none;width:-moz-fit-content;width:fit-content}:host([size=s]){width:var(\n--spectrum-dialog-confirm-small-width\n)}:host([size=m]){width:var(\n--spectrum-dialog-confirm-medium-width\n)}:host([size=l]){width:var(\n--spectrum-dialog-confirm-large-width\n)}::slotted([slot=hero]){background-position:50%;background-size:cover;border-top-left-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)\n);border-top-right-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)\n);grid-area:hero;height:var(--spectrum-dialog-confirm-hero-height);overflow:hidden}.grid{display:grid;grid-template-areas:\"hero hero hero hero hero hero\" \". . . . . .\" \". heading header header typeIcon .\" \". divider divider divider divider .\" \". content content content content .\" \". footer footer buttonGroup buttonGroup .\" \". . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n);width:100%}:host([dir=ltr]) ::slotted([slot=heading]){padding-right:var(\n--spectrum-dialog-confirm-gap-size\n)}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(\n--spectrum-dialog-confirm-gap-size\n)}::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size);font-weight:var(\n--spectrum-dialog-confirm-title-text-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)\n);grid-area:heading;line-height:var(\n--spectrum-dialog-confirm-title-text-line-height,var(--spectrum-alias-heading-text-line-height)\n);margin:0;outline:none}:host([dir=ltr]) .no-header::slotted([slot=heading]){padding-right:0}:host([dir=rtl]) .no-header::slotted([slot=heading]){padding-left:0}.no-header::slotted([slot=heading]){grid-area:heading-start/heading-start/header-end/header-end}.header{align-items:center;box-sizing:border-box;display:flex;grid-area:header;justify-content:flex-end;outline:none}.type-icon{grid-area:typeIcon}.divider{grid-area:divider;margin-bottom:var(\n--spectrum-dialog-confirm-divider-margin-bottom,var(--spectrum-global-dimension-static-size-200)\n);margin-top:var(\n--spectrum-dialog-confirm-divider-margin-top,var(--spectrum-global-dimension-static-size-150)\n);width:100%}:host([no-divider]) .divider{display:none}:host([no-divider]) ::slotted([slot=heading]){padding-bottom:calc(var(\n--spectrum-dialog-confirm-divider-margin-top,\nvar(--spectrum-global-dimension-static-size-150)\n) + var(\n--spectrum-dialog-confirm-divider-margin-bottom,\nvar(--spectrum-global-dimension-static-size-200)\n) + var(\n--spectrum-dialog-confirm-divider-height,\nvar(--spectrum-global-dimension-size-25)\n))}.content{-webkit-overflow-scrolling:touch;box-sizing:border-box;font-size:var(--spectrum-dialog-confirm-description-text-size);font-weight:var(\n--spectrum-dialog-confirm-description-text-font-weight,var(--spectrum-global-font-weight-regular)\n);grid-area:content;line-height:var(\n--spectrum-dialog-confirm-description-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0 var(--spectrum-dialog-confirm-description-margin);overflow-y:auto;padding:0 var(--spectrum-dialog-confirm-description-padding)}.content,.footer{outline:none}.footer{display:flex;flex-wrap:wrap;grid-area:footer;padding-top:var(--spectrum-dialog-confirm-footer-padding-top)}.footer>.button+.button,.footer>::slotted(*){margin-bottom:0}:host([dir=ltr]) .button-group{padding-left:var(\n--spectrum-dialog-confirm-gap-size\n)}:host([dir=rtl]) .button-group{padding-right:var(\n--spectrum-dialog-confirm-gap-size\n)}.button-group{display:flex;grid-area:buttonGroup;justify-content:flex-end;padding-top:var(--spectrum-dialog-confirm-buttongroup-padding-top)}.button-group.button-group--noFooter{grid-area:footer-start/footer-start/buttonGroup-end/buttonGroup-end}:host([dismissable]) .grid{grid-template-areas:\"hero hero hero hero hero hero hero\" \". . . . . closeButton closeButton\" \". heading header header typeIcon closeButton closeButton\" \". divider divider divider divider divider .\" \". content content content content content .\" \". footer footer buttonGroup buttonGroup buttonGroup .\" \". . . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) minmax(0,var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([dismissable]) .grid .button-group{display:none}:host([dismissable]) .grid .footer{grid-area:footer/footer/buttonGroup/buttonGroup}:host([dir=ltr]) .close-button{margin-right:var(\n--spectrum-dialog-confirm-close-button-padding\n)}:host([dir=rtl]) .close-button{margin-left:var(\n--spectrum-dialog-confirm-close-button-padding\n)}.close-button{align-self:start;grid-area:closeButton;justify-self:end;margin-top:var(--spectrum-dialog-confirm-close-button-padding)}:host([error]){width:var(\n--spectrum-dialog-error-width,90%\n)}:host([mode=fullscreen]){height:100%;width:100%}:host([mode=fullscreenTakeover]){border-radius:0;height:100%;width:100%}:host([mode=fullscreenTakeover]),:host([mode=fullscreen]){max-height:none;max-width:none}:host([mode=fullscreenTakeover]) .grid,:host([mode=fullscreen]) .grid{display:grid;grid-template-areas:\". . . . .\" \". heading header buttonGroup .\" \". divider divider divider .\" \". content content content .\" \". . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) 1fr auto auto var(\n--spectrum-dialog-confirm-padding\n);grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto 1fr var(\n--spectrum-dialog-confirm-padding\n)}:host([mode=fullscreenTakeover]) ::slotted([slot=heading]),:host([mode=fullscreen]) ::slotted([slot=heading]){font-size:var(\n--spectrum-dialog-fullscreen-header-text-size\n)}:host([mode=fullscreenTakeover]) .content,:host([mode=fullscreen]) .content{max-height:none}:host([mode=fullscreenTakeover]) .button-group,:host([mode=fullscreenTakeover]) .footer,:host([mode=fullscreen]) .button-group,:host([mode=fullscreen]) .footer{padding-top:0}:host([mode=fullscreenTakeover]) .footer,:host([mode=fullscreen]) .footer{display:none}:host([mode=fullscreenTakeover]) .button-group,:host([mode=fullscreen]) .button-group{align-self:start;grid-area:buttonGroup}@media screen and (max-width:700px){.grid{grid-template-areas:\"hero hero hero hero hero hero\" \". . . . . .\" \". heading heading heading typeIcon .\" \". header header header header .\" \". divider divider divider divider .\" \". content content content content .\" \". footer footer buttonGroup buttonGroup .\" \". . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([dismissable]) .grid{grid-template-areas:\"hero hero hero hero hero hero hero\" \". . . . . closeButton closeButton\" \". heading heading heading typeIcon closeButton closeButton\" \". header header header header header .\" \". divider divider divider divider divider .\" \". content content content content content .\" \". footer footer buttonGroup buttonGroup buttonGroup .\" \". . . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) minmax(0,var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}.header{justify-content:flex-start}:host([mode=fullscreenTakeover]) .grid,:host([mode=fullscreen]) .grid{display:grid;grid-template-areas:\". . .\" \". heading .\" \". header .\" \". divider .\" \". content .\" \". buttonGroup .\" \". . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) 1fr var(\n--spectrum-dialog-confirm-padding\n);grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([mode=fullscreenTakeover]) .button-group,:host([mode=fullscreen]) .button-group{padding-top:var(--spectrum-dialog-confirm-buttongroup-padding-top)}:host([mode=fullscreenTakeover]) ::slotted([slot=heading]),:host([mode=fullscreen]) ::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size)}}@media (forced-colors:active){:host{border:solid}}::slotted([slot=heading]){color:var(\n--spectrum-dialog-confirm-title-text-color,var(--spectrum-alias-heading-text-color)\n)}.content,.footer{color:var(\n--spectrum-dialog-confirm-description-text-color,var(--spectrum-global-color-gray-800)\n)}.type-icon{color:var(\n--spectrum-dialog-confirm-icon-color,var(--spectrum-global-color-gray-900)\n)}:host([error]) .type-icon{color:var(\n--spectrum-dialog-error-icon-color,var(--spectrum-semantic-negative-icon-color)\n)}.content{overflow:hidden}.footer{color:var(\n--spectrum-dialog-confirm-description-text-color,var(--spectrum-global-color-gray-800)\n)}.content[tabindex]{overflow:auto}::slotted(img[slot=hero]){height:auto;width:100%}\n`"
686
828
  }
687
829
  ],
688
830
  "exports": [
@@ -726,7 +868,7 @@
726
868
  {
727
869
  "kind": "variable",
728
870
  "name": "styles",
729
- "default": "css`\n:host{--spectrum-dialog-fullscreen-header-text-size:28px;--spectrum-dialog-confirm-small-width:400px;--spectrum-dialog-confirm-medium-width:480px;--spectrum-dialog-confirm-large-width:640px;--spectrum-dialog-error-width:var(--spectrum-dialog-confirm-medium-width);--spectrum-dialog-confirm-hero-height:var(\n--spectrum-global-dimension-size-1600\n);--spectrum-dialog-confirm-description-padding:var(\n--spectrum-global-dimension-size-25\n);--spectrum-dialog-confirm-description-margin:calc(var(--spectrum-global-dimension-size-25)*-1);--spectrum-dialog-confirm-footer-padding-top:var(\n--spectrum-global-dimension-static-size-500,40px\n);--spectrum-dialog-confirm-gap-size:var(\n--spectrum-global-dimension-size-200\n);--spectrum-dialog-confirm-buttongroup-padding-top:var(\n--spectrum-global-dimension-static-size-500,40px\n);--spectrum-dialog-confirm-close-button-size:var(\n--spectrum-global-dimension-size-400\n);--spectrum-dialog-confirm-close-button-padding:calc(26px - var(--spectrum-global-dimension-size-175));--spectrum-dialog-confirm-divider-height:var(\n--spectrum-global-dimension-static-size-25,2px\n)}:host{box-sizing:border-box;display:flex;max-height:inherit;max-width:100%;min-width:var(\n--spectrum-dialog-confirm-min-width,var(--spectrum-global-dimension-static-size-3600)\n);outline:none;width:-moz-fit-content;width:fit-content}:host([size=s]){width:var(\n--spectrum-dialog-confirm-small-width\n)}:host([size=m]){width:var(\n--spectrum-dialog-confirm-medium-width\n)}:host([size=l]){width:var(\n--spectrum-dialog-confirm-large-width\n)}::slotted([slot=hero]){background-position:50%;background-size:cover;border-top-left-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)\n);border-top-right-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)\n);grid-area:hero;height:var(--spectrum-dialog-confirm-hero-height);overflow:hidden}.grid{display:grid;grid-template-areas:\"hero hero hero hero hero hero\" \". . . . . .\" \". heading header header typeIcon .\" \". divider divider divider divider .\" \". content content content content .\" \". footer footer buttonGroup buttonGroup .\" \". . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n);width:100%}:host([dir=ltr]) ::slotted([slot=heading]){padding-right:var(\n--spectrum-dialog-confirm-gap-size\n)}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(\n--spectrum-dialog-confirm-gap-size\n)}::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size);font-weight:var(\n--spectrum-dialog-confirm-title-text-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)\n);grid-area:heading;line-height:var(\n--spectrum-dialog-confirm-title-text-line-height,var(--spectrum-alias-heading-text-line-height)\n);margin:0;outline:none}:host([dir=ltr]) .no-header::slotted([slot=heading]){padding-right:0}:host([dir=rtl]) .no-header::slotted([slot=heading]){padding-left:0}.no-header::slotted([slot=heading]){grid-area:heading-start/heading-start/header-end/header-end}.header{align-items:center;box-sizing:border-box;display:flex;grid-area:header;justify-content:flex-end;outline:none}.type-icon{grid-area:typeIcon}.divider{grid-area:divider;margin-bottom:var(\n--spectrum-dialog-confirm-divider-margin-bottom,var(--spectrum-global-dimension-static-size-200)\n);margin-top:var(\n--spectrum-dialog-confirm-divider-margin-top,var(--spectrum-global-dimension-static-size-150)\n);width:100%}:host([no-divider]) .divider{display:none}:host([no-divider]) ::slotted([slot=heading]){padding-bottom:calc(var(\n--spectrum-dialog-confirm-divider-margin-top,\nvar(--spectrum-global-dimension-static-size-150)\n) + var(\n--spectrum-dialog-confirm-divider-margin-bottom,\nvar(--spectrum-global-dimension-static-size-200)\n) + var(\n--spectrum-dialog-confirm-divider-height,\nvar(--spectrum-global-dimension-size-25)\n))}.content{-webkit-overflow-scrolling:touch;box-sizing:border-box;font-size:var(--spectrum-dialog-confirm-description-text-size);font-weight:var(\n--spectrum-dialog-confirm-description-text-font-weight,var(--spectrum-global-font-weight-regular)\n);grid-area:content;line-height:var(\n--spectrum-dialog-confirm-description-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0 var(--spectrum-dialog-confirm-description-margin);overflow-y:auto;padding:0 var(--spectrum-dialog-confirm-description-padding)}.content,.footer{outline:none}.footer{display:flex;flex-wrap:wrap;grid-area:footer;padding-top:var(--spectrum-dialog-confirm-footer-padding-top)}.footer>.button+.button,.footer>::slotted(*){margin-bottom:0}:host([dir=ltr]) .button-group{padding-left:var(\n--spectrum-dialog-confirm-gap-size\n)}:host([dir=rtl]) .button-group{padding-right:var(\n--spectrum-dialog-confirm-gap-size\n)}.button-group{display:flex;grid-area:buttonGroup;justify-content:flex-end;padding-top:var(--spectrum-dialog-confirm-buttongroup-padding-top)}.button-group.button-group--noFooter{grid-area:footer-start/footer-start/buttonGroup-end/buttonGroup-end}:host([dismissable]) .grid{grid-template-areas:\"hero hero hero hero hero hero hero\" \". . . . . closeButton closeButton\" \". heading header header typeIcon closeButton closeButton\" \". divider divider divider divider divider .\" \". content content content content content .\" \". footer footer buttonGroup buttonGroup buttonGroup .\" \". . . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) minmax(0,var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([dismissable]) .grid .button-group{display:none}:host([dismissable]) .grid .footer{grid-area:footer/footer/buttonGroup/buttonGroup}:host([dir=ltr]) .close-button{margin-right:var(\n--spectrum-dialog-confirm-close-button-padding\n)}:host([dir=rtl]) .close-button{margin-left:var(\n--spectrum-dialog-confirm-close-button-padding\n)}.close-button{align-self:start;grid-area:closeButton;justify-self:end;margin-top:var(--spectrum-dialog-confirm-close-button-padding)}:host([error]){width:var(\n--spectrum-dialog-error-width,90%\n)}:host([mode=fullscreen]){height:100%;width:100%}:host([mode=fullscreenTakeover]){border-radius:0;height:100%;width:100%}:host([mode=fullscreen]),:host([mode=fullscreenTakeover]){max-height:none;max-width:none}:host([mode=fullscreen]) .grid,:host([mode=fullscreenTakeover]) .grid{display:grid;grid-template-areas:\". . . . .\" \". heading header buttonGroup .\" \". divider divider divider .\" \". content content content .\" \". . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) 1fr auto auto var(\n--spectrum-dialog-confirm-padding\n);grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto 1fr var(\n--spectrum-dialog-confirm-padding\n)}:host([mode=fullscreen]) ::slotted([slot=heading]),:host([mode=fullscreenTakeover]) ::slotted([slot=heading]){font-size:var(\n--spectrum-dialog-fullscreen-header-text-size\n)}:host([mode=fullscreen]) .content,:host([mode=fullscreenTakeover]) .content{max-height:none}:host([mode=fullscreen]) .button-group,:host([mode=fullscreen]) .footer,:host([mode=fullscreenTakeover]) .button-group,:host([mode=fullscreenTakeover]) .footer{padding-top:0}:host([mode=fullscreen]) .footer,:host([mode=fullscreenTakeover]) .footer{display:none}:host([mode=fullscreen]) .button-group,:host([mode=fullscreenTakeover]) .button-group{align-self:start;grid-area:buttonGroup}@media screen and (max-width:700px){.grid{grid-template-areas:\"hero hero hero hero hero hero\" \". . . . . .\" \". heading heading heading typeIcon .\" \". header header header header .\" \". divider divider divider divider .\" \". content content content content .\" \". footer footer buttonGroup buttonGroup .\" \". . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([dismissable]) .grid{grid-template-areas:\"hero hero hero hero hero hero hero\" \". . . . . closeButton closeButton\" \". heading heading heading typeIcon closeButton closeButton\" \". header header header header header .\" \". divider divider divider divider divider .\" \". content content content content content .\" \". footer footer buttonGroup buttonGroup buttonGroup .\" \". . . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) minmax(0,var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}.header{justify-content:flex-start}:host([mode=fullscreen]) .grid,:host([mode=fullscreenTakeover]) .grid{display:grid;grid-template-areas:\". . .\" \". heading .\" \". header .\" \". divider .\" \". content .\" \". buttonGroup .\" \". . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) 1fr var(\n--spectrum-dialog-confirm-padding\n);grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([mode=fullscreen]) .button-group,:host([mode=fullscreenTakeover]) .button-group{padding-top:var(--spectrum-dialog-confirm-buttongroup-padding-top)}:host([mode=fullscreen]) ::slotted([slot=heading]),:host([mode=fullscreenTakeover]) ::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size)}}@media (forced-colors:active){:host{border:solid}}::slotted([slot=heading]){color:var(\n--spectrum-dialog-confirm-title-text-color,var(--spectrum-alias-heading-text-color)\n)}.content,.footer{color:var(\n--spectrum-dialog-confirm-description-text-color,var(--spectrum-global-color-gray-800)\n)}.type-icon{color:var(\n--spectrum-dialog-confirm-icon-color,var(--spectrum-global-color-gray-900)\n)}:host([error]) .type-icon{color:var(\n--spectrum-dialog-error-icon-color,var(--spectrum-semantic-negative-icon-color)\n)}\n`"
871
+ "default": "css`\n:host{--spectrum-dialog-fullscreen-header-text-size:28px;--spectrum-dialog-confirm-small-width:400px;--spectrum-dialog-confirm-medium-width:480px;--spectrum-dialog-confirm-large-width:640px;--spectrum-dialog-error-width:var(--spectrum-dialog-confirm-medium-width);--spectrum-dialog-confirm-hero-height:var(\n--spectrum-global-dimension-size-1600\n);--spectrum-dialog-confirm-description-padding:var(\n--spectrum-global-dimension-size-25\n);--spectrum-dialog-confirm-description-margin:calc(var(--spectrum-global-dimension-size-25)*-1);--spectrum-dialog-confirm-footer-padding-top:var(\n--spectrum-global-dimension-static-size-500,40px\n);--spectrum-dialog-confirm-gap-size:var(\n--spectrum-global-dimension-size-200\n);--spectrum-dialog-confirm-buttongroup-padding-top:var(\n--spectrum-global-dimension-static-size-500,40px\n);--spectrum-dialog-confirm-close-button-size:var(\n--spectrum-global-dimension-size-400\n);--spectrum-dialog-confirm-close-button-padding:calc(26px - var(--spectrum-global-dimension-size-175));--spectrum-dialog-confirm-divider-height:var(\n--spectrum-global-dimension-static-size-25,2px\n)}:host{box-sizing:border-box;display:flex;max-height:inherit;max-width:100%;min-width:var(\n--spectrum-dialog-confirm-min-width,var(--spectrum-global-dimension-static-size-3600)\n);outline:none;width:-moz-fit-content;width:fit-content}:host([size=s]){width:var(\n--spectrum-dialog-confirm-small-width\n)}:host([size=m]){width:var(\n--spectrum-dialog-confirm-medium-width\n)}:host([size=l]){width:var(\n--spectrum-dialog-confirm-large-width\n)}::slotted([slot=hero]){background-position:50%;background-size:cover;border-top-left-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)\n);border-top-right-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)\n);grid-area:hero;height:var(--spectrum-dialog-confirm-hero-height);overflow:hidden}.grid{display:grid;grid-template-areas:\"hero hero hero hero hero hero\" \". . . . . .\" \". heading header header typeIcon .\" \". divider divider divider divider .\" \". content content content content .\" \". footer footer buttonGroup buttonGroup .\" \". . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n);width:100%}:host([dir=ltr]) ::slotted([slot=heading]){padding-right:var(\n--spectrum-dialog-confirm-gap-size\n)}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(\n--spectrum-dialog-confirm-gap-size\n)}::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size);font-weight:var(\n--spectrum-dialog-confirm-title-text-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)\n);grid-area:heading;line-height:var(\n--spectrum-dialog-confirm-title-text-line-height,var(--spectrum-alias-heading-text-line-height)\n);margin:0;outline:none}:host([dir=ltr]) .no-header::slotted([slot=heading]){padding-right:0}:host([dir=rtl]) .no-header::slotted([slot=heading]){padding-left:0}.no-header::slotted([slot=heading]){grid-area:heading-start/heading-start/header-end/header-end}.header{align-items:center;box-sizing:border-box;display:flex;grid-area:header;justify-content:flex-end;outline:none}.type-icon{grid-area:typeIcon}.divider{grid-area:divider;margin-bottom:var(\n--spectrum-dialog-confirm-divider-margin-bottom,var(--spectrum-global-dimension-static-size-200)\n);margin-top:var(\n--spectrum-dialog-confirm-divider-margin-top,var(--spectrum-global-dimension-static-size-150)\n);width:100%}:host([no-divider]) .divider{display:none}:host([no-divider]) ::slotted([slot=heading]){padding-bottom:calc(var(\n--spectrum-dialog-confirm-divider-margin-top,\nvar(--spectrum-global-dimension-static-size-150)\n) + var(\n--spectrum-dialog-confirm-divider-margin-bottom,\nvar(--spectrum-global-dimension-static-size-200)\n) + var(\n--spectrum-dialog-confirm-divider-height,\nvar(--spectrum-global-dimension-size-25)\n))}.content{-webkit-overflow-scrolling:touch;box-sizing:border-box;font-size:var(--spectrum-dialog-confirm-description-text-size);font-weight:var(\n--spectrum-dialog-confirm-description-text-font-weight,var(--spectrum-global-font-weight-regular)\n);grid-area:content;line-height:var(\n--spectrum-dialog-confirm-description-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0 var(--spectrum-dialog-confirm-description-margin);overflow-y:auto;padding:0 var(--spectrum-dialog-confirm-description-padding)}.content,.footer{outline:none}.footer{display:flex;flex-wrap:wrap;grid-area:footer;padding-top:var(--spectrum-dialog-confirm-footer-padding-top)}.footer>.button+.button,.footer>::slotted(*){margin-bottom:0}:host([dir=ltr]) .button-group{padding-left:var(\n--spectrum-dialog-confirm-gap-size\n)}:host([dir=rtl]) .button-group{padding-right:var(\n--spectrum-dialog-confirm-gap-size\n)}.button-group{display:flex;grid-area:buttonGroup;justify-content:flex-end;padding-top:var(--spectrum-dialog-confirm-buttongroup-padding-top)}.button-group.button-group--noFooter{grid-area:footer-start/footer-start/buttonGroup-end/buttonGroup-end}:host([dismissable]) .grid{grid-template-areas:\"hero hero hero hero hero hero hero\" \". . . . . closeButton closeButton\" \". heading header header typeIcon closeButton closeButton\" \". divider divider divider divider divider .\" \". content content content content content .\" \". footer footer buttonGroup buttonGroup buttonGroup .\" \". . . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) minmax(0,var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([dismissable]) .grid .button-group{display:none}:host([dismissable]) .grid .footer{grid-area:footer/footer/buttonGroup/buttonGroup}:host([dir=ltr]) .close-button{margin-right:var(\n--spectrum-dialog-confirm-close-button-padding\n)}:host([dir=rtl]) .close-button{margin-left:var(\n--spectrum-dialog-confirm-close-button-padding\n)}.close-button{align-self:start;grid-area:closeButton;justify-self:end;margin-top:var(--spectrum-dialog-confirm-close-button-padding)}:host([error]){width:var(\n--spectrum-dialog-error-width,90%\n)}:host([mode=fullscreen]){height:100%;width:100%}:host([mode=fullscreenTakeover]){border-radius:0;height:100%;width:100%}:host([mode=fullscreenTakeover]),:host([mode=fullscreen]){max-height:none;max-width:none}:host([mode=fullscreenTakeover]) .grid,:host([mode=fullscreen]) .grid{display:grid;grid-template-areas:\". . . . .\" \". heading header buttonGroup .\" \". divider divider divider .\" \". content content content .\" \". . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) 1fr auto auto var(\n--spectrum-dialog-confirm-padding\n);grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto 1fr var(\n--spectrum-dialog-confirm-padding\n)}:host([mode=fullscreenTakeover]) ::slotted([slot=heading]),:host([mode=fullscreen]) ::slotted([slot=heading]){font-size:var(\n--spectrum-dialog-fullscreen-header-text-size\n)}:host([mode=fullscreenTakeover]) .content,:host([mode=fullscreen]) .content{max-height:none}:host([mode=fullscreenTakeover]) .button-group,:host([mode=fullscreenTakeover]) .footer,:host([mode=fullscreen]) .button-group,:host([mode=fullscreen]) .footer{padding-top:0}:host([mode=fullscreenTakeover]) .footer,:host([mode=fullscreen]) .footer{display:none}:host([mode=fullscreenTakeover]) .button-group,:host([mode=fullscreen]) .button-group{align-self:start;grid-area:buttonGroup}@media screen and (max-width:700px){.grid{grid-template-areas:\"hero hero hero hero hero hero\" \". . . . . .\" \". heading heading heading typeIcon .\" \". header header header header .\" \". divider divider divider divider .\" \". content content content content .\" \". footer footer buttonGroup buttonGroup .\" \". . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([dismissable]) .grid{grid-template-areas:\"hero hero hero hero hero hero hero\" \". . . . . closeButton closeButton\" \". heading heading heading typeIcon closeButton closeButton\" \". header header header header header .\" \". divider divider divider divider divider .\" \". content content content content content .\" \". footer footer buttonGroup buttonGroup buttonGroup .\" \". . . . . . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0,auto) minmax(0,var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding);grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}.header{justify-content:flex-start}:host([mode=fullscreenTakeover]) .grid,:host([mode=fullscreen]) .grid{display:grid;grid-template-areas:\". . .\" \". heading .\" \". header .\" \". divider .\" \". content .\" \". buttonGroup .\" \". . .\";grid-template-columns:var(--spectrum-dialog-confirm-padding) 1fr var(\n--spectrum-dialog-confirm-padding\n);grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(\n--spectrum-dialog-confirm-padding\n)}:host([mode=fullscreenTakeover]) .button-group,:host([mode=fullscreen]) .button-group{padding-top:var(--spectrum-dialog-confirm-buttongroup-padding-top)}:host([mode=fullscreenTakeover]) ::slotted([slot=heading]),:host([mode=fullscreen]) ::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size)}}@media (forced-colors:active){:host{border:solid}}::slotted([slot=heading]){color:var(\n--spectrum-dialog-confirm-title-text-color,var(--spectrum-alias-heading-text-color)\n)}.content,.footer{color:var(\n--spectrum-dialog-confirm-description-text-color,var(--spectrum-global-color-gray-800)\n)}.type-icon{color:var(\n--spectrum-dialog-confirm-icon-color,var(--spectrum-global-color-gray-900)\n)}:host([error]) .type-icon{color:var(\n--spectrum-dialog-error-icon-color,var(--spectrum-semantic-negative-icon-color)\n)}\n`"
730
872
  }
731
873
  ],
732
874
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/dialog",
3
- "version": "0.8.3-express.0+5d9e2a2ca",
3
+ "version": "0.9.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -46,26 +46,26 @@
46
46
  "lit-html"
47
47
  ],
48
48
  "dependencies": {
49
- "@spectrum-web-components/action-button": "^0.7.3-express.0+5d9e2a2ca",
50
- "@spectrum-web-components/base": "^0.5.2-express.41+5d9e2a2ca",
51
- "@spectrum-web-components/button": "^0.16.3-express.0+5d9e2a2ca",
52
- "@spectrum-web-components/button-group": "^0.8.2-express.41+5d9e2a2ca",
53
- "@spectrum-web-components/divider": "^0.4.2-express.41+5d9e2a2ca",
54
- "@spectrum-web-components/icon": "^0.11.2-express.41+5d9e2a2ca",
55
- "@spectrum-web-components/icons-ui": "^0.8.2-express.41+5d9e2a2ca",
56
- "@spectrum-web-components/icons-workflow": "^0.8.2-express.41+5d9e2a2ca",
57
- "@spectrum-web-components/modal": "^0.5.2-express.41+5d9e2a2ca",
58
- "@spectrum-web-components/shared": "^0.13.3-express.0+5d9e2a2ca",
59
- "@spectrum-web-components/underlay": "^0.8.2-express.41+5d9e2a2ca",
49
+ "@spectrum-web-components/action-button": "^0.7.4",
50
+ "@spectrum-web-components/base": "^0.5.2",
51
+ "@spectrum-web-components/button": "^0.16.4",
52
+ "@spectrum-web-components/button-group": "^0.8.3",
53
+ "@spectrum-web-components/divider": "^0.4.3",
54
+ "@spectrum-web-components/icon": "^0.11.3",
55
+ "@spectrum-web-components/icons-ui": "^0.8.3",
56
+ "@spectrum-web-components/icons-workflow": "^0.8.3",
57
+ "@spectrum-web-components/modal": "^0.6.1",
58
+ "@spectrum-web-components/shared": "^0.13.4",
59
+ "@spectrum-web-components/underlay": "^0.8.3",
60
60
  "tslib": "^2.0.0"
61
61
  },
62
62
  "devDependencies": {
63
- "@spectrum-css/dialog": "latest"
63
+ "@spectrum-css/dialog": "^5.0.0"
64
64
  },
65
65
  "types": "./src/index.d.ts",
66
66
  "customElements": "custom-elements.json",
67
67
  "sideEffects": [
68
68
  "./sp-*.js"
69
69
  ],
70
- "gitHead": "5d9e2a2ca93deff51e4b2c7b8354f1127009a4e3"
70
+ "gitHead": "bb5308b9be01cc7c5bbab289312042256bdcc740"
71
71
  }
package/src/Dialog.d.ts CHANGED
@@ -4,6 +4,7 @@ import '@spectrum-web-components/action-button/sp-action-button.js';
4
4
  import '@spectrum-web-components/button-group/sp-button-group.js';
5
5
  import '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';
6
6
  import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
7
+ import type { ActionButton } from '@spectrum-web-components/action-button';
7
8
  declare const Dialog_base: typeof SpectrumElement & {
8
9
  new (...args: any[]): import("@spectrum-web-components/shared").SlotPresenceObservingInterface;
9
10
  prototype: import("@spectrum-web-components/shared").SlotPresenceObservingInterface;
@@ -20,6 +21,7 @@ declare const Dialog_base: typeof SpectrumElement & {
20
21
  */
21
22
  export declare class Dialog extends Dialog_base {
22
23
  static get styles(): CSSResultArray;
24
+ closeButton?: ActionButton;
23
25
  private contentElement;
24
26
  error: boolean;
25
27
  dismissable: boolean;
@@ -29,12 +31,20 @@ export declare class Dialog extends Dialog_base {
29
31
  noDivider: boolean;
30
32
  mode?: 'fullscreen' | 'fullscreenTakeover';
31
33
  size?: 's' | 'm' | 'l';
32
- focus(): void;
33
34
  close(): void;
34
35
  protected render(): TemplateResult;
35
36
  shouldManageTabOrderForScrolling: () => void;
36
37
  protected shouldUpdate(changes: PropertyValues): boolean;
37
- protected onContentSlotChange(): void;
38
+ protected firstUpdated(changes: PropertyValues): void;
39
+ static instanceCount: number;
40
+ private labelledbyId;
41
+ private conditionLabelledby?;
42
+ private conditionDescribedby?;
43
+ private onHeadingSlotchange;
44
+ private describedbyId;
45
+ protected onContentSlotChange({ target, }: Event & {
46
+ target: HTMLSlotElement;
47
+ }): void;
38
48
  connectedCallback(): void;
39
49
  disconnectedCallback(): void;
40
50
  }
package/src/Dialog.js CHANGED
@@ -13,6 +13,7 @@ import { __decorate } from "tslib";
13
13
  import { html, SpectrumElement, } from '@spectrum-web-components/base';
14
14
  import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
15
15
  import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
16
+ import { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';
16
17
  import '@spectrum-web-components/divider/sp-divider.js';
17
18
  import '@spectrum-web-components/action-button/sp-action-button.js';
18
19
  import '@spectrum-web-components/button-group/sp-button-group.js';
@@ -20,8 +21,22 @@ import crossStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.c
20
21
  import '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';
21
22
  import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
22
23
  import { FocusVisiblePolyfillMixin, ObserveSlotPresence, } from '@spectrum-web-components/shared';
23
- import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';
24
24
  import styles from './dialog.css.js';
25
+ function gatherAppliedIdsFromSlottedChildren(slot, idBase) {
26
+ const assignedElements = slot.assignedElements();
27
+ const ids = [];
28
+ assignedElements.forEach((el, i) => {
29
+ if (el.id) {
30
+ ids.push(el.id);
31
+ }
32
+ else {
33
+ const id = idBase + `-${i}`;
34
+ el.id = id;
35
+ ids.push(id);
36
+ }
37
+ });
38
+ return ids;
39
+ }
25
40
  /**
26
41
  * @element sp-dialog
27
42
  *
@@ -51,6 +66,8 @@ export class Dialog extends FocusVisiblePolyfillMixin(ObserveSlotPresence(Spectr
51
66
  this.contentElement.removeAttribute('tabindex');
52
67
  }
53
68
  };
69
+ this.labelledbyId = `sp-dialog-label-${Dialog.instanceCount++}`;
70
+ this.describedbyId = `sp-dialog-description-${Dialog.instanceCount++}`;
54
71
  }
55
72
  static get styles() {
56
73
  return [styles, crossStyles];
@@ -64,28 +81,11 @@ export class Dialog extends FocusVisiblePolyfillMixin(ObserveSlotPresence(Spectr
64
81
  get hasHero() {
65
82
  return this.getSlotContentPresence('[slot="hero"]');
66
83
  }
67
- focus() {
68
- if (this.shadowRoot) {
69
- const firstFocusable = firstFocusableIn(this.shadowRoot);
70
- if (firstFocusable) {
71
- if (firstFocusable.updateComplete) {
72
- firstFocusable.updateComplete.then(() => firstFocusable.focus());
73
- /* c8 ignore next 3 */
74
- }
75
- else {
76
- firstFocusable.focus();
77
- }
78
- this.removeAttribute('tabindex');
79
- }
80
- /* c8 ignore next 3 */
81
- }
82
- else {
83
- super.focus();
84
- }
85
- }
86
84
  close() {
87
85
  this.dispatchEvent(new Event('close', {
88
86
  bubbles: true,
87
+ composed: true,
88
+ cancelable: true,
89
89
  }));
90
90
  }
91
91
  render() {
@@ -95,6 +95,7 @@ export class Dialog extends FocusVisiblePolyfillMixin(ObserveSlotPresence(Spectr
95
95
  <slot
96
96
  name="heading"
97
97
  class=${ifDefined(this.hasHero ? this.hasHero : undefined)}
98
+ @slotchange=${this.onHeadingSlotchange}
98
99
  ></slot>
99
100
  ${this.error
100
101
  ? html `
@@ -155,11 +156,45 @@ export class Dialog extends FocusVisiblePolyfillMixin(ObserveSlotPresence(Spectr
155
156
  }
156
157
  return super.shouldUpdate(changes);
157
158
  }
158
- onContentSlotChange() {
159
- this.shouldManageTabOrderForScrolling();
159
+ firstUpdated(changes) {
160
+ super.firstUpdated(changes);
161
+ this.setAttribute('role', 'dialog');
162
+ }
163
+ onHeadingSlotchange({ target, }) {
164
+ if (this.conditionLabelledby) {
165
+ this.conditionLabelledby();
166
+ delete this.conditionLabelledby;
167
+ }
168
+ const ids = gatherAppliedIdsFromSlottedChildren(target, this.labelledbyId);
169
+ if (ids.length) {
170
+ this.conditionLabelledby = conditionAttributeWithId(this, 'aria-labelledby', ids);
171
+ }
172
+ }
173
+ onContentSlotChange({ target, }) {
174
+ if (this.conditionDescribedby) {
175
+ this.conditionDescribedby();
176
+ delete this.conditionDescribedby;
177
+ }
178
+ const ids = gatherAppliedIdsFromSlottedChildren(target, this.describedbyId);
179
+ if (ids.length && ids.length < 4) {
180
+ this.conditionDescribedby = conditionAttributeWithId(this, 'aria-describedby', ids);
181
+ }
182
+ else if (!ids.length) {
183
+ const idProvided = !!this.id;
184
+ if (!idProvided)
185
+ this.id = this.describedbyId;
186
+ const conditionDescribedby = conditionAttributeWithId(this, 'aria-describedby', this.id);
187
+ this.conditionDescribedby = () => {
188
+ conditionDescribedby();
189
+ if (!idProvided) {
190
+ this.removeAttribute('id');
191
+ }
192
+ };
193
+ }
160
194
  }
161
195
  connectedCallback() {
162
196
  super.connectedCallback();
197
+ this.tabIndex = 0;
163
198
  window.addEventListener('resize', this.shouldManageTabOrderForScrolling);
164
199
  }
165
200
  disconnectedCallback() {
@@ -167,6 +202,10 @@ export class Dialog extends FocusVisiblePolyfillMixin(ObserveSlotPresence(Spectr
167
202
  super.disconnectedCallback();
168
203
  }
169
204
  }
205
+ Dialog.instanceCount = 0;
206
+ __decorate([
207
+ query('.close-button')
208
+ ], Dialog.prototype, "closeButton", void 0);
170
209
  __decorate([
171
210
  query('.content')
172
211
  ], Dialog.prototype, "contentElement", void 0);
package/src/Dialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["Dialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EAEJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,KAAK,GACR,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,iDAAiD,CAAC;AAE5E,OAAO,gDAAgD,CAAC;AACxD,OAAO,4DAA4D,CAAC;AACpE,OAAO,0DAA0D,CAAC;AAClE,OAAO,WAAW,MAAM,8DAA8D,CAAC;AACvF,OAAO,6DAA6D,CAAC;AACrE,OAAO,gEAAgE,CAAC;AACxE,OAAO,EACH,yBAAyB,EACzB,mBAAmB,GACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2DAA2D,CAAC;AAE7F,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;;;;;;;GASG;AACH,MAAM,OAAO,MAAO,SAAQ,yBAAyB,CACjD,mBAAmB,CAAC,eAAe,EAAE;IACjC,eAAe;IACf,iBAAiB;IACjB,iBAAiB;CACpB,CAAC,CACL;IAND;;QAeW,UAAK,GAAG,KAAK,CAAC;QAGd,gBAAW,GAAG,KAAK,CAAC;QAepB,cAAS,GAAG,KAAK,CAAC;QA+FlB,qCAAgC,GAAG,GAAS,EAAE;YACjD,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC;YAC3D,IAAI,YAAY,GAAG,YAAY,EAAE;gBAC7B,IAAI,CAAC,cAAc,CAAC,QAAQ,GAAG,CAAC,CAAC;aACpC;iBAAM;gBACH,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;aACnD;QACL,CAAC,CAAC;IA+BN,CAAC;IA/JU,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACjC,CAAC;IAWD,IAAc,SAAS;QACnB,OAAO,IAAI,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,CAAC;IAED,IAAc,UAAU;QACpB,OAAO,IAAI,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,CAAC;IAED,IAAc,OAAO;QACjB,OAAO,IAAI,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC;IACxD,CAAC;IAWM,KAAK;QACR,IAAI,IAAI,CAAC,UAAU,EAAE;YACjB,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACzD,IAAI,cAAc,EAAE;gBAChB,IAAI,cAAc,CAAC,cAAc,EAAE;oBAC/B,cAAc,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CACpC,cAAc,CAAC,KAAK,EAAE,CACzB,CAAC;oBACF,sBAAsB;iBACzB;qBAAM;oBACH,cAAc,CAAC,KAAK,EAAE,CAAC;iBAC1B;gBACD,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;aACpC;YACD,sBAAsB;SACzB;aAAM;YACH,KAAK,CAAC,KAAK,EAAE,CAAC;SACjB;IACL,CAAC;IAEM,KAAK;QACR,IAAI,CAAC,aAAa,CACd,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,OAAO,EAAE,IAAI;SAChB,CAAC,CACL,CAAC;IACN,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;;;;;4BAKS,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;;kBAE5D,IAAI,CAAC,KAAK;YACR,CAAC,CAAC,IAAI,CAAA;;uBAEH;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;kBACV,IAAI,CAAC,SAAS;YACZ,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;uBAEH;;wCAEiB,IAAI,CAAC,mBAAmB;;kBAE9C,IAAI,CAAC,SAAS;YACZ,CAAC,CAAC,IAAI,CAAA;;;;uBAIH;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;kBACV,IAAI,CAAC,UAAU;YACb,CAAC,CAAC,IAAI,CAAA;;oDAE0B,IAAI,CAAC,SAAS;gBAChC,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,wBAAwB;;;;uBAIrC;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;kBACV,IAAI,CAAC,WAAW;YACd,CAAC,CAAC,IAAI,CAAA;;;;;;uCAMa,IAAI,CAAC,KAAK;;;;;;;uBAO1B;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;SAEnB,CAAC;IACN,CAAC;IAWS,YAAY,CAAC,OAAuB;QAC1C,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE;YACpC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;SAC5B;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE;YAChD,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;SACjC;QACD,OAAO,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC;IAES,mBAAmB;QACzB,IAAI,CAAC,gCAAgC,EAAE,CAAC;IAC5C,CAAC;IAEM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,CAAC,gBAAgB,CACnB,QAAQ,EACR,IAAI,CAAC,gCAAgC,CACxC,CAAC;IACN,CAAC;IAEM,oBAAoB;QACvB,MAAM,CAAC,mBAAmB,CACtB,QAAQ,EACR,IAAI,CAAC,gCAAgC,CACxC,CAAC;QACF,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;CACJ;AA1JG;IADC,KAAK,CAAC,UAAU,CAAC;8CACsB;AAGxC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACtB;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAChB;AAe3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;yCAC3C;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACQ;AAGlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACZ","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/button-group/sp-button-group.js';\nimport crossStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n} from '@spectrum-web-components/shared';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\n\nimport styles from './dialog.css.js';\n\n/**\n * @element sp-dialog\n *\n * @slot hero - Accepts a hero image to display at the top of the dialog\n * @slot heading - Acts as the heading of the dialog. This should be an actual heading tag `<h1-6 />`\n * @slot - Content not addressed to a specific slot will be interpreted as the main content of the dialog\n * @slot footer - Content addressed to the `footer` will be placed below the main content and to the side of any `[slot='button']` content\n * @slot button - Button elements addressed to this slot may be placed below the content when not delivered in a fullscreen mode\n * @fires close - Announces that the dialog has been closed.\n */\nexport class Dialog extends FocusVisiblePolyfillMixin(\n ObserveSlotPresence(SpectrumElement, [\n '[slot=\"hero\"]',\n '[slot=\"footer\"]',\n '[slot=\"button\"]',\n ])\n) {\n public static get styles(): CSSResultArray {\n return [styles, crossStyles];\n }\n\n @query('.content')\n private contentElement!: HTMLDivElement;\n\n @property({ type: Boolean, reflect: true })\n public error = false;\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n protected get hasFooter(): boolean {\n return this.getSlotContentPresence('[slot=\"footer\"]');\n }\n\n protected get hasButtons(): boolean {\n return this.getSlotContentPresence('[slot=\"button\"]');\n }\n\n protected get hasHero(): boolean {\n return this.getSlotContentPresence('[slot=\"hero\"]');\n }\n\n @property({ type: Boolean, reflect: true, attribute: 'no-divider' })\n public noDivider = false;\n\n @property({ type: String, reflect: true })\n public mode?: 'fullscreen' | 'fullscreenTakeover';\n\n @property({ type: String, reflect: true })\n public size?: 's' | 'm' | 'l';\n\n public focus(): void {\n if (this.shadowRoot) {\n const firstFocusable = firstFocusableIn(this.shadowRoot);\n if (firstFocusable) {\n if (firstFocusable.updateComplete) {\n firstFocusable.updateComplete.then(() =>\n firstFocusable.focus()\n );\n /* c8 ignore next 3 */\n } else {\n firstFocusable.focus();\n }\n this.removeAttribute('tabindex');\n }\n /* c8 ignore next 3 */\n } else {\n super.focus();\n }\n }\n\n public close(): void {\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n })\n );\n }\n\n protected render(): TemplateResult {\n return html`\n <div class=\"grid\">\n <slot name=\"hero\"></slot>\n <slot\n name=\"heading\"\n class=${ifDefined(this.hasHero ? this.hasHero : undefined)}\n ></slot>\n ${this.error\n ? html`\n <sp-icon-alert class=\"type-icon\"></sp-icon-alert>\n `\n : html``}\n ${this.noDivider\n ? html``\n : html`\n <sp-divider size=\"m\" class=\"divider\"></sp-divider>\n `}\n <div class=\"content\">\n <slot @slotchange=${this.onContentSlotChange}></slot>\n </div>\n ${this.hasFooter\n ? html`\n <div class=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n `\n : html``}\n ${this.hasButtons\n ? html`\n <sp-button-group\n class=\"button-group ${this.hasFooter\n ? ''\n : 'button-group--noFooter'}\"\n >\n <slot name=\"button\"></slot>\n </sp-button-group>\n `\n : html``}\n ${this.dismissable\n ? html`\n <sp-action-button\n class=\"close-button\"\n label=\"Close\"\n quiet\n size=\"m\"\n @click=${this.close}\n >\n <sp-icon-cross500\n class=\"spectrum-UIIcon-Cross500\"\n slot=\"icon\"\n ></sp-icon-cross500>\n </sp-action-button>\n `\n : html``}\n </div>\n `;\n }\n\n public shouldManageTabOrderForScrolling = (): void => {\n const { offsetHeight, scrollHeight } = this.contentElement;\n if (offsetHeight < scrollHeight) {\n this.contentElement.tabIndex = 0;\n } else {\n this.contentElement.removeAttribute('tabindex');\n }\n };\n\n protected shouldUpdate(changes: PropertyValues): boolean {\n if (changes.has('mode') && !!this.mode) {\n this.dismissable = false;\n }\n if (changes.has('dismissable') && this.dismissable) {\n this.dismissable = !this.mode;\n }\n return super.shouldUpdate(changes);\n }\n\n protected onContentSlotChange(): void {\n this.shouldManageTabOrderForScrolling();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener(\n 'resize',\n this.shouldManageTabOrderForScrolling\n );\n }\n\n public disconnectedCallback(): void {\n window.removeEventListener(\n 'resize',\n this.shouldManageTabOrderForScrolling\n );\n super.disconnectedCallback();\n }\n}\n"]}
1
+ {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\n\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/button-group/sp-button-group.js';\nimport crossStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n} from '@spectrum-web-components/shared';\n\nimport styles from './dialog.css.js';\nimport type { ActionButton } from '@spectrum-web-components/action-button';\n\nfunction gatherAppliedIdsFromSlottedChildren(\n slot: HTMLSlotElement,\n idBase: string\n): string[] {\n const assignedElements = slot.assignedElements();\n const ids: string[] = [];\n assignedElements.forEach((el, i) => {\n if (el.id) {\n ids.push(el.id);\n } else {\n const id = idBase + `-${i}`;\n el.id = id;\n ids.push(id);\n }\n });\n return ids;\n}\n\n/**\n * @element sp-dialog\n *\n * @slot hero - Accepts a hero image to display at the top of the dialog\n * @slot heading - Acts as the heading of the dialog. This should be an actual heading tag `<h1-6 />`\n * @slot - Content not addressed to a specific slot will be interpreted as the main content of the dialog\n * @slot footer - Content addressed to the `footer` will be placed below the main content and to the side of any `[slot='button']` content\n * @slot button - Button elements addressed to this slot may be placed below the content when not delivered in a fullscreen mode\n * @fires close - Announces that the dialog has been closed.\n */\nexport class Dialog extends FocusVisiblePolyfillMixin(\n ObserveSlotPresence(SpectrumElement, [\n '[slot=\"hero\"]',\n '[slot=\"footer\"]',\n '[slot=\"button\"]',\n ])\n) {\n public static get styles(): CSSResultArray {\n return [styles, crossStyles];\n }\n\n @query('.close-button')\n closeButton?: ActionButton;\n\n @query('.content')\n private contentElement!: HTMLDivElement;\n\n @property({ type: Boolean, reflect: true })\n public error = false;\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n protected get hasFooter(): boolean {\n return this.getSlotContentPresence('[slot=\"footer\"]');\n }\n\n protected get hasButtons(): boolean {\n return this.getSlotContentPresence('[slot=\"button\"]');\n }\n\n protected get hasHero(): boolean {\n return this.getSlotContentPresence('[slot=\"hero\"]');\n }\n\n @property({ type: Boolean, reflect: true, attribute: 'no-divider' })\n public noDivider = false;\n\n @property({ type: String, reflect: true })\n public mode?: 'fullscreen' | 'fullscreenTakeover';\n\n @property({ type: String, reflect: true })\n public size?: 's' | 'm' | 'l';\n\n public close(): void {\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n }\n\n protected render(): TemplateResult {\n return html`\n <div class=\"grid\">\n <slot name=\"hero\"></slot>\n <slot\n name=\"heading\"\n class=${ifDefined(this.hasHero ? this.hasHero : undefined)}\n @slotchange=${this.onHeadingSlotchange}\n ></slot>\n ${this.error\n ? html`\n <sp-icon-alert class=\"type-icon\"></sp-icon-alert>\n `\n : html``}\n ${this.noDivider\n ? html``\n : html`\n <sp-divider size=\"m\" class=\"divider\"></sp-divider>\n `}\n <div class=\"content\">\n <slot @slotchange=${this.onContentSlotChange}></slot>\n </div>\n ${this.hasFooter\n ? html`\n <div class=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n `\n : html``}\n ${this.hasButtons\n ? html`\n <sp-button-group\n class=\"button-group ${this.hasFooter\n ? ''\n : 'button-group--noFooter'}\"\n >\n <slot name=\"button\"></slot>\n </sp-button-group>\n `\n : html``}\n ${this.dismissable\n ? html`\n <sp-action-button\n class=\"close-button\"\n label=\"Close\"\n quiet\n size=\"m\"\n @click=${this.close}\n >\n <sp-icon-cross500\n class=\"spectrum-UIIcon-Cross500\"\n slot=\"icon\"\n ></sp-icon-cross500>\n </sp-action-button>\n `\n : html``}\n </div>\n `;\n }\n\n public shouldManageTabOrderForScrolling = (): void => {\n const { offsetHeight, scrollHeight } = this.contentElement;\n if (offsetHeight < scrollHeight) {\n this.contentElement.tabIndex = 0;\n } else {\n this.contentElement.removeAttribute('tabindex');\n }\n };\n\n protected shouldUpdate(changes: PropertyValues): boolean {\n if (changes.has('mode') && !!this.mode) {\n this.dismissable = false;\n }\n if (changes.has('dismissable') && this.dismissable) {\n this.dismissable = !this.mode;\n }\n return super.shouldUpdate(changes);\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'dialog');\n }\n\n static instanceCount = 0;\n private labelledbyId = `sp-dialog-label-${Dialog.instanceCount++}`;\n private conditionLabelledby?: () => void;\n private conditionDescribedby?: () => void;\n\n private onHeadingSlotchange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n if (this.conditionLabelledby) {\n this.conditionLabelledby();\n delete this.conditionLabelledby;\n }\n const ids = gatherAppliedIdsFromSlottedChildren(\n target,\n this.labelledbyId\n );\n if (ids.length) {\n this.conditionLabelledby = conditionAttributeWithId(\n this,\n 'aria-labelledby',\n ids\n );\n }\n }\n\n private describedbyId = `sp-dialog-description-${Dialog.instanceCount++}`;\n\n protected onContentSlotChange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n if (this.conditionDescribedby) {\n this.conditionDescribedby();\n delete this.conditionDescribedby;\n }\n const ids = gatherAppliedIdsFromSlottedChildren(\n target,\n this.describedbyId\n );\n if (ids.length && ids.length < 4) {\n this.conditionDescribedby = conditionAttributeWithId(\n this,\n 'aria-describedby',\n ids\n );\n } else if (!ids.length) {\n const idProvided = !!this.id;\n if (!idProvided) this.id = this.describedbyId;\n const conditionDescribedby = conditionAttributeWithId(\n this,\n 'aria-describedby',\n this.id\n );\n this.conditionDescribedby = () => {\n conditionDescribedby();\n if (!idProvided) {\n this.removeAttribute('id');\n }\n };\n }\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this.tabIndex = 0;\n window.addEventListener(\n 'resize',\n this.shouldManageTabOrderForScrolling\n );\n }\n\n public disconnectedCallback(): void {\n window.removeEventListener(\n 'resize',\n this.shouldManageTabOrderForScrolling\n );\n super.disconnectedCallback();\n }\n}\n"]}