@internetarchive/modal-manager 0.3.4 → 0.9.1-alpha.0

package/dist/src/modal-manager.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, CSSResult, TemplateResult, PropertyValues } from 'lit';
+import Modal from './shoelace/modal';
 import './modal-template';
 import { ModalConfig } from './modal-config';
 import { ModalManagerInterface } from './modal-manager-interface';
@@ -22,7 +23,7 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
      */
     customModalContent?: TemplateResult;
     /**
-     * Thie hostBridge handles environmental-specific interactions such as adding classes
+     * This hostBridge handles environmental-specific interactions such as adding classes
      * to the body tag or event listeners needed to support the modal manager in the host environment.
      *
      * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom
@@ -40,6 +41,9 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
      * @memberof ModalManager
      */
     private modalTemplate;
+    modal: Modal;
+    firstUpdated(): Promise<void>;
+    disconnectedCallback(): void;
     /** @inheritdoc */
     render(): TemplateResult;
     /** @inheritdoc */

package/dist/src/modal-manager.js

@@ -1,6 +1,7 @@
 import { __awaiter, __decorate } from "tslib";
 import { LitElement, html, css, } from 'lit';
 import { property, customElement, query } from 'lit/decorators.js';
+import Modal from './shoelace/modal';
 import './modal-template';
 import { ModalConfig } from './modal-config';
 import { ModalManagerHostBridge } from './modal-manager-host-bridge';
@@ -18,7 +19,7 @@ let ModalManager = class ModalManager extends LitElement {
          */
         this.mode = ModalManagerMode.Closed;
         /**
-         * Thie hostBridge handles environmental-specific interactions such as adding classes
+         * This hostBridge handles environmental-specific interactions such as adding classes
          * to the body tag or event listeners needed to support the modal manager in the host environment.
          *
          * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom
@@ -28,6 +29,8 @@ let ModalManager = class ModalManager extends LitElement {
          * @memberof ModalManager
          */
         this.hostBridge = new ModalManagerHostBridge(this);
+        // Imported tab handling from shoelace
+        this.modal = new Modal(this);
         /**
          * Whether the modal should close if the user taps on the backdrop
          *
@@ -36,6 +39,17 @@ let ModalManager = class ModalManager extends LitElement {
          */
         this.closeOnBackdropClick = true;
     }
