@internetarchive/modal-manager 2.0.2 → 2.0.4-alpha-webdev7960.0

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

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

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

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

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

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

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

@@ -1 +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"]}
+{"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 */\r\n/**\r\n * Use a generator so we can iterate and possibly break early.\r\n * @example\r\n *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.\r\n *   const allActiveElements = [...activeElements()]\r\n *\r\n *   // Early return\r\n *   for (const activeElement of activeElements()) {\r\n *     if (<cond>) {\r\n *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!\r\n *     }\r\n *   }\r\n */\r\nexport function* activeElements(\r\n  activeElement: Element | null = document.activeElement\r\n): Generator<Element> {\r\n  if (activeElement === null || activeElement === undefined) return;\r\n\r\n  yield activeElement;\r\n\r\n  if (\r\n    'shadowRoot' in activeElement &&\r\n    activeElement.shadowRoot &&\r\n    activeElement.shadowRoot.mode !== 'closed'\r\n  ) {\r\n    yield* activeElements(activeElement.shadowRoot.activeElement);\r\n  }\r\n}\r\n\r\nexport function getDeepestActiveElement() {\r\n  return [...activeElements()].pop();\r\n}\r\n"]}

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

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

package/dist/src/shoelace/modal.js

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

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

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

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

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