@spectrum-web-components/reactive-controllers 1.1.0 → 1.1.2

package/src/PendingState.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, ReactiveController, TemplateResult } from 'lit';
+import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
+/**
+ * Represents a host element with pending state.
+ */
+export interface HostWithPendingState extends LitElement {
+    pendingLabel?: string;
+    pending: boolean;
+    disabled: boolean;
+    pendingStateController: PendingStateController<HostWithPendingState>;
+}
+/**
+ * Represents a controller for managing the pending state of a reactive element.
+ *
+ * @template T - The type of the reactive element.
+ */
+export declare class PendingStateController<T extends HostWithPendingState> implements ReactiveController {
+    /**
+     * The host element that this controller is attached to.
+     */
+    host: T;
+    /**
+     * Creates an instance of PendingStateController.
+     * @param host - The host element that this controller is attached to.
+     */
+    constructor(host: T);
+    cachedAriaLabel: string | null;
+    /**
+     * Renders the pending state UI.
+     * @returns A TemplateResult representing the pending state UI.
+     */
+    renderPendingState(): TemplateResult;
+    /**
+     * Updates the ARIA label of the host element based on the pending state.
+     * Manages Cached Aria Label
+     */
+    private updateAriaLabel;
+    hostConnected(): void;
+    hostUpdated(): void;
+}

package/src/PendingState.dev.js

@@ -0,0 +1,57 @@
+"use strict";
+import { html } from "lit";
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+export class PendingStateController {
+  /**
+   * Creates an instance of PendingStateController.
+   * @param host - The host element that this controller is attached to.
+   */
+  constructor(host) {
+    this.cachedAriaLabel = null;
+    this.host = host;
+    this.host.addController(this);
+  }
+  /**
+   * Renders the pending state UI.
+   * @returns A TemplateResult representing the pending state UI.
+   */
+  renderPendingState() {
+    const pendingLabel = this.host.pendingLabel || "Pending";
+    return this.host.pending ? html`
+                  <sp-progress-circle
+                      id="loader"
+                      size="s"
+                      indeterminate
+                      aria-valuetext=${pendingLabel}
+                      class="progress-circle"
+                  ></sp-progress-circle>
+              ` : html``;
+  }
+  /**
+   * Updates the ARIA label of the host element based on the pending state.
+   * Manages Cached Aria Label
+   */
+  updateAriaLabel() {
+    const { pending, disabled, pendingLabel } = this.host;
+    const currentAriaLabel = this.host.getAttribute("aria-label");
+    if (pending && !disabled && currentAriaLabel !== pendingLabel) {
+      this.cachedAriaLabel = currentAriaLabel;
+      this.host.setAttribute("aria-label", pendingLabel || "Pending");
+    } else if (!pending || disabled) {
+      if (this.cachedAriaLabel) {
+        this.host.setAttribute("aria-label", this.cachedAriaLabel);
+      } else if (!pending) {
+        this.host.removeAttribute("aria-label");
+      }
+    }
+  }
+  hostConnected() {
+    if (!this.cachedAriaLabel)
+      this.cachedAriaLabel = this.host.getAttribute("aria-label");
+    this.updateAriaLabel();
+  }
+  hostUpdated() {
+    this.updateAriaLabel();
+  }
+}
+//# sourceMappingURL=PendingState.dev.js.map

package/src/PendingState.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["PendingState.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, LitElement, ReactiveController, TemplateResult } from 'lit';\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\n\n/**\n * Represents a host element with pending state.\n */\nexport interface HostWithPendingState extends LitElement {\n    pendingLabel?: string;\n    pending: boolean;\n    disabled: boolean;\n    pendingStateController: PendingStateController<HostWithPendingState>;\n}\n\n/**\n * Represents a controller for managing the pending state of a reactive element.\n *\n * @template T - The type of the reactive element.\n */\nexport class PendingStateController<T extends HostWithPendingState>\n    implements ReactiveController\n{\n    /**\n     * The host element that this controller is attached to.\n     */\n    public host: T;\n\n    /**\n     * Creates an instance of PendingStateController.\n     * @param host - The host element that this controller is attached to.\n     */\n    constructor(host: T) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public cachedAriaLabel: string | null = null;\n    /**\n     * Renders the pending state UI.\n     * @returns A TemplateResult representing the pending state UI.\n     */\n    public renderPendingState(): TemplateResult {\n        const pendingLabel = this.host.pendingLabel || 'Pending';\n        return this.host.pending\n            ? html`\n                  <sp-progress-circle\n                      id=\"loader\"\n                      size=\"s\"\n                      indeterminate\n                      aria-valuetext=${pendingLabel}\n                      class=\"progress-circle\"\n                  ></sp-progress-circle>\n              `\n            : html``;\n    }\n\n    /**\n     * Updates the ARIA label of the host element based on the pending state.\n     * Manages Cached Aria Label\n     */\n    private updateAriaLabel(): void {\n        const { pending, disabled, pendingLabel } = this.host;\n        const currentAriaLabel = this.host.getAttribute('aria-label');\n\n        if (pending && !disabled && currentAriaLabel !== pendingLabel) {\n            // Cache the current `aria-label` to be restored when no longer `pending`\n            this.cachedAriaLabel = currentAriaLabel;\n            // Since it is pending, we set the aria-label to `pendingLabel` or \"Pending\"\n            this.host.setAttribute('aria-label', pendingLabel || 'Pending');\n        } else if (!pending || disabled) {\n            // Restore the cached `aria-label` if it exists\n            if (this.cachedAriaLabel) {\n                this.host.setAttribute('aria-label', this.cachedAriaLabel);\n            } else if (!pending) {\n                // If no cached `aria-label` and not `pending`, remove the `aria-label`\n                this.host.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    hostConnected(): void {\n        if (!this.cachedAriaLabel)\n            this.cachedAriaLabel = this.host.getAttribute('aria-label');\n        this.updateAriaLabel();\n    }\n\n    hostUpdated(): void {\n        this.updateAriaLabel();\n    }\n}\n"],
+  "mappings": ";AAYA,SAAS,YAA4D;AACrE,OAAO;AAiBA,aAAM,uBAEb;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,YAAY,MAAS;AAKrB,SAAO,kBAAiC;AAJpC,SAAK,OAAO;AACZ,SAAK,KAAK,cAAc,IAAI;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA,EAOO,qBAAqC;AACxC,UAAM,eAAe,KAAK,KAAK,gBAAgB;AAC/C,WAAO,KAAK,KAAK,UACX;AAAA;AAAA;AAAA;AAAA;AAAA,uCAKyB,YAAY;AAAA;AAAA;AAAA,kBAIrC;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,kBAAwB;AAC5B,UAAM,EAAE,SAAS,UAAU,aAAa,IAAI,KAAK;AACjD,UAAM,mBAAmB,KAAK,KAAK,aAAa,YAAY;AAE5D,QAAI,WAAW,CAAC,YAAY,qBAAqB,cAAc;AAE3D,WAAK,kBAAkB;AAEvB,WAAK,KAAK,aAAa,cAAc,gBAAgB,SAAS;AAAA,IAClE,WAAW,CAAC,WAAW,UAAU;AAE7B,UAAI,KAAK,iBAAiB;AACtB,aAAK,KAAK,aAAa,cAAc,KAAK,eAAe;AAAA,MAC7D,WAAW,CAAC,SAAS;AAEjB,aAAK,KAAK,gBAAgB,YAAY;AAAA,MAC1C;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,gBAAsB;AAClB,QAAI,CAAC,KAAK;AACN,WAAK,kBAAkB,KAAK,KAAK,aAAa,YAAY;AAC9D,SAAK,gBAAgB;AAAA,EACzB;AAAA,EAEA,cAAoB;AAChB,SAAK,gBAAgB;AAAA,EACzB;AACJ;",
+  "names": []
+}