+    firstUpdated() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Give the browser a chance to paint
+            // eslint-disable-next-line no-promise-executor-return
+            yield new Promise(r => setTimeout(r, 0));
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.modal.deactivate();
+    }
     /** @inheritdoc */
     render() {
         return html `
@@ -43,7 +57,7 @@ let ModalManager = class ModalManager extends LitElement {
         <div class="backdrop" @click=${this.backdropClicked}></div>
         <modal-template
           @closeButtonPressed=${this.closeButtonPressed}
-          tabindex="0"
+          tabindex="-1"
         >
           ${this.customModalContent}
         </modal-template>
@@ -59,6 +73,7 @@ let ModalManager = class ModalManager extends LitElement {
         this.mode = ModalManagerMode.Closed;
         this.customModalContent = undefined;
         this.modalTemplate.config = new ModalConfig();
+        this.modal.deactivate();
     }
     /**
      * Call the userClosedModalCallback and reset it if it exists
@@ -84,7 +99,13 @@ let ModalManager = class ModalManager extends LitElement {
             this.customModalContent = options.customModalContent;
             this.mode = ModalManagerMode.Open;
             yield this.modalTemplate.updateComplete;
-            this.modalTemplate.focus();
+            this.modal.activate();
+            // document.addEventListener('keydown', this.tabHandler);
+            // this.firstFocusableElement.focus();
+            // console.log('firstFocusableElement', this.firstFocusableElement);
+            // console.log('lastFocusableElement', this.lastFocusableElement);
+            // console.log('focusableContent', this.focusableContent);
+            // this.modalTemplate.focus();
         });
     }
     /** @inheritdoc */

package/dist/src/modal-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  css,\n  CSSResult,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n  /**\n   * The current mode of the ModalManager\n   *\n   * Current options are `modal` or `closed`\n   *\n   * @type {ModalManagerMode}\n   * @memberof ModalManager\n   */\n  @property({ type: String, reflect: true }) mode: ModalManagerMode =\n    ModalManagerMode.Closed;\n\n  /**\n   * Custom content to display in the modal's content slot\n   *\n   * @type {(TemplateResult | undefined)}\n   * @memberof ModalManager\n   */\n  @property({ type: Object }) customModalContent?: TemplateResult;\n\n  /**\n   * Thie hostBridge handles environmental-specific interactions such as adding classes\n   * to the body tag or event listeners needed to support the modal manager in the host environment.\n   *\n   * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n   * `ModalManagerHostBridgeInterface`\n   *\n   * @type {ModalManagerHostBridgeInterface}\n   * @memberof ModalManager\n   */\n  @property({ type: Object })\n  hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n    this\n  );\n\n  /**\n   * Reference to the ModalTemplate DOM element\n   *\n   * @private\n   * @type {ModalTemplate}\n   * @memberof ModalManager\n   */\n  @query('modal-template') private modalTemplate!: ModalTemplate;\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n        <modal-template\n          @closeButtonPressed=${this.closeButtonPressed}\n          tabindex=\"0\"\n        >\n          ${this.customModalContent}\n        </modal-template>\n      </div>\n    `;\n  }\n\n  /** @inheritdoc */\n  getMode(): ModalManagerMode {\n    return this.mode;\n  }\n\n  /** @inheritdoc */\n  closeModal(): void {\n    this.mode = ModalManagerMode.Closed;\n    this.customModalContent = undefined;\n    this.modalTemplate.config = new ModalConfig();\n  }\n\n  /**\n   * Whether the modal should close if the user taps on the backdrop\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeOnBackdropClick = true;\n\n  /**\n   * A callback if the user closes the modal\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private userClosedModalCallback?: () => void;\n\n  /**\n   * Call the userClosedModalCallback and reset it if it exists\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private callUserClosedModalCallback(): void {\n    // we assign the callback to a temp var and undefine it before calling it\n    // otherwise, we run into the potential for an infinite loop if the\n    // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n    const callback = this.userClosedModalCallback;\n    this.userClosedModalCallback = undefined;\n    if (callback) callback();\n  }\n\n  /** @inheritdoc */\n  async showModal(options: {\n    config: ModalConfig;\n    customModalContent?: TemplateResult;\n    userClosedModalCallback?: () => void;\n  }): Promise<void> {\n    this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n    this.userClosedModalCallback = options.userClosedModalCallback;\n    this.modalTemplate.config = options.config;\n    this.customModalContent = options.customModalContent;\n    this.mode = ModalManagerMode.Open;\n    await this.modalTemplate.updateComplete;\n    this.modalTemplate.focus();\n  }\n\n  /** @inheritdoc */\n  updated(changed: PropertyValues): void {\n    /* istanbul ignore else */\n    if (changed.has('mode')) {\n      this.handleModeChange();\n    }\n  }\n\n  /**\n   * Called when the backdrop is clicked\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private backdropClicked(): void {\n    if (this.closeOnBackdropClick) {\n      this.closeModal();\n      this.callUserClosedModalCallback();\n    }\n  }\n\n  /**\n   * Handle the mode change\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private handleModeChange(): void {\n    this.hostBridge.handleModeChange(this.mode);\n    this.emitModeChangeEvent();\n  }\n\n  /**\n   * Emit a modeChange event\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private emitModeChangeEvent(): void {\n    const event = new CustomEvent('modeChanged', {\n      detail: { mode: this.mode },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Called when the modal close button is pressed. Closes the modal.\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeButtonPressed(): void {\n    this.closeModal();\n    this.callUserClosedModalCallback();\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n    const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n    const modalWidth = css`var(--modalWidth, 32rem)`;\n    const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n    const modalZindex = css`var(--modalZindex, 2000)`;\n\n    return css`\n      .container {\n        width: 100%;\n        height: 100%;\n      }\n\n      .backdrop {\n        position: fixed;\n        top: 0;\n        left: 0;\n        background-color: ${modalBackdropColor};\n        width: 100%;\n        height: 100%;\n        z-index: ${modalBackdropZindex};\n      }\n\n      modal-template {\n        outline: 0;\n        position: fixed;\n        top: 0;\n        left: 50%;\n        transform: translate(-50%, 0);\n        z-index: ${modalZindex};\n        width: ${modalWidth};\n        max-width: ${modalMaxWidth};\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  css,\n  CSSResult,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport Modal from './shoelace/modal';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n  /**\n   * The current mode of the ModalManager\n   *\n   * Current options are `modal` or `closed`\n   *\n   * @type {ModalManagerMode}\n   * @memberof ModalManager\n   */\n  @property({ type: String, reflect: true }) mode: ModalManagerMode =\n    ModalManagerMode.Closed;\n\n  /**\n   * Custom content to display in the modal's content slot\n   *\n   * @type {(TemplateResult | undefined)}\n   * @memberof ModalManager\n   */\n  @property({ type: Object }) customModalContent?: TemplateResult;\n\n  /**\n   * This hostBridge handles environmental-specific interactions such as adding classes\n   * to the body tag or event listeners needed to support the modal manager in the host environment.\n   *\n   * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n   * `ModalManagerHostBridgeInterface`\n   *\n   * @type {ModalManagerHostBridgeInterface}\n   * @memberof ModalManager\n   */\n  @property({ type: Object })\n  hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n    this\n  );\n\n  /**\n   * Reference to the ModalTemplate DOM element\n   *\n   * @private\n   * @type {ModalTemplate}\n   * @memberof ModalManager\n   */\n  @query('modal-template') private modalTemplate!: ModalTemplate;\n\n  // Imported tab handling from shoelace\n  public modal = new Modal(this);\n\n  async firstUpdated(): Promise<void> {\n    // Give the browser a chance to paint\n    // eslint-disable-next-line no-promise-executor-return\n    await new Promise(r => setTimeout(r, 0));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.modal.deactivate();\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n        <modal-template\n          @closeButtonPressed=${this.closeButtonPressed}\n          tabindex=\"-1\"\n        >\n          ${this.customModalContent}\n        </modal-template>\n      </div>\n    `;\n  }\n\n  /** @inheritdoc */\n  getMode(): ModalManagerMode {\n    return this.mode;\n  }\n\n  /** @inheritdoc */\n  closeModal(): void {\n    this.mode = ModalManagerMode.Closed;\n    this.customModalContent = undefined;\n    this.modalTemplate.config = new ModalConfig();\n    this.modal.deactivate();\n  }\n\n  /**\n   * Whether the modal should close if the user taps on the backdrop\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeOnBackdropClick = true;\n\n  /**\n   * A callback if the user closes the modal\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private userClosedModalCallback?: () => void;\n\n  /**\n   * Call the userClosedModalCallback and reset it if it exists\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private callUserClosedModalCallback(): void {\n    // we assign the callback to a temp var and undefine it before calling it\n    // otherwise, we run into the potential for an infinite loop if the\n    // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n    const callback = this.userClosedModalCallback;\n    this.userClosedModalCallback = undefined;\n    if (callback) callback();\n  }\n\n  /** @inheritdoc */\n  async showModal(options: {\n    config: ModalConfig;\n    customModalContent?: TemplateResult;\n    userClosedModalCallback?: () => void;\n  }): Promise<void> {\n    this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n    this.userClosedModalCallback = options.userClosedModalCallback;\n    this.modalTemplate.config = options.config;\n    this.customModalContent = options.customModalContent;\n    this.mode = ModalManagerMode.Open;\n    await this.modalTemplate.updateComplete;\n\n    this.modal.activate();\n\n    // document.addEventListener('keydown', this.tabHandler);\n\n    // this.firstFocusableElement.focus();\n    // console.log('firstFocusableElement', this.firstFocusableElement);\n    // console.log('lastFocusableElement', this.lastFocusableElement);\n    // console.log('focusableContent', this.focusableContent);\n\n    // this.modalTemplate.focus();\n  }\n\n  /** @inheritdoc */\n  updated(changed: PropertyValues): void {\n    /* istanbul ignore else */\n    if (changed.has('mode')) {\n      this.handleModeChange();\n    }\n  }\n\n  /**\n   * Called when the backdrop is clicked\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private backdropClicked(): void {\n    if (this.closeOnBackdropClick) {\n      this.closeModal();\n      this.callUserClosedModalCallback();\n    }\n  }\n\n  /**\n   * Handle the mode change\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private handleModeChange(): void {\n    this.hostBridge.handleModeChange(this.mode);\n    this.emitModeChangeEvent();\n  }\n\n  /**\n   * Emit a modeChange event\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private emitModeChangeEvent(): void {\n    const event = new CustomEvent('modeChanged', {\n      detail: { mode: this.mode },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Called when the modal close button is pressed. Closes the modal.\n   *\n   * @private\n   * @memberof ModalManager\n   */\n  private closeButtonPressed(): void {\n    this.closeModal();\n    this.callUserClosedModalCallback();\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n    const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n    const modalWidth = css`var(--modalWidth, 32rem)`;\n    const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n    const modalZindex = css`var(--modalZindex, 2000)`;\n\n    return css`\n      .container {\n        width: 100%;\n        height: 100%;\n      }\n\n      .backdrop {\n        position: fixed;\n        top: 0;\n        left: 0;\n        background-color: ${modalBackdropColor};\n        width: 100%;\n        height: 100%;\n        z-index: ${modalBackdropZindex};\n      }\n\n      modal-template {\n        outline: 0;\n        position: fixed;\n        top: 0;\n        left: 50%;\n        transform: translate(-50%, 0);\n        z-index: ${modalZindex};\n        width: ${modalWidth};\n        max-width: ${modalMaxWidth};\n      }\n    `;\n  }\n}\n"]}

