npm - @internetarchive/modal-manager - Versions diffs - 1.0.0 → 1.0.3-alpha.1 - Mend

@internetarchive/modal-manager 1.0.0 → 1.0.3-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/.github/workflows/ci.yml +1 -1
package/.github/workflows/gh-pages-main.yml +1 -1
package/.github/workflows/pr-preview.yml +1 -1
package/dist/src/assets/ia-logo-icon.d.ts +2 -0
package/dist/src/assets/ia-logo-icon.js +30 -0
package/dist/src/assets/ia-logo-icon.js.map +1 -0
package/dist/src/modal-manager.d.ts +5 -1
package/dist/src/modal-manager.js +25 -2
package/dist/src/modal-manager.js.map +1 -1
package/dist/src/modal-template.js +10 -4
package/dist/src/modal-template.js.map +1 -1
package/dist/src/shoelace/active-elements.js +1 -0
package/dist/src/shoelace/active-elements.js.map +1 -1
package/dist/src/shoelace/modal.js +1 -0
package/dist/src/shoelace/modal.js.map +1 -1
package/dist/src/shoelace/tabbable.js +1 -0
package/dist/src/shoelace/tabbable.js.map +1 -1
package/dist/test/modal-manager.test.js +68 -20
package/dist/test/modal-manager.test.js.map +1 -1
package/dist/test/modal-template.test.js +23 -12
package/dist/test/modal-template.test.js.map +1 -1
package/index.html +7 -3
package/package.json +1 -1
package/src/assets/ia-logo-icon.ts +30 -0
package/src/modal-manager.ts +28 -2
package/src/modal-template.ts +12 -4
package/src/shoelace/LICENSE.md +7 -0
package/src/shoelace/active-elements.ts +33 -0
package/src/shoelace/modal.ts +166 -0
package/src/shoelace/tabbable.ts +223 -0
package/test/modal-manager.test.ts +83 -14
package/test/modal-template.test.ts +13 -0

package/.github/workflows/ci.yml CHANGED Viewed

@@ -14,7 +14,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 16.x
+        node-version: 20.x
     - name: Install dependencies
       run: npm install

package/.github/workflows/gh-pages-main.yml CHANGED Viewed

@@ -19,7 +19,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20.x
       - name: Install dependencies
         run: npm install

package/.github/workflows/pr-preview.yml CHANGED Viewed

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20.x
       - name: Install and Build
         run: |

package/dist/src/assets/ia-logo-icon.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const _default: import("lit-html").TemplateResult<1>;
2	+ export default _default;

package/dist/src/assets/ia-logo-icon.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+export default html `
+  <svg
+    class="ia-logo"
+    viewBox="0 0 27 30"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="logoTitleID logoDescID"
+  >
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">
+      A line drawing of the Internet Archive headquarters building façade.
+    </desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" class="fill-color">
+        <path
+          d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z"
+          id="path-1"
+        ></path>
+      </mask>
+      <use class="fill-color" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" class="fill-color">
+        <path
+          d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z"
+          id="swatch"
+        ></path>
+      </g>
+    </g>
+  </svg>
+`;
+//# sourceMappingURL=ia-logo-icon.js.map

package/dist/src/assets/ia-logo-icon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ia-logo-icon.js","sourceRoot":"","sources":["../../../src/assets/ia-logo-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,eAAe,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlB,CAAC","sourcesContent":["import { html } from 'lit';\n\nexport default html`\n <svg\n class=\"ia-logo\"\n viewBox=\"0 0 27 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby=\"logoTitleID logoDescID\"\n >\n <title id=\"logoTitleID\">Internet Archive logo</title>\n <desc id=\"logoDescID\">\n A line drawing of the Internet Archive headquarters building façade.\n </desc>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <mask id=\"mask-2\" class=\"fill-color\">\n <path\n d=\"M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z\"\n id=\"path-1\"\n ></path>\n </mask>\n <use class=\"fill-color\" xlink:href=\"#path-1\"></use>\n <g mask=\"url(#mask-2)\" class=\"fill-color\">\n <path\n d=\"M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z\"\n id=\"swatch\"\n ></path>\n </g>\n </g>\n </svg>\n`;\n"]}

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

@@ -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 CHANGED Viewed