package/src/PendingState.js

@@ -0,0 +1,10 @@
+"use strict";import{html as s}from"lit";import"@spectrum-web-components/progress-circle/sp-progress-circle.js";export class PendingStateController{constructor(e){this.cachedAriaLabel=null;this.host=e,this.host.addController(this)}renderPendingState(){const e=this.host.pendingLabel||"Pending";return this.host.pending?s`
+                  <sp-progress-circle
+                      id="loader"
+                      size="s"
+                      indeterminate
+                      aria-valuetext=${e}
+                      class="progress-circle"
+                  ></sp-progress-circle>
+              `:s``}updateAriaLabel(){const{pending:e,disabled:t,pendingLabel:i}=this.host,a=this.host.getAttribute("aria-label");e&&!t&&a!==i?(this.cachedAriaLabel=a,this.host.setAttribute("aria-label",i||"Pending")):(!e||t)&&(this.cachedAriaLabel?this.host.setAttribute("aria-label",this.cachedAriaLabel):e||this.host.removeAttribute("aria-label"))}hostConnected(){this.cachedAriaLabel||(this.cachedAriaLabel=this.host.getAttribute("aria-label")),this.updateAriaLabel()}hostUpdated(){this.updateAriaLabel()}}
+//# sourceMappingURL=PendingState.js.map

package/src/PendingState.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["PendingState.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, LitElement, ReactiveController, TemplateResult } from 'lit';\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\n\n/**\n * Represents a host element with pending state.\n */\nexport interface HostWithPendingState extends LitElement {\n    pendingLabel?: string;\n    pending: boolean;\n    disabled: boolean;\n    pendingStateController: PendingStateController<HostWithPendingState>;\n}\n\n/**\n * Represents a controller for managing the pending state of a reactive element.\n *\n * @template T - The type of the reactive element.\n */\nexport class PendingStateController<T extends HostWithPendingState>\n    implements ReactiveController\n{\n    /**\n     * The host element that this controller is attached to.\n     */\n    public host: T;\n\n    /**\n     * Creates an instance of PendingStateController.\n     * @param host - The host element that this controller is attached to.\n     */\n    constructor(host: T) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public cachedAriaLabel: string | null = null;\n    /**\n     * Renders the pending state UI.\n     * @returns A TemplateResult representing the pending state UI.\n     */\n    public renderPendingState(): TemplateResult {\n        const pendingLabel = this.host.pendingLabel || 'Pending';\n        return this.host.pending\n            ? html`\n                  <sp-progress-circle\n                      id=\"loader\"\n                      size=\"s\"\n                      indeterminate\n                      aria-valuetext=${pendingLabel}\n                      class=\"progress-circle\"\n                  ></sp-progress-circle>\n              `\n            : html``;\n    }\n\n    /**\n     * Updates the ARIA label of the host element based on the pending state.\n     * Manages Cached Aria Label\n     */\n    private updateAriaLabel(): void {\n        const { pending, disabled, pendingLabel } = this.host;\n        const currentAriaLabel = this.host.getAttribute('aria-label');\n\n        if (pending && !disabled && currentAriaLabel !== pendingLabel) {\n            // Cache the current `aria-label` to be restored when no longer `pending`\n            this.cachedAriaLabel = currentAriaLabel;\n            // Since it is pending, we set the aria-label to `pendingLabel` or \"Pending\"\n            this.host.setAttribute('aria-label', pendingLabel || 'Pending');\n        } else if (!pending || disabled) {\n            // Restore the cached `aria-label` if it exists\n            if (this.cachedAriaLabel) {\n                this.host.setAttribute('aria-label', this.cachedAriaLabel);\n            } else if (!pending) {\n                // If no cached `aria-label` and not `pending`, remove the `aria-label`\n                this.host.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    hostConnected(): void {\n        if (!this.cachedAriaLabel)\n            this.cachedAriaLabel = this.host.getAttribute('aria-label');\n        this.updateAriaLabel();\n    }\n\n    hostUpdated(): void {\n        this.updateAriaLabel();\n    }\n}\n"],
+  "mappings": "aAYA,OAAS,QAAAA,MAA4D,MACrE,MAAO,iEAiBA,aAAM,sBAEb,CAUI,YAAYC,EAAS,CAKrB,KAAO,gBAAiC,KAJpC,KAAK,KAAOA,EACZ,KAAK,KAAK,cAAc,IAAI,CAChC,CAOO,oBAAqC,CACxC,MAAMC,EAAe,KAAK,KAAK,cAAgB,UAC/C,OAAO,KAAK,KAAK,QACXF;AAAA;AAAA;AAAA;AAAA;AAAA,uCAKyBE,CAAY;AAAA;AAAA;AAAA,gBAIrCF,GACV,CAMQ,iBAAwB,CAC5B,KAAM,CAAE,QAAAG,EAAS,SAAAC,EAAU,aAAAF,CAAa,EAAI,KAAK,KAC3CG,EAAmB,KAAK,KAAK,aAAa,YAAY,EAExDF,GAAW,CAACC,GAAYC,IAAqBH,GAE7C,KAAK,gBAAkBG,EAEvB,KAAK,KAAK,aAAa,aAAcH,GAAgB,SAAS,IACvD,CAACC,GAAWC,KAEf,KAAK,gBACL,KAAK,KAAK,aAAa,aAAc,KAAK,eAAe,EACjDD,GAER,KAAK,KAAK,gBAAgB,YAAY,EAGlD,CAEA,eAAsB,CACb,KAAK,kBACN,KAAK,gBAAkB,KAAK,KAAK,aAAa,YAAY,GAC9D,KAAK,gBAAgB,CACzB,CAEA,aAAoB,CAChB,KAAK,gBAAgB,CACzB,CACJ",
+  "names": ["html", "host", "pendingLabel", "pending", "disabled", "currentAriaLabel"]
+}

