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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/custom-elements.json +2 -2
  2. package/package.json +14 -14
  3. package/src/Dialog.d.ts +1 -1
  4. package/src/Dialog.js +4 -2
  5. package/src/Dialog.js.map +1 -1
  6. package/src/DialogWrapper.d.ts +1 -1
  7. package/src/DialogWrapper.js +6 -2
  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.stories.js +33 -13
  14. package/stories/dialog.stories.js.map +1 -1
package/custom-elements.json CHANGED
@@ -682,7 +682,7 @@
682
682
  {
683
683
  "kind": "variable",
684
684
  "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-global-dimension-size-50)\n);border-top-right-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-global-dimension-size-50)\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-global-font-weight-bold)\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-inline-size: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-global-color-gray-900)\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`"
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`"
686
686
  }
687
687
  ],
688
688
  "exports": [
@@ -726,7 +726,7 @@
726
726
  {
727
727
  "kind": "variable",
728
728
  "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-global-dimension-size-50)\n);border-top-right-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-global-dimension-size-50)\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-global-font-weight-bold)\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-inline-size: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-global-color-gray-900)\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`"
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`"
730
730
  }
731
731
  ],
732
732
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/dialog",
3
- "version": "0.7.1",
3
+ "version": "0.8.3-express.0+5d9e2a2ca",
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.6.1",
50
- "@spectrum-web-components/base": "^0.4.6",
51
- "@spectrum-web-components/button": "^0.15.1",
52
- "@spectrum-web-components/button-group": "^0.7.1",
53
- "@spectrum-web-components/divider": "^0.3.1",
54
- "@spectrum-web-components/icon": "^0.10.1",
55
- "@spectrum-web-components/icons-ui": "^0.7.1",
56
- "@spectrum-web-components/icons-workflow": "^0.7.1",
57
- "@spectrum-web-components/modal": "^0.4.1",
58
- "@spectrum-web-components/shared": "^0.12.11",
59
- "@spectrum-web-components/underlay": "^0.7.1",
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",
60
60
  "tslib": "^2.0.0"
61
61
  },
62
62
  "devDependencies": {
63
- "@spectrum-css/dialog": "^3.0.6"
63
+ "@spectrum-css/dialog": "latest"
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": "9c7ac25264762a9b7bad2ef3f111d5eb613f9d05"
70
+ "gitHead": "5d9e2a2ca93deff51e4b2c7b8354f1127009a4e3"
71
71
  }
package/src/Dialog.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SpectrumElement, CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
1
+ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
2
2
  import '@spectrum-web-components/divider/sp-divider.js';
3
3
  import '@spectrum-web-components/action-button/sp-action-button.js';
4
4
  import '@spectrum-web-components/button-group/sp-button-group.js';
package/src/Dialog.js CHANGED
@@ -10,14 +10,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag
10
10
  governing permissions and limitations under the License.
11
11
  */
12
12
  import { __decorate } from "tslib";
13
- import { html, SpectrumElement, property, query, ifDefined, } from '@spectrum-web-components/base';
13
+ import { html, SpectrumElement, } from '@spectrum-web-components/base';
14
+ import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
15
+ import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
14
16
  import '@spectrum-web-components/divider/sp-divider.js';
15
17
  import '@spectrum-web-components/action-button/sp-action-button.js';
16
18
  import '@spectrum-web-components/button-group/sp-button-group.js';
17
19
  import crossStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';
18
20
  import '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';
19
21
  import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
20
- import { ObserveSlotPresence, FocusVisiblePolyfillMixin, } from '@spectrum-web-components/shared';
22
+ import { FocusVisiblePolyfillMixin, ObserveSlotPresence, } from '@spectrum-web-components/shared';
21
23
  import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';
22
24
  import styles from './dialog.css.js';
23
25
  /**
package/src/Dialog.js.map CHANGED
@@ -1 +1 @@
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 html,\n SpectrumElement,\n CSSResultArray,\n TemplateResult,\n property,\n query,\n ifDefined,\n PropertyValues,\n} from '@spectrum-web-components/base';\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 ObserveSlotPresence,\n FocusVisiblePolyfillMixin,\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';\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"]}
package/src/DialogWrapper.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SpectrumElement, TemplateResult, CSSResultArray, PropertyValues } from '@spectrum-web-components/base';
1
+ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
2
2
  import '@spectrum-web-components/underlay/sp-underlay.js';
3
3
  import '@spectrum-web-components/button/sp-button.js';
4
4
  import '../sp-dialog.js';
package/src/DialogWrapper.js CHANGED
@@ -10,7 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
10
10
  governing permissions and limitations under the License.
11
11
  */
12
12
  import { __decorate } from "tslib";
13
- import { html, SpectrumElement, property, query, ifDefined, } from '@spectrum-web-components/base';
13
+ import { html, SpectrumElement, } from '@spectrum-web-components/base';
14
+ import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
15
+ import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
14
16
  import '@spectrum-web-components/underlay/sp-underlay.js';
15
17
  import '@spectrum-web-components/button/sp-button.js';
16
18
  import '../sp-dialog.js';
@@ -141,6 +143,7 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
141
143
  ? html `
142
144
  <sp-button
143
145
  variant="primary"
146
+ treatment="outline"
144
147
  slot="button"
145
148
  @click=${this.clickSecondary}
146
149
  >
@@ -152,6 +155,7 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
152
155
  ? html `
153
156
  <sp-button
154
157
  variant="secondary"
158
+ treatment="outline"
155
159
  slot="button"
156
160
  @click=${this.clickCancel}
157
161
  >
@@ -162,7 +166,7 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
162
166
  ${this.confirmLabel
163
167
  ? html `
164
168
  <sp-button
165
- variant="cta"
169
+ variant="accent"
166
170
  slot="button"
167
171
  @click=${this.clickConfirm}
168
172
  >
package/src/DialogWrapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DialogWrapper.js","sourceRoot":"","sources":["DialogWrapper.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 html,\n SpectrumElement,\n TemplateResult,\n property,\n CSSResultArray,\n query,\n ifDefined,\n PropertyValues,\n} from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/underlay/sp-underlay.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\nimport '../sp-dialog.js';\nimport styles from '@spectrum-web-components/modal/src/modal.css.js';\nimport { Dialog } from './Dialog.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\n\n/**\n * @element sp-dialog-wrapper\n *\n * @slot - content for the dialog\n * @fires secondary - Announces that the \"secondary\" button has been clicked.\n * @fires cancel - Announces that the \"cancel\" button has been clicked.\n * @fires confirm - Announces that the \"confirm\" button has been clicked.\n * @fires close - Announces that the dialog has been closed.\n */\nexport class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public error = false;\n\n @property({ attribute: 'cancel-label' })\n public cancelLabel = '';\n\n @property({ attribute: 'confirm-label' })\n public confirmLabel = '';\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n @property()\n public footer = '';\n\n @property()\n public hero = '';\n\n @property({ attribute: 'hero-label' })\n public heroLabel = '';\n\n @property({ type: Boolean, reflect: true, attribute: 'no-divider' })\n public noDivider = false;\n\n @property({ type: Boolean, reflect: true })\n public open = 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 @property({ attribute: 'secondary-label' })\n public secondaryLabel = '';\n\n @property()\n public headline = '';\n\n @property({ type: Boolean })\n public responsive = false;\n\n @property({ type: Boolean })\n public underlay = false;\n\n @query('sp-dialog')\n private dialog!: Dialog;\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 } else {\n this.dialog.focus();\n }\n /* c8 ignore next 3 */\n } else {\n super.focus();\n }\n }\n\n private dismiss(): void {\n if (!this.dismissable) {\n return;\n }\n this.close();\n }\n\n private clickSecondary(): void {\n this.dispatchEvent(\n new Event('secondary', {\n bubbles: true,\n })\n );\n }\n\n private clickCancel(): void {\n this.dispatchEvent(\n new Event('cancel', {\n bubbles: true,\n })\n );\n }\n\n private clickConfirm(): void {\n this.dispatchEvent(\n new Event('confirm', {\n bubbles: true,\n })\n );\n }\n\n public close(): void {\n this.open = false;\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n })\n );\n }\n\n protected render(): TemplateResult {\n return html`\n ${this.underlay\n ? html`\n <sp-underlay\n ?open=${this.open}\n @click=${this.dismiss}\n ></sp-underlay>\n `\n : html``}\n <div class=\"modal ${this.mode}\">\n <sp-dialog\n ?dismissable=${this.dismissable}\n ?no-divider=${this.noDivider}\n ?error=${this.error}\n mode=${ifDefined(this.mode ? this.mode : undefined)}\n size=${ifDefined(this.size ? this.size : undefined)}\n @close=${this.close}\n >\n ${this.hero\n ? html`\n <img\n src=\"${this.hero}\"\n slot=\"hero\"\n aria-hidden=${ifDefined(\n this.heroLabel ? undefined : 'true'\n )}\n alt=${ifDefined(\n this.heroLabel\n ? this.heroLabel\n : undefined\n )}\n />\n `\n : html``}\n ${this.headline\n ? html`\n <h2 slot=\"heading\">${this.headline}</h2>\n `\n : html``}\n <slot></slot>\n ${this.footer\n ? html`\n <div slot=\"footer\">${this.footer}</div>\n `\n : html``}\n ${this.secondaryLabel\n ? html`\n <sp-button\n variant=\"primary\"\n slot=\"button\"\n @click=${this.clickSecondary}\n >\n ${this.secondaryLabel}\n </sp-button>\n `\n : html``}\n ${this.cancelLabel\n ? html`\n <sp-button\n variant=\"secondary\"\n slot=\"button\"\n @click=${this.clickCancel}\n >\n ${this.cancelLabel}\n </sp-button>\n `\n : html``}\n ${this.confirmLabel\n ? html`\n <sp-button\n variant=\"cta\"\n slot=\"button\"\n @click=${this.clickConfirm}\n >\n ${this.confirmLabel}\n </sp-button>\n `\n : html``}\n </sp-dialog>\n </div>\n `;\n }\n\n protected updated(changes: PropertyValues<this>): void {\n if (changes.has('open') && this.open) {\n this.dialog.updateComplete.then(() => {\n this.dialog.shouldManageTabOrderForScrolling();\n });\n }\n }\n}\n"]}
1
+ {"version":3,"file":"DialogWrapper.js","sourceRoot":"","sources":["DialogWrapper.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';\n\nimport '@spectrum-web-components/underlay/sp-underlay.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\nimport '../sp-dialog.js';\nimport styles from '@spectrum-web-components/modal/src/modal.css.js';\nimport { Dialog } from './Dialog.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\n\n/**\n * @element sp-dialog-wrapper\n *\n * @slot - content for the dialog\n * @fires secondary - Announces that the \"secondary\" button has been clicked.\n * @fires cancel - Announces that the \"cancel\" button has been clicked.\n * @fires confirm - Announces that the \"confirm\" button has been clicked.\n * @fires close - Announces that the dialog has been closed.\n */\nexport class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public error = false;\n\n @property({ attribute: 'cancel-label' })\n public cancelLabel = '';\n\n @property({ attribute: 'confirm-label' })\n public confirmLabel = '';\n\n @property({ type: Boolean, reflect: true })\n public dismissable = false;\n\n @property()\n public footer = '';\n\n @property()\n public hero = '';\n\n @property({ attribute: 'hero-label' })\n public heroLabel = '';\n\n @property({ type: Boolean, reflect: true, attribute: 'no-divider' })\n public noDivider = false;\n\n @property({ type: Boolean, reflect: true })\n public open = 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 @property({ attribute: 'secondary-label' })\n public secondaryLabel = '';\n\n @property()\n public headline = '';\n\n @property({ type: Boolean })\n public responsive = false;\n\n @property({ type: Boolean })\n public underlay = false;\n\n @query('sp-dialog')\n private dialog!: Dialog;\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 } else {\n this.dialog.focus();\n }\n /* c8 ignore next 3 */\n } else {\n super.focus();\n }\n }\n\n private dismiss(): void {\n if (!this.dismissable) {\n return;\n }\n this.close();\n }\n\n private clickSecondary(): void {\n this.dispatchEvent(\n new Event('secondary', {\n bubbles: true,\n })\n );\n }\n\n private clickCancel(): void {\n this.dispatchEvent(\n new Event('cancel', {\n bubbles: true,\n })\n );\n }\n\n private clickConfirm(): void {\n this.dispatchEvent(\n new Event('confirm', {\n bubbles: true,\n })\n );\n }\n\n public close(): void {\n this.open = false;\n this.dispatchEvent(\n new Event('close', {\n bubbles: true,\n })\n );\n }\n\n protected render(): TemplateResult {\n return html`\n ${this.underlay\n ? html`\n <sp-underlay\n ?open=${this.open}\n @click=${this.dismiss}\n ></sp-underlay>\n `\n : html``}\n <div class=\"modal ${this.mode}\">\n <sp-dialog\n ?dismissable=${this.dismissable}\n ?no-divider=${this.noDivider}\n ?error=${this.error}\n mode=${ifDefined(this.mode ? this.mode : undefined)}\n size=${ifDefined(this.size ? this.size : undefined)}\n @close=${this.close}\n >\n ${this.hero\n ? html`\n <img\n src=\"${this.hero}\"\n slot=\"hero\"\n aria-hidden=${ifDefined(\n this.heroLabel ? undefined : 'true'\n )}\n alt=${ifDefined(\n this.heroLabel\n ? this.heroLabel\n : undefined\n )}\n />\n `\n : html``}\n ${this.headline\n ? html`\n <h2 slot=\"heading\">${this.headline}</h2>\n `\n : html``}\n <slot></slot>\n ${this.footer\n ? html`\n <div slot=\"footer\">${this.footer}</div>\n `\n : html``}\n ${this.secondaryLabel\n ? html`\n <sp-button\n variant=\"primary\"\n treatment=\"outline\"\n slot=\"button\"\n @click=${this.clickSecondary}\n >\n ${this.secondaryLabel}\n </sp-button>\n `\n : html``}\n ${this.cancelLabel\n ? html`\n <sp-button\n variant=\"secondary\"\n treatment=\"outline\"\n slot=\"button\"\n @click=${this.clickCancel}\n >\n ${this.cancelLabel}\n </sp-button>\n `\n : html``}\n ${this.confirmLabel\n ? html`\n <sp-button\n variant=\"accent\"\n slot=\"button\"\n @click=${this.clickConfirm}\n >\n ${this.confirmLabel}\n </sp-button>\n `\n : html``}\n </sp-dialog>\n </div>\n `;\n }\n\n protected updated(changes: PropertyValues<this>): void {\n if (changes.has('open') && this.open) {\n this.dialog.updateComplete.then(() => {\n this.dialog.shouldManageTabOrderForScrolling();\n });\n }\n }\n}\n"]}
package/src/dialog.css.js CHANGED
@@ -34,9 +34,9 @@ const styles = css `
34
34
  )}:host([size=l]){width:var(
35
35
  --spectrum-dialog-confirm-large-width
36
36
  )}::slotted([slot=hero]){background-position:50%;background-size:cover;border-top-left-radius:var(
37
- --spectrum-dialog-confirm-border-radius,var(--spectrum-global-dimension-size-50)
37
+ --spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)
38
38
  );border-top-right-radius:var(
39
- --spectrum-dialog-confirm-border-radius,var(--spectrum-global-dimension-size-50)
39
+ --spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)
40
40
  );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(
41
41
  --spectrum-dialog-confirm-padding
42
42
  );width:100%}:host([dir=ltr]) ::slotted([slot=heading]){padding-right:var(
@@ -44,7 +44,7 @@ const styles = css `
44
44
  )}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(
45
45
  --spectrum-dialog-confirm-gap-size
46
46
  )}::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size);font-weight:var(
47
- --spectrum-dialog-confirm-title-text-font-weight,var(--spectrum-global-font-weight-bold)
47
+ --spectrum-dialog-confirm-title-text-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)
48
48
  );grid-area:heading;line-height:var(
49
49
  --spectrum-dialog-confirm-title-text-line-height,var(--spectrum-alias-heading-text-line-height)
50
50
  );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(
@@ -82,7 +82,7 @@ var(--spectrum-global-dimension-size-25)
82
82
  --spectrum-dialog-confirm-padding
83
83
  )}:host([mode=fullscreen]) ::slotted([slot=heading]),:host([mode=fullscreenTakeover]) ::slotted([slot=heading]){font-size:var(
84
84
  --spectrum-dialog-fullscreen-header-text-size
85
- )}: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-inline-size: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(
85
+ )}: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(
86
86
  --spectrum-dialog-confirm-padding
87
87
  )}: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(
88
88
  --spectrum-dialog-confirm-padding
@@ -91,7 +91,7 @@ var(--spectrum-global-dimension-size-25)
91
91
  );grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(
92
92
  --spectrum-dialog-confirm-padding
93
93
  )}: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(
94
- --spectrum-dialog-confirm-title-text-color,var(--spectrum-global-color-gray-900)
94
+ --spectrum-dialog-confirm-title-text-color,var(--spectrum-alias-heading-text-color)
95
95
  )}.content,.footer{color:var(
96
96
  --spectrum-dialog-confirm-description-text-color,var(--spectrum-global-color-gray-800)
97
97
  )}.type-icon{color:var(
package/src/dialog.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.css.js","sourceRoot":"","sources":["dialog.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FjB,CAAC;AACF,eAAe,MAAM,CAAC","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*/\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-global-dimension-size-50)\n);border-top-right-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-global-dimension-size-50)\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-global-font-weight-bold)\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-inline-size: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-global-color-gray-900)\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`;\nexport default styles;"]}
1
+ {"version":3,"file":"dialog.css.js","sourceRoot":"","sources":["dialog.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FjB,CAAC;AACF,eAAe,MAAM,CAAC","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*/\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([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`;\nexport default styles;"]}
package/src/spectrum-dialog.css.js CHANGED
@@ -34,9 +34,9 @@ const styles = css `
34
34
  )}:host([size=l]){width:var(
35
35
  --spectrum-dialog-confirm-large-width
36
36
  )}::slotted([slot=hero]){background-position:50%;background-size:cover;border-top-left-radius:var(
37
- --spectrum-dialog-confirm-border-radius,var(--spectrum-global-dimension-size-50)
37
+ --spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)
38
38
  );border-top-right-radius:var(
39
- --spectrum-dialog-confirm-border-radius,var(--spectrum-global-dimension-size-50)
39
+ --spectrum-dialog-confirm-border-radius,var(--spectrum-alias-component-border-radius)
40
40
  );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(
41
41
  --spectrum-dialog-confirm-padding
42
42
  );width:100%}:host([dir=ltr]) ::slotted([slot=heading]){padding-right:var(
@@ -44,7 +44,7 @@ const styles = css `
44
44
  )}:host([dir=rtl]) ::slotted([slot=heading]){padding-left:var(
45
45
  --spectrum-dialog-confirm-gap-size
46
46
  )}::slotted([slot=heading]){font-size:var(--spectrum-dialog-confirm-title-text-size);font-weight:var(
47
- --spectrum-dialog-confirm-title-text-font-weight,var(--spectrum-global-font-weight-bold)
47
+ --spectrum-dialog-confirm-title-text-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)
48
48
  );grid-area:heading;line-height:var(
49
49
  --spectrum-dialog-confirm-title-text-line-height,var(--spectrum-alias-heading-text-line-height)
50
50
  );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(
@@ -82,7 +82,7 @@ var(--spectrum-global-dimension-size-25)
82
82
  --spectrum-dialog-confirm-padding
83
83
  )}:host([mode=fullscreen]) ::slotted([slot=heading]),:host([mode=fullscreenTakeover]) ::slotted([slot=heading]){font-size:var(
84
84
  --spectrum-dialog-fullscreen-header-text-size
85
- )}: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-inline-size: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(
85
+ )}: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(
86
86
  --spectrum-dialog-confirm-padding
87
87
  )}: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(
88
88
  --spectrum-dialog-confirm-padding
@@ -91,7 +91,7 @@ var(--spectrum-global-dimension-size-25)
91
91
  );grid-template-rows:var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(
92
92
  --spectrum-dialog-confirm-padding
93
93
  )}: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(
94
- --spectrum-dialog-confirm-title-text-color,var(--spectrum-global-color-gray-900)
94
+ --spectrum-dialog-confirm-title-text-color,var(--spectrum-alias-heading-text-color)
95
95
  )}.content,.footer{color:var(
96
96
  --spectrum-dialog-confirm-description-text-color,var(--spectrum-global-color-gray-800)
97
97
  )}.type-icon{color:var(
package/src/spectrum-dialog.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spectrum-dialog.css.js","sourceRoot":"","sources":["spectrum-dialog.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFjB,CAAC;AACF,eAAe,MAAM,CAAC","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*/\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-global-dimension-size-50)\n);border-top-right-radius:var(\n--spectrum-dialog-confirm-border-radius,var(--spectrum-global-dimension-size-50)\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-global-font-weight-bold)\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-inline-size: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-global-color-gray-900)\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;"]}
1
+ {"version":3,"file":"spectrum-dialog.css.js","sourceRoot":"","sources":["spectrum-dialog.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFjB,CAAC;AACF,eAAe,MAAM,CAAC","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*/\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([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`;\nexport default styles;"]}
package/stories/dialog.stories.js CHANGED
@@ -132,8 +132,10 @@ export const alertConfirmation = () => {
132
132
  <h2 slot="heading">Enable Smart Filters?</h2>
133
133
  Smart filters are nondestructive and will preserve your original
134
134
  images.
135
- <sp-button variant="secondary" slot="button">Cancel</sp-button>
136
- <sp-button variant="cta" slot="button">Enable</sp-button>
135
+ <sp-button variant="secondary" treatment="outline" slot="button">
136
+ Cancel
137
+ </sp-button>
138
+ <sp-button variant="accent" slot="button">Enable</sp-button>
137
139
  </sp-dialog>
138
140
  `;
139
141
  };
@@ -143,8 +145,12 @@ export const alertInformation = () => {
143
145
  <h2 slot="heading">Enable Smart Filters?</h2>
144
146
  Smart filters are nondestructive and will preserve your original
145
147
  images.
146
- <sp-button variant="secondary" slot="button">Cancel</sp-button>
147
- <sp-button variant="primary" slot="button">Enable</sp-button>
148
+ <sp-button variant="secondary" treatment="outline" slot="button">
149
+ Cancel
150
+ </sp-button>
151
+ <sp-button variant="primary" treatment="outline" slot="button">
152
+ Enable
153
+ </sp-button>
148
154
  </sp-dialog>
149
155
  `;
150
156
  };