package/dist/src/shoelace/active-elements.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Use a generator so we can iterate and possibly break early.
+ * @example
+ *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
+ *   const allActiveElements = [...activeElements()]
+ *
+ *   // Early return
+ *   for (const activeElement of activeElements()) {
+ *     if (<cond>) {
+ *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *     }
+ *   }
+ */
+export declare function activeElements(activeElement?: Element | null): Generator<Element>;
+export declare function getDeepestActiveElement(): Element | undefined;

package/dist/src/shoelace/active-elements.js

@@ -0,0 +1,27 @@
+/**
+ * Use a generator so we can iterate and possibly break early.
+ * @example
+ *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
+ *   const allActiveElements = [...activeElements()]
+ *
+ *   // Early return
+ *   for (const activeElement of activeElements()) {
+ *     if (<cond>) {
+ *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *     }
+ *   }
+ */
+export function* activeElements(activeElement = document.activeElement) {
+    if (activeElement === null || activeElement === undefined)
+        return;
+    yield activeElement;
+    if ('shadowRoot' in activeElement &&
+        activeElement.shadowRoot &&
+        activeElement.shadowRoot.mode !== 'closed') {
+        yield* activeElements(activeElement.shadowRoot.activeElement);
+    }
+}
+export function getDeepestActiveElement() {
+    return [...activeElements()].pop();
+}
+//# sourceMappingURL=active-elements.js.map

package/dist/src/shoelace/active-elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-elements.js","sourceRoot":"","sources":["../../../src/shoelace/active-elements.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,SAAS,CAAC,CAAC,cAAc,CAC7B,gBAAgC,QAAQ,CAAC,aAAa;IAEtD,IAAI,aAAa,KAAK,IAAI,IAAI,aAAa,KAAK,SAAS;QAAE,OAAO;IAElE,MAAM,aAAa,CAAC;IAEpB,IACE,YAAY,IAAI,aAAa;QAC7B,aAAa,CAAC,UAAU;QACxB,aAAa,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAC1C;QACA,KAAK,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;KAC/D;AACH,CAAC;AAED,MAAM,UAAU,uBAAuB;IACrC,OAAO,CAAC,GAAG,cAAc,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC;AACrC,CAAC","sourcesContent":["/**\n * Use a generator so we can iterate and possibly break early.\n * @example\n *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.\n *   const allActiveElements = [...activeElements()]\n *\n *   // Early return\n *   for (const activeElement of activeElements()) {\n *     if (<cond>) {\n *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!\n *     }\n *   }\n */\nexport function* activeElements(\n  activeElement: Element | null = document.activeElement\n): Generator<Element> {\n  if (activeElement === null || activeElement === undefined) return;\n\n  yield activeElement;\n\n  if (\n    'shadowRoot' in activeElement &&\n    activeElement.shadowRoot &&\n    activeElement.shadowRoot.mode !== 'closed'\n  ) {\n    yield* activeElements(activeElement.shadowRoot.activeElement);\n  }\n}\n\nexport function getDeepestActiveElement() {\n  return [...activeElements()].pop();\n}\n"]}

package/dist/src/shoelace/modal.d.ts