package/src/RovingTabindex.d.ts

@@ -0,0 +1,19 @@
+import { FocusGroupConfig, FocusGroupController } from './FocusGroup.js';
+export type RovingTabindexConfig<T> = FocusGroupConfig<T>;
+interface UpdateTabIndexes {
+    tabIndex: number;
+    removeTabIndex?: boolean;
+}
+export declare class RovingTabindexController<T extends HTMLElement> extends FocusGroupController<T> {
+    protected set focused(focused: boolean);
+    protected get focused(): boolean;
+    private managed;
+    private manageIndexesAnimationFrame;
+    clearElementCache(offset?: number): void;
+    manageTabindexes(): void;
+    updateTabindexes(getTabIndex: (el: HTMLElement) => UpdateTabIndexes): void;
+    manage(): void;
+    unmanage(): void;
+    hostUpdated(): void;
+}
+export {};

package/src/RovingTabindex.dev.js

@@ -0,0 +1,72 @@
+"use strict";
+import { FocusGroupController } from "./FocusGroup.dev.js";
+export class RovingTabindexController extends FocusGroupController {
+  constructor() {
+    super(...arguments);
+    this.managed = true;
+    this.manageIndexesAnimationFrame = 0;
+  }
+  set focused(focused) {
+    if (focused === this.focused) return;
+    super.focused = focused;
+    this.manageTabindexes();
+  }
+  get focused() {
+    return super.focused;
+  }
+  clearElementCache(offset = 0) {
+    cancelAnimationFrame(this.manageIndexesAnimationFrame);
+    super.clearElementCache(offset);
+    if (!this.managed) return;
+    this.manageIndexesAnimationFrame = requestAnimationFrame(
+      () => this.manageTabindexes()
+    );
+  }
+  manageTabindexes() {
+    if (this.focused) {
+      this.updateTabindexes(() => ({ tabIndex: -1 }));
+    } else {
+      this.updateTabindexes((el) => {
+        return {
+          removeTabIndex: el.contains(this.focusInElement) && el !== this.focusInElement,
+          tabIndex: el === this.focusInElement ? 0 : -1
+        };
+      });
+    }
+  }
+  updateTabindexes(getTabIndex) {
+    this.elements.forEach((el) => {
+      const { tabIndex, removeTabIndex } = getTabIndex(el);
+      if (!removeTabIndex) {
+        if (this.focused) {
+          if (el !== this.elements[this.currentIndex]) {
+            el.tabIndex = tabIndex;
+          }
+        } else {
+          el.tabIndex = tabIndex;
+        }
+        return;
+      }
+      el.removeAttribute("tabindex");
+      const updatable = el;
+      if (updatable.requestUpdate) updatable.requestUpdate();
+    });
+  }
+  manage() {
+    this.managed = true;
+    this.manageTabindexes();
+    super.manage();
+  }
+  unmanage() {
+    this.managed = false;
+    this.updateTabindexes(() => ({ tabIndex: 0 }));
+    super.unmanage();
+  }
+  hostUpdated() {
+    super.hostUpdated();
+    if (!this.host.hasUpdated) {
+      this.manageTabindexes();
+    }
+  }
+}
+//# sourceMappingURL=RovingTabindex.dev.js.map

package/src/RovingTabindex.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["RovingTabindex.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { FocusGroupConfig, FocusGroupController } from './FocusGroup.dev.js'\n\nexport type RovingTabindexConfig<T> = FocusGroupConfig<T>;\ninterface UpdateTabIndexes {\n    tabIndex: number;\n    removeTabIndex?: boolean;\n}\n\nexport class RovingTabindexController<\n    T extends HTMLElement,\n> extends FocusGroupController<T> {\n    protected override set focused(focused: boolean) {\n        if (focused === this.focused) return;\n        super.focused = focused;\n        this.manageTabindexes();\n    }\n\n    protected override get focused(): boolean {\n        return super.focused;\n    }\n\n    private managed = true;\n\n    private manageIndexesAnimationFrame = 0;\n\n    override clearElementCache(offset = 0): void {\n        cancelAnimationFrame(this.manageIndexesAnimationFrame);\n        super.clearElementCache(offset);\n        if (!this.managed) return;\n\n        this.manageIndexesAnimationFrame = requestAnimationFrame(() =>\n            this.manageTabindexes()\n        );\n    }\n\n    manageTabindexes(): void {\n        if (this.focused) {\n            this.updateTabindexes(() => ({ tabIndex: -1 }));\n        } else {\n            this.updateTabindexes((el: HTMLElement): UpdateTabIndexes => {\n                return {\n                    removeTabIndex:\n                        el.contains(this.focusInElement) &&\n                        el !== this.focusInElement,\n                    tabIndex: el === this.focusInElement ? 0 : -1,\n                };\n            });\n        }\n    }\n\n    updateTabindexes(getTabIndex: (el: HTMLElement) => UpdateTabIndexes): void {\n        this.elements.forEach((el) => {\n            const { tabIndex, removeTabIndex } = getTabIndex(el);\n            if (!removeTabIndex) {\n                if (this.focused) {\n                    if (el !== this.elements[this.currentIndex]) {\n                        el.tabIndex = tabIndex;\n                    }\n                } else {\n                    el.tabIndex = tabIndex;\n                }\n                return;\n            }\n            el.removeAttribute('tabindex');\n            const updatable = el as unknown as {\n                requestUpdate?: () => void;\n            };\n            if (updatable.requestUpdate) updatable.requestUpdate();\n        });\n    }\n\n    override manage(): void {\n        this.managed = true;\n        this.manageTabindexes();\n        super.manage();\n    }\n\n    override unmanage(): void {\n        this.managed = false;\n        this.updateTabindexes(() => ({ tabIndex: 0 }));\n        super.unmanage();\n    }\n\n    override hostUpdated(): void {\n        super.hostUpdated();\n        if (!this.host.hasUpdated) {\n            this.manageTabindexes();\n        }\n    }\n}\n"],
+  "mappings": ";AAWA,SAA2B,4BAA4B;AAQhD,aAAM,iCAEH,qBAAwB;AAAA,EAF3B;AAAA;AAaH,SAAQ,UAAU;AAElB,SAAQ,8BAA8B;AAAA;AAAA,EAZtC,IAAuB,QAAQ,SAAkB;AAC7C,QAAI,YAAY,KAAK,QAAS;AAC9B,UAAM,UAAU;AAChB,SAAK,iBAAiB;AAAA,EAC1B;AAAA,EAEA,IAAuB,UAAmB;AACtC,WAAO,MAAM;AAAA,EACjB;AAAA,EAMS,kBAAkB,SAAS,GAAS;AACzC,yBAAqB,KAAK,2BAA2B;AACrD,UAAM,kBAAkB,MAAM;AAC9B,QAAI,CAAC,KAAK,QAAS;AAEnB,SAAK,8BAA8B;AAAA,MAAsB,MACrD,KAAK,iBAAiB;AAAA,IAC1B;AAAA,EACJ;AAAA,EAEA,mBAAyB;AACrB,QAAI,KAAK,SAAS;AACd,WAAK,iBAAiB,OAAO,EAAE,UAAU,GAAG,EAAE;AAAA,IAClD,OAAO;AACH,WAAK,iBAAiB,CAAC,OAAsC;AACzD,eAAO;AAAA,UACH,gBACI,GAAG,SAAS,KAAK,cAAc,KAC/B,OAAO,KAAK;AAAA,UAChB,UAAU,OAAO,KAAK,iBAAiB,IAAI;AAAA,QAC/C;AAAA,MACJ,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEA,iBAAiB,aAA0D;AACvE,SAAK,SAAS,QAAQ,CAAC,OAAO;AAC1B,YAAM,EAAE,UAAU,eAAe,IAAI,YAAY,EAAE;AACnD,UAAI,CAAC,gBAAgB;AACjB,YAAI,KAAK,SAAS;AACd,cAAI,OAAO,KAAK,SAAS,KAAK,YAAY,GAAG;AACzC,eAAG,WAAW;AAAA,UAClB;AAAA,QACJ,OAAO;AACH,aAAG,WAAW;AAAA,QAClB;AACA;AAAA,MACJ;AACA,SAAG,gBAAgB,UAAU;AAC7B,YAAM,YAAY;AAGlB,UAAI,UAAU,cAAe,WAAU,cAAc;AAAA,IACzD,CAAC;AAAA,EACL;AAAA,EAES,SAAe;AACpB,SAAK,UAAU;AACf,SAAK,iBAAiB;AACtB,UAAM,OAAO;AAAA,EACjB;AAAA,EAES,WAAiB;AACtB,SAAK,UAAU;AACf,SAAK,iBAAiB,OAAO,EAAE,UAAU,EAAE,EAAE;AAC7C,UAAM,SAAS;AAAA,EACnB;AAAA,EAES,cAAoB;AACzB,UAAM,YAAY;AAClB,QAAI,CAAC,KAAK,KAAK,YAAY;AACvB,WAAK,iBAAiB;AAAA,IAC1B;AAAA,EACJ;AACJ;",
+  "names": []
+}