@@ -154,7 +160,9 @@ export const alertDestructive = () => {
154
160
  <h2 slot="heading">Enable Smart Filters?</h2>
155
161
  Smart filters are nondestructive and will preserve your original
156
162
  images.
157
- <sp-button variant="secondary" slot="button">Cancel</sp-button>
163
+ <sp-button variant="secondary" treatment="outline" slot="button">
164
+ Cancel
165
+ </sp-button>
158
166
  <sp-button variant="negative" slot="button">Enable</sp-button>
159
167
  </sp-dialog>
160
168
  `;
@@ -165,8 +173,12 @@ export const alertError = () => {
165
173
  <h2 slot="heading">Enable Smart Filters?</h2>
166
174
  Smart filters are nondestructive and will preserve your original
167
175
  images.
168
- <sp-button variant="secondary" slot="button">Cancel</sp-button>
169
- <sp-button variant="primary" slot="button">Enable</sp-button>
176
+ <sp-button variant="secondary" treatment="outline" slot="button">
177
+ Cancel
178
+ </sp-button>
179
+ <sp-button variant="primary" treatment="outline" slot="button">
180
+ Enable
181
+ </sp-button>
170
182
  </sp-dialog>
171
183
  `;
172
184
  };
@@ -176,8 +188,12 @@ export const alertErrorWithLongTitle = () => {
176
188
  <h2 slot="heading">Unable to Share Project to Behance Community</h2>
177
189
  Smart filters are nondestructive and will preserve your original
178
190
  images.
179
- <sp-button variant="secondary" slot="button">Cancel</sp-button>
180
- <sp-button variant="primary" slot="button">Enable</sp-button>
191
+ <sp-button variant="secondary" treatment="outline" slot="button">
192
+ Cancel
193
+ </sp-button>
194
+ <sp-button variant="primary" treatment="outline" slot="button">
195
+ Enable
196
+ </sp-button>
181
197
  </sp-dialog>
182
198
  `;
183
199
  };
@@ -314,8 +330,10 @@ export const fullscreen = () => {
314
330
  <div slot="footer">
315
331
  Anything in the footer is sticky and aligned right.
316
332
  </div>
317
- <sp-button variant="secondary" slot="button">Cancel</sp-button>
318
- <sp-button variant="cta" slot="button">Enable</sp-button>
333
+ <sp-button variant="secondary" treatment="outline" slot="button">
334
+ Cancel
335
+ </sp-button>
336
+ <sp-button variant="accent" slot="button">Enable</sp-button>
319
337
  </sp-dialog>
320
338
  `;
321
339
  };
