@getflip/swirl-components 0.514.1 → 0.515.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.
@@ -5,7 +5,7 @@ var index$1 = require('./index-DcAhLZUH.js');
5
5
  var index_esm = require('./index.esm-D5HbQDBa.js');
6
6
  var bodyScrollLock = require('./body-scroll-lock-DVYwmTS6.js');
7
7
 
8
- const swirlModalCss = () => `:host{display:block}:host *{box-sizing:border-box}.modal{--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16) max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) max(env(safe-area-inset-bottom), var(--s-space-16)) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc( var(--swirl-modal-max-width) + var(--swirl-modal-max-secondary-content-width) )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);padding-top:env(safe-area-inset-top, 0);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out, max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) + var(--swirl-modal-max-secondary-content-width) )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}`;
8
+ const swirlModalCss = () => `:host{display:block}:host *{box-sizing:border-box}.modal{--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16) max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) max(env(safe-area-inset-bottom), var(--s-space-16)) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc( var(--swirl-modal-max-width) + var(--swirl-modal-max-secondary-content-width) )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal.modal--show-backdrop .modal__backdrop{background-color:rgba(0, 0, 0, 0.2)}.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:none}}.modal.modal--hide-backdrop .modal__backdrop{background-color:transparent;animation:none}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);padding-top:env(safe-area-inset-top, 0);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out, max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) + var(--swirl-modal-max-secondary-content-width) )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}`;
9
9
 