package/src/RovingTabindex.js

@@ -0,0 +1,2 @@
+"use strict";import{FocusGroupController as i}from"./FocusGroup.js";export class RovingTabindexController extends i{constructor(){super(...arguments);this.managed=!0;this.manageIndexesAnimationFrame=0}set focused(e){e!==this.focused&&(super.focused=e,this.manageTabindexes())}get focused(){return super.focused}clearElementCache(e=0){cancelAnimationFrame(this.manageIndexesAnimationFrame),super.clearElementCache(e),this.managed&&(this.manageIndexesAnimationFrame=requestAnimationFrame(()=>this.manageTabindexes()))}manageTabindexes(){this.focused?this.updateTabindexes(()=>({tabIndex:-1})):this.updateTabindexes(e=>({removeTabIndex:e.contains(this.focusInElement)&&e!==this.focusInElement,tabIndex:e===this.focusInElement?0:-1}))}updateTabindexes(e){this.elements.forEach(a=>{const{tabIndex:n,removeTabIndex:s}=e(a);if(!s){this.focused?a!==this.elements[this.currentIndex]&&(a.tabIndex=n):a.tabIndex=n;return}a.removeAttribute("tabindex");const t=a;t.requestUpdate&&t.requestUpdate()})}manage(){this.managed=!0,this.manageTabindexes(),super.manage()}unmanage(){this.managed=!1,this.updateTabindexes(()=>({tabIndex:0})),super.unmanage()}hostUpdated(){super.hostUpdated(),this.host.hasUpdated||this.manageTabindexes()}}
+//# sourceMappingURL=RovingTabindex.js.map

