@getflip/swirl-components 0.441.0 → 0.443.0

package/dist/components/swirl-dialog.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
+import { t as tabbable } from './index.esm.js';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 
 const swirlDialogCss = ":host{display:block}:host *{box-sizing:border-box}.dialog{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.dialog::backdrop{display:none}.dialog:not([open]){display:none}.dialog:not(.dialog--closing) .dialog__backdrop{animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{animation:none}}.dialog:not(.dialog--closing) .dialog__body{animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{animation:none}}.dialog--closing{animation:0.15s dialog-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-16);border-radius:var(--s-border-radius-l);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__body{width:25rem;border-radius:var(--s-border-radius-base)}}@media (min-width: 992px){.dialog__body{text-align:start}}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);padding-right:var(--s-space-8);padding-left:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__heading{line-height:var(--s-line-height-base)}}.dialog__content{margin-bottom:var(--s-space-20);padding-right:var(--s-space-8);padding-left:var(--s-space-8);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}@media (min-width: 992px){.dialog__content{margin-bottom:var(--s-space-24)}}.dialog__controls{display:flex;flex-wrap:wrap;justify-content:stretch;gap:var(--s-space-8)}.dialog__controls>*{flex-grow:1}@media (min-width: 992px){.dialog__controls>*{flex-grow:0}}@media (min-width: 992px){.dialog__controls{flex-wrap:nowrap;justify-content:flex-end}}.dialog__left_controls{display:flex;align-items:center;flex-grow:1;padding-left:var(--s-space-8);width:100%;min-width:0}@media (min-width: 992px){.dialog__left_controls{width:auto}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}";
@@ -84,12 +85,27 @@ const SwirlDialog$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDialog extends
         this.closing = true;
         setTimeout(() => {
             this.dialogEl.close();
+            if (this.returnFocusTo) {
+                this.customFocusReturn();
+            }
         }, 150);
     }
