@spectrum-web-components/shared 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,132 @@
+## Description
+
+Shared mixins, tools, etc. that support developing Spectrum Web Components.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/shared?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/shared)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/shared?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/shared)
+
+```bash
+npm install @spectrum-web-components/shared
+```
+
+Individual base classes and mixins can be imported as follows:
+
+```javascript
+import {
+    Focusable,
+    FocusVisiblePolyfillMixin,
+    getActiveElement,
+    LikeAnchor,
+    ObserveSlotText,
+} from '@spectrum-web-components/shared';
+```
+
+### getDeepElementFromPoint
+
+The `getDeepElementFromPoint` method allows you to obtain the deepest possible element at a given coordinates on the current page. The method will step into any available `shadowRoot`s until it reaches the first element with no `shadowRoot` or no children available at the given coordinates.
+
+### Focusable
+
+The `Focusable` subclass of `LitElement` adds some helpers method and lifecycle coverage in order to support passing focus to a container element inside of a custom element. The Focusable base class handles tabindex setting into shadowed elements automatically and is based heavily on the [aybolit delegate-focus-mixin](https://github.com/web-padawan/aybolit/blob/master/packages/core/src/mixins/delegate-focus-mixin.js).
+
+```javascript
+import { Focusable } from '@spectrum-web-components/shared';
+import { html } from 'lit-element';
+
+class FocusableButton extends Focusable {
+    public static override get styles(): CSSResultArray {
+        return [...super.styles];
+    }
+    public get focusElement(): HTMLElement {
+        return this.shadowRoot.querySelector('#button') as HTMLElement;
+    }
+
+    protected override render(): TemplateResult {
+        return html`
+            <button
+                id="button"
+            >
+                Focus for this button is being managed by the focusable base class.
+            </button>
+        `;
+    }
+}
+```
+
+### FocusVisiblePolyfillMixin
+
+Use this mixin if you would like to leverage `:focus-visible` based selectors in your CSS. [Learn more about the polyfill that powers this.](https://www.npmjs.com/package/focus-visible)
+
+### getActiveElement
+
+Use this helper to find an `activeElement` in your component. [Learn more about tracking active elements over shadow DOM boundaries.](https://dev.to/open-wc/mind-the-document-activeelement-2o9a)
+
+### LikeAnchor
+
+Mix `download`, `label`, `href`, and `target` properties into your element to allow it to act more like an `HTMLAnchorElement`.
+
+### ObserveSlotPresence
+
+When working with styles that are driven by the conditional presence of `<slot>`s in a component's shadow DOM, you will need to track whether light DOM that is meant for that slot exists. Use the `ObserveSlotPresence` mixin to target specific light DOM to observe the presence of and trigger `this.requestUpdate()` calls when content fulfilling that selector comes in and out of availability.
+
+```javascript
+import { ObserveSlotPresence } from '@spectrum-web-components/shared';
+import { LitElement, html } from 'lit-element';
+class ObserveSlotPresenceElement extends ObserveSlotPresence(LitElement, '[slot="conditional-slot"]') {
+    // translate the mixin properties into locally understandable language
+    protected get hasConditionalSlotContent() {
+        return this.slotContentIsPresent;
+    }
+    protected override render(): TemplateResult {
+        return html`
+            <button
+                id="button"
+            >
+                ${this.hasConditionalSlotContent
+                    ? html`
+                        <slot
+                            name="conditional-slot"
+                        ></slot>
+                    `
+                    : html``
+                }
+            </button>
+        `;
+    }
+    protected updated(): void {
+        console.log(this.slotContentIsPresent); // => true when <observing-slot-presence-element><div slot="conditional-slot"></div></observing-slot-presence-element>
+    }
+}
+customElements.define('observing-slot-presence-element', ObserveSlotPresenceElement);
+```
+
+### ObserveSlotText
+
+When working with `<slot>`s and their `slotchange` event, you will have the opportunity to capture when the nodes and/or elements in your element are added or removed. However, if the `textContent` of a text node changes, you will not receive the `slotchange` event because the slot hasn't actually received new nodes and/or elements in the exchange. When working with a lit-html binding `<your-element>${text}</your-element>` that means you will not receive a `slotchange` event when the value of `text` goes from `text = ''` to `text = 'something'` or the other way. In these cases the `ObserveSlotText` can be leverages to apply a mutation observe onto your element that tracks `characterData` mutations so that you can resspond as desired.
+
+```javascript
+import { ObserveSlotText } from '@spectrum-web-components/shared';
+import { LitElement, html } from 'lit-element';
+
+class ObserveSlotTextElement extends ObserveSlotText(LitElement, '#observing-slot') {
+    protected override render(): TemplateResult {
+        return html`
+            <button
+                id="button"
+            >
+                <slot
+                    id="observing-slot"
+                    @slotchange=${this.manageObservedSlot}
+                ></slot>
+            </button>
+        `;
+    }
+    protected updated(): void {
+        console.log(this.slotHasContent); // => true when <observing-slot-text-element>Text</observing-slot-text-element>
+    }
+}
+
+customElements.define('observing-slot-text-element', ObserveSlotTextElement);
+```

package/package.json

@@ -0,0 +1,112 @@
+{
+    "name": "@spectrum-web-components/shared",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "tools/shared"
+    },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/tools/shared",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "./src/index.js",
+    "module": "./src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/first-focusable-in.js": {
+            "development": "./src/first-focusable-in.dev.js",
+            "default": "./src/first-focusable-in.js"
+        },
+        "./src/focus-visible.js": {
+            "development": "./src/focus-visible.dev.js",
+            "default": "./src/focus-visible.js"
+        },
+        "./src/focusable-selectors.js": {
+            "development": "./src/focusable-selectors.dev.js",
+            "default": "./src/focusable-selectors.js"
+        },
+        "./src/focusable.js": {
+            "development": "./src/focusable.dev.js",
+            "default": "./src/focusable.js"
+        },
+        "./src/get-active-element.js": {
+            "development": "./src/get-active-element.dev.js",
+            "default": "./src/get-active-element.js"
+        },
+        "./src/get-deep-element-from-point.js": {
+            "development": "./src/get-deep-element-from-point.dev.js",
+            "default": "./src/get-deep-element-from-point.js"
+        },
+        "./src/get-label-from-slot.js": {
+            "development": "./src/get-label-from-slot.dev.js",
+            "default": "./src/get-label-from-slot.js"
+        },
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./src/like-anchor.js": {
+            "development": "./src/like-anchor.dev.js",
+            "default": "./src/like-anchor.js"
+        },
+        "./src/observe-slot-presence.js": {
+            "development": "./src/observe-slot-presence.dev.js",
+            "default": "./src/observe-slot-presence.js"
+        },
+        "./src/observe-slot-text.js": {
+            "development": "./src/observe-slot-text.dev.js",
+            "default": "./src/observe-slot-text.js"
+        },
+        "./src/platform.js": {
+            "development": "./src/platform.dev.js",
+            "default": "./src/platform.js"
+        },
+        "./src/random-id.js": {
+            "development": "./src/random-id.dev.js",
+            "default": "./src/random-id.js"
+        },
+        "./src/reparent-children.js": {
+            "development": "./src/reparent-children.dev.js",
+            "default": "./src/reparent-children.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@lit-labs/observers": "^2.0.2",
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "focus-visible": "^5.1.0"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./**/*.dev.js"
+    ]
+}

package/src/first-focusable-in.d.ts

@@ -0,0 +1,3 @@
+import type { SpectrumElement } from '@spectrum-web-components/base';
+export declare const firstFocusableIn: (root: HTMLElement | ShadowRoot) => SpectrumElement | null;
+export declare const firstFocusableSlottedIn: (root: HTMLSlotElement) => SpectrumElement | null;

package/src/first-focusable-in.dev.js

@@ -0,0 +1,15 @@
+"use strict";
+import { userFocusableSelector } from "./focusable-selectors.dev.js";
+export const firstFocusableIn = (root) => {
+  const firstFocusable = root.querySelector(
+    userFocusableSelector
+  );
+  return firstFocusable;
+};
+export const firstFocusableSlottedIn = (root) => {
+  const firstFocusable = root.assignedElements().find(
+    (element) => element.matches(userFocusableSelector)
+  );
+  return firstFocusable;
+};
+//# sourceMappingURL=first-focusable-in.dev.js.map

package/src/first-focusable-in.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["first-focusable-in.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 type { SpectrumElement } from '@spectrum-web-components/base';\nimport { userFocusableSelector } from './focusable-selectors.dev.js'\n\nexport const firstFocusableIn = (\n    root: HTMLElement | ShadowRoot\n): SpectrumElement | null => {\n    const firstFocusable = root.querySelector(\n        userFocusableSelector\n    ) as SpectrumElement;\n    return firstFocusable;\n};\n\nexport const firstFocusableSlottedIn = (\n    root: HTMLSlotElement\n): SpectrumElement | null => {\n    const firstFocusable = root\n        .assignedElements()\n        .find((element) =>\n            element.matches(userFocusableSelector)\n        ) as SpectrumElement;\n    return firstFocusable;\n};\n"],
+  "mappings": ";AAaA,SAAS,6BAA6B;AAE/B,aAAM,mBAAmB,CAC5B,SACyB;AACzB,QAAM,iBAAiB,KAAK;AAAA,IACxB;AAAA,EACJ;AACA,SAAO;AACX;AAEO,aAAM,0BAA0B,CACnC,SACyB;AACzB,QAAM,iBAAiB,KAClB,iBAAiB,EACjB;AAAA,IAAK,CAAC,YACH,QAAQ,QAAQ,qBAAqB;AAAA,EACzC;AACJ,SAAO;AACX;",
+  "names": []
+}