package/src/RovingTabindex.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["RovingTabindex.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { FocusGroupConfig, FocusGroupController } from './FocusGroup.js';\n\nexport type RovingTabindexConfig<T> = FocusGroupConfig<T>;\ninterface UpdateTabIndexes {\n    tabIndex: number;\n    removeTabIndex?: boolean;\n}\n\nexport class RovingTabindexController<\n    T extends HTMLElement,\n> extends FocusGroupController<T> {\n    protected override set focused(focused: boolean) {\n        if (focused === this.focused) return;\n        super.focused = focused;\n        this.manageTabindexes();\n    }\n\n    protected override get focused(): boolean {\n        return super.focused;\n    }\n\n    private managed = true;\n\n    private manageIndexesAnimationFrame = 0;\n\n    override clearElementCache(offset = 0): void {\n        cancelAnimationFrame(this.manageIndexesAnimationFrame);\n        super.clearElementCache(offset);\n        if (!this.managed) return;\n\n        this.manageIndexesAnimationFrame = requestAnimationFrame(() =>\n            this.manageTabindexes()\n        );\n    }\n\n    manageTabindexes(): void {\n        if (this.focused) {\n            this.updateTabindexes(() => ({ tabIndex: -1 }));\n        } else {\n            this.updateTabindexes((el: HTMLElement): UpdateTabIndexes => {\n                return {\n                    removeTabIndex:\n                        el.contains(this.focusInElement) &&\n                        el !== this.focusInElement,\n                    tabIndex: el === this.focusInElement ? 0 : -1,\n                };\n            });\n        }\n    }\n\n    updateTabindexes(getTabIndex: (el: HTMLElement) => UpdateTabIndexes): void {\n        this.elements.forEach((el) => {\n            const { tabIndex, removeTabIndex } = getTabIndex(el);\n            if (!removeTabIndex) {\n                if (this.focused) {\n                    if (el !== this.elements[this.currentIndex]) {\n                        el.tabIndex = tabIndex;\n                    }\n                } else {\n                    el.tabIndex = tabIndex;\n                }\n                return;\n            }\n            el.removeAttribute('tabindex');\n            const updatable = el as unknown as {\n                requestUpdate?: () => void;\n            };\n            if (updatable.requestUpdate) updatable.requestUpdate();\n        });\n    }\n\n    override manage(): void {\n        this.managed = true;\n        this.manageTabindexes();\n        super.manage();\n    }\n\n    override unmanage(): void {\n        this.managed = false;\n        this.updateTabindexes(() => ({ tabIndex: 0 }));\n        super.unmanage();\n    }\n\n    override hostUpdated(): void {\n        super.hostUpdated();\n        if (!this.host.hasUpdated) {\n            this.manageTabindexes();\n        }\n    }\n}\n"],
+  "mappings": "aAWA,OAA2B,wBAAAA,MAA4B,kBAQhD,aAAM,iCAEHA,CAAwB,CAF3B,kCAaH,KAAQ,QAAU,GAElB,KAAQ,4BAA8B,EAZtC,IAAuB,QAAQC,EAAkB,CACzCA,IAAY,KAAK,UACrB,MAAM,QAAUA,EAChB,KAAK,iBAAiB,EAC1B,CAEA,IAAuB,SAAmB,CACtC,OAAO,MAAM,OACjB,CAMS,kBAAkBC,EAAS,EAAS,CACzC,qBAAqB,KAAK,2BAA2B,EACrD,MAAM,kBAAkBA,CAAM,EACzB,KAAK,UAEV,KAAK,4BAA8B,sBAAsB,IACrD,KAAK,iBAAiB,CAC1B,EACJ,CAEA,kBAAyB,CACjB,KAAK,QACL,KAAK,iBAAiB,KAAO,CAAE,SAAU,EAAG,EAAE,EAE9C,KAAK,iBAAkBC,IACZ,CACH,eACIA,EAAG,SAAS,KAAK,cAAc,GAC/BA,IAAO,KAAK,eAChB,SAAUA,IAAO,KAAK,eAAiB,EAAI,EAC/C,EACH,CAET,CAEA,iBAAiBC,EAA0D,CACvE,KAAK,SAAS,QAASD,GAAO,CAC1B,KAAM,CAAE,SAAAE,EAAU,eAAAC,CAAe,EAAIF,EAAYD,CAAE,EACnD,GAAI,CAACG,EAAgB,CACb,KAAK,QACDH,IAAO,KAAK,SAAS,KAAK,YAAY,IACtCA,EAAG,SAAWE,GAGlBF,EAAG,SAAWE,EAElB,MACJ,CACAF,EAAG,gBAAgB,UAAU,EAC7B,MAAMI,EAAYJ,EAGdI,EAAU,eAAeA,EAAU,cAAc,CACzD,CAAC,CACL,CAES,QAAe,CACpB,KAAK,QAAU,GACf,KAAK,iBAAiB,EACtB,MAAM,OAAO,CACjB,CAES,UAAiB,CACtB,KAAK,QAAU,GACf,KAAK,iBAAiB,KAAO,CAAE,SAAU,CAAE,EAAE,EAC7C,MAAM,SAAS,CACnB,CAES,aAAoB,CACzB,MAAM,YAAY,EACb,KAAK,KAAK,YACX,KAAK,iBAAiB,CAE9B,CACJ",
+  "names": ["FocusGroupController", "focused", "offset", "el", "getTabIndex", "tabIndex", "removeTabIndex", "updatable"]
+}

package/src/SystemContextResolution.d.ts

@@ -0,0 +1,15 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+import type { SystemVariant } from '@spectrum-web-components/theme';
+export declare const systemResolverUpdatedSymbol: unique symbol;
+export type ProvideSystem = {
+    callback: (system: SystemVariant, unsubscribe: () => void) => void;
+};
+export declare class SystemResolutionController implements ReactiveController {
+    private host;
+    system: SystemVariant;
+    private unsubscribe?;
+    constructor(host: ReactiveElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private resolveSystem;
+}

package/src/SystemContextResolution.dev.js

@@ -0,0 +1,39 @@
+"use strict";
+export const systemResolverUpdatedSymbol = Symbol("system resolver updated");
+export class SystemResolutionController {
+  constructor(host) {
+    this.system = "spectrum";
+    this.host = host;
+    this.host.addController(this);
+  }
+  hostConnected() {
+    this.resolveSystem();
+  }
+  hostDisconnected() {
+    var _a;
+    (_a = this.unsubscribe) == null ? void 0 : _a.call(this);
+  }
+  resolveSystem() {
+    const querySystemEvent = new CustomEvent(
+      "sp-system-context",
+      {
+        bubbles: true,
+        composed: true,
+        detail: {
+          callback: (system, unsubscribe) => {
+            const previous = this.system;
+            this.system = system;
+            this.unsubscribe = unsubscribe;
+            this.host.requestUpdate(
+              systemResolverUpdatedSymbol,
+              previous
+            );
+          }
+        },
+        cancelable: true
+      }
+    );
+    this.host.dispatchEvent(querySystemEvent);
+  }
+}
+//# sourceMappingURL=SystemContextResolution.dev.js.map

package/src/SystemContextResolution.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["SystemContextResolution.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { SystemVariant } from '@spectrum-web-components/theme';\n\nexport const systemResolverUpdatedSymbol = Symbol('system resolver updated');\n\nexport type ProvideSystem = {\n    callback: (system: SystemVariant, unsubscribe: () => void) => void;\n};\n\nexport class SystemResolutionController implements ReactiveController {\n    private host: ReactiveElement;\n    public system: SystemVariant = 'spectrum';\n    private unsubscribe?: () => void;\n\n    constructor(host: ReactiveElement) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public hostConnected(): void {\n        this.resolveSystem();\n    }\n\n    public hostDisconnected(): void {\n        this.unsubscribe?.();\n    }\n\n    private resolveSystem(): void {\n        const querySystemEvent = new CustomEvent<ProvideSystem>(\n            'sp-system-context',\n            {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    callback: (\n                        system: SystemVariant,\n                        unsubscribe: () => void\n                    ) => {\n                        const previous = this.system;\n                        this.system = system;\n                        this.unsubscribe = unsubscribe;\n                        this.host.requestUpdate(\n                            systemResolverUpdatedSymbol,\n                            previous\n                        );\n                    },\n                },\n                cancelable: true,\n            }\n        );\n        this.host.dispatchEvent(querySystemEvent);\n    }\n}\n"],
+  "mappings": ";AAcO,aAAM,8BAA8B,OAAO,yBAAyB;AAMpE,aAAM,2BAAyD;AAAA,EAKlE,YAAY,MAAuB;AAHnC,SAAO,SAAwB;AAI3B,SAAK,OAAO;AACZ,SAAK,KAAK,cAAc,IAAI;AAAA,EAChC;AAAA,EAEO,gBAAsB;AACzB,SAAK,cAAc;AAAA,EACvB;AAAA,EAEO,mBAAyB;AAlCpC;AAmCQ,eAAK,gBAAL;AAAA,EACJ;AAAA,EAEQ,gBAAsB;AAC1B,UAAM,mBAAmB,IAAI;AAAA,MACzB;AAAA,MACA;AAAA,QACI,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,UACJ,UAAU,CACN,QACA,gBACC;AACD,kBAAM,WAAW,KAAK;AACtB,iBAAK,SAAS;AACd,iBAAK,cAAc;AACnB,iBAAK,KAAK;AAAA,cACN;AAAA,cACA;AAAA,YACJ;AAAA,UACJ;AAAA,QACJ;AAAA,QACA,YAAY;AAAA,MAChB;AAAA,IACJ;AACA,SAAK,KAAK,cAAc,gBAAgB;AAAA,EAC5C;AACJ;",
+  "names": []
+}

