@spectrum-web-components/dialog 0.11.13 → 0.11.15-overlay.8

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 (27) hide show
  1. package/package.json +10 -10
  2. package/src/Dialog.dev.js +0 -1
  3. package/src/Dialog.dev.js.map +2 -2
  4. package/src/Dialog.js +2 -2
  5. package/src/Dialog.js.map +2 -2
  6. package/src/DialogBase.dev.js +0 -3
  7. package/src/DialogBase.dev.js.map +2 -2
  8. package/src/DialogBase.js +2 -2
  9. package/src/DialogBase.js.map +2 -2
  10. package/src/dialog.css.dev.js +9 -35
  11. package/src/dialog.css.dev.js.map +2 -2
  12. package/src/dialog.css.js +9 -35
  13. package/src/dialog.css.js.map +2 -2
  14. package/src/spectrum-config.js +85 -111
  15. package/src/spectrum-dialog.css.dev.js +9 -35
  16. package/src/spectrum-dialog.css.dev.js.map +2 -2
  17. package/src/spectrum-dialog.css.js +9 -35
  18. package/src/spectrum-dialog.css.js.map +2 -2
  19. package/stories/dialog-base.stories.js +31 -24
  20. package/stories/dialog-base.stories.js.map +2 -2
  21. package/stories/dialog-wrapper.stories.js +2 -2
  22. package/stories/dialog-wrapper.stories.js.map +2 -2
  23. package/test/dialog-base.test.js +8 -20
  24. package/test/dialog-base.test.js.map +2 -2
  25. package/test/dialog-wrapper.test.js +30 -42
  26. package/test/dialog-wrapper.test.js.map +2 -2
  27. package/custom-elements.json +0 -1321
package/src/dialog.css.js CHANGED
@@ -15,23 +15,13 @@
15
15
  --spectrum-global-dimension-static-size-25,2px
16
16
  )}:host{box-sizing:border-box;display:flex;max-height:inherit;max-width:100%;min-width:var(
17
17
  --spectrum-dialog-confirm-min-width,var(--spectrum-global-dimension-static-size-3600)
18
- );outline:none;width:-moz-fit-content;width:fit-content}:host([size=s]){width:var(
19
- --spectrum-dialog-confirm-small-width
20
- )}:host([size=m]){width:var(
21
- --spectrum-dialog-confirm-medium-width
22
- )}:host([size=l]){width:var(
23
- --spectrum-dialog-confirm-large-width
24
- )}::slotted([slot=hero]){background-position:50%;background-size:cover;border-top-left-radius:var(
18
+ );outline:none;width:-moz-fit-content;width:fit-content}:host([size=s]){width:var(--spectrum-dialog-confirm-small-width)}:host([size=m]){width:var(--spectrum-dialog-confirm-medium-width)}:host([size=l]){width:var(--spectrum-dialog-confirm-large-width)}::slotted([slot=hero]){background-position:50%;background-size:cover;border-top-left-radius:var(
25
19
  --spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)
26
20
  );border-top-right-radius:var(
27
21
  --spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)
28
- );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(
22
+ );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(
29
23
  --spectrum-dialog-confirm-padding
30
- );width:100%}:host([dir=ltr]) ::slotted([slot=heading]){padding-right:var(
31
- --spectrum-dialog-confirm-gap-size
32
- )}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(
33
- --spectrum-dialog-confirm-gap-size
34
- )}::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size);font-weight:var(
24
+ );width:100%}:host([dir=ltr]) ::slotted([slot=heading]){padding-right:var(--spectrum-dialog-confirm-gap-size)}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(--spectrum-dialog-confirm-gap-size)}::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size);font-weight:var(
35
25
  --spectrum-dialog-confirm-title-text-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)