package/src/first-focusable-in.js

@@ -0,0 +1,2 @@
+"use strict";import{userFocusableSelector as t}from"./focusable-selectors.js";export const firstFocusableIn=e=>e.querySelector(t),firstFocusableSlottedIn=e=>e.assignedElements().find(o=>o.matches(t));
+//# sourceMappingURL=first-focusable-in.js.map

package/src/first-focusable-in.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["first-focusable-in.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 type { SpectrumElement } from '@spectrum-web-components/base';\nimport { userFocusableSelector } from './focusable-selectors.js';\n\nexport const firstFocusableIn = (\n    root: HTMLElement | ShadowRoot\n): SpectrumElement | null => {\n    const firstFocusable = root.querySelector(\n        userFocusableSelector\n    ) as SpectrumElement;\n    return firstFocusable;\n};\n\nexport const firstFocusableSlottedIn = (\n    root: HTMLSlotElement\n): SpectrumElement | null => {\n    const firstFocusable = root\n        .assignedElements()\n        .find((element) =>\n            element.matches(userFocusableSelector)\n        ) as SpectrumElement;\n    return firstFocusable;\n};\n"],
+  "mappings": "aAaA,OAAS,yBAAAA,MAA6B,2BAE/B,aAAM,iBACTC,GAEuBA,EAAK,cACxBD,CACJ,EAIS,wBACTC,GAEuBA,EAClB,iBAAiB,EACjB,KAAMC,GACHA,EAAQ,QAAQF,CAAqB,CACzC",
+  "names": ["userFocusableSelector", "root", "element"]
+}

