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

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

@@ -1,5 +1,4 @@
 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';
@@ -23,7 +22,7 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
      */
     customModalContent?: TemplateResult;
     /**
-     * This hostBridge handles environmental-specific interactions such as adding classes
+     * Thie 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
@@ -41,9 +40,6 @@ 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,7 +1,6 @@
 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';
@@ -19,7 +18,7 @@ let ModalManager = class ModalManager extends LitElement {
          */
         this.mode = ModalManagerMode.Closed;
         /**
-         * This hostBridge handles environmental-specific interactions such as adding classes
+         * Thie 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
@@ -29,8 +28,6 @@ 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
          *
@@ -39,17 +36,6 @@ 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 `
@@ -57,7 +43,7 @@ let ModalManager = class ModalManager extends LitElement {
         <div class="backdrop" @click=${this.backdropClicked}></div>
         <modal-template
           @closeButtonPressed=${this.closeButtonPressed}
-          tabindex="-1"
+          tabindex="0"
         >
           ${this.customModalContent}
         </modal-template>
@@ -73,7 +59,6 @@ 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
@@ -99,13 +84,7 @@ let ModalManager = class ModalManager extends LitElement {
             this.customModalContent = options.customModalContent;
             this.mode = ModalManagerMode.Open;
             yield this.modalTemplate.updateComplete;
-            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();
+            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 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"]}
+{"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"]}

package/dist/src/shoelace/tabbable.js

@@ -10,9 +10,10 @@ function getCachedComputedStyle(el) {
     return computedStyle;
 }
 function isVisible(el) {
-    // This is the fastest check, but isn't supported in Safari.  
+    // 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.
+        /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
         return el['checkVisibility']({
             checkOpacity: false,
             checkVisibilityCSS: true,

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

@@ -1 +1 @@
-{"version":3,"file":"tabbable.js","sourceRoot":"","sources":["../../../src/shoelace/tabbable.ts"],"names":[],"mappings":"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","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"]}
+{"version":3,"file":"tabbable.js","sourceRoot":"","sources":["../../../src/shoelace/tabbable.ts"],"names":[],"mappings":"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","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    /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */\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/index.html

@@ -56,7 +56,7 @@
 
     render(
       html`
-        <modal-manager tabindex="-1">
+        <modal-manager>
           <div slot="slot-content-demo">
             <p>Slotted Content</p>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/modal-manager",
-  "version": "0.9.1-alpha.0",
+  "version": "1.0.0",
   "description": "A Modal Manager Web Component",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "circular": "madge --circular .",
     "test": "tsc && npm run lint && npm run circular && karma start --coverage",
     "test:watch": "concurrently --kill-others --names tsc,karma \"npm run tsc:watch\" \"karma start --auto-watch=true --single-run=false\"",
-    "publish:alpha": "npm run test && npm run prepare && npm version prerelease --preid alpha && npm publish --tag alpha"
+    "publish:alpha": "npm run test && npm run prepare && npm version prerelease --preid alpha --no-git-tag-version && npm publish --tag alpha"
   },
   "dependencies": {
     "@internetarchive/ia-activity-indicator": "^0.0.4",

package/src/modal-manager.ts

@@ -8,8 +8,6 @@ import {
 } from 'lit';
 import { property, customElement, query } from 'lit/decorators.js';
 
-import Modal from './shoelace/modal';
-
 import './modal-template';
 import { ModalTemplate } from './modal-template';
 import { ModalConfig } from './modal-config';
@@ -40,7 +38,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
   @property({ type: Object }) customModalContent?: TemplateResult;
 
   /**
-   * This hostBridge handles environmental-specific interactions such as adding classes
+   * Thie 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
@@ -63,20 +61,6 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
    */
   @query('modal-template') private modalTemplate!: ModalTemplate;
 
-  // Imported tab handling from shoelace
-  public modal = new Modal(this);
-
-  async firstUpdated(): Promise<void> {
-    // Give the browser a chance to paint
-    // eslint-disable-next-line no-promise-executor-return
-    await new Promise(r => setTimeout(r, 0));
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.modal.deactivate();
-  }
-
   /** @inheritdoc */
   render(): TemplateResult {
     return html`
@@ -84,7 +68,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
         <div class="backdrop" @click=${this.backdropClicked}></div>
         <modal-template
           @closeButtonPressed=${this.closeButtonPressed}
-          tabindex="-1"
+          tabindex="0"
         >
           ${this.customModalContent}
         </modal-template>
@@ -102,7 +86,6 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
     this.mode = ModalManagerMode.Closed;
     this.customModalContent = undefined;
     this.modalTemplate.config = new ModalConfig();
-    this.modal.deactivate();
   }
 
   /**
@@ -148,17 +131,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
     this.customModalContent = options.customModalContent;
     this.mode = ModalManagerMode.Open;
     await this.modalTemplate.updateComplete;
-
-    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();
+    this.modalTemplate.focus();
   }
 
   /** @inheritdoc */