10
10
  const SwirlModal = class {
11
11
  constructor(hostRef) {
@@ -292,30 +292,32 @@ const SwirlModal = class {
292
292
  "modal--sidebar-scrolled": this.sidebarScrolled,
293
293
  "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
294
294
  "modal--sidebar-scrollable": this.sidebarScrollable,
295
+ "modal--show-backdrop": this.showBackdrop === true,
296
+ "modal--hide-backdrop": this.showBackdrop === false,
295
297
  });
296
- return (index.h(index.Host, { key: '0f45cc9a4912b022afccea9213cc7da53a9aa37e' }, index.h("dialog", { key: 'a970fbd9151eb64badb0f259b09ef321fe4d164e', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'c2d2ae6c5d44d60703c2c77d1c95c14ffcf18910', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '16420d71ad89c1eec9aaf9d23c8215fb3ea383fe', class: "modal__body", part: "modal__body", style: !this.isFullscreen
298
+ return (index.h(index.Host, { key: '57def943e5df2665049065430acc8b2d696faaf2' }, index.h("dialog", { key: '037ee8c500258059e43a96805b1a58d1fb96d482', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'da802a24afe42387a9e14325ff63aa70c99f599a', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '9878be8edd8b2eafc065e9369b9dbb144b8cb033', class: "modal__body", part: "modal__body", style: !this.isFullscreen
297
299
  ? {
298
300
  "--swirl-modal-max-height": this.maxHeight,
299
301
  "--swirl-modal-height": this.height,
300
302
  minHeight: this.minHeight,
301
303
  maxWidth: this.maxWidth,
302
304
  }
303
- : {} }, index.h("aside", { key: '38ad0061e0f08aac82488175c746b5c555f32adb', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: 'b5497834cf6e2878f7a987187b6c7b86eabd9766', class: index$1.classnames("modal__sidebar-header", {
305
+ : {} }, index.h("aside", { key: '96dae7a70884125ec3ecfa02e3301ab3786b3268', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: 'b815160e4d7feb29838f121718a4821fc4545aba', class: index$1.classnames("modal__sidebar-header", {
304
306
  "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
305
- }) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '958219c84fa9fb76bb313a8ae7306c04c2081141', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: '5029fbc9ec38071b3cceadf762d4f9a4bca79f89', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: '6a78d9f4cbf78fd9067c467b2eaedb8033ceb80c', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: '98c0aa3d172dd358c18e01e06fb56f7406369ab5', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), index.h("div", { key: 'c9cd2106dbbc43585eb37739f92ed138f2a9a4c8', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '117faedfaeba9a3f65b0216d118db382c072b515', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), index.h("div", { key: '9ed8d737f2b0df661c60e4ab5f21abcb473393d1', class: "modal__main-content" }, index.h("header", { key: '2a75ad10d0b1fdbd103479421283ca897a31ca7f', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: 'dcfc1f9f7cd8a43c6e4f739d2c9928b31f54e619', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: 'b8f84a945ef116f7c034a113588a24647d37a533', class: "modal__header" }, index.h("div", { key: '6ae207323ec6a95d6297d4323da52e7deedbb013', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '988ff9f912e91936f66575d8f7cf2926de5d9e88', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
307
+ }) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: 'b2421369b9160161bcf44ab04d2783c6d7844f39', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: 'e045e938470b22056338ee90b45fb989dd1193cb', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: '4f232c851cee0dc4851779f4e093eb072304ec27', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: 'd0529ccd26758a5a5f9c9ebc37dcdaaeeffcc67d', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), index.h("div", { key: '0fb94623ed49f7d30cc8a19912896df60abf9c64', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '27ddc301c861639312ad636db3a5f413a7a8fbd9', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), index.h("div", { key: '4ee8788de704fc46edc41a6bb7a3330789f7d10b', class: "modal__main-content" }, index.h("header", { key: 'bffb46f525582c5d14819e5a7b7ce6380f574beb', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: '7d581789e82499ba4d74ca04e82df4db6e8b4a4f', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: 'ca79f692cec435488efde53a7eaf00ed957ed0b9', class: "modal__header" }, index.h("div", { key: 'f6b5c67a6758d5a79f3e6ae4bc5af003323550c1', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '201e6c1c2d79301df4b42728938e29c7bc682d09', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
306
308
  ? "<swirl-icon-close></swirl-icon-close>"
307
- : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: '8326448d58fd942f13bce0557e795b18308fff31', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
309
+ : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: 'ac4d73252eca8601c15fe617c0e73ae0feb328e9', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
308
310
  ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
309
311
  : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
310
312
  ? this.fullscreenDisableButtonLabel
311
- : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: 'c9e6744c28e22563692a59e1740ae05713d70be2', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'fc52f730d9f1d3e102816950eb88e25db14493cd', class: "modal__content-container", style: {
313
+ : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: 'e6b2e55be86e7afef7e0a5207dd06995faaaa3e2', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: '6888a6b611e0a1783dbad0fa66172d7f0b29e8c8', class: "modal__content-container", style: {
312
314
  gap: this.contentGap
313
315
  ? `var(--s-space-${this.contentGap})`
314
316
  : undefined,
315
- } }, index.h("div", { key: '8e43ce46abb4b34dc397f7112a231c7966aea08e', class: "modal__primary-content", style: {
317
+ } }, index.h("div", { key: '61e85c1be7f53fc7bc78885d269c7e0e8caf045f', class: "modal__primary-content", style: {
316
318
  maxWidth: this.primaryContentMaxWidth,
317
319
  flex: this.primaryContentFlex,
318
- } }, index.h("div", { key: '6c2edf22d357070f729c68d21c16dca249c00c4c', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '5454716327763ca55122f33b754dc61e148e2c6b', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), index.h("div", { key: '919f588a43c0a116c618018a9e5597395205031e', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: 'ca8b8b754546fa053a723fdbbf123892a420d70d' }))), index.h("div", { key: '1eae61228f912c7018e7fbceaed477ae729b4e9d', class: "modal__secondary-content", style: {
320
+ } }, index.h("div", { key: '218282dc27d130de9a0652d5e38a908bf0b04009', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '96b9f698bb584c7fb90a98e765a377bd11ef80db', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), index.h("div", { key: '5132ec11505f8b834cb21dc3c103a983702e8786', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '9ff0e0e2bb3d595ec249a24fb6c3fe78b8e4e5c5' }))), index.h("div", { key: 'c5ce01c0791528459da8698668c4a24c39b52b39', class: "modal__secondary-content", style: {
319
321
  maxWidth: this.secondaryContentMaxWidth,
320
322
  flex: this.secondaryContentFlex,
321
323
  padding: Boolean(this.secondaryContentPadding)
@@ -333,7 +335,7 @@ const SwirlModal = class {
333
335
  paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
334
336
  ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
335
337
  : undefined,
336
- } }, index.h("slot", { key: '2d41e0356f2d94abcd58f9e664321e87ef31b722', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), index.h("div", { key: '18341bbd4efb5c30e6abce995d413dfee8bec51b', class: "modal__custom-footer" }, index.h("slot", { key: '9e4f5f8ded7300f99c1d3a0223b8df51ac1b83e0', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (index.h("footer", { key: '6eca926668241390608224f6fce045e982228f65', class: "modal__controls" }, index.h("swirl-button-group", { key: 'f83d8d16f0611ee5626e82e4cc9101a60f480598', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '0bbe82f8f79ffce72cf6fec55e9052e84774cef8', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '33b0d007eb355ca975246ab0a6ce8efea7422335', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
338
+ } }, index.h("slot", { key: '78e8e7e1fd2965ef6e1ebafc8d9bc932c93be047', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), index.h("div", { key: 'b4afc32481a334b634ea029a6462e9fabdf5d7cf', class: "modal__custom-footer" }, index.h("slot", { key: 'ddcf6708f5e90c386f33849e0183450b34333b7c', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (index.h("footer", { key: '9a14842b432ea3ff55b2c5e2e061293071b105e9', class: "modal__controls" }, index.h("swirl-button-group", { key: '67704b42d564451479a34ac4b8b117699fd309f0', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '9a0bef9b104cec6f33e5817a238c753593f3a870', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: 'fe68d05dfcf0e361234b2aba8576a8f2be63b0f0', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
337
339
  }
338
340
  get el() { return index.getElement(this); }
339
341
  };
@@ -390,6 +390,27 @@
390
390
  inset: 0;
391
391
  }
392
392
 
393
+ /*
394
+ * Backdrop overrides via the `showBackdrop` prop; take precedence over the
395
+ * variant-based defaults above.
396
+ */
397
+ .modal.modal--show-backdrop .modal__backdrop {
398
+ background-color: rgba(0, 0, 0, 0.2);
399
+ }
400
+ .modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop {
401
+ animation: 0.15s modal-backdrop-fade-in;
402
+ }
403
+ @media (prefers-reduced-motion) {
404
+ .modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop {
405
+ animation: none
406
+ }
407
+ }
408
+
409
+ .modal.modal--hide-backdrop .modal__backdrop {
410
+ background-color: transparent;
411
+ animation: none;
412
+ }
413
+
393
414
  .modal__body {
394
415
  --swirl-card-background-default: var(--s-surface-overlay-default);
395
416
  --swirl-card-background-hovered: var(--s-surface-overlay-hovered);
@@ -287,30 +287,32 @@ export class SwirlModal {
287
287
  "modal--sidebar-scrolled": this.sidebarScrolled,
288
288
  "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
289
289
  "modal--sidebar-scrollable": this.sidebarScrollable,
290
+ "modal--show-backdrop": this.showBackdrop === true,
291
+ "modal--hide-backdrop": this.showBackdrop === false,
290
292
  });
291
- return (h(Host, { key: '0f45cc9a4912b022afccea9213cc7da53a9aa37e' }, h("dialog", { key: 'a970fbd9151eb64badb0f259b09ef321fe4d164e', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: 'c2d2ae6c5d44d60703c2c77d1c95c14ffcf18910', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '16420d71ad89c1eec9aaf9d23c8215fb3ea383fe', class: "modal__body", part: "modal__body", style: !this.isFullscreen
293
+ return (h(Host, { key: '57def943e5df2665049065430acc8b2d696faaf2' }, h("dialog", { key: '037ee8c500258059e43a96805b1a58d1fb96d482', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: 'da802a24afe42387a9e14325ff63aa70c99f599a', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '9878be8edd8b2eafc065e9369b9dbb144b8cb033', class: "modal__body", part: "modal__body", style: !this.isFullscreen
292
294
  ? {
293
295
  "--swirl-modal-max-height": this.maxHeight,
294
296
  "--swirl-modal-height": this.height,
295
297
  minHeight: this.minHeight,
296
298
  maxWidth: this.maxWidth,
297
299
  }
298
- : {} }, h("aside", { key: '38ad0061e0f08aac82488175c746b5c555f32adb', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'b5497834cf6e2878f7a987187b6c7b86eabd9766', class: classnames("modal__sidebar-header", {
300
+ : {} }, h("aside", { key: '96dae7a70884125ec3ecfa02e3301ab3786b3268', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'b815160e4d7feb29838f121718a4821fc4545aba', class: classnames("modal__sidebar-header", {
299
301
  "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
300
- }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '958219c84fa9fb76bb313a8ae7306c04c2081141', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '5029fbc9ec38071b3cceadf762d4f9a4bca79f89', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '6a78d9f4cbf78fd9067c467b2eaedb8033ceb80c', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '98c0aa3d172dd358c18e01e06fb56f7406369ab5', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), h("div", { key: 'c9cd2106dbbc43585eb37739f92ed138f2a9a4c8', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '117faedfaeba9a3f65b0216d118db382c072b515', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), h("div", { key: '9ed8d737f2b0df661c60e4ab5f21abcb473393d1', class: "modal__main-content" }, h("header", { key: '2a75ad10d0b1fdbd103479421283ca897a31ca7f', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: 'dcfc1f9f7cd8a43c6e4f739d2c9928b31f54e619', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'b8f84a945ef116f7c034a113588a24647d37a533', class: "modal__header" }, h("div", { key: '6ae207323ec6a95d6297d4323da52e7deedbb013', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '988ff9f912e91936f66575d8f7cf2926de5d9e88', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
302
+ }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: 'b2421369b9160161bcf44ab04d2783c6d7844f39', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: 'e045e938470b22056338ee90b45fb989dd1193cb', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '4f232c851cee0dc4851779f4e093eb072304ec27', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: 'd0529ccd26758a5a5f9c9ebc37dcdaaeeffcc67d', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), h("div", { key: '0fb94623ed49f7d30cc8a19912896df60abf9c64', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '27ddc301c861639312ad636db3a5f413a7a8fbd9', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), h("div", { key: '4ee8788de704fc46edc41a6bb7a3330789f7d10b', class: "modal__main-content" }, h("header", { key: 'bffb46f525582c5d14819e5a7b7ce6380f574beb', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '7d581789e82499ba4d74ca04e82df4db6e8b4a4f', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'ca79f692cec435488efde53a7eaf00ed957ed0b9', class: "modal__header" }, h("div", { key: 'f6b5c67a6758d5a79f3e6ae4bc5af003323550c1', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '201e6c1c2d79301df4b42728938e29c7bc682d09', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
301
303
  ? "<swirl-icon-close></swirl-icon-close>"
302
- : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '8326448d58fd942f13bce0557e795b18308fff31', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
304
+ : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'ac4d73252eca8601c15fe617c0e73ae0feb328e9', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
303
305
  ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
304
306
  : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
305
307
  ? this.fullscreenDisableButtonLabel
306
- : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'c9e6744c28e22563692a59e1740ae05713d70be2', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'fc52f730d9f1d3e102816950eb88e25db14493cd', class: "modal__content-container", style: {
308
+ : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'e6b2e55be86e7afef7e0a5207dd06995faaaa3e2', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '6888a6b611e0a1783dbad0fa66172d7f0b29e8c8', class: "modal__content-container", style: {
307
309
  gap: this.contentGap
308
310
  ? `var(--s-space-${this.contentGap})`
309
311
  : undefined,
310
- } }, h("div", { key: '8e43ce46abb4b34dc397f7112a231c7966aea08e', class: "modal__primary-content", style: {
312
+ } }, h("div", { key: '61e85c1be7f53fc7bc78885d269c7e0e8caf045f', class: "modal__primary-content", style: {
311
313
  maxWidth: this.primaryContentMaxWidth,
312
314
  flex: this.primaryContentFlex,
313
- } }, h("div", { key: '6c2edf22d357070f729c68d21c16dca249c00c4c', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '5454716327763ca55122f33b754dc61e148e2c6b', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), h("div", { key: '919f588a43c0a116c618018a9e5597395205031e', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'ca8b8b754546fa053a723fdbbf123892a420d70d' }))), h("div", { key: '1eae61228f912c7018e7fbceaed477ae729b4e9d', class: "modal__secondary-content", style: {
315
+ } }, h("div", { key: '218282dc27d130de9a0652d5e38a908bf0b04009', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '96b9f698bb584c7fb90a98e765a377bd11ef80db', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), h("div", { key: '5132ec11505f8b834cb21dc3c103a983702e8786', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '9ff0e0e2bb3d595ec249a24fb6c3fe78b8e4e5c5' }))), h("div", { key: 'c5ce01c0791528459da8698668c4a24c39b52b39', class: "modal__secondary-content", style: {
314
316
  maxWidth: this.secondaryContentMaxWidth,
315
317
  flex: this.secondaryContentFlex,
316
318
  padding: Boolean(this.secondaryContentPadding)
@@ -328,7 +330,7 @@ export class SwirlModal {
328
330
  paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
329
331
  ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
330
332
  : undefined,
331
- } }, h("slot", { key: '2d41e0356f2d94abcd58f9e664321e87ef31b722', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), h("div", { key: '18341bbd4efb5c30e6abce995d413dfee8bec51b', class: "modal__custom-footer" }, h("slot", { key: '9e4f5f8ded7300f99c1d3a0223b8df51ac1b83e0', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (h("footer", { key: '6eca926668241390608224f6fce045e982228f65', class: "modal__controls" }, h("swirl-button-group", { key: 'f83d8d16f0611ee5626e82e4cc9101a60f480598', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '0bbe82f8f79ffce72cf6fec55e9052e84774cef8', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '33b0d007eb355ca975246ab0a6ce8efea7422335', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
333
+ } }, h("slot", { key: '78e8e7e1fd2965ef6e1ebafc8d9bc932c93be047', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), h("div", { key: 'b4afc32481a334b634ea029a6462e9fabdf5d7cf', class: "modal__custom-footer" }, h("slot", { key: 'ddcf6708f5e90c386f33849e0183450b34333b7c', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (h("footer", { key: '9a14842b432ea3ff55b2c5e2e061293071b105e9', class: "modal__controls" }, h("swirl-button-group", { key: '67704b42d564451479a34ac4b8b117699fd309f0', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '9a0bef9b104cec6f33e5817a238c753593f3a870', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'fe68d05dfcf0e361234b2aba8576a8f2be63b0f0', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
332
334
  }
333
335
  static get is() { return "swirl-modal"; }
334
336
  static get encapsulation() { return "shadow"; }
@@ -615,6 +617,25 @@ export class SwirlModal {
615
617
  "reflect": false,
616
618
  "attribute": "secondary-action-label"
617
619
  },
620
+ "showBackdrop": {
621
+ "type": "boolean",
622
+ "mutable": false,
623
+ "complexType": {
624
+ "original": "boolean",
625
+ "resolved": "boolean",
626
+ "references": {}
627
+ },
628
+ "required": false,
629
+ "optional": true,
630
+ "docs": {
631
+ "tags": [],
632
+ "text": ""
633
+ },
634
+ "getter": false,
635
+ "setter": false,
636
+ "reflect": false,
637
+ "attribute": "show-backdrop"
638
+ },
618
639
  "variant": {
619
640
  "type": "string",
620
641
  "mutable": false,