package/src/focus-visible.d.ts

@@ -0,0 +1,29 @@
+declare global {
+    interface Window {
+        applyFocusVisiblePolyfill?: (scope: Document | ShadowRoot) => void;
+    }
+}
+type Constructor<T = Record<string, unknown>> = {
+    new (...args: any[]): T;
+    prototype: T;
+};
+interface OptionalLifecycleCallbacks {
+    connectedCallback?(): void;
+    disconnectedCallback?(): void;
+    manageAutoFocus?(): void;
+}
+type MixableBaseClass = HTMLElement & OptionalLifecycleCallbacks;
+/**
+ * This mixin function is designed to be applied to a class that inherits
+ * from HTMLElement. It makes it easy for a custom element to coordinate with
+ * the :focus-visible polyfill.
+ *
+ * NOTE(cdata): The code here was adapted from an example proposed with the
+ * introduction of ShadowDOM support in the :focus-visible polyfill.
+ *
+ * @see https://github.com/WICG/focus-visible/pull/196
+ * @param {Function} SuperClass The base class implementation to decorate with
+ * implementation that coordinates with the :focus-visible polyfill
+ */
+export declare const FocusVisiblePolyfillMixin: <T extends Constructor<MixableBaseClass>>(SuperClass: T) => T;
+export {};

package/src/focus-visible.dev.js