package/src/SystemContextResolution.js

@@ -0,0 +1,2 @@
+"use strict";export const systemResolverUpdatedSymbol=Symbol("system resolver updated");export class SystemResolutionController{constructor(e){this.system="spectrum";this.host=e,this.host.addController(this)}hostConnected(){this.resolveSystem()}hostDisconnected(){var e;(e=this.unsubscribe)==null||e.call(this)}resolveSystem(){const e=new CustomEvent("sp-system-context",{bubbles:!0,composed:!0,detail:{callback:(t,s)=>{const o=this.system;this.system=t,this.unsubscribe=s,this.host.requestUpdate(systemResolverUpdatedSymbol,o)}},cancelable:!0});this.host.dispatchEvent(e)}}
+//# sourceMappingURL=SystemContextResolution.js.map

package/src/SystemContextResolution.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["SystemContextResolution.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { SystemVariant } from '@spectrum-web-components/theme';\n\nexport const systemResolverUpdatedSymbol = Symbol('system resolver updated');\n\nexport type ProvideSystem = {\n    callback: (system: SystemVariant, unsubscribe: () => void) => void;\n};\n\nexport class SystemResolutionController implements ReactiveController {\n    private host: ReactiveElement;\n    public system: SystemVariant = 'spectrum';\n    private unsubscribe?: () => void;\n\n    constructor(host: ReactiveElement) {\n        this.host = host;\n        this.host.addController(this);\n    }\n\n    public hostConnected(): void {\n        this.resolveSystem();\n    }\n\n    public hostDisconnected(): void {\n        this.unsubscribe?.();\n    }\n\n    private resolveSystem(): void {\n        const querySystemEvent = new CustomEvent<ProvideSystem>(\n            'sp-system-context',\n            {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    callback: (\n                        system: SystemVariant,\n                        unsubscribe: () => void\n                    ) => {\n                        const previous = this.system;\n                        this.system = system;\n                        this.unsubscribe = unsubscribe;\n                        this.host.requestUpdate(\n                            systemResolverUpdatedSymbol,\n                            previous\n                        );\n                    },\n                },\n                cancelable: true,\n            }\n        );\n        this.host.dispatchEvent(querySystemEvent);\n    }\n}\n"],
+  "mappings": "aAcO,aAAM,4BAA8B,OAAO,yBAAyB,EAMpE,aAAM,0BAAyD,CAKlE,YAAYA,EAAuB,CAHnC,KAAO,OAAwB,WAI3B,KAAK,KAAOA,EACZ,KAAK,KAAK,cAAc,IAAI,CAChC,CAEO,eAAsB,CACzB,KAAK,cAAc,CACvB,CAEO,kBAAyB,CAlCpC,IAAAC,GAmCQA,EAAA,KAAK,cAAL,MAAAA,EAAA,UACJ,CAEQ,eAAsB,CAC1B,MAAMC,EAAmB,IAAI,YACzB,oBACA,CACI,QAAS,GACT,SAAU,GACV,OAAQ,CACJ,SAAU,CACNC,EACAC,IACC,CACD,MAAMC,EAAW,KAAK,OACtB,KAAK,OAASF,EACd,KAAK,YAAcC,EACnB,KAAK,KAAK,cACN,4BACAC,CACJ,CACJ,CACJ,EACA,WAAY,EAChB,CACJ,EACA,KAAK,KAAK,cAAcH,CAAgB,CAC5C,CACJ",
+  "names": ["host", "_a", "querySystemEvent", "system", "unsubscribe", "previous"]
+}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MatchMedia.js';
+export * from './RovingTabindex.js';

package/src/index.dev.js

@@ -0,0 +1,4 @@
+"use strict";
+export * from "./MatchMedia.dev.js";
+export * from "./RovingTabindex.dev.js";
+//# sourceMappingURL=index.dev.js.map

package/src/index.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './MatchMedia.dev.js'\nexport * from './RovingTabindex.dev.js'\n"],
+  "mappings": ";AAYA,cAAc;AACd,cAAc;",
+  "names": []
+}

package/src/index.js

@@ -0,0 +1,2 @@
+"use strict";export*from"./MatchMedia.js";export*from"./RovingTabindex.js";
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './MatchMedia.js';\nexport * from './RovingTabindex.js';\n"],
+  "mappings": "aAYA,WAAc,kBACd,WAAc",
+  "names": []
+}

package/test/dependency-manager.test.js

@@ -0,0 +1,24 @@
+"use strict";
+import { expect, nextFrame } from "@open-wc/testing";
+import { DependencyManagerController } from "@spectrum-web-components/reactive-controllers/src/DependencyManger.js";
+import { spy } from "sinon";
+describe("Dependency Manager", () => {
+  it("manages dependencies", async function() {
+    this.retries(0);
+    const tagName = "some-heavy-element";
+    const requestUpdateSpy = spy();
+    const manager = new DependencyManagerController({
+      requestUpdate: () => requestUpdateSpy()
+    });
+    expect(manager.loaded).to.be.false;
+    manager.add(tagName);
+    expect(manager.loaded).to.be.false;
+    expect(requestUpdateSpy.notCalled).to.be.true;
+    customElements.define(tagName, class extends HTMLElement {
+    });
+    await nextFrame();
+    expect(manager.loaded).to.be.true;
+    expect(requestUpdateSpy.notCalled).to.be.false;
+  });
+});
+//# sourceMappingURL=dependency-manager.test.js.map