@@ -0,0 +1,24 @@
+export default class Modal {
+    element: HTMLElement;
+    isExternalActivated: boolean;
+    tabDirection: 'forward' | 'backward';
+    currentFocus: HTMLElement | null;
+    previousFocus: HTMLElement | null;
+    elementsWithTabbableControls: string[];
+    constructor(element: HTMLElement);
+    /** Activates focus trapping. */
+    activate(): void;
+    /** Deactivates focus trapping. */
+    deactivate(): void;
+    /** Determines if this modal element is currently active or not. */
+    isActive(): boolean;
+    /** Activates external modal behavior and temporarily disables focus trapping. */
+    activateExternal(): void;
+    /** Deactivates external modal behavior and re-enables focus trapping. */
+    deactivateExternal(): void;
+    private checkFocus;
+    private handleFocusIn;
+    private possiblyHasTabbableChildren;
+    private handleKeyDown;
+    private handleKeyUp;
+}

package/dist/src/shoelace/modal.js

@@ -0,0 +1,131 @@
+import { activeElements, getDeepestActiveElement } from './active-elements.js';
+import { getTabbableElements } from './tabbable.js';
+let activeModals = [];
+export default class Modal {
+    constructor(element) {
+        this.isExternalActivated = false;
+        this.tabDirection = 'forward';
+        this.currentFocus = null;
+        this.previousFocus = null;
+        this.handleFocusIn = () => {
+            if (!this.isActive())
+                return;
+            this.checkFocus();
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            if (event.key !== 'Tab' || this.isExternalActivated)
+                return;
+            if (!this.isActive())
+                return;
+            // Because sometimes focus can actually be taken over from outside sources,
+            // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and
+            // recurse through shadowRoots.
+            const currentActiveElement = getDeepestActiveElement();
+            this.previousFocus = currentActiveElement;
+            if (this.previousFocus &&
+                this.possiblyHasTabbableChildren(this.previousFocus)) {
+                return;
+            }
+            if (event.shiftKey) {
+                this.tabDirection = 'backward';
+            }
+            else {
+                this.tabDirection = 'forward';
+            }
+            const tabbableElements = getTabbableElements(this.element);
+            let currentFocusIndex = tabbableElements.findIndex(el => el === currentActiveElement);
+            this.previousFocus = this.currentFocus;
+            const addition = this.tabDirection === 'forward' ? 1 : -1;
+            // eslint-disable-next-line
+            while (true) {
+                if (currentFocusIndex + addition >= tabbableElements.length) {
+                    currentFocusIndex = 0;
+                }
+                else if (currentFocusIndex + addition < 0) {
+                    currentFocusIndex = tabbableElements.length - 1;
+                }
+                else {
+                    currentFocusIndex += addition;
+                }
+                this.previousFocus = this.currentFocus;
+                const nextFocus = 
+                /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];
+                // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element
+                // that possibly has "controls"
+                if (this.tabDirection === 'backward') {
+                    if (this.previousFocus &&
+                        this.possiblyHasTabbableChildren(this.previousFocus)) {
+                        return;
+                    }
+                }
+                if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {
+                    return;
+                }
+                event.preventDefault();
+                this.currentFocus = nextFocus;
+                (_a = this.currentFocus) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: false });
+                // Check to make sure focus actually changed. It may not always be the next focus, we just don't want it to be the previousFocus.
+                const allActiveElements = [...activeElements()];
+                if (allActiveElements.includes(this.currentFocus) ||
+                    !allActiveElements.includes(this.previousFocus)) {
+                    break;
+                }
+            }
+            setTimeout(() => this.checkFocus());
+        };
+        this.handleKeyUp = () => {
+            this.tabDirection = 'forward';
+        };
+        this.element = element;
+        this.elementsWithTabbableControls = ['iframe'];
+    }
+    /** Activates focus trapping. */
+    activate() {
+        activeModals.push(this.element);
+        document.addEventListener('focusin', this.handleFocusIn);
+        document.addEventListener('keydown', this.handleKeyDown);
+        document.addEventListener('keyup', this.handleKeyUp);
+    }
+    /** Deactivates focus trapping. */
+    deactivate() {
+        activeModals = activeModals.filter(modal => modal !== this.element);
+        this.currentFocus = null;
+        document.removeEventListener('focusin', this.handleFocusIn);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        document.removeEventListener('keyup', this.handleKeyUp);
+    }
+    /** Determines if this modal element is currently active or not. */
+    isActive() {
+        // The "active" modal is always the most recent one shown
+        return activeModals[activeModals.length - 1] === this.element;
+    }
+    /** Activates external modal behavior and temporarily disables focus trapping. */
+    activateExternal() {
+        this.isExternalActivated = true;
+    }
+    /** Deactivates external modal behavior and re-enables focus trapping. */
+    deactivateExternal() {
+        this.isExternalActivated = false;
+    }
+    checkFocus() {
+        if (this.isActive() && !this.isExternalActivated) {
+            const tabbableElements = getTabbableElements(this.element);
+            if (!this.element.matches(':focus-within')) {
+                const start = tabbableElements[0];
+                const end = tabbableElements[tabbableElements.length - 1];
+                const target = this.tabDirection === 'forward' ? start : end;
+                if (typeof (target === null || target === void 0 ? void 0 : target.focus) === 'function') {
+                    this.currentFocus = target;
+                    target.focus({ preventScroll: false });
+                }
+            }
+        }
+    }
+    possiblyHasTabbableChildren(element) {
+        return (this.elementsWithTabbableControls.includes(element.tagName.toLowerCase()) || element.hasAttribute('controls')
+        // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?
+        );
+    }
+}
+//# sourceMappingURL=modal.js.map