@@ -0,0 +1,77 @@
+"use strict";
+let hasFocusVisible = true;
+try {
+  document.body.querySelector(":focus-visible");
+} catch (error) {
+  hasFocusVisible = false;
+  import("focus-visible");
+}
+export const FocusVisiblePolyfillMixin = (SuperClass) => {
+  var _a, _b;
+  const coordinateWithPolyfill = (instance) => {
+    if (instance.shadowRoot == null || instance.hasAttribute("data-js-focus-visible")) {
+      return () => {
+      };
+    }
+    if (self.applyFocusVisiblePolyfill) {
+      self.applyFocusVisiblePolyfill(instance.shadowRoot);
+      if (instance.manageAutoFocus) {
+        instance.manageAutoFocus();
+      }
+    } else {
+      const coordinationHandler = () => {
+        if (self.applyFocusVisiblePolyfill && instance.shadowRoot) {
+          self.applyFocusVisiblePolyfill(instance.shadowRoot);
+        }
+        if (instance.manageAutoFocus) {
+          instance.manageAutoFocus();
+        }
+      };
+      self.addEventListener(
+        "focus-visible-polyfill-ready",
+        coordinationHandler,
+        { once: true }
+      );
+      return () => {
+        self.removeEventListener(
+          "focus-visible-polyfill-ready",
+          coordinationHandler
+        );
+      };
+    }
+    return () => {
+    };
+  };
+  const $endPolyfillCoordination = Symbol("endPolyfillCoordination");
+  class FocusVisibleCoordinator extends (_b = SuperClass, _a = $endPolyfillCoordination, _b) {
+    constructor() {
+      super(...arguments);
+      this[_a] = null;
+    }
+    // Attempt to coordinate with the polyfill when connected to the
+    // document:
+    connectedCallback() {
+      super.connectedCallback && super.connectedCallback();
+      if (!hasFocusVisible) {
+        requestAnimationFrame(() => {
+          if (this[$endPolyfillCoordination] == null) {
+            this[$endPolyfillCoordination] = coordinateWithPolyfill(this);
+          }
+        });
+      }
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback && super.disconnectedCallback();
+      if (!hasFocusVisible) {
+        requestAnimationFrame(() => {
+          if (this[$endPolyfillCoordination] != null) {
+            this[$endPolyfillCoordination]();
+            this[$endPolyfillCoordination] = null;
+          }
+        });
+      }
+    }
+  }
+  return FocusVisibleCoordinator;
+};
+//# sourceMappingURL=focus-visible.dev.js.map