@@ -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,24 @@ 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));
+            if (this.closeOnBackdropClick) {
+                this.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        this.backdropClicked();
+                    }
+                });
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.modal.deactivate();
+    }
     /** @inheritdoc */
     render() {
         return html `
@@ -43,7 +64,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 +80,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
@@ -85,6 +107,7 @@ let ModalManager = class ModalManager extends LitElement {
             this.mode = ModalManagerMode.Open;
             yield this.modalTemplate.updateComplete;
             this.modalTemplate.focus();
+            this.modal.activate();
         });
     }
     /** @inheritdoc */

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

	@@ -1 +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"]}
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 if (this.closeOnBackdropClick) {\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.backdropClicked();\n }\n });\n }\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 this.modalTemplate.focus();\n this.modal.activate();\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/modal-template.js CHANGED Viewed

@@ -3,8 +3,8 @@ import { LitElement, html, css, nothing } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 import '@internetarchive/icon-close';
-import iaIcon from '@internetarchive/icon-ia-logo/index.js';
 import { ModalConfig } from './modal-config';
+import IALogoIcon from './assets/ia-logo-icon';
 let ModalTemplate = class ModalTemplate extends LitElement {
     constructor() {
         super(...arguments);
@@ -24,7 +24,7 @@ let ModalTemplate = class ModalTemplate extends LitElement {
           <header style="background-color: ${this.config.headerColor}">
             ${this.config.showCloseButton ? this.closeButtonTemplate : ''}
             ${this.config.showHeaderLogo
-            ? html `<div class="logo-icon">${iaIcon}</div>`
+            ? html `<div class="logo-icon">${IALogoIcon}</div>`
             : nothing}
             ${this.config.title
             ? html `<h1 class="title">${this.config.title}</h1>`
@@ -69,7 +69,13 @@ let ModalTemplate = class ModalTemplate extends LitElement {
      * @private
      * @memberof ModalTemplate
      */
-    handleCloseButton() {
+    handleCloseButton(e) {
+        e.preventDefault();
+        if (e.type === 'keydown' &&
+            e.key !== ' ' &&
+            e.key !== 'Enter') {
+            return;
+        }
         const event = new Event('closeButtonPressed');
         this.dispatchEvent(event);
     }
@@ -86,8 +92,8 @@ let ModalTemplate = class ModalTemplate extends LitElement {
       <button
         type="button"
         class="close-button"
-        tabindex="0"
         @click=${this.handleCloseButton}
+        @keydown=${this.handleCloseButton}
       >
         <ia-icon-close></ia-icon-close>
       </button>

package/dist/src/modal-template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport '@internetarchive/icon-close';\nimport iaIcon from '@internetarchive/icon-ia-logo/index.js';\n\nimport { ModalConfig } from './modal-config';\n\n@customElement('modal-template')\nexport class ModalTemplate extends LitElement {\n /*\n The ModalConfig that displayed the template\n \n @type {ModalConfig}\n * @memberof ModalTemplate\n /\n @property({ type: Object }) config: ModalConfig = new ModalConfig();\n\n /* @inheritdoc /\n render(): TemplateResult {\n return html`\n <div class=\"modal-wrapper\">\n <div class=\"modal-container\">\n <header style=\"background-color: ${this.config.headerColor}\">\n ${this.config.showCloseButton ? this.closeButtonTemplate : ''}\n ${this.config.showHeaderLogo\n ? html`<div class=\"logo-icon\">${iaIcon}</div>`\n : nothing}\n ${this.config.title\n ? html`<h1 class=\"title\">${this.config.title}</h1>`\n : ''}\n ${this.config.subtitle\n ? html`<h2 class=\"subtitle\">${this.config.subtitle}</h2>`\n : ''}\n </header>\n <section\n class=\"modal-body\"\n style=\"background-color: ${this.config.bodyColor}\"\n >\n <div class=\"content\">\n <div\n class=\"processing-logo ${this.config.showProcessingIndicator\n ? ''\n : 'hidden'}\"\n >\n <ia-activity-indicator\n .mode=${this.config.processingImageMode}\n ></ia-activity-indicator>\n </div>\n ${this.config.headline\n ? html` <h1 class=\"headline\">${this.config.headline}</h1> `\n : ''}\n ${this.config.message\n ? html` <p class=\"message\">${this.config.message}</p> `\n : ''}\n\n <div class=\"slot-container\">\n <slot> </slot>\n </div>\n </div>\n </section>\n </div>\n </div>\n `;\n }\n\n /\n Dispatch the `closeButtonPressed` event to the consumer\n \n @private\n * @memberof ModalTemplate\n /\n private handleCloseButton(): void {\n const event = new Event('closeButtonPressed');\n this.dispatchEvent(event);\n }\n\n /\n The close button template\n \n @readonly\n * @private\n * @type {TemplateResult}\n * @memberof ModalTemplate\n /\n private get closeButtonTemplate(): TemplateResult {\n return html`\n <button\n type=\"button\"\n class=\"close-button\"\n tabindex=\"0\"\n @click=${this.handleCloseButton}\n >\n <ia-icon-close></ia-icon-close>\n </button>\n `;\n }\n\n /* @inheritdoc /\n static get styles(): CSSResult {\n const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;\n\n const processingImageSize = css`var(--processingImageSize, 7.5rem)`;\n\n const modalCornerRadius = css`var(--modalCornerRadius, 1rem)`;\n const modalBorder = css`var(--modalBorder, 2px solid black)`;\n // if the content of the modal is too big to fit on screen, this sets the bottom margin\n // it's not exact, but a close estimation\n const modalBottomMarginCss = css`var(--modalBottomMargin, 2.5rem)`;\n const modalTopMarginCss = css`var(--modalTopMargin, 5rem)`;\n const modalHeaderBottomPaddingCss = css`var(--modalHeaderBottomPadding, 0.5em)`;\n\n const modalBottomPadding = css`var(--modalBottomPadding, 2rem)`;\n const scrollOffset = css`var(--modalScrollOffset, 5px)`;\n\n const titleFontSize = css`var(--modalTitleFontSize, 1.8rem)`;\n const subtitleFontSize = css`var(--modalSubtitleFontSize, 1.4rem)`;\n const headlineFontSize = css`var(--modalHeadlineFontSize, 1.6rem)`;\n const messageFontSize = css`var(--modalMessageFontSize, 1.4rem)`;\n\n const titleLineHeight = css`var(--modalTitleLineHeight, normal)`;\n const subtitleLineHeight = css`var(--modalSubtitleLineHeight, normal)`;\n const headlineLineHeight = css`var(--modalHeadlineLineHeight, normal)`;\n const messageLineHeight = css`var(--modalMessageLineHeight, normal)`;\n\n return css`\n .processing-logo {\n margin: auto;\n width: ${processingImageSize};\n height: ${processingImageSize};\n }\n\n .processing-logo.hidden {\n height: 1rem;\n }\n\n .processing-logo.hidden ia-activity-indicator {\n display: none;\n }\n\n .modal-wrapper {\n outline: none;\n }\n\n .modal-container {\n border-radius: ${modalCornerRadius};\n width: 100%;\n margin-top: ${modalTopMarginCss};\n }\n\n header {\n position: relative;\n background-color: #36a483;\n color: white;\n border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;\n border: ${modalBorder};\n border-bottom: 0;\n text-align: center;\n padding-bottom: ${modalHeaderBottomPaddingCss};\n }\n\n .title {\n margin: 0;\n padding: 0;\n font-size: ${titleFontSize};\n font-weight: bold;\n line-height: ${titleLineHeight};\n }\n\n .subtitle {\n margin: 0;\n padding: 0;\n font-weight: normal;\n padding-top: 0;\n font-size: ${subtitleFontSize};\n line-height: ${subtitleLineHeight};\n }\n\n .modal-body {\n background-color: #f5f5f7;\n border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});\n border: ${modalBorder};\n border-top: 0;\n padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;\n color: #333;\n margin-bottom: 2.5rem;\n min-height: 5rem;\n }\n\n .content {\n overflow-y: auto;\n max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));\n min-height: 5rem;\n padding: 0 0 calc(${scrollOffset}) 0;\n }\n\n .headline {\n font-size: ${headlineFontSize};\n font-weight: bold;\n text-align: center;\n line-height: ${headlineLineHeight};\n margin: 0;\n padding: 0;\n }\n\n .message {\n margin: 1rem 0 0 0;\n text-align: center;\n font-size: ${messageFontSize};\n line-height: ${messageLineHeight};\n }\n\n .logo-icon {\n border-radius: 100%;\n border: 3px solid #fff;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n width: ${modalLogoSize};\n height: ${modalLogoSize};\n margin: -2.9rem auto 0.5rem auto;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .logo-icon svg {\n width: calc(${modalLogoSize} 0.65);\n height: calc(${modalLogoSize} * 0.65);\n }\n\n .logo-icon svg .fill-color {\n fill: white;\n }\n\n .logo-icon svg .stroke-color {\n stroke: red;\n }\n\n .close-button {\n position: absolute;\n right: 1.2rem;\n top: 1.2rem;\n width: 2rem;\n height: 2rem;\n border-radius: 100%;\n border: 0;\n padding: 0;\n cursor: pointer;\n background-color: white;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 4px 4px 0 rgba(0, 0, 0, 0.08);\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n\n slot::slotted(.sr-only) {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport '@internetarchive/icon-close';\n\nimport { ModalConfig } from './modal-config';\nimport IALogoIcon from './assets/ia-logo-icon';\n\n@customElement('modal-template')\nexport class ModalTemplate extends LitElement {\n /*\n The ModalConfig that displayed the template\n \n @type {ModalConfig}\n * @memberof ModalTemplate\n /\n @property({ type: Object }) config: ModalConfig = new ModalConfig();\n\n /* @inheritdoc /\n render(): TemplateResult {\n return html`\n <div class=\"modal-wrapper\">\n <div class=\"modal-container\">\n <header style=\"background-color: ${this.config.headerColor}\">\n ${this.config.showCloseButton ? this.closeButtonTemplate : ''}\n ${this.config.showHeaderLogo\n ? html`<div class=\"logo-icon\">${IALogoIcon}</div>`\n : nothing}\n ${this.config.title\n ? html`<h1 class=\"title\">${this.config.title}</h1>`\n : ''}\n ${this.config.subtitle\n ? html`<h2 class=\"subtitle\">${this.config.subtitle}</h2>`\n : ''}\n </header>\n <section\n class=\"modal-body\"\n style=\"background-color: ${this.config.bodyColor}\"\n >\n <div class=\"content\">\n <div\n class=\"processing-logo ${this.config.showProcessingIndicator\n ? ''\n : 'hidden'}\"\n >\n <ia-activity-indicator\n .mode=${this.config.processingImageMode}\n ></ia-activity-indicator>\n </div>\n ${this.config.headline\n ? html` <h1 class=\"headline\">${this.config.headline}</h1> `\n : ''}\n ${this.config.message\n ? html` <p class=\"message\">${this.config.message}</p> `\n : ''}\n\n <div class=\"slot-container\">\n <slot> </slot>\n </div>\n </div>\n </section>\n </div>\n </div>\n `;\n }\n\n /\n Dispatch the `closeButtonPressed` event to the consumer\n \n @private\n * @memberof ModalTemplate\n /\n private handleCloseButton(e: Event): void {\n e.preventDefault();\n if (\n e.type === 'keydown' &&\n (e as KeyboardEvent).key !== ' ' &&\n (e as KeyboardEvent).key !== 'Enter'\n ) {\n return;\n }\n const event = new Event('closeButtonPressed');\n this.dispatchEvent(event);\n }\n\n /\n The close button template\n \n @readonly\n * @private\n * @type {TemplateResult}\n * @memberof ModalTemplate\n /\n private get closeButtonTemplate(): TemplateResult {\n return html`\n <button\n type=\"button\"\n class=\"close-button\"\n @click=${this.handleCloseButton}\n @keydown=${this.handleCloseButton}\n >\n <ia-icon-close></ia-icon-close>\n </button>\n `;\n }\n\n /* @inheritdoc /\n static get styles(): CSSResult {\n const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;\n\n const processingImageSize = css`var(--processingImageSize, 7.5rem)`;\n\n const modalCornerRadius = css`var(--modalCornerRadius, 1rem)`;\n const modalBorder = css`var(--modalBorder, 2px solid black)`;\n // if the content of the modal is too big to fit on screen, this sets the bottom margin\n // it's not exact, but a close estimation\n const modalBottomMarginCss = css`var(--modalBottomMargin, 2.5rem)`;\n const modalTopMarginCss = css`var(--modalTopMargin, 5rem)`;\n const modalHeaderBottomPaddingCss = css`var(--modalHeaderBottomPadding, 0.5em)`;\n\n const modalBottomPadding = css`var(--modalBottomPadding, 2rem)`;\n const scrollOffset = css`var(--modalScrollOffset, 5px)`;\n\n const titleFontSize = css`var(--modalTitleFontSize, 1.8rem)`;\n const subtitleFontSize = css`var(--modalSubtitleFontSize, 1.4rem)`;\n const headlineFontSize = css`var(--modalHeadlineFontSize, 1.6rem)`;\n const messageFontSize = css`var(--modalMessageFontSize, 1.4rem)`;\n\n const titleLineHeight = css`var(--modalTitleLineHeight, normal)`;\n const subtitleLineHeight = css`var(--modalSubtitleLineHeight, normal)`;\n const headlineLineHeight = css`var(--modalHeadlineLineHeight, normal)`;\n const messageLineHeight = css`var(--modalMessageLineHeight, normal)`;\n\n return css`\n .processing-logo {\n margin: auto;\n width: ${processingImageSize};\n height: ${processingImageSize};\n }\n\n .processing-logo.hidden {\n height: 1rem;\n }\n\n .processing-logo.hidden ia-activity-indicator {\n display: none;\n }\n\n .modal-wrapper {\n outline: none;\n }\n\n .modal-container {\n border-radius: ${modalCornerRadius};\n width: 100%;\n margin-top: ${modalTopMarginCss};\n }\n\n header {\n position: relative;\n background-color: #36a483;\n color: white;\n border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;\n border: ${modalBorder};\n border-bottom: 0;\n text-align: center;\n padding-bottom: ${modalHeaderBottomPaddingCss};\n }\n\n .title {\n margin: 0;\n padding: 0;\n font-size: ${titleFontSize};\n font-weight: bold;\n line-height: ${titleLineHeight};\n }\n\n .subtitle {\n margin: 0;\n padding: 0;\n font-weight: normal;\n padding-top: 0;\n font-size: ${subtitleFontSize};\n line-height: ${subtitleLineHeight};\n }\n\n .modal-body {\n background-color: #f5f5f7;\n border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});\n border: ${modalBorder};\n border-top: 0;\n padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;\n color: #333;\n margin-bottom: 2.5rem;\n min-height: 5rem;\n }\n\n .content {\n overflow-y: auto;\n max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));\n min-height: 5rem;\n padding: 0 0 calc(${scrollOffset}) 0;\n }\n\n .headline {\n font-size: ${headlineFontSize};\n font-weight: bold;\n text-align: center;\n line-height: ${headlineLineHeight};\n margin: 0;\n padding: 0;\n }\n\n .message {\n margin: 1rem 0 0 0;\n text-align: center;\n font-size: ${messageFontSize};\n line-height: ${messageLineHeight};\n }\n\n .logo-icon {\n border-radius: 100%;\n border: 3px solid #fff;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n width: ${modalLogoSize};\n height: ${modalLogoSize};\n margin: -2.9rem auto 0.5rem auto;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .logo-icon svg {\n width: calc(${modalLogoSize} 0.65);\n height: calc(${modalLogoSize} * 0.65);\n }\n\n .logo-icon svg .fill-color {\n fill: white;\n }\n\n .logo-icon svg .stroke-color {\n stroke: red;\n }\n\n .close-button {\n position: absolute;\n right: 1.2rem;\n top: 1.2rem;\n width: 2rem;\n height: 2rem;\n border-radius: 100%;\n border: 0;\n padding: 0;\n cursor: pointer;\n background-color: white;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 4px 4px 0 rgba(0, 0, 0, 0.08);\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n\n slot::slotted(.sr-only) {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n `;\n }\n}\n"]}

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

@@ -1,3 +1,4 @@
+/* istanbul ignore file */
 /**
  * Use a generator so we can iterate and possibly break early.
  * @example

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

	@@ -1 +1 @@
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"]}
1	+ {"version":3,"file":"active-elements.js","sourceRoot":"","sources":["../../../src/shoelace/active-elements.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B;;;;;;;;;;;;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":["/* istanbul ignore file /\n/\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.js CHANGED Viewed

@@ -1,3 +1,4 @@
+/* istanbul ignore file */
 import { activeElements, getDeepestActiveElement } from './active-elements.js';
 import { getTabbableElements } from './tabbable.js';
 let activeModals = [];

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

	@@ -1 +1 @@
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"]}
1	+ {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/shoelace/modal.ts"],"names":[],"mappings":"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","sourcesContent":["/* istanbul ignore file /\nimport { 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.js CHANGED Viewed

@@ -1,3 +1,4 @@
+/* istanbul ignore file */
 // 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();

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

	@@ -1 +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 /* 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"]}
1	+ {"version":3,"file":"tabbable.js","sourceRoot":"","sources":["../../../src/shoelace/tabbable.ts"],"names":[],"mappings":"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","sourcesContent":["/* istanbul ignore file /\n// 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"]}