@@ -452,8 +470,10 @@ export const fullscreenTakeover = () => {
452
470
  <div slot="footer">
453
471
  Anything in the footer is sticky and aligned right.
454
472
  </div>
455
- <sp-button variant="secondary" slot="button">Cancel</sp-button>
456
- <sp-button variant="cta" slot="button">Enable</sp-button>
473
+ <sp-button variant="secondary" treatment="outline" slot="button">
474
+ Cancel
475
+ </sp-button>
476
+ <sp-button variant="accent" slot="button">Enable</sp-button>
457
477
  </sp-dialog>
458
478
  `;
459
479
  };
package/stories/dialog.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.stories.js","sourceRoot":"","sources":["dialog.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,8CAA8C,CAAC;AAEtD,eAAe;IACX,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,WAAW;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAmB,EAAE;IACtC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAmB,EAAE;IACvC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAmB,EAAE;IACtC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAmB,EAAE;IAC5C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAmB,EAAE;IAC1C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAmB,EAAE;IACrC,OAAO,IAAI,CAAA;;4DAE6C,SAAS;;;;;;;;;;;;;;KAchE,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAmB,EAAE;IAClD,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAmB,EAAE;IACjD,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAmB,EAAE;IACjD,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAmB,EAAE;IAC3C,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAmB,EAAE;IACxD,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAmB,EAAE;IAC3C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuIV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAmB,EAAE;IACnD,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuIV,CAAC;AACN,CAAC,CAAC","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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-dialog.js';\nimport { landscape } from './images.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\nexport default {\n title: 'Dialog',\n component: 'sp-dialog',\n};\n\nexport const small = (): TemplateResult => {\n return html`\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const medium = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const large = (): TemplateResult => {\n return html`\n <sp-dialog size=\"l\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const dismissable = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const noDivider = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable no-divider>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const hero = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable no-divider>\n <div slot=\"hero\" style=\"background-image: url(${landscape})\"></div>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const alertConfirmation = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"cta\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertInformation = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"primary\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertDestructive = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"negative\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertError = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\" error>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"primary\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertErrorWithLongTitle = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\" error>\n <h2 slot=\"heading\">Unable to Share Project to Behance Community</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"primary\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const fullscreen = (): TemplateResult => {\n return html`\n <sp-dialog mode=\"fullscreen\" dismissable>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <div slot=\"footer\">\n Anything in the footer is sticky and aligned right.\n </div>\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"cta\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const fullscreenTakeover = (): TemplateResult => {\n return html`\n <sp-dialog mode=\"fullscreenTakeover\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <div slot=\"footer\">\n Anything in the footer is sticky and aligned right.\n </div>\n <sp-button variant=\"secondary\" slot=\"button\">Cancel</sp-button>\n <sp-button variant=\"cta\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n"]}
1
+ {"version":3,"file":"dialog.stories.js","sourceRoot":"","sources":["dialog.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,8CAA8C,CAAC;AAEtD,eAAe;IACX,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,WAAW;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAmB,EAAE;IACtC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAmB,EAAE;IACvC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAmB,EAAE;IACtC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAmB,EAAE;IAC5C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAmB,EAAE;IAC1C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAmB,EAAE;IACrC,OAAO,IAAI,CAAA;;4DAE6C,SAAS;;;;;;;;;;;;;;KAchE,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAmB,EAAE;IAClD,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAmB,EAAE;IACjD,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAmB,EAAE;IACjD,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAmB,EAAE;IAC3C,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAmB,EAAE;IACxD,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAmB,EAAE;IAC3C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyIV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAmB,EAAE;IACnD,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyIV,CAAC;AACN,CAAC,CAAC","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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-dialog.js';\nimport { landscape } from './images.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\nexport default {\n title: 'Dialog',\n component: 'sp-dialog',\n};\n\nexport const small = (): TemplateResult => {\n return html`\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const medium = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const large = (): TemplateResult => {\n return html`\n <sp-dialog size=\"l\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const dismissable = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const noDivider = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable no-divider>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const hero = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable no-divider>\n <div slot=\"hero\" style=\"background-image: url(${landscape})\"></div>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const alertConfirmation = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertInformation = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"primary\" treatment=\"outline\" slot=\"button\">\n Enable\n </sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertDestructive = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"negative\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertError = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\" error>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"primary\" treatment=\"outline\" slot=\"button\">\n Enable\n </sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertErrorWithLongTitle = (): TemplateResult => {\n return html`\n <sp-dialog size=\"alert\" error>\n <h2 slot=\"heading\">Unable to Share Project to Behance Community</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"primary\" treatment=\"outline\" slot=\"button\">\n Enable\n </sp-button>\n </sp-dialog>\n `;\n};\n\nexport const fullscreen = (): TemplateResult => {\n return html`\n <sp-dialog mode=\"fullscreen\" dismissable>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <div slot=\"footer\">\n Anything in the footer is sticky and aligned right.\n </div>\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const fullscreenTakeover = (): TemplateResult => {\n return html`\n <sp-dialog mode=\"fullscreenTakeover\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <div slot=\"footer\">\n Anything in the footer is sticky and aligned right.\n </div>\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n"]}