package/src/focus-visible.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["focus-visible.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\ndeclare global {\n    interface Window {\n        applyFocusVisiblePolyfill?: (scope: Document | ShadowRoot) => void;\n    }\n}\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\ninterface OptionalLifecycleCallbacks {\n    connectedCallback?(): void;\n    disconnectedCallback?(): void;\n    manageAutoFocus?(): void;\n}\n\ntype MixableBaseClass = HTMLElement & OptionalLifecycleCallbacks;\n\ntype EndPolyfillCoordinationCallback = () => void;\n\nlet hasFocusVisible = true;\n\ntry {\n    document.body.querySelector(':focus-visible');\n} catch (error) {\n    hasFocusVisible = false;\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    import('focus-visible');\n}\n\n/**\n * This mixin function is designed to be applied to a class that inherits\n * from HTMLElement. It makes it easy for a custom element to coordinate with\n * the :focus-visible polyfill.\n *\n * NOTE(cdata): The code here was adapted from an example proposed with the\n * introduction of ShadowDOM support in the :focus-visible polyfill.\n *\n * @see https://github.com/WICG/focus-visible/pull/196\n * @param {Function} SuperClass The base class implementation to decorate with\n * implementation that coordinates with the :focus-visible polyfill\n */\nexport const FocusVisiblePolyfillMixin = <\n    T extends Constructor<MixableBaseClass>\n>(\n    SuperClass: T\n): T => {\n    const coordinateWithPolyfill = (\n        instance: MixableBaseClass\n    ): EndPolyfillCoordinationCallback => {\n        // If there is no shadow root, there is no need to coordinate with\n        // the polyfill. If we already coordinated with the polyfill, we can\n        // skip subsequent invokcations:\n        if (\n            instance.shadowRoot == null ||\n            instance.hasAttribute('data-js-focus-visible')\n        ) {\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            return () => {};\n        }\n\n        // The polyfill might already be loaded. If so, we can apply it to\n        // the shadow root immediately:\n        if (self.applyFocusVisiblePolyfill) {\n            self.applyFocusVisiblePolyfill(instance.shadowRoot);\n\n            if (instance.manageAutoFocus) {\n                instance.manageAutoFocus();\n            }\n        } else {\n            const coordinationHandler = (): void => {\n                if (self.applyFocusVisiblePolyfill && instance.shadowRoot) {\n                    self.applyFocusVisiblePolyfill(instance.shadowRoot);\n                }\n\n                if (instance.manageAutoFocus) {\n                    instance.manageAutoFocus();\n                }\n            };\n            // Otherwise, wait for the polyfill to be loaded lazily. It might\n            // never be loaded, but if it is then we can apply it to the\n            // shadow root at the appropriate time by waiting for the ready\n            // event:\n            self.addEventListener(\n                'focus-visible-polyfill-ready',\n                coordinationHandler,\n                { once: true }\n            );\n\n            return () => {\n                self.removeEventListener(\n                    'focus-visible-polyfill-ready',\n                    coordinationHandler\n                );\n            };\n        }\n\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n    };\n\n    const $endPolyfillCoordination = Symbol('endPolyfillCoordination');\n\n    // IE11 doesn't natively support custom elements or JavaScript class\n    // syntax The mixin implementation assumes that the user will take the\n    // appropriate steps to support both:\n    class FocusVisibleCoordinator extends SuperClass {\n        private [$endPolyfillCoordination]: EndPolyfillCoordinationCallback | null =\n            null;\n\n        // Attempt to coordinate with the polyfill when connected to the\n        // document:\n        override connectedCallback(): void {\n            super.connectedCallback && super.connectedCallback();\n            if (!hasFocusVisible) {\n                requestAnimationFrame(() => {\n                    if (this[$endPolyfillCoordination] == null) {\n                        this[$endPolyfillCoordination] =\n                            coordinateWithPolyfill(this);\n                    }\n                });\n            }\n        }\n\n        override disconnectedCallback(): void {\n            super.disconnectedCallback && super.disconnectedCallback();\n            // It's important to remove the polyfill event listener when we\n            // disconnect, otherwise we will leak the whole element via window:\n            if (!hasFocusVisible) {\n                requestAnimationFrame(() => {\n                    if (this[$endPolyfillCoordination] != null) {\n                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                        this[$endPolyfillCoordination]!();\n                        this[$endPolyfillCoordination] = null;\n                    }\n                });\n            }\n        }\n    }\n\n    return FocusVisibleCoordinator;\n};\n"],
+  "mappings": ";AAkCA,IAAI,kBAAkB;AAEtB,IAAI;AACA,WAAS,KAAK,cAAc,gBAAgB;AAChD,SAAS,OAAO;AACZ,oBAAkB;AAGlB,SAAO,eAAe;AAC1B;AAcO,aAAM,4BAA4B,CAGrC,eACI;AA7DR;AA8DI,QAAM,yBAAyB,CAC3B,aACkC;AAIlC,QACI,SAAS,cAAc,QACvB,SAAS,aAAa,uBAAuB,GAC/C;AAEE,aAAO,MAAM;AAAA,MAAC;AAAA,IAClB;AAIA,QAAI,KAAK,2BAA2B;AAChC,WAAK,0BAA0B,SAAS,UAAU;AAElD,UAAI,SAAS,iBAAiB;AAC1B,iBAAS,gBAAgB;AAAA,MAC7B;AAAA,IACJ,OAAO;AACH,YAAM,sBAAsB,MAAY;AACpC,YAAI,KAAK,6BAA6B,SAAS,YAAY;AACvD,eAAK,0BAA0B,SAAS,UAAU;AAAA,QACtD;AAEA,YAAI,SAAS,iBAAiB;AAC1B,mBAAS,gBAAgB;AAAA,QAC7B;AAAA,MACJ;AAKA,WAAK;AAAA,QACD;AAAA,QACA;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACjB;AAEA,aAAO,MAAM;AACT,aAAK;AAAA,UACD;AAAA,UACA;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAGA,WAAO,MAAM;AAAA,IAAC;AAAA,EAClB;AAEA,QAAM,2BAA2B,OAAO,yBAAyB;AAAA,EAKjE,MAAM,iCAAgC,iBACzB,+BADyB,IAAW;AAAA,IAAjD;AAAA;AACI,WAAS,MACL;AAAA;AAAA;AAAA;AAAA,IAIK,oBAA0B;AAC/B,YAAM,qBAAqB,MAAM,kBAAkB;AACnD,UAAI,CAAC,iBAAiB;AAClB,8BAAsB,MAAM;AACxB,cAAI,KAAK,wBAAwB,KAAK,MAAM;AACxC,iBAAK,wBAAwB,IACzB,uBAAuB,IAAI;AAAA,UACnC;AAAA,QACJ,CAAC;AAAA,MACL;AAAA,IACJ;AAAA,IAES,uBAA6B;AAClC,YAAM,wBAAwB,MAAM,qBAAqB;AAGzD,UAAI,CAAC,iBAAiB;AAClB,8BAAsB,MAAM;AACxB,cAAI,KAAK,wBAAwB,KAAK,MAAM;AAExC,iBAAK,wBAAwB,EAAG;AAChC,iBAAK,wBAAwB,IAAI;AAAA,UACrC;AAAA,QACJ,CAAC;AAAA,MACL;AAAA,IACJ;AAAA,EACJ;AAEA,SAAO;AACX;",
+  "names": []
+}