package/test/dependency-manager.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["dependency-manager.test.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { ReactiveElement } from 'lit';\nimport { expect, nextFrame } from '@open-wc/testing';\nimport { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';\nimport { spy } from 'sinon';\n\ndescribe('Dependency Manager', () => {\n    it('manages dependencies', async function () {\n        this.retries(0);\n        const tagName = 'some-heavy-element';\n        const requestUpdateSpy = spy();\n        const manager = new DependencyManagerController({\n            requestUpdate: () => requestUpdateSpy(),\n        } as unknown as ReactiveElement);\n        expect(manager.loaded).to.be.false;\n        manager.add(tagName);\n        expect(manager.loaded).to.be.false;\n        expect(requestUpdateSpy.notCalled).to.be.true;\n        customElements.define(tagName, class extends HTMLElement {});\n        // Allow time for the registration to propagate.\n        await nextFrame();\n        expect(manager.loaded).to.be.true;\n        expect(requestUpdateSpy.notCalled).to.be.false;\n    });\n});\n"],
+  "mappings": ";AAaA,SAAS,QAAQ,iBAAiB;AAClC,SAAS,mCAAmC;AAC5C,SAAS,WAAW;AAEpB,SAAS,sBAAsB,MAAM;AACjC,KAAG,wBAAwB,iBAAkB;AACzC,SAAK,QAAQ,CAAC;AACd,UAAM,UAAU;AAChB,UAAM,mBAAmB,IAAI;AAC7B,UAAM,UAAU,IAAI,4BAA4B;AAAA,MAC5C,eAAe,MAAM,iBAAiB;AAAA,IAC1C,CAA+B;AAC/B,WAAO,QAAQ,MAAM,EAAE,GAAG,GAAG;AAC7B,YAAQ,IAAI,OAAO;AACnB,WAAO,QAAQ,MAAM,EAAE,GAAG,GAAG;AAC7B,WAAO,iBAAiB,SAAS,EAAE,GAAG,GAAG;AACzC,mBAAe,OAAO,SAAS,cAAc,YAAY;AAAA,IAAC,CAAC;AAE3D,UAAM,UAAU;AAChB,WAAO,QAAQ,MAAM,EAAE,GAAG,GAAG;AAC7B,WAAO,iBAAiB,SAAS,EAAE,GAAG,GAAG;AAAA,EAC7C,CAAC;AACL,CAAC;",
+  "names": []
+}

package/test/element-resolution.test.js

@@ -0,0 +1,40 @@
+"use strict";
+import { html, LitElement } from "lit";
+import { elementUpdated, expect, fixture } from "@open-wc/testing";
+import { ElementResolutionController } from "@spectrum-web-components/reactive-controllers/src/ElementResolution.js";
+describe("Element Resolution", () => {
+  it("responds to DOM changes", async () => {
+    class TestEl extends LitElement {
+    }
+    if (!customElements.get("test-element-resolution-el")) {
+      customElements.define("test-element-resolution-el", TestEl);
+    }
+    const test = await fixture(
+      html`
+                <div>
+                    <test-element-resolution-el></test-element-resolution-el>
+                    <div class="target" id="one"></div>
+                    <div class="target" id="two"></div>
+                </div>
+            `
+    );
+    const el = test.querySelector("test-element-resolution-el");
+    const target1 = test.querySelector("#one");
+    const target2 = test.querySelector("#two");
+    const controller = new ElementResolutionController(el);
+    expect(controller.element).to.be.null;
+    controller.selector = ".target";
+    await elementUpdated(el);
+    expect(controller.element === target1).to.be.true;
+    test.insertAdjacentElement("afterbegin", target2);
+    await elementUpdated(el);
+    expect(controller.element === target2).to.be.true;
+    target2.setAttribute("class", "not-target");
+    await elementUpdated(el);
+    expect(controller.element === target1).to.be.true;
+    target2.setAttribute("class", "target");
+    await elementUpdated(el);
+    expect(controller.element === target2).to.be.true;
+  });
+});
+//# sourceMappingURL=element-resolution.test.js.map

package/test/element-resolution.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["element-resolution.test.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, LitElement } from 'lit';\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { ElementResolutionController } from '@spectrum-web-components/reactive-controllers/src/ElementResolution.js';\n\ndescribe('Element Resolution', () => {\n    it('responds to DOM changes', async () => {\n        class TestEl extends LitElement {}\n        if (!customElements.get('test-element-resolution-el')) {\n            customElements.define('test-element-resolution-el', TestEl);\n        }\n        const test = await fixture(\n            html`\n                <div>\n                    <test-element-resolution-el></test-element-resolution-el>\n                    <div class=\"target\" id=\"one\"></div>\n                    <div class=\"target\" id=\"two\"></div>\n                </div>\n            `\n        );\n        const el = test.querySelector('test-element-resolution-el') as TestEl;\n        const target1 = test.querySelector('#one') as HTMLDivElement;\n        const target2 = test.querySelector('#two') as HTMLDivElement;\n        const controller = new ElementResolutionController(el as LitElement);\n        expect(controller.element).to.be.null;\n        controller.selector = '.target';\n        await elementUpdated(el);\n        expect(controller.element === target1).to.be.true;\n        test.insertAdjacentElement('afterbegin', target2);\n        await elementUpdated(el);\n        expect(controller.element === target2).to.be.true;\n        target2.setAttribute('class', 'not-target');\n        await elementUpdated(el);\n        expect(controller.element === target1).to.be.true;\n        target2.setAttribute('class', 'target');\n        await elementUpdated(el);\n        expect(controller.element === target2).to.be.true;\n    });\n});\n"],
+  "mappings": ";AAYA,SAAS,MAAM,kBAAkB;AACjC,SAAS,gBAAgB,QAAQ,eAAe;AAChD,SAAS,mCAAmC;AAE5C,SAAS,sBAAsB,MAAM;AACjC,KAAG,2BAA2B,YAAY;AAAA,IACtC,MAAM,eAAe,WAAW;AAAA,IAAC;AACjC,QAAI,CAAC,eAAe,IAAI,4BAA4B,GAAG;AACnD,qBAAe,OAAO,8BAA8B,MAAM;AAAA,IAC9D;AACA,UAAM,OAAO,MAAM;AAAA,MACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOJ;AACA,UAAM,KAAK,KAAK,cAAc,4BAA4B;AAC1D,UAAM,UAAU,KAAK,cAAc,MAAM;AACzC,UAAM,UAAU,KAAK,cAAc,MAAM;AACzC,UAAM,aAAa,IAAI,4BAA4B,EAAgB;AACnE,WAAO,WAAW,OAAO,EAAE,GAAG,GAAG;AACjC,eAAW,WAAW;AACtB,UAAM,eAAe,EAAE;AACvB,WAAO,WAAW,YAAY,OAAO,EAAE,GAAG,GAAG;AAC7C,SAAK,sBAAsB,cAAc,OAAO;AAChD,UAAM,eAAe,EAAE;AACvB,WAAO,WAAW,YAAY,OAAO,EAAE,GAAG,GAAG;AAC7C,YAAQ,aAAa,SAAS,YAAY;AAC1C,UAAM,eAAe,EAAE;AACvB,WAAO,WAAW,YAAY,OAAO,EAAE,GAAG,GAAG;AAC7C,YAAQ,aAAa,SAAS,QAAQ;AACtC,UAAM,eAAe,EAAE;AACvB,WAAO,WAAW,YAAY,OAAO,EAAE,GAAG,GAAG;AAAA,EACjD,CAAC;AACL,CAAC;",
+  "names": []
+}