package/src/shoelace/active-elements.ts

@@ -1,32 +0,0 @@
-/**
- * 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: Element | null = document.activeElement
-): Generator<Element> {
-  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();
-}

package/src/shoelace/modal.ts

@@ -1,165 +0,0 @@
-import { activeElements, getDeepestActiveElement } from './active-elements.js';
-import { getTabbableElements } from './tabbable.js';
-
-let activeModals: HTMLElement[] = [];
-
-export default class Modal {
-  element: HTMLElement;
-  isExternalActivated: boolean = false;
-  tabDirection: 'forward' | 'backward' = 'forward';
-  currentFocus: HTMLElement | null = null;
-  previousFocus: HTMLElement | null = null;
-  elementsWithTabbableControls: string[];
-
-  constructor(element: HTMLElement) {
-    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;
-  }
-
-  private 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?.focus === 'function') {
-          this.currentFocus = target;
-          target.focus({ preventScroll: false });
-        }
-      }
-    }
-  }
-
-  private handleFocusIn = () => {
-    if (!this.isActive()) return;
-    this.checkFocus();
-  };
-
-  private possiblyHasTabbableChildren(element: HTMLElement) {
-    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?
-    );
-  }
-
-  private handleKeyDown = (event: KeyboardEvent) => {
-    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 as HTMLElement | null;
-
-    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;
-      this.currentFocus?.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());
-  };
-
-  private handleKeyUp = () => {
-    this.tabDirection = 'forward';
-  };
-}

package/src/shoelace/tabbable.ts

@@ -1,221 +0,0 @@
-// 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<Element, CSSStyleDeclaration>();
-
-function getCachedComputedStyle(el: HTMLElement): CSSStyleDeclaration {
-  let computedStyle: undefined | CSSStyleDeclaration = computedStyleMap.get(el);
-
-  if (!computedStyle) {
-    computedStyle = window.getComputedStyle(el, null);
-    computedStyleMap.set(el, computedStyle);
-  }
-
-  return computedStyle;
-}
-
-function isVisible(el: HTMLElement): boolean {
-  // 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 as any)['checkVisibility']({
-      checkOpacity: false,
-      checkVisibilityCSS: true,
-    });
-  }
-
-  // Fallback "polyfill" for "checkVisibility"
-  const computedStyle = getCachedComputedStyle(el as HTMLElement);
-
-  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: HTMLElement): boolean {
-  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: HTMLElement) {
-  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: HTMLElement | ShadowRoot) {
-  const tabbableElements = getTabbableElements(root);
-
-  // Find the first and last tabbable elements
-  const start = tabbableElements[0] ?? null;
-  const end = tabbableElements[tabbableElements.length - 1] ?? 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: HTMLSlotElement,
-  root: HTMLElement | ShadowRoot
-) {
-  return (
-    (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !==
-    root
-  );
-}
-
-export function getTabbableElements(root: HTMLElement | ShadowRoot) {
-  const walkedEls = new WeakMap();
-  const tabbableElements: HTMLElement[] = [];
-
-  function walk(el: HTMLElement | ShadowRoot) {
-    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: Element) => {
-            walk(assignedEl as HTMLElement | ShadowRoot);
-          }
-        );
-      }
-
-      if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
-        walk(el.shadowRoot);
-      }
-    }
-
-    for (const e of Array.from(el.children) as HTMLElement[]) {
-      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;
-  });
-}