package/src/focus-visible.js

@@ -0,0 +1,2 @@
+"use strict";let i=!0;try{document.body.querySelector(":focus-visible")}catch(a){i=!1,import("focus-visible")}export const FocusVisiblePolyfillMixin=a=>{var s,t;const n=l=>{if(l.shadowRoot==null||l.hasAttribute("data-js-focus-visible"))return()=>{};if(self.applyFocusVisiblePolyfill)self.applyFocusVisiblePolyfill(l.shadowRoot),l.manageAutoFocus&&l.manageAutoFocus();else{const e=()=>{self.applyFocusVisiblePolyfill&&l.shadowRoot&&self.applyFocusVisiblePolyfill(l.shadowRoot),l.manageAutoFocus&&l.manageAutoFocus()};return self.addEventListener("focus-visible-polyfill-ready",e,{once:!0}),()=>{self.removeEventListener("focus-visible-polyfill-ready",e)}}return()=>{}},o=Symbol("endPolyfillCoordination");class c extends(t=a,s=o,t){constructor(){super(...arguments);this[s]=null}connectedCallback(){super.connectedCallback&&super.connectedCallback(),i||requestAnimationFrame(()=>{this[o]==null&&(this[o]=n(this))})}disconnectedCallback(){super.disconnectedCallback&&super.disconnectedCallback(),i||requestAnimationFrame(()=>{this[o]!=null&&(this[o](),this[o]=null)})}}return c};
+//# sourceMappingURL=focus-visible.js.map