+    customFocusReturn() {
+        const element = typeof this.returnFocusTo === "string"
+            ? document.querySelector(this.returnFocusTo)
+            : this.returnFocusTo;
+        const focusableElements = tabbable(element, {
+            includeContainer: true,
+            getShadowRoot: true,
+        });
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
     render() {
         const className = classNames("dialog", { "dialog--closing": this.closing });
         const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
-        return (h(Host, { key: 'df291b77fd71b6e05fed9d91f7a27c322a507bf8' }, h("dialog", { key: 'cb8c34ccae0e348c0af1c0a7d0ed4a576a7b5841', "aria-describedby": "content", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (el) => (this.dialogEl = el) }, h("div", { key: '903f4d97cf89835d10e6449ea06e647fae11cda6', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'a1dca2bd9a7c3970e2efd03dfed18b2982676d99', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: '7546ed90a2f5b7245981e51a55a27517a02f86ab', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: 'ff31fb72b3193d6ff928673d906c8b69e9b98652', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: 'e3caee251a4ed708ca3f8dfb09aab24ea8572f0a' })), h("div", { key: 'b45667bbae90cfbc3cd291e32ab7c3970ebe3e06', class: "dialog__controls" }, hasLeftControls && (h("div", { key: '1f8cf4d5ed98df0cffb8552892bf517fb511e935', class: "dialog__left_controls" }, h("slot", { key: '0b3aebefa2a05ea3240311506083df2af2a3e44c', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: 'dc651e005c7ced14e64663eea32e99311337da81', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'd0b0b7a07ed0093fe887d03e4ad1cd64eae4a45e', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
+        return (h(Host, { key: '96dda6293b1d08c47f87f939eacfb089f21f8e85' }, h("dialog", { key: '792f1f6afd587fae84fc52a62449a794e3f03e33', "aria-describedby": "content", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (el) => (this.dialogEl = el) }, h("div", { key: '2bca81bc4a2e538f7e080a7d77dc648657938659', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'f65ff30e4e5b968beb4173e80998a03e1ca39fca', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: 'e1f6baa4050471e29eec852df3a6e8e71925bd9c', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: 'd8f4cc8d93de3aad7d45d3699aa49b73ec5efdcb', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '729e24ecc1de0624279a38723a58ccd7e92f119f' })), h("div", { key: '5340b93042e36af091648b0893a4090d124e7f95', class: "dialog__controls" }, hasLeftControls && (h("div", { key: 'd7064763e1a2f3cd7e7b64f9c36cb0ccb72c595e', class: "dialog__left_controls" }, h("slot", { key: '52525262d65555376b3dc911265dc35f7c801cdb', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: '9adbe0bf902960014f25adcd8ab203a3e2e3a773', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '842263d779c24ecd30928d040cdaa4600eab3fc6', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
     }
     get el() { return this; }
     static get style() { return swirlDialogCss; }
@@ -98,6 +114,7 @@ const SwirlDialog$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDialog extends
         "intent": [1],
         "label": [1],
         "primaryActionLabel": [1, "primary-action-label"],
+        "returnFocusTo": [1, "return-focus-to"],
         "secondaryActionLabel": [1, "secondary-action-label"],
         "closing": [32],
         "opening": [32],

package/dist/components/swirl-modal.js

@@ -173,6 +173,9 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
         setTimeout(() => {
             this.mutationObserver?.disconnect();
             this.modalEl.close();
+            if (this.returnFocusTo) {
+                this.customFocusReturn();
+            }
         }, 150);
     }
     async setFullscreen(isFullscreen) {
@@ -239,6 +242,18 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
     setDialogCustomProps() {
         this.modalEl.setAttribute("closedby", "none");
     }
+    customFocusReturn() {
+        const element = typeof this.returnFocusTo === "string"
+            ? document.querySelector(this.returnFocusTo)
+            : this.returnFocusTo;
+        const focusableElements = tabbable(element, {
+            includeContainer: true,
+            getShadowRoot: true,
+        });
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
     render() {
         const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
         const className = classNames("modal", `modal--variant-${this.variant}`, {
@@ -266,29 +281,29 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
             "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
             "modal--sidebar-scrollable": this.sidebarScrollable,
         });
-        return (h(Host, { key: '7b1f5a6a54ec9fa0a3dda86850372896844b2eae' }, h("dialog", { key: 'a2774d27715548e06a6792e5e311e36b4ea7a79c', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: '49484b321480f4b34bf49f4dd85777a0d1056068', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '40793d682b216240714a79c428d7e2d3d6c94ae1', class: "modal__body", part: "modal__body", style: !this.isFullscreen
+        return (h(Host, { key: 'c53283aad7f87ad05cc74bf68d39e33e57665cea' }, h("dialog", { key: 'f3e9a0b61a94b0b1d574265536a39d8bbe3aeaa1', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: '75bf8d418a4d77ffc37e42fb891047b39f99b6ab', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'f5bcf112f23d9fb77bb2cba66a6203d5b9951a33', class: "modal__body", part: "modal__body", style: !this.isFullscreen
                 ? {
                     "--swirl-modal-max-height": this.maxHeight,
                     "--swirl-modal-height": this.height,
                     minHeight: this.minHeight,
                     maxWidth: this.maxWidth,
                 }
-                : {} }, h("aside", { key: '5fadaafa6aa3261dc2630d96279c3dc88774a1a7', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'd121df205c2bc8ba63160a8ca528a09f1d0aa61b', class: classNames("modal__sidebar-header", {
+                : {} }, h("aside", { key: '382e8b1e9592b3a9752bb1ef2fc0f1b556cd2d7c', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '41cf73ab5aaca279a88eb6532f2144242f78ea47', class: classNames("modal__sidebar-header", {
                 "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
-            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '94c5c1332d23bfc47bbc92e5eaa3e0b1cf4051fe', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '9a641f1f2182e9f910d79a035969e93458b07907', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'b706d96b44f51292a6a4cdcee91799353db55802', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '4af9fbd8763fb09fd55062ff3ff99fc36fa529ce', name: "sidebar-content" })), h("div", { key: 'a3f355dd62cef5429549b1f06d44e57f49e36e88', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: 'd741cd69fa8a0804e07be5fd03768144433672ca', name: "sidebar-footer" }))), h("div", { key: '9ba4bf6aec690768fd3062ff7672aa745f80db4b', class: "modal__main-content" }, h("header", { key: 'b5105c12dbe115537c6cc46cbc662a1c70ef696f', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '5401148d6b09414ca04a330e2c2c647644d261a7', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'b909d69b879ecfbea57a545bd0fd3abe911fc5ea', class: "modal__header" }, h("div", { key: 'a463e28ab5af6ef439a0768fc4d405419e3e933c', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '221a4cb8ba8224e3f539d333280b780777a19428', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '9ead40c49960b2d69feca469bbc91ea91b4ab3d1', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '487f65c82081100e09be212f2e400900ac6c8bfc', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '147a03cbb62653955ad302b782774812cc9f9068', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: 'ecde4d85fc8ab0ae0b9e0559ba8a779ab41a5d3a', name: "sidebar-content" })), h("div", { key: '5c0aeac2179557eea8953cc8809fa3cdeec58f7a', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '0149eae26b53fdc7727e8fe355d39ef1aa6d2313', name: "sidebar-footer" }))), h("div", { key: '9c5b37271a1e158f8a45fe79705034a48fb565ed', class: "modal__main-content" }, h("header", { key: '9ac62c6974e74c144c3c8ca80b530d73912b0137', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '55c475bfa35b12376efac0b67f26a0c3b31a20af', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '54b61a7b591f367d8a3c916021e7159e0eeed068', class: "modal__header" }, h("div", { key: '159e1b20bd85579ed7fdfe1e1459edca776bf6b6', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '473b559c8b3629a1071ca687a0f1ee52dc7d15d3', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '4a83a1a763e032b542c81644a549964bc6fd1208', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
+                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'fd40a806fceca676a41b2253f82e18e960da806f', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
                 ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
                 : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
                 ? this.fullscreenDisableButtonLabel
-                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'c491a2cd384d29ab781d0790bad8fce476a90bf8', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'dfddf8429c3910924f5efe63334e33f87bfb475f', class: "modal__content-container", style: {
+                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '3d54e1b6df57be9faafc96e0aba51e1f7cc5493f', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '460cff9a5b1d6c5775a39534678af201909b3388', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, h("div", { key: 'b367c401864d309ca26aca350c7b7cf0bfb526db', class: "modal__primary-content", style: {
+            } }, h("div", { key: '2c314687bf9553212f41be41d7ba40092cf4adbf', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, h("div", { key: '745de57b314184940b0ba3174d694176a094db57', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: 'c5722ce7afde24de61a7aad6d3e6a09fbf264f38', name: "header-tools" })), h("div", { key: '3cb2597374be9238e7002ae256d8b1b7d618715f', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'c0248efeab322efb766db428bfce71879aec2c11' }))), h("div", { key: '01eb5918af059310d3c3a96dacbf2b4d9a7502a8', class: "modal__secondary-content", style: {
+            } }, h("div", { key: 'd791af57ae248b9ad5e0872bcb193fefd1fef44b', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '8e5b801755e617dbae380c86d9b9a6c72203f915', name: "header-tools" })), h("div", { key: '460a2c618a871d1fed8927a676c0cef86607939f', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '91b8d1223e10c107392c4a6913d3483ccbe3c689' }))), h("div", { key: '8d7757d3ad4921e649e47e4052dc30c069bbb082', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -306,7 +321,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, h("slot", { key: '2e962ff3e2305b62bea138f9181cf112d5c73c0f', name: "secondary-content" }))), h("div", { key: '7557c5bf249bb0611ad4d56cf04300409636740b', class: "modal__custom-footer" }, h("slot", { key: 'df270671beab0f6cf5b0693f62b1d7140e080685', name: "custom-footer" })), showControls && (h("footer", { key: '37bd816e3058549f70820045839aa0273b2ea7a2', class: "modal__controls" }, h("swirl-button-group", { key: '13a7664eb9b5d8356becf61cef74fdffe85a307e', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '5afbc606a31c569d0bb692819bc965c4a499d56c', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'd635317b7da366eacec12d6018c1c92e7fb6af72', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
+            } }, h("slot", { key: '0fee540e1ffcd87a4efd66394b9506073720d4f9', name: "secondary-content" }))), h("div", { key: 'e3d7e34eeb3a852801494b01590605736359ff93', class: "modal__custom-footer" }, h("slot", { key: 'f9152641cfe89640ded1ca29eecb6672b0c1db5a', name: "custom-footer" })), showControls && (h("footer", { key: '794fdc1f5f62174bb7e8dd22ebd2cf66263e78e4', class: "modal__controls" }, h("swirl-button-group", { key: 'eb5b75263ab691ea70dca2608ee4e3bae836dbe4', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'bd4f677b1b4fc4cd26a2d1bf4bdb3e2f54c43159', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '6228911c5e114668d9a4dce63aff4c3931cfdb8a', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     get el() { return this; }
     static get style() { return swirlModalCss; }
@@ -333,6 +348,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
         "primaryContentFlex": [1, "primary-content-flex"],
         "secondaryContentFlex": [1, "secondary-content-flex"],
         "hideSecondaryContentBorders": [4, "hide-secondary-content-borders"],
+        "returnFocusTo": [1, "return-focus-to"],
         "secondaryContentPadding": [1, "secondary-content-padding"],
         "secondaryContentPaddingBlockEnd": [1, "secondary-content-padding-block-end"],
         "secondaryContentPaddingBlockStart": [1, "secondary-content-padding-block-start"],