36
26
  );grid-area:heading;line-height:var(
37
27
  --spectrum-dialog-confirm-title-text-line-height,var(--spectrum-alias-heading-text-line-height)
@@ -39,7 +29,7 @@
39
29
  --spectrum-dialog-confirm-divider-margin-bottom,var(--spectrum-global-dimension-static-size-200)
40
30
  );margin-top:var(
41
31
  --spectrum-dialog-confirm-divider-margin-top,var(--spectrum-global-dimension-static-size-150)
42
- );width:100%}:host([mode=fullscreen]) slot[name=heading]+.divider{margin-bottom:calc(var(
32
+ );width:100%}:host([mode=fullscreen]) [name=heading]+.divider{margin-bottom:calc(var(
43
33
  --spectrum-dialog-confirm-divider-margin-bottom,
44
34
  var(--spectrum-global-dimension-static-size-200)
45
35
  ) - var(--spectrum-dialog-confirm-description-padding)*2)}:host([no-divider]) .divider{display:none}:host([no-divider]) ::slotted([slot=heading]){padding-bottom:calc(var(
@@ -55,33 +45,17 @@ var(--spectrum-global-dimension-size-25)
55
45
  --spectrum-dialog-confirm-description-text-font-weight,var(--spectrum-global-font-weight-regular)
56
46
  );grid-area:content;line-height:var(
57
47
  --spectrum-dialog-confirm-description-text-line-height,var(--spectrum-alias-component-text-line-height)
58
- );margin:0 var(--spectrum-dialog-confirm-description-margin);overflow-y:auto;padding:calc(var(--spectrum-dialog-confirm-description-padding)*2)}.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(
59
- --spectrum-dialog-confirm-gap-size
60
- )}:host([dir=rtl]) .button-group{padding-right:var(
61
- --spectrum-dialog-confirm-gap-size
62
- )}.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(
48
+ );margin:0 var(--spectrum-dialog-confirm-description-margin);outline:none;overflow-y:auto;padding:calc(var(--spectrum-dialog-confirm-description-padding)*2)}.footer{display:flex;flex-wrap:wrap;grid-area:footer;outline:none;padding-top:var(--spectrum-dialog-confirm-footer-padding-top)}.footer>*,.footer>.spectrum-Button+.spectrum-Button{margin-bottom:0}:host([dir=ltr]) .button-group{padding-left:var(--spectrum-dialog-confirm-gap-size)}:host([dir=rtl]) .button-group{padding-right:var(--spectrum-dialog-confirm-gap-size)}.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(
63
49
  --spectrum-dialog-confirm-padding
64
- );grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(
65
- --spectrum-dialog-confirm-padding
66
- )}: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(
67
- --spectrum-dialog-confirm-close-button-padding
68
- )}:host([dir=rtl]) .close-button{margin-left:var(
69
- --spectrum-dialog-confirm-close-button-padding
70
- )}.close-button{align-self:start;grid-area:closeButton;justify-self:end;margin-top:var(--spectrum-dialog-confirm-close-button-padding)}:host([error]){width:var(
71
- --spectrum-dialog-error-width,90%
72
- )}: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(
50
+ )}: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(--spectrum-dialog-confirm-close-button-padding)}:host([dir=rtl]) .close-button{margin-left:var(--spectrum-dialog-confirm-close-button-padding)}.close-button{-ms-grid-row-align:start;grid-area:closeButton;margin-top:var(--spectrum-dialog-confirm-close-button-padding);place-self:start end}:host([error]){width:var(--spectrum-dialog-error-width,90%)}: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(
73
51
  --spectrum-dialog-confirm-padding
74
52
  );grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto 1fr var(
75
53
  --spectrum-dialog-confirm-padding
76
- )}:host([mode=fullscreenTakeover]) ::slotted([slot=heading]),:host([mode=fullscreen]) ::slotted([slot=heading]){font-size:var(
77
- --spectrum-dialog-fullscreen-header-text-size
78
- )}: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(
79
- --spectrum-dialog-confirm-padding
80
- )}: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(
54
+ )}:host([mode=fullscreenTakeover]) ::slotted([slot=heading]),:host([mode=fullscreen]) ::slotted([slot=heading]){font-size:var(--spectrum-dialog-fullscreen-header-text-size)}: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(
81
55
  --spectrum-dialog-confirm-padding
82
- );grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(
56
+ )}: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(
83
57
  --spectrum-dialog-confirm-padding
84
- )}.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(
58
+ )}.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(
85
59
  --spectrum-dialog-confirm-padding
86
60
  );grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(
87
61
  --spectrum-dialog-confirm-padding
package/src/dialog.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["dialog.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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([mode=fullscreen]) slot[name=heading]+.divider{margin-bottom:calc(var(\n--spectrum-dialog-confirm-divider-margin-bottom,\nvar(--spectrum-global-dimension-static-size-200)\n) - var(--spectrum-dialog-confirm-description-padding)*2)}: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:calc(var(--spectrum-dialog-confirm-description-padding)*2)}.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(\n--spectrum-dialog-confirm-padding\n);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(\n--spectrum-dialog-confirm-padding\n);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%}.grid{grid-template-areas:\"hero hero hero hero hero hero\" \". . . . . .\" \". heading heading heading typeIcon .\" \". divider divider divider divider .\" \". content content content content .\" \". footer footer buttonGroup buttonGroup .\" \". . . . . .\"}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmGf,eAAeC",
4
+ "sourcesContent": ["/*\nCopyright 2023 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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(--spectrum-dialog-confirm-small-width)}:host([size=m]){width:var(--spectrum-dialog-confirm-medium-width)}:host([size=l]){width:var(--spectrum-dialog-confirm-large-width)}::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(--spectrum-dialog-confirm-gap-size)}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(--spectrum-dialog-confirm-gap-size)}::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([mode=fullscreen]) [name=heading]+.divider{margin-bottom:calc(var(\n--spectrum-dialog-confirm-divider-margin-bottom,\nvar(--spectrum-global-dimension-static-size-200)\n) - var(--spectrum-dialog-confirm-description-padding)*2)}: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);outline:none;overflow-y:auto;padding:calc(var(--spectrum-dialog-confirm-description-padding)*2)}.footer{display:flex;flex-wrap:wrap;grid-area:footer;outline:none;padding-top:var(--spectrum-dialog-confirm-footer-padding-top)}.footer>*,.footer>.spectrum-Button+.spectrum-Button{margin-bottom:0}:host([dir=ltr]) .button-group{padding-left:var(--spectrum-dialog-confirm-gap-size)}:host([dir=rtl]) .button-group{padding-right:var(--spectrum-dialog-confirm-gap-size)}.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(--spectrum-dialog-confirm-close-button-padding)}:host([dir=rtl]) .close-button{margin-left:var(--spectrum-dialog-confirm-close-button-padding)}.close-button{-ms-grid-row-align:start;grid-area:closeButton;margin-top:var(--spectrum-dialog-confirm-close-button-padding);place-self:start end}:host([error]){width:var(--spectrum-dialog-error-width,90%)}: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(--spectrum-dialog-fullscreen-header-text-size)}: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%}.grid{grid-template-areas:\"hero hero hero hero hero hero\" \". . . . . .\" \". heading heading heading typeIcon .\" \". divider divider divider divider .\" \". content content content content .\" \". footer footer buttonGroup buttonGroup .\" \". . . . . .\"}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyEf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-config.js CHANGED
@@ -1,135 +1,109 @@
1
+ // @ts-check
1
2
  /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
3
+ Copyright 2023 Adobe. All rights reserved.
4
+ This file is licensed to you under the Apache License, Version 2.0 (the 'License');
4
5
  you may not use this file except in compliance with the License. You may obtain a copy
5
6
  of the License at http://www.apache.org/licenses/LICENSE-2.0
6
7
 
7
8
  Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
+ the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
10
  OF ANY KIND, either express or implied. See the License for the specific language
10
11
  governing permissions and limitations under the License.
11
12
  */
12
13
 
14
+ import {
15
+ builder,
16
+ converterFor,
17
+ } from '../../../tasks/process-spectrum-utils.js';
18
+
19
+ const converter = converterFor('spectrum-Dialog');
20
+
21
+ /**
22
+ * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
23
+ */
13
24
  const config = {
14
- spectrum: 'dialog',
15
- components: [
25
+ conversions: [
16
26
  {
17
- name: 'dialog',
18
- host: {
19
- selector: '.spectrum-Dialog',
20
- },
21
- attributes: [
22
- {
23
- type: 'boolean',
24
- selector: '.is-open',
25
- name: 'open',
26
- },
27
- {
28
- type: 'boolean',
29
- selector: '.spectrum-Dialog--error',
30
- name: 'error',
31
- },
32
- {
33
- type: 'boolean',
34
- selector: '.spectrum-Dialog--dismissable',
35
- name: 'dismissable',
36
- },
37
- {
38
- type: 'boolean',
39
- selector: '.spectrum-Dialog--noDivider',
40
- name: 'no-divider',
41
- },
42
- {
43
- type: 'enum',
44
- name: 'size',
45
- values: [
46
- {
47
- name: 's',
48
- selector: '.spectrum-Dialog--small',
49
- },
27
+ inPackage: '@spectrum-css/dialog',
28
+ outPackage: 'dialog',
29
+ fileName: 'dialog',
30
+ components: [
31
+ converter.classToHost(),
32
+ converter.classToAttribute('is-open', 'open'),
33
+ converter.classToAttribute('spectrum-Dialog--error'),
34
+ converter.classToAttribute('spectrum-Dialog--dismissable'),
35
+ converter.classToAttribute(
36
+ 'spectrum-Dialog--noDivider',
37
+ 'no-divider'
38
+ ),
39
+ ...converter.enumerateAttributes(
40
+ [
41
+ ['spectrum-Dialog--small', 's'],
42
+ ['spectrum-Dialog--medium', 'm'],
43
+ ['spectrum-Dialog--large', 'l'],
44
+ ],
45
+ 'size'
46
+ ),
47
+ ...converter.enumerateAttributes(
48
+ [
49
+ ['spectrum-Dialog--fullscreen'],
50
+ ['spectrum-Dialog--fullscreenTakeover'],
51
+ ],
52
+ 'mode'
53
+ ),
54
+ converter.classToSlotted('spectrum-Dialog-heading', 'heading'),
55
+ converter.classToSlotted('spectrum-Dialog-hero', 'hero'),
56
+ converter.classToSlotted('*'),
57
+ converter.classToClass('spectrum-Dialog-grid'),
58
+ converter.classToClass('spectrum-Dialog-divider'),
59
+ converter.classToClass('spectrum-Dialog-content'),
60
+ converter.classToClass(
61
+ 'spectrum-Dialog-closeButton',
62
+ 'close-button'
63
+ ),
64
+ converter.classToClass('spectrum-Dialog-header'),
65
+ converter.classToClass('spectrum-Dialog-footer'),
66
+ converter.classToClass('spectrum-Dialog-typeIcon', 'type-icon'),
67
+ converter.classToClass('spectrum-Button'),
68
+ converter.classToClass(
69
+ 'spectrum-Dialog-buttonGroup',
70
+ 'button-group'
71
+ ),
72
+ converter.classToClass(
73
+ 'spectrum-Dialog-buttonGroup--noFooter',
74
+ 'button-group--noFooter'
75
+ ),
76
+ {
77
+ find: [
78
+ builder.class('spectrum-Dialog-heading'),
79
+ builder.class('spectrum-Dialog-heading--noHeader'),
80
+ ],
81
+ replace: [
50
82
  {
51
- name: 'm',
52
- selector: '.spectrum-Dialog--medium',
83
+ replace: builder.class('no-header'),
53
84
  },
54
85
  {
55
- name: 'l',
56
- selector: '.spectrum-Dialog--large',
86
+ replace: builder.slotted('heading'),
57
87
  },
58
88
  ],
59
89
  },
60
90
  {
61
- type: 'enum',
62
- name: 'mode',
63
- values: [
64
- '.spectrum-Dialog--fullscreen',
65
- '.spectrum-Dialog--fullscreenTakeover',
91
+ find: [
92
+ builder.class('spectrum-Dialog-heading'),
93
+ {
94
+ type: 'combinator',
95
+ value: 'next-sibling',
96
+ },
97
+ builder.class('spectrum-Dialog-divider'),
98
+ ],
99
+ replace: [
100
+ {
101
+ replace: builder.attribute('name', 'heading'),
102
+ hoist: false,
103
+ },
66
104
  ],
67
105
  },
68
106
  ],
69
- slots: [
70
- {
71
- selector: '.spectrum-Dialog-heading',
72
- name: 'heading',
73
- },
74
- {
75
- selector: '.spectrum-Dialog-hero',
76
- name: 'hero',
77
- },
78
- {
79
- selector: '*',
80
- name: '',
81
- },
82
- ],
83
- classes: [
84
- {
85
- selector: '.spectrum-Dialog-grid',
86
- name: 'grid',
87
- },
88
- {
89
- selector: '.spectrum-Dialog-divider',
90
- name: 'divider',
91
- },
92
- {
93
- selector: '.spectrum-Dialog-content',
94
- name: 'content',
95
- },
96
- {
97
- selector: '.spectrum-Dialog-closeButton',
98
- name: 'close-button',
99
- },
100
- {
101
- selector: '.spectrum-Dialog-header',
102
- name: 'header',
103
- },
104
- {
105
- selector: '.spectrum-Dialog-footer',
106
- name: 'footer',
107
- },
108
- {
109
- selector: '.spectrum-Dialog-typeIcon',
110
- name: 'type-icon',
111
- },
112
- {
113
- selector: '.spectrum-Button',
114
- name: 'button',
115
- },
116
- {
117
- selector: '.spectrum-Dialog-buttonGroup',
118
- name: 'button-group',
119
- },
120
- {
121
- selector: '.spectrum-Dialog-buttonGroup--noFooter',
122
- name: 'button-group--noFooter',
123
- },
124
- ],
125
- complexSelectors: [
126
- {
127
- replacement: '.no-header::slotted([slot="heading"])',
128
- selector:
129
- '.spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader',
130
- },
131
- ],
132
- exclude: [/\.spectrum-Dialog-wrapper/],
133
107
  },
134
108
  ],
135
109
  };
package/src/spectrum-dialog.css.dev.js CHANGED
@@ -17,23 +17,13 @@ const styles = css`
17
17
  --spectrum-global-dimension-static-size-25,2px
18
18
  )}:host{box-sizing:border-box;display:flex;max-height:inherit;max-width:100%;min-width:var(
19
19
  --spectrum-dialog-confirm-min-width,var(--spectrum-global-dimension-static-size-3600)
20
- );outline:none;width:-moz-fit-content;width:fit-content}:host([size=s]){width:var(
21
- --spectrum-dialog-confirm-small-width
22
- )}:host([size=m]){width:var(
23
- --spectrum-dialog-confirm-medium-width
24
- )}:host([size=l]){width:var(
25
- --spectrum-dialog-confirm-large-width
26
- )}::slotted([slot=hero]){background-position:50%;background-size:cover;border-top-left-radius:var(
20
+ );outline:none;width:-moz-fit-content;width:fit-content}:host([size=s]){width:var(--spectrum-dialog-confirm-small-width)}:host([size=m]){width:var(--spectrum-dialog-confirm-medium-width)}:host([size=l]){width:var(--spectrum-dialog-confirm-large-width)}::slotted([slot=hero]){background-position:50%;background-size:cover;border-top-left-radius:var(
27
21
  --spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)
28
22
  );border-top-right-radius:var(
29
23
  --spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)
30
- );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(
24
+ );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(
31
25
  --spectrum-dialog-confirm-padding
32
- );width:100%}:host([dir=ltr]) ::slotted([slot=heading]){padding-right:var(
33
- --spectrum-dialog-confirm-gap-size
34
- )}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(
35
- --spectrum-dialog-confirm-gap-size
36
- )}::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size);font-weight:var(
26
+ );width:100%}:host([dir=ltr]) ::slotted([slot=heading]){padding-right:var(--spectrum-dialog-confirm-gap-size)}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(--spectrum-dialog-confirm-gap-size)}::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size);font-weight:var(
37
27
  --spectrum-dialog-confirm-title-text-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)
38
28
  );grid-area:heading;line-height:var(
39
29
  --spectrum-dialog-confirm-title-text-line-height,var(--spectrum-alias-heading-text-line-height)
@@ -41,7 +31,7 @@ const styles = css`
41
31
  --spectrum-dialog-confirm-divider-margin-bottom,var(--spectrum-global-dimension-static-size-200)
42
32
  );margin-top:var(
43
33
  --spectrum-dialog-confirm-divider-margin-top,var(--spectrum-global-dimension-static-size-150)
44
- );width:100%}:host([mode=fullscreen]) slot[name=heading]+.divider{margin-bottom:calc(var(
34
+ );width:100%}:host([mode=fullscreen]) [name=heading]+.divider{margin-bottom:calc(var(
45
35
  --spectrum-dialog-confirm-divider-margin-bottom,
46
36
  var(--spectrum-global-dimension-static-size-200)
47
37
  ) - var(--spectrum-dialog-confirm-description-padding)*2)}:host([no-divider]) .divider{display:none}:host([no-divider]) ::slotted([slot=heading]){padding-bottom:calc(var(
@@ -57,33 +47,17 @@ var(--spectrum-global-dimension-size-25)
57
47
  --spectrum-dialog-confirm-description-text-font-weight,var(--spectrum-global-font-weight-regular)
58
48
  );grid-area:content;line-height:var(
59
49
  --spectrum-dialog-confirm-description-text-line-height,var(--spectrum-alias-component-text-line-height)
60
- );margin:0 var(--spectrum-dialog-confirm-description-margin);overflow-y:auto;padding:calc(var(--spectrum-dialog-confirm-description-padding)*2)}.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(
61
- --spectrum-dialog-confirm-gap-size
62
- )}:host([dir=rtl]) .button-group{padding-right:var(
63
- --spectrum-dialog-confirm-gap-size
64
- )}.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(
50
+ );margin:0 var(--spectrum-dialog-confirm-description-margin);outline:none;overflow-y:auto;padding:calc(var(--spectrum-dialog-confirm-description-padding)*2)}.footer{display:flex;flex-wrap:wrap;grid-area:footer;outline:none;padding-top:var(--spectrum-dialog-confirm-footer-padding-top)}.footer>*,.footer>.spectrum-Button+.spectrum-Button{margin-bottom:0}:host([dir=ltr]) .button-group{padding-left:var(--spectrum-dialog-confirm-gap-size)}:host([dir=rtl]) .button-group{padding-right:var(--spectrum-dialog-confirm-gap-size)}.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(
65
51
  --spectrum-dialog-confirm-padding
66
- );grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(
67
- --spectrum-dialog-confirm-padding
68
- )}: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(
69
- --spectrum-dialog-confirm-close-button-padding
70
- )}:host([dir=rtl]) .close-button{margin-left:var(
71
- --spectrum-dialog-confirm-close-button-padding
72
- )}.close-button{align-self:start;grid-area:closeButton;justify-self:end;margin-top:var(--spectrum-dialog-confirm-close-button-padding)}:host([error]){width:var(
73
- --spectrum-dialog-error-width,90%
74
- )}: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(
52
+ )}: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(--spectrum-dialog-confirm-close-button-padding)}:host([dir=rtl]) .close-button{margin-left:var(--spectrum-dialog-confirm-close-button-padding)}.close-button{-ms-grid-row-align:start;grid-area:closeButton;margin-top:var(--spectrum-dialog-confirm-close-button-padding);place-self:start end}:host([error]){width:var(--spectrum-dialog-error-width,90%)}: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(
75
53
  --spectrum-dialog-confirm-padding
76
54
  );grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto 1fr var(
77
55
  --spectrum-dialog-confirm-padding
78
- )}:host([mode=fullscreenTakeover]) ::slotted([slot=heading]),:host([mode=fullscreen]) ::slotted([slot=heading]){font-size:var(
79
- --spectrum-dialog-fullscreen-header-text-size
80
- )}: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(
81
- --spectrum-dialog-confirm-padding
82
- )}: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(
56
+ )}:host([mode=fullscreenTakeover]) ::slotted([slot=heading]),:host([mode=fullscreen]) ::slotted([slot=heading]){font-size:var(--spectrum-dialog-fullscreen-header-text-size)}: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(
83
57
  --spectrum-dialog-confirm-padding
84
- );grid-template-rows:auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(
58
+ )}: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(
85
59
  --spectrum-dialog-confirm-padding
86
- )}.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(
60
+ )}.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(
87
61
  --spectrum-dialog-confirm-padding
88
62
  );grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(
89
63
  --spectrum-dialog-confirm-padding
package/src/spectrum-dialog.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-dialog.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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([mode=fullscreen]) slot[name=heading]+.divider{margin-bottom:calc(var(\n--spectrum-dialog-confirm-divider-margin-bottom,\nvar(--spectrum-global-dimension-static-size-200)\n) - var(--spectrum-dialog-confirm-description-padding)*2)}: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:calc(var(--spectrum-dialog-confirm-description-padding)*2)}.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(\n--spectrum-dialog-confirm-padding\n);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(\n--spectrum-dialog-confirm-padding\n);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`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiGf,eAAe;",
4
+ "sourcesContent": ["/*\nCopyright 2023 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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(--spectrum-dialog-confirm-small-width)}:host([size=m]){width:var(--spectrum-dialog-confirm-medium-width)}:host([size=l]){width:var(--spectrum-dialog-confirm-large-width)}::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(--spectrum-dialog-confirm-gap-size)}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(--spectrum-dialog-confirm-gap-size)}::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([mode=fullscreen]) [name=heading]+.divider{margin-bottom:calc(var(\n--spectrum-dialog-confirm-divider-margin-bottom,\nvar(--spectrum-global-dimension-static-size-200)\n) - var(--spectrum-dialog-confirm-description-padding)*2)}: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);outline:none;overflow-y:auto;padding:calc(var(--spectrum-dialog-confirm-description-padding)*2)}.footer{display:flex;flex-wrap:wrap;grid-area:footer;outline:none;padding-top:var(--spectrum-dialog-confirm-footer-padding-top)}.footer>*,.footer>.spectrum-Button+.spectrum-Button{margin-bottom:0}:host([dir=ltr]) .button-group{padding-left:var(--spectrum-dialog-confirm-gap-size)}:host([dir=rtl]) .button-group{padding-right:var(--spectrum-dialog-confirm-gap-size)}.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(--spectrum-dialog-confirm-close-button-padding)}:host([dir=rtl]) .close-button{margin-left:var(--spectrum-dialog-confirm-close-button-padding)}.close-button{-ms-grid-row-align:start;grid-area:closeButton;margin-top:var(--spectrum-dialog-confirm-close-button-padding);place-self:start end}:host([error]){width:var(--spectrum-dialog-error-width,90%)}: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(--spectrum-dialog-fullscreen-header-text-size)}: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`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuEf,eAAe;",
6
6
  "names": []
7
7
  }