package/src/focus-visible.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["focus-visible.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\ndeclare global {\n    interface Window {\n        applyFocusVisiblePolyfill?: (scope: Document | ShadowRoot) => void;\n    }\n}\n\ntype Constructor<T = Record<string, unknown>> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n    prototype: T;\n};\n\ninterface OptionalLifecycleCallbacks {\n    connectedCallback?(): void;\n    disconnectedCallback?(): void;\n    manageAutoFocus?(): void;\n}\n\ntype MixableBaseClass = HTMLElement & OptionalLifecycleCallbacks;\n\ntype EndPolyfillCoordinationCallback = () => void;\n\nlet hasFocusVisible = true;\n\ntry {\n    document.body.querySelector(':focus-visible');\n} catch (error) {\n    hasFocusVisible = false;\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    import('focus-visible');\n}\n\n/**\n * This mixin function is designed to be applied to a class that inherits\n * from HTMLElement. It makes it easy for a custom element to coordinate with\n * the :focus-visible polyfill.\n *\n * NOTE(cdata): The code here was adapted from an example proposed with the\n * introduction of ShadowDOM support in the :focus-visible polyfill.\n *\n * @see https://github.com/WICG/focus-visible/pull/196\n * @param {Function} SuperClass The base class implementation to decorate with\n * implementation that coordinates with the :focus-visible polyfill\n */\nexport const FocusVisiblePolyfillMixin = <\n    T extends Constructor<MixableBaseClass>\n>(\n    SuperClass: T\n): T => {\n    const coordinateWithPolyfill = (\n        instance: MixableBaseClass\n    ): EndPolyfillCoordinationCallback => {\n        // If there is no shadow root, there is no need to coordinate with\n        // the polyfill. If we already coordinated with the polyfill, we can\n        // skip subsequent invokcations:\n        if (\n            instance.shadowRoot == null ||\n            instance.hasAttribute('data-js-focus-visible')\n        ) {\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            return () => {};\n        }\n\n        // The polyfill might already be loaded. If so, we can apply it to\n        // the shadow root immediately:\n        if (self.applyFocusVisiblePolyfill) {\n            self.applyFocusVisiblePolyfill(instance.shadowRoot);\n\n            if (instance.manageAutoFocus) {\n                instance.manageAutoFocus();\n            }\n        } else {\n            const coordinationHandler = (): void => {\n                if (self.applyFocusVisiblePolyfill && instance.shadowRoot) {\n                    self.applyFocusVisiblePolyfill(instance.shadowRoot);\n                }\n\n                if (instance.manageAutoFocus) {\n                    instance.manageAutoFocus();\n                }\n            };\n            // Otherwise, wait for the polyfill to be loaded lazily. It might\n            // never be loaded, but if it is then we can apply it to the\n            // shadow root at the appropriate time by waiting for the ready\n            // event:\n            self.addEventListener(\n                'focus-visible-polyfill-ready',\n                coordinationHandler,\n                { once: true }\n            );\n\n            return () => {\n                self.removeEventListener(\n                    'focus-visible-polyfill-ready',\n                    coordinationHandler\n                );\n            };\n        }\n\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n    };\n\n    const $endPolyfillCoordination = Symbol('endPolyfillCoordination');\n\n    // IE11 doesn't natively support custom elements or JavaScript class\n    // syntax The mixin implementation assumes that the user will take the\n    // appropriate steps to support both:\n    class FocusVisibleCoordinator extends SuperClass {\n        private [$endPolyfillCoordination]: EndPolyfillCoordinationCallback | null =\n            null;\n\n        // Attempt to coordinate with the polyfill when connected to the\n        // document:\n        override connectedCallback(): void {\n            super.connectedCallback && super.connectedCallback();\n            if (!hasFocusVisible) {\n                requestAnimationFrame(() => {\n                    if (this[$endPolyfillCoordination] == null) {\n                        this[$endPolyfillCoordination] =\n                            coordinateWithPolyfill(this);\n                    }\n                });\n            }\n        }\n\n        override disconnectedCallback(): void {\n            super.disconnectedCallback && super.disconnectedCallback();\n            // It's important to remove the polyfill event listener when we\n            // disconnect, otherwise we will leak the whole element via window:\n            if (!hasFocusVisible) {\n                requestAnimationFrame(() => {\n                    if (this[$endPolyfillCoordination] != null) {\n                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                        this[$endPolyfillCoordination]!();\n                        this[$endPolyfillCoordination] = null;\n                    }\n                });\n            }\n        }\n    }\n\n    return FocusVisibleCoordinator;\n};\n"],
+  "mappings": "aAkCA,IAAIA,EAAkB,GAEtB,GAAI,CACA,SAAS,KAAK,cAAc,gBAAgB,CAChD,OAASC,EAAO,CACZD,EAAkB,GAGlB,OAAO,eAAe,CAC1B,CAcO,aAAM,0BAGTE,GACI,CA7DR,IAAAC,EAAAC,EA8DI,MAAMC,EACFC,GACkC,CAIlC,GACIA,EAAS,YAAc,MACvBA,EAAS,aAAa,uBAAuB,EAG7C,MAAO,IAAM,CAAC,EAKlB,GAAI,KAAK,0BACL,KAAK,0BAA0BA,EAAS,UAAU,EAE9CA,EAAS,iBACTA,EAAS,gBAAgB,MAE1B,CACH,MAAMC,EAAsB,IAAY,CAChC,KAAK,2BAA6BD,EAAS,YAC3C,KAAK,0BAA0BA,EAAS,UAAU,EAGlDA,EAAS,iBACTA,EAAS,gBAAgB,CAEjC,EAKA,YAAK,iBACD,+BACAC,EACA,CAAE,KAAM,EAAK,CACjB,EAEO,IAAM,CACT,KAAK,oBACD,+BACAA,CACJ,CACJ,CACJ,CAGA,MAAO,IAAM,CAAC,CAClB,EAEMC,EAA2B,OAAO,yBAAyB,EAKjE,MAAMC,UAAgCL,EAAAF,EACzBC,EAAAK,EADyBJ,EAAW,CAAjD,kCACI,KAASD,GACL,KAIK,mBAA0B,CAC/B,MAAM,mBAAqB,MAAM,kBAAkB,EAC9CH,GACD,sBAAsB,IAAM,CACpB,KAAKQ,CAAwB,GAAK,OAClC,KAAKA,CAAwB,EACzBH,EAAuB,IAAI,EAEvC,CAAC,CAET,CAES,sBAA6B,CAClC,MAAM,sBAAwB,MAAM,qBAAqB,EAGpDL,GACD,sBAAsB,IAAM,CACpB,KAAKQ,CAAwB,GAAK,OAElC,KAAKA,CAAwB,EAAG,EAChC,KAAKA,CAAwB,EAAI,KAEzC,CAAC,CAET,CACJ,CAEA,OAAOC,CACX",
+  "names": ["hasFocusVisible", "error", "SuperClass", "_a", "_b", "coordinateWithPolyfill", "instance", "coordinationHandler", "$endPolyfillCoordination", "FocusVisibleCoordinator"]
+}

package/src/focusable-selectors.d.ts

@@ -0,0 +1,2 @@
+export declare const userFocusableSelector: string;
+export declare const focusableSelector: string;