package/dist/src/shoelace/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/shoelace/modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { activeElements, getDeepestActiveElement } from './active-elements.js';\nimport { getTabbableElements } from './tabbable.js';\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  isExternalActivated: boolean = false;\n  tabDirection: 'forward' | 'backward' = 'forward';\n  currentFocus: HTMLElement | null = null;\n  previousFocus: HTMLElement | null = null;\n  elementsWithTabbableControls: string[];\n\n  constructor(element: HTMLElement) {\n    this.element = element;\n\n    this.elementsWithTabbableControls = ['iframe'];\n  }\n\n  /** Activates focus trapping. */\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n    document.addEventListener('keydown', this.handleKeyDown);\n    document.addEventListener('keyup', this.handleKeyUp);\n  }\n\n  /** Deactivates focus trapping. */\n  deactivate() {\n    activeModals = activeModals.filter(modal => modal !== this.element);\n    this.currentFocus = null;\n    document.removeEventListener('focusin', this.handleFocusIn);\n    document.removeEventListener('keydown', this.handleKeyDown);\n    document.removeEventListener('keyup', this.handleKeyUp);\n  }\n\n  /** Determines if this modal element is currently active or not. */\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  /** Activates external modal behavior and temporarily disables focus trapping. */\n  activateExternal() {\n    this.isExternalActivated = true;\n  }\n\n  /** Deactivates external modal behavior and re-enables focus trapping. */\n  deactivateExternal() {\n    this.isExternalActivated = false;\n  }\n\n  private checkFocus() {\n    if (this.isActive() && !this.isExternalActivated) {\n      const tabbableElements = getTabbableElements(this.element);\n      if (!this.element.matches(':focus-within')) {\n        const start = tabbableElements[0];\n        const end = tabbableElements[tabbableElements.length - 1];\n        const target = this.tabDirection === 'forward' ? start : end;\n\n        if (typeof target?.focus === 'function') {\n          this.currentFocus = target;\n          target.focus({ preventScroll: false });\n        }\n      }\n    }\n  }\n\n  private handleFocusIn = () => {\n    if (!this.isActive()) return;\n    this.checkFocus();\n  };\n\n  private possiblyHasTabbableChildren(element: HTMLElement) {\n    return (\n      this.elementsWithTabbableControls.includes(\n        element.tagName.toLowerCase()\n      ) || element.hasAttribute('controls')\n      // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?\n    );\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Tab' || this.isExternalActivated) return;\n    if (!this.isActive()) return;\n\n    // Because sometimes focus can actually be taken over from outside sources,\n    // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and\n    // recurse through shadowRoots.\n    const currentActiveElement = getDeepestActiveElement();\n    this.previousFocus = currentActiveElement as HTMLElement | null;\n\n    if (\n      this.previousFocus &&\n      this.possiblyHasTabbableChildren(this.previousFocus)\n    ) {\n      return;\n    }\n\n    if (event.shiftKey) {\n      this.tabDirection = 'backward';\n    } else {\n      this.tabDirection = 'forward';\n    }\n\n    const tabbableElements = getTabbableElements(this.element);\n\n    let currentFocusIndex = tabbableElements.findIndex(\n      el => el === currentActiveElement\n    );\n\n    this.previousFocus = this.currentFocus;\n\n    const addition = this.tabDirection === 'forward' ? 1 : -1;\n\n    // eslint-disable-next-line\n    while (true) {\n      if (currentFocusIndex + addition >= tabbableElements.length) {\n        currentFocusIndex = 0;\n      } else if (currentFocusIndex + addition < 0) {\n        currentFocusIndex = tabbableElements.length - 1;\n      } else {\n        currentFocusIndex += addition;\n      }\n\n      this.previousFocus = this.currentFocus;\n      const nextFocus =\n        /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];\n\n      // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element\n      // that possibly has \"controls\"\n      if (this.tabDirection === 'backward') {\n        if (\n          this.previousFocus &&\n          this.possiblyHasTabbableChildren(this.previousFocus)\n        ) {\n          return;\n        }\n      }\n\n      if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {\n        return;\n      }\n\n      event.preventDefault();\n      this.currentFocus = nextFocus;\n      this.currentFocus?.focus({ preventScroll: false });\n\n      // Check to make sure focus actually changed. It may not always be the next focus, we just don't want it to be the previousFocus.\n      const allActiveElements = [...activeElements()];\n      if (\n        allActiveElements.includes(this.currentFocus) ||\n        !allActiveElements.includes(this.previousFocus!)\n      ) {\n        break;\n      }\n    }\n\n    setTimeout(() => this.checkFocus());\n  };\n\n  private handleKeyUp = () => {\n    this.tabDirection = 'forward';\n  };\n}\n"]}

package/dist/src/shoelace/tabbable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+    start: HTMLElement;
+    end: HTMLElement;
+};
+export declare function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];

package/dist/src/shoelace/tabbable.js