package/test/helpers.js

@@ -0,0 +1,23 @@
+"use strict";
+export const createLanguageContext = (lang) => {
+  let language = lang;
+  const updateLanguage = (lang2) => {
+    language = lang2;
+    resolveLanguage();
+  };
+  const langResolvers = [];
+  const createLangResolver = (event) => {
+    langResolvers.push([
+      event.detail.callback,
+      () => langResolvers.splice(langResolvers.length, 1)
+    ]);
+    resolveLanguage();
+  };
+  const resolveLanguage = () => {
+    langResolvers.forEach(
+      ([resolver, unsubscribe]) => resolver(language, unsubscribe)
+    );
+  };
+  return [createLangResolver, updateLanguage];
+};
+//# sourceMappingURL=helpers.js.map

package/test/helpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["helpers.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { ProvideLang } from '@spectrum-web-components/theme';\n\nexport const createLanguageContext = (\n    lang: string\n): [(event: CustomEvent<ProvideLang>) => void, (lang: string) => void] => {\n    let language = lang;\n    const updateLanguage = (lang: string): void => {\n        language = lang;\n        resolveLanguage();\n    };\n    const langResolvers: [ProvideLang['callback'], () => void][] = [];\n    const createLangResolver = (event: CustomEvent<ProvideLang>): void => {\n        langResolvers.push([\n            event.detail.callback,\n            () => langResolvers.splice(langResolvers.length, 1),\n        ]);\n        resolveLanguage();\n    };\n    const resolveLanguage = (): void => {\n        langResolvers.forEach(([resolver, unsubscribe]) =>\n            resolver(language, unsubscribe)\n        );\n    };\n    return [createLangResolver, updateLanguage];\n};\n"],
+  "mappings": ";AAcO,aAAM,wBAAwB,CACjC,SACsE;AACtE,MAAI,WAAW;AACf,QAAM,iBAAiB,CAACA,UAAuB;AAC3C,eAAWA;AACX,oBAAgB;AAAA,EACpB;AACA,QAAM,gBAAyD,CAAC;AAChE,QAAM,qBAAqB,CAAC,UAA0C;AAClE,kBAAc,KAAK;AAAA,MACf,MAAM,OAAO;AAAA,MACb,MAAM,cAAc,OAAO,cAAc,QAAQ,CAAC;AAAA,IACtD,CAAC;AACD,oBAAgB;AAAA,EACpB;AACA,QAAM,kBAAkB,MAAY;AAChC,kBAAc;AAAA,MAAQ,CAAC,CAAC,UAAU,WAAW,MACzC,SAAS,UAAU,WAAW;AAAA,IAClC;AAAA,EACJ;AACA,SAAO,CAAC,oBAAoB,cAAc;AAC9C;",
+  "names": ["lang"]
+}

package/test/match-media.test.js

@@ -0,0 +1,29 @@
+"use strict";
+import { html, LitElement } from "lit";
+import { expect, fixture, nextFrame } from "@open-wc/testing";
+import { setViewport } from "@web/test-runner-commands";
+import { MatchMediaController } from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js";
+class TestEl extends LitElement {
+}
+customElements.define("test-match-media-el", TestEl);
+describe("Match Media", () => {
+  it("responds to media changes", async () => {
+    const el = await fixture(
+      html`
+                <test-match-media-el></test-match-media-el>
+            `
+    );
+    const controller = new MatchMediaController(
+      el,
+      "(min-width: 500px)"
+    );
+    await nextFrame();
+    await nextFrame();
+    expect(controller.matches).to.be.true;
+    await setViewport({ width: 360, height: 640 });
+    await nextFrame();
+    await nextFrame();
+    expect(controller.matches).to.be.false;
+  });
+});
+//# sourceMappingURL=match-media.test.js.map

package/test/match-media.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["match-media.test.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, LitElement } from 'lit';\nimport { expect, fixture, nextFrame } from '@open-wc/testing';\nimport { setViewport } from '@web/test-runner-commands';\nimport { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\n\nclass TestEl extends LitElement {}\ncustomElements.define('test-match-media-el', TestEl);\n\ndescribe('Match Media', () => {\n    it('responds to media changes', async () => {\n        const el = await fixture(\n            html`\n                <test-match-media-el></test-match-media-el>\n            `\n        );\n        const controller = new MatchMediaController(\n            el as LitElement & { shadowRoot: ShadowRoot },\n            '(min-width: 500px)'\n        );\n        // Allow Controller to initialize\n        await nextFrame();\n        await nextFrame();\n        expect(controller.matches).to.be.true;\n\n        await setViewport({ width: 360, height: 640 });\n        // Allow viewport update to propagate.\n        await nextFrame();\n        await nextFrame();\n        expect(controller.matches).to.be.false;\n    });\n});\n"],
+  "mappings": ";AAYA,SAAS,MAAM,kBAAkB;AACjC,SAAS,QAAQ,SAAS,iBAAiB;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AAErC,MAAM,eAAe,WAAW;AAAC;AACjC,eAAe,OAAO,uBAAuB,MAAM;AAEnD,SAAS,eAAe,MAAM;AAC1B,KAAG,6BAA6B,YAAY;AACxC,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AACA,UAAM,aAAa,IAAI;AAAA,MACnB;AAAA,MACA;AAAA,IACJ;AAEA,UAAM,UAAU;AAChB,UAAM,UAAU;AAChB,WAAO,WAAW,OAAO,EAAE,GAAG,GAAG;AAEjC,UAAM,YAAY,EAAE,OAAO,KAAK,QAAQ,IAAI,CAAC;AAE7C,UAAM,UAAU;AAChB,UAAM,UAAU;AAChB,WAAO,WAAW,OAAO,EAAE,GAAG,GAAG;AAAA,EACrC,CAAC;AACL,CAAC;",
+  "names": []
+}