package/src/focusable-selectors.dev.js

@@ -0,0 +1,15 @@
+"use strict";
+const focusables = [
+  "button",
+  "[focusable]",
+  "[href]",
+  "input",
+  "label",
+  "select",
+  "textarea",
+  "[tabindex]"
+];
+const userFocuable = ':not([tabindex="-1"])';
+export const userFocusableSelector = focusables.join(`${userFocuable}, `) + userFocuable;
+export const focusableSelector = focusables.join(", ");
+//# sourceMappingURL=focusable-selectors.dev.js.map

package/src/focusable-selectors.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["focusable-selectors.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 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\nconst focusables = [\n    'button',\n    '[focusable]',\n    '[href]',\n    'input',\n    'label',\n    'select',\n    'textarea',\n    '[tabindex]',\n];\n\nconst userFocuable = ':not([tabindex=\"-1\"])';\n\nexport const userFocusableSelector =\n    focusables.join(`${userFocuable}, `) + userFocuable;\n\nexport const focusableSelector = focusables.join(', ');\n"],
+  "mappings": ";AAYA,MAAM,aAAa;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEA,MAAM,eAAe;AAEd,aAAM,wBACT,WAAW,KAAK,GAAG,YAAY,IAAI,IAAI;AAEpC,aAAM,oBAAoB,WAAW,KAAK,IAAI;",
+  "names": []
+}

package/src/focusable-selectors.js

@@ -0,0 +1,2 @@
+"use strict";const e=["button","[focusable]","[href]","input","label","select","textarea","[tabindex]"],o=':not([tabindex="-1"])';export const userFocusableSelector=e.join(`${o}, `)+o,focusableSelector=e.join(", ");
+//# sourceMappingURL=focusable-selectors.js.map

package/src/focusable-selectors.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["focusable-selectors.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 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\nconst focusables = [\n    'button',\n    '[focusable]',\n    '[href]',\n    'input',\n    'label',\n    'select',\n    'textarea',\n    '[tabindex]',\n];\n\nconst userFocuable = ':not([tabindex=\"-1\"])';\n\nexport const userFocusableSelector =\n    focusables.join(`${userFocuable}, `) + userFocuable;\n\nexport const focusableSelector = focusables.join(', ');\n"],
+  "mappings": "aAYA,MAAMA,EAAa,CACf,SACA,cACA,SACA,QACA,QACA,SACA,WACA,YACJ,EAEMC,EAAe,wBAEd,aAAM,sBACTD,EAAW,KAAK,GAAGC,CAAY,IAAI,EAAIA,EAE9B,kBAAoBD,EAAW,KAAK,IAAI",
+  "names": ["focusables", "userFocuable"]
+}

package/src/focusable.d.ts

@@ -0,0 +1,56 @@
+import { PropertyValues, SpectrumElement } from '@spectrum-web-components/base';
+type DisableableElement = HTMLElement & {
+    disabled?: boolean;
+};
+declare const Focusable_base: typeof SpectrumElement;
+/**
+ * Focusable base class handles tabindex setting into shadowed elements automatically.
+ *
+ * This implementation is based heavily on the aybolit delegate-focus-mixin at
+ * https://github.com/web-padawan/aybolit/blob/master/packages/core/src/mixins/delegate-focus-mixin.js
+ */
+export declare class Focusable extends Focusable_base {
+    /**
+     * Disable this control. It will not receive focus or events
+     */
+    disabled: boolean;
+    /**
+     * When this control is rendered, focus it automatically
+     * @private
+     */
+    autofocus: boolean;
+    /**
+     * The tab index to apply to this control. See general documentation about
+     * the tabindex HTML property
+     *
+     * @private
+     */
+    get tabIndex(): number;
+    set tabIndex(tabIndex: number);
+    private _tabIndex;
+    private onPointerdownManagementOfTabIndex;
+    private manageFocusElementTabindex;
+    private manipulatingTabindex;
+    /**
+     * @private
+     */
+    get focusElement(): DisableableElement;
+    /**
+     * @public
+     * @returns {boolean} whether the component should manage its focusElement tab-index or not
+     * Needed for action-menu to be supported in action-group in an accessible way
+     */
+    get selfManageFocusElement(): boolean;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    click(): void;
+    protected manageAutoFocus(): void;
+    protected firstUpdated(changes: PropertyValues): void;
+    protected update(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private handleDisabledChanged;
+    protected getUpdateComplete(): Promise<boolean>;
+    private autofocusReady;
+    connectedCallback(): void;
+}
+export {};