@@ -0,0 +1,168 @@
+// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.
+// computedStyle calls are "live" so they only need to be retrieved once for an element.
+const computedStyleMap = new WeakMap();
+function getCachedComputedStyle(el) {
+    let computedStyle = computedStyleMap.get(el);
+    if (!computedStyle) {
+        computedStyle = window.getComputedStyle(el, null);
+        computedStyleMap.set(el, computedStyle);
+    }
+    return computedStyle;
+}
+function isVisible(el) {
+    // This is the fastest check, but isn't supported in Safari.  
+    if ('checkVisibility' in el && typeof el['checkVisibility'] === 'function') {
+        // Opacity is focusable, visibility is not.
+        return el['checkVisibility']({
+            checkOpacity: false,
+            checkVisibilityCSS: true,
+        });
+    }
+    // Fallback "polyfill" for "checkVisibility"
+    const computedStyle = getCachedComputedStyle(el);
+    return (computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none');
+}
+// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable
+// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most
+// accessible way of handling overflow areas. [Konnor]
+function isOverflowingAndTabbable(el) {
+    const computedStyle = getCachedComputedStyle(el);
+    const { overflowY, overflowX } = computedStyle;
+    if (overflowY === 'scroll' || overflowX === 'scroll') {
+        return true;
+    }
+    if (overflowY !== 'auto' || overflowX !== 'auto') {
+        return false;
+    }
+    // Always overflow === "auto" by this point
+    const isOverflowingY = el.scrollHeight > el.clientHeight;
+    if (isOverflowingY && overflowY === 'auto') {
+        return true;
+    }
+    const isOverflowingX = el.scrollWidth > el.clientWidth;
+    if (isOverflowingX && overflowX === 'auto') {
+        return true;
+    }
+    return false;
+}
+/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
+function isTabbable(el) {
+    const tag = el.tagName.toLowerCase();
+    const tabindex = Number(el.getAttribute('tabindex'));
+    const hasTabindex = el.hasAttribute('tabindex');
+    // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable
+    if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
+        return false;
+    }
+    // Elements with a disabled attribute are not tabbable
+    if (el.hasAttribute('disabled')) {
+        return false;
+    }
+    // If any parents have "inert", we aren't "tabbable"
+    if (el.closest('[inert]')) {
+        return false;
+    }
+    // Radios without a checked attribute are not tabbable
+    if (tag === 'input' &&
+        el.getAttribute('type') === 'radio' &&
+        !el.hasAttribute('checked')) {
+        return false;
+    }
+    if (!isVisible(el)) {
+        return false;
+    }
+    // Audio and video elements with the controls attribute are tabbable
+    if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {
+        return true;
+    }
+    // Elements with a tabindex other than -1 are tabbable
+    if (el.hasAttribute('tabindex')) {
+        return true;
+    }
+    // Elements with a contenteditable attribute are tabbable
+    if (el.hasAttribute('contenteditable') &&
+        el.getAttribute('contenteditable') !== 'false') {
+        return true;
+    }
+    // At this point, the following elements are considered tabbable
+    const isNativelyTabbable = [
+        'button',
+        'input',
+        'select',
+        'textarea',
+        'a',
+        'audio',
+        'video',
+        'summary',
+        'iframe',
+    ].includes(tag);
+    if (isNativelyTabbable) {
+        return true;
+    }
+    // We save the overflow checks for last, because they're the most expensive
+    return isOverflowingAndTabbable(el);
+}
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export function getTabbableBoundary(root) {
+    var _a, _b;
+    const tabbableElements = getTabbableElements(root);
+    // Find the first and last tabbable elements
+    const start = (_a = tabbableElements[0]) !== null && _a !== void 0 ? _a : null;
+    const end = (_b = tabbableElements[tabbableElements.length - 1]) !== null && _b !== void 0 ? _b : null;
+    return { start, end };
+}
+/**
+ * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.
+ * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.
+ * This fixes that fun edge case.
+ */
+function getSlottedChildrenOutsideRootElement(slotElement, root) {
+    var _a;
+    return (((_a = slotElement.getRootNode({ composed: true })) === null || _a === void 0 ? void 0 : _a.host) !==
+        root);
+}
+export function getTabbableElements(root) {
+    const walkedEls = new WeakMap();
+    const tabbableElements = [];
+    function walk(el) {
+        if (el instanceof Element) {
+            // if the element has "inert" we can just no-op it.
+            if (el.hasAttribute('inert') || el.closest('[inert]')) {
+                return;
+            }
+            if (walkedEls.has(el)) {
+                return;
+            }
+            walkedEls.set(el, true);
+            if (!tabbableElements.includes(el) && isTabbable(el)) {
+                tabbableElements.push(el);
+            }
+            if (el instanceof HTMLSlotElement &&
+                getSlottedChildrenOutsideRootElement(el, root)) {
+                el.assignedElements({ flatten: true }).forEach((assignedEl) => {
+                    walk(assignedEl);
+                });
+            }
+            if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
+                walk(el.shadowRoot);
+            }
+        }
+        for (const e of Array.from(el.children)) {
+            walk(e);
+        }
+    }
+    // Collect all elements including the root
+    walk(root);
+    // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.
+    // So is it worth being right? Or fast?
+    return tabbableElements.sort((a, b) => {
+        // Make sure we sort by tabindex.
+        const aTabindex = Number(a.getAttribute('tabindex')) || 0;
+        const bTabindex = Number(b.getAttribute('tabindex')) || 0;
+        return bTabindex - aTabindex;
+    });
+}
+//# sourceMappingURL=tabbable.js.map

package/dist/src/shoelace/tabbable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbable.js","sourceRoot":"","sources":["../../../src/shoelace/tabbable.ts"],"names":[],"mappings":"AAAA,uGAAuG;AACvG,wFAAwF;AACxF,MAAM,gBAAgB,GAAG,IAAI,OAAO,EAAgC,CAAC;AAErE,SAAS,sBAAsB,CAAC,EAAe;IAC7C,IAAI,aAAa,GAAoC,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAE9E,IAAI,CAAC,aAAa,EAAE;QAClB,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QAClD,gBAAgB,CAAC,GAAG,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;KACzC;IAED,OAAO,aAAa,CAAC;AACvB,CAAC;AAED,SAAS,SAAS,CAAC,EAAe;IAChC,8DAA8D;IAC9D,IAAI,iBAAiB,IAAI,EAAE,IAAI,OAAO,EAAE,CAAC,iBAAiB,CAAC,KAAK,UAAU,EAAE;QAC1E,2CAA2C;QAC3C,OAAQ,EAAU,CAAC,iBAAiB,CAAC,CAAC;YACpC,YAAY,EAAE,KAAK;YACnB,kBAAkB,EAAE,IAAI;SACzB,CAAC,CAAC;KACJ;IAED,4CAA4C;IAC5C,MAAM,aAAa,GAAG,sBAAsB,CAAC,EAAiB,CAAC,CAAC;IAEhE,OAAO,CACL,aAAa,CAAC,UAAU,KAAK,QAAQ,IAAI,aAAa,CAAC,OAAO,KAAK,MAAM,CAC1E,CAAC;AACJ,CAAC;AAED,8FAA8F;AAC9F,2FAA2F;AAC3F,sDAAsD;AACtD,SAAS,wBAAwB,CAAC,EAAe;IAC/C,MAAM,aAAa,GAAG,sBAAsB,CAAC,EAAE,CAAC,CAAC;IAEjD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC;IAE/C,IAAI,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,QAAQ,EAAE;QACpD,OAAO,IAAI,CAAC;KACb;IAED,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,MAAM,EAAE;QAChD,OAAO,KAAK,CAAC;KACd;IAED,2CAA2C;IAC3C,MAAM,cAAc,GAAG,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;IAEzD,IAAI,cAAc,IAAI,SAAS,KAAK,MAAM,EAAE;QAC1C,OAAO,IAAI,CAAC;KACb;IAED,MAAM,cAAc,GAAG,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC;IAEvD,IAAI,cAAc,IAAI,SAAS,KAAK,MAAM,EAAE;QAC1C,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,0HAA0H;AAC1H,SAAS,UAAU,CAAC,EAAe;IACjC,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;IAErC,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAEhD,kFAAkF;IAClF,IAAI,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,QAAQ,IAAI,CAAC,CAAC,CAAC,EAAE;QACtD,OAAO,KAAK,CAAC;KACd;IAED,sDAAsD;IACtD,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;QAC/B,OAAO,KAAK,CAAC;KACd;IAED,oDAAoD;IACpD,IAAI,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;QACzB,OAAO,KAAK,CAAC;KACd;IAED,sDAAsD;IACtD,IACE,GAAG,KAAK,OAAO;QACf,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,OAAO;QACnC,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,EAC3B;QACA,OAAO,KAAK,CAAC;KACd;IAED,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE;QAClB,OAAO,KAAK,CAAC;KACd;IAED,oEAAoE;IACpE,IAAI,CAAC,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;QACvE,OAAO,IAAI,CAAC;KACb;IAED,sDAAsD;IACtD,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;QAC/B,OAAO,IAAI,CAAC;KACb;IAED,yDAAyD;IACzD,IACE,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC;QAClC,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,KAAK,OAAO,EAC9C;QACA,OAAO,IAAI,CAAC;KACb;IAED,gEAAgE;IAChE,MAAM,kBAAkB,GAAG;QACzB,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,UAAU;QACV,GAAG;QACH,OAAO;QACP,OAAO;QACP,SAAS;QACT,QAAQ;KACT,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhB,IAAI,kBAAkB,EAAE;QACtB,OAAO,IAAI,CAAC;KACb;IAED,2EAA2E;IAC3E,OAAO,wBAAwB,CAAC,EAAE,CAAC,CAAC;AACtC,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAA8B;;IAChE,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAEnD,4CAA4C;IAC5C,MAAM,KAAK,GAAG,MAAA,gBAAgB,CAAC,CAAC,CAAC,mCAAI,IAAI,CAAC;IAC1C,MAAM,GAAG,GAAG,MAAA,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC;IAElE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AACxB,CAAC;AAED;;;;GAIG;AACH,SAAS,oCAAoC,CAC3C,WAA4B,EAC5B,IAA8B;;IAE9B,OAAO,CACL,CAAA,MAAC,WAAW,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAuB,0CAAE,IAAI;QACxE,IAAI,CACL,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,IAA8B;IAChE,MAAM,SAAS,GAAG,IAAI,OAAO,EAAE,CAAC;IAChC,MAAM,gBAAgB,GAAkB,EAAE,CAAC;IAE3C,SAAS,IAAI,CAAC,EAA4B;QACxC,IAAI,EAAE,YAAY,OAAO,EAAE;YACzB,mDAAmD;YACnD,IAAI,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;gBACrD,OAAO;aACR;YAED,IAAI,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;gBACrB,OAAO;aACR;YACD,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;YAExB,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,UAAU,CAAC,EAAE,CAAC,EAAE;gBACpD,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aAC3B;YAED,IACE,EAAE,YAAY,eAAe;gBAC7B,oCAAoC,CAAC,EAAE,EAAE,IAAI,CAAC,EAC9C;gBACA,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAC5C,CAAC,UAAmB,EAAE,EAAE;oBACtB,IAAI,CAAC,UAAsC,CAAC,CAAC;gBAC/C,CAAC,CACF,CAAC;aACH;YAED,IAAI,EAAE,CAAC,UAAU,KAAK,IAAI,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,KAAK,MAAM,EAAE;gBAC3D,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;aACrB;SACF;QAED,KAAK,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAkB,EAAE;YACxD,IAAI,CAAC,CAAC,CAAC,CAAC;SACT;IACH,CAAC;IAED,0CAA0C;IAC1C,IAAI,CAAC,IAAI,CAAC,CAAC;IAEX,yHAAyH;IACzH,uCAAuC;IACvC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACpC,iCAAiC;QACjC,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;QAC1D,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;QAC1D,OAAO,SAAS,GAAG,SAAS,CAAC;IAC/B,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.\n// computedStyle calls are \"live\" so they only need to be retrieved once for an element.\nconst computedStyleMap = new WeakMap<Element, CSSStyleDeclaration>();\n\nfunction getCachedComputedStyle(el: HTMLElement): CSSStyleDeclaration {\n  let computedStyle: undefined | CSSStyleDeclaration = computedStyleMap.get(el);\n\n  if (!computedStyle) {\n    computedStyle = window.getComputedStyle(el, null);\n    computedStyleMap.set(el, computedStyle);\n  }\n\n  return computedStyle;\n}\n\nfunction isVisible(el: HTMLElement): boolean {\n  // This is the fastest check, but isn't supported in Safari.  \n  if ('checkVisibility' in el && typeof el['checkVisibility'] === 'function') {\n    // Opacity is focusable, visibility is not.\n    return (el as any)['checkVisibility']({\n      checkOpacity: false,\n      checkVisibilityCSS: true,\n    });\n  }\n\n  // Fallback \"polyfill\" for \"checkVisibility\"\n  const computedStyle = getCachedComputedStyle(el as HTMLElement);\n\n  return (\n    computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none'\n  );\n}\n\n// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable\n// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most\n// accessible way of handling overflow areas. [Konnor]\nfunction isOverflowingAndTabbable(el: HTMLElement): boolean {\n  const computedStyle = getCachedComputedStyle(el);\n\n  const { overflowY, overflowX } = computedStyle;\n\n  if (overflowY === 'scroll' || overflowX === 'scroll') {\n    return true;\n  }\n\n  if (overflowY !== 'auto' || overflowX !== 'auto') {\n    return false;\n  }\n\n  // Always overflow === \"auto\" by this point\n  const isOverflowingY = el.scrollHeight > el.clientHeight;\n\n  if (isOverflowingY && overflowY === 'auto') {\n    return true;\n  }\n\n  const isOverflowingX = el.scrollWidth > el.clientWidth;\n\n  if (isOverflowingX && overflowX === 'auto') {\n    return true;\n  }\n\n  return false;\n}\n\n/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  const tabindex = Number(el.getAttribute('tabindex'));\n  const hasTabindex = el.hasAttribute('tabindex');\n\n  // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable\n  if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // If any parents have \"inert\", we aren't \"tabbable\"\n  if (el.closest('[inert]')) {\n    return false;\n  }\n\n  // Radios without a checked attribute are not tabbable\n  if (\n    tag === 'input' &&\n    el.getAttribute('type') === 'radio' &&\n    !el.hasAttribute('checked')\n  ) {\n    return false;\n  }\n\n  if (!isVisible(el)) {\n    return false;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (\n    el.hasAttribute('contenteditable') &&\n    el.getAttribute('contenteditable') !== 'false'\n  ) {\n    return true;\n  }\n\n  // At this point, the following elements are considered tabbable\n  const isNativelyTabbable = [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n    'iframe',\n  ].includes(tag);\n\n  if (isNativelyTabbable) {\n    return true;\n  }\n\n  // We save the overflow checks for last, because they're the most expensive\n  return isOverflowingAndTabbable(el);\n}\n\n/**\n * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single\n * element because it short-circuits after finding the first and last ones.\n */\nexport function getTabbableBoundary(root: HTMLElement | ShadowRoot) {\n  const tabbableElements = getTabbableElements(root);\n\n  // Find the first and last tabbable elements\n  const start = tabbableElements[0] ?? null;\n  const end = tabbableElements[tabbableElements.length - 1] ?? null;\n\n  return { start, end };\n}\n\n/**\n * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.\n * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.\n * This fixes that fun edge case.\n */\nfunction getSlottedChildrenOutsideRootElement(\n  slotElement: HTMLSlotElement,\n  root: HTMLElement | ShadowRoot\n) {\n  return (\n    (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !==\n    root\n  );\n}\n\nexport function getTabbableElements(root: HTMLElement | ShadowRoot) {\n  const walkedEls = new WeakMap();\n  const tabbableElements: HTMLElement[] = [];\n\n  function walk(el: HTMLElement | ShadowRoot) {\n    if (el instanceof Element) {\n      // if the element has \"inert\" we can just no-op it.\n      if (el.hasAttribute('inert') || el.closest('[inert]')) {\n        return;\n      }\n\n      if (walkedEls.has(el)) {\n        return;\n      }\n      walkedEls.set(el, true);\n\n      if (!tabbableElements.includes(el) && isTabbable(el)) {\n        tabbableElements.push(el);\n      }\n\n      if (\n        el instanceof HTMLSlotElement &&\n        getSlottedChildrenOutsideRootElement(el, root)\n      ) {\n        el.assignedElements({ flatten: true }).forEach(\n          (assignedEl: Element) => {\n            walk(assignedEl as HTMLElement | ShadowRoot);\n          }\n        );\n      }\n\n      if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {\n        walk(el.shadowRoot);\n      }\n    }\n\n    for (const e of Array.from(el.children) as HTMLElement[]) {\n      walk(e);\n    }\n  }\n\n  // Collect all elements including the root\n  walk(root);\n\n  // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.\n  // So is it worth being right? Or fast?\n  return tabbableElements.sort((a, b) => {\n    // Make sure we sort by tabindex.\n    const aTabindex = Number(a.getAttribute('tabindex')) || 0;\n    const bTabindex = Number(b.getAttribute('tabindex')) || 0;\n    return bTabindex - aTabindex;\n  });\n}\n"]}

package/dist/test/modal-manager.test.js

@@ -42,7 +42,7 @@ describe('Modal Manager', () => {
         setTimeout(() => {
             el.showModal({ config });
         });
-        const response = yield oneEvent(el, 'modeChanged');
+        const response = yield oneEvent(el, 'modeChanged', false);
         expect(response.detail.mode).to.equal(ModalManagerMode.Open);
     }));
     it('emits a modeChanged event when closing', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -55,7 +55,7 @@ describe('Modal Manager', () => {
         setTimeout(() => {
             el.closeModal();
         });
-        const response = yield oneEvent(el, 'modeChanged');
+        const response = yield oneEvent(el, 'modeChanged', false);
         expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
     }));
     it('can show a modal', () => __awaiter(void 0, void 0, void 0, function* () {