@spectrum-web-components/reactive-controllers 1.2.0-beta.8 → 1.2.0

package/src/ColorController.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["ColorController.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 type { ReactiveElement } from 'lit';\nimport Color from 'colorjs.io';\nimport type {\n    ColorObject,\n    ColorTypes as DefaultColorTypes,\n} from 'colorjs.io/types/src/color';\nimport type ColorSpace from 'colorjs.io/types/src/space';\n\n/**\n * Represents various color types that can be used in the application.\n *\n * This type can be one of the following:\n * - `DefaultColorTypes`: A predefined set of color types.\n * - An object representing an RGBA color with properties:\n *   - `r`: Red component, can be a number or string.\n *   - `g`: Green component, can be a number or string.\n *   - `b`: Blue component, can be a number or string.\n *   - `a` (optional): Alpha component, can be a number or string.\n * - An object representing an HSLA color with properties:\n *   - `h`: Hue component, can be a number or string.\n *   - `s`: Saturation component, can be a number or string.\n *   - `l`: Lightness component, can be a number or string.\n *   - `a` (optional): Alpha component, can be a number or string.\n * - An object representing an HSVA color with properties:\n *   - `h`: Hue component, can be a number or string.\n *   - `s`: Saturation component, can be a number or string.\n *   - `v`: Value component, can be a number or string.\n *   - `a` (optional): Alpha component, can be a number or string.\n */\ntype ColorTypes =\n    | DefaultColorTypes\n    | {\n          r: number | string;\n          g: number | string;\n          b: number | string;\n          a?: number | string;\n      }\n    | {\n          h: number | string;\n          s: number | string;\n          l: number | string;\n          a?: number | string;\n      }\n    | {\n          h: number | string;\n          s: number | string;\n          v: number | string;\n          a?: number | string;\n      };\n\nexport type { Color, ColorTypes };\n\ntype ColorValidationResult = {\n    spaceId: string | null;\n    coords: number[];\n    isValid: boolean;\n    alpha: number;\n};\n\n/**\n * The `ColorController` class is responsible for managing and validating color values\n * in various color spaces (RGB, HSL, HSV, Hex). It provides methods to set, get, and\n * validate colors, as well as convert between different color formats.\n *\n * @class\n * @property {Color} color - Gets or sets the current color value.\n * @property {ColorTypes} colorValue - Gets the color value in various formats based on the original color input.\n * @property {number} hue - Gets or sets the hue value of the current color.\n *\n * @method validateColorString(color: string): ColorValidationResult - Validates a color string and returns the validation result.\n * @method getColor(format: string | ColorSpace): ColorObject - Converts the current color to the specified format.\n * @method getHslString(): string - Returns the current color in HSL string format.\n * @method savePreviousColor(): void - Saves the current color as the previous color.\n * @method restorePreviousColor(): void - Restores the previous color.\n *\n * @constructor\n * @param {ReactiveElement} host - The host element that uses this controller.\n * @param {Object} [options] - Optional configuration options.\n * @param {string} [options.manageAs] - Specifies the color space to manage the color as.\n */\n\nexport class ColorController {\n    get color(): Color {\n        return this._color;\n    }\n\n    /**\n     * Validates a color string and returns a result indicating the color space,\n     * coordinates, alpha value, and whether the color is valid.\n     *\n     * @param color - The color string to validate. Supported formats include:\n     *  - RGB: `rgb(r, g, b)`, `rgba(r, g, b, a)`, `rgb r g b`, `rgba r g b a`\n     *  - HSL: `hsl(h, s, l)`, `hsla(h, s, l, a)`, `hsl h s l`, `hsla h s l a`\n     *  - HSV: `hsv(h, s, v)`, `hsva(h, s, v, a)`, `hsv h s v`, `hsva h s v a`\n     *  - HEX: `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`\n     *\n     * @returns An object containing the following properties:\n     *  - `spaceId`: The color space identifier (`'srgb'`, `'hsl'`, or `'hsv'`).\n     *  - `coords`: An array of numeric values representing the color coordinates.\n     *  - `alpha`: The alpha value of the color (0 to 1).\n     *  - `isValid`: A boolean indicating whether the color string is valid.\n     */\n    public validateColorString(color: string): ColorValidationResult {\n        const result: ColorValidationResult = {\n            spaceId: null,\n            coords: [0, 0, 0],\n            isValid: false,\n            alpha: 1,\n        };\n\n        const rgbRegExpArray = [\n            /rgba\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n            /rgb\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*\\)/i,\n            /^rgba\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(0|0?\\.\\d+|1)\\s*$/i,\n            /^rgb\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s*$/i,\n            /^rgba\\(\\s*(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d*\\.?\\d+)\\s*\\)$/i,\n            /^rgb\\(\\s*(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s*\\)$/i,\n            /rgb\\(\\s*(100|[0-9]{1,2}%)\\s*,\\s*(100|[0-9]{1,2}%)\\s*,\\s*(100|[0-9]{1,2}%)\\s*\\)/i,\n            /rgba\\(\\s*(100|[0-9]{1,2})%\\s*,\\s*(100|[0-9]{1,2})%\\s*,\\s*(100|[0-9]{1,2})%\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n        ];\n        const hslRegExpArray = [\n            /hsla\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n            /hsl\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*\\)/i,\n            /^hsla\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*$/i,\n            /^hsl\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*$/i,\n            /^hsla\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*\\)$/i,\n            /^hsl\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*\\)$/i,\n        ];\n        const hsvRegExpArray = [\n            /hsva\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n            /hsv\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*\\)/i,\n            /^hsva\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*$/i,\n            /^hsv\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*$/i,\n            /^hsva\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*\\)$/i,\n            /^hsv\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*\\)$/i,\n        ];\n        const hexRegExpArray = [\n            /^#([A-Fa-f0-9]{6})(?:\\s*([01](?:\\.\\d+)?))?$/,\n            /^#([A-Fa-f0-9]{3})(?:\\s*([01](?:\\.\\d+)?))?$/,\n        ];\n\n        const rgbaMatch = rgbRegExpArray\n            .find((regex) => regex.test(color))\n            ?.exec(color);\n        const hslaMatch = hslRegExpArray\n            .find((regex) => regex.test(color))\n            ?.exec(color);\n        const hsvaMatch = hsvRegExpArray\n            .find((regex) => regex.test(color))\n            ?.exec(color);\n        const hexMatch = hexRegExpArray\n            .find((regex) => regex.test(color))\n            ?.exec(color);\n\n        if (rgbaMatch) {\n            const [, r, g, b, a] = rgbaMatch.filter(\n                (element) => typeof element === 'string'\n            );\n            const alpha = a === undefined ? 1 : Number(a);\n            const processValue = (value: string): number => {\n                if (value.includes('%')) {\n                    return Number(value.replace('%', '')) / 100;\n                } else {\n                    return Number(value) / 255;\n                }\n            };\n            const numericR = processValue(r);\n            const numericG = processValue(g);\n            const numericB = processValue(b);\n\n            result.spaceId = 'srgb';\n            result.coords = [numericR, numericG, numericB];\n            result.alpha = alpha;\n            result.isValid =\n                numericR >= 0 &&\n                numericR <= 1 &&\n                numericG >= 0 &&\n                numericG <= 1 &&\n                numericB >= 0 &&\n                numericB <= 1 &&\n                alpha >= 0 &&\n                alpha <= 1;\n        } else if (hslaMatch) {\n            const [, h, s, l, a] = hslaMatch;\n            const values = [h, s, l, a === undefined ? '1' : a].map((value) =>\n                Number(value.replace(/[^\\d.]/g, ''))\n            );\n            const [numericH, numericS, numericL, numericA] = values;\n\n            result.spaceId = 'hsl';\n            result.coords = [numericH, numericS, numericL];\n            result.alpha = numericA;\n            result.isValid =\n                numericH >= 0 &&\n                numericH <= 360 &&\n                numericS >= 0 &&\n                numericS <= 100 &&\n                numericL >= 0 &&\n                numericL <= 100 &&\n                numericA >= 0 &&\n                numericA <= 1;\n        } else if (hsvaMatch) {\n            const [, h, s, v, a] = hsvaMatch;\n            const values = [h, s, v, a === undefined ? '1' : a].map((value) =>\n                Number(value.replace(/[^\\d.]/g, ''))\n            );\n            const [numericH, numericS, numericV, numericA] = values;\n\n            result.spaceId = 'hsv';\n            result.coords = [numericH, numericS, numericV];\n            result.alpha = numericA;\n            result.isValid =\n                numericH >= 0 &&\n                numericH <= 360 &&\n                numericS >= 0 &&\n                numericS <= 100 &&\n                numericV >= 0 &&\n                numericV <= 100 &&\n                numericA >= 0 &&\n                numericA <= 1;\n        } else if (hexMatch) {\n            const [, hex, alpha] = hexMatch;\n\n            // Function to process 2-digit or repeated 1-digit hex\n            const processHex = (hex: string): number => {\n                // For 3-digit hex values, repeat each digit\n                if (hex.length === 1) {\n                    hex = hex + hex;\n                }\n                return parseInt(hex, 16) / 255;\n            };\n\n            // Handle both 3-digit and 6-digit hex\n            let numericR, numericG, numericB;\n            if (hex.length === 3) {\n                // 3-digit hex (e.g., #3a7 -> #33aa77)\n                numericR = processHex(hex.substring(0, 1));\n                numericG = processHex(hex.substring(1, 2));\n                numericB = processHex(hex.substring(2, 3));\n            } else {\n                // 6-digit hex (e.g., #33aa77)\n                numericR = processHex(hex.substring(0, 2));\n                numericG = processHex(hex.substring(2, 4));\n                numericB = processHex(hex.substring(4, 6));\n            }\n\n            // Numeric alpha: if not provided, default to 1\n            const numericA = alpha ? Number(alpha) : 1;\n\n            // Validate the color values\n            result.spaceId = 'srgb';\n            result.coords = [numericR, numericG, numericB];\n            result.alpha = numericA;\n            result.isValid =\n                numericR >= 0 &&\n                numericR <= 1 &&\n                numericG >= 0 &&\n                numericG <= 1 &&\n                numericB >= 0 &&\n                numericB <= 1 &&\n                numericA >= 0 &&\n                numericA <= 1;\n        }\n\n        return result;\n    }\n\n    /**\n     * Represents the color state of the component.\n     * Initialized with an HSV color model with hue 0, saturation 100, and value 100, and an alpha value of 1.\n     *\n     * @private\n     * @type {Color}\n     */\n    private _color: Color = new Color('hsv', [0, 100, 100], 1);\n\n    /**\n     * Represents the original color value provided by the user.\n     *\n     * @private\n     * @type {ColorTypes}\n     */\n    private _colorOrigin!: ColorTypes;\n\n    /**\n     * Gets the original color value provided by the user.\n     *\n     * @returns {ColorTypes} The original color value.\n     */\n    get colorOrigin(): ColorTypes {\n        return this._colorOrigin;\n    }\n\n    /**\n     * Sets the original color value provided by the user.\n     *\n     * @param {ColorTypes} colorOrigin - The original color value to set.\n     */\n    set colorOrigin(colorOrigin: ColorTypes) {\n        this._colorOrigin = colorOrigin;\n    }\n\n    /**\n     * An optional string property that specifies how the color should be managed(its value is the name of color space in which color object will be managed).\n     * This property can be used to define a specific management strategy or identifier.\n     */\n    private manageAs?: string;\n\n    /**\n     * Stores the previous color value.\n     * This is used to keep track of the color before any changes are made.\n     *\n     * @private\n     */\n    private _previousColor!: Color;\n\n    /**\n     * Sets the color value for the controller. The color can be provided in various formats:\n     * - A string representing a color name, hex code, or other color format.\n     * - An instance of the `Color` class.\n     * - An object containing color properties such as `h`, `s`, `l`, `v`, `r`, `g`, `b`, and optionally `a`.\n     *\n     * The method validates and parses the input color, converting it to a `Color` instance.\n     * If the color is invalid, it attempts to parse it as a hex code or returns without setting a new color.\n     *\n     * @param {ColorTypes} color - The color value to set. It can be a string, an instance of `Color`, or an object with color properties.\n     */\n    set color(color: ColorTypes) {\n        this._colorOrigin = color;\n        let newColor!: Color;\n        if (typeof color === 'string') {\n            const colorValidationResult = this.validateColorString(\n                color as string\n            );\n            if (colorValidationResult.isValid) {\n                const [coord1, coord2, coord3] = colorValidationResult.coords;\n                newColor = new Color(\n                    `${colorValidationResult.spaceId}`,\n                    [coord1, coord2, coord3],\n                    colorValidationResult.alpha\n                );\n            } else {\n                try {\n                    Color.parse(color);\n                } catch (error) {\n                    try {\n                        newColor = new Color(`#${color}`);\n                    } catch (error) {\n                        return;\n                    }\n                }\n            }\n        } else if (color instanceof Color) {\n            newColor = color;\n        } else if (!Array.isArray(color)) {\n            const { h, s, l, v, r, g, b, a } = color as {\n                h: string;\n                s: string;\n                l: string;\n                v: string;\n                r: string;\n                g: string;\n                b: string;\n                a?: string;\n            };\n            if (typeof h !== 'undefined' && typeof s !== 'undefined') {\n                const lv = l ?? v;\n                newColor = new Color(\n                    typeof l !== 'undefined' ? 'hsl' : 'hsv',\n                    [\n                        parseFloat(h),\n                        typeof s !== 'string' ? s * 100 : parseFloat(s),\n                        typeof lv !== 'string' ? lv * 100 : parseFloat(lv),\n                    ],\n                    parseFloat(a || '1')\n                );\n            } else if (\n                typeof r !== 'undefined' &&\n                typeof g !== 'undefined' &&\n                typeof b !== 'undefined'\n            ) {\n                newColor = new Color(\n                    'srgb',\n                    [\n                        parseFloat(r) / 255,\n                        parseFloat(g) / 255,\n                        parseFloat(b) / 255,\n                    ],\n                    parseFloat(a || '1')\n                );\n            }\n        }\n\n        if (!newColor) {\n            newColor = new Color(color as DefaultColorTypes);\n        }\n\n        if (this.manageAs) {\n            this._color = newColor.to(this.manageAs) as Color;\n        } else {\n            this._color = newColor;\n        }\n        this.host.requestUpdate();\n    }\n\n    /**\n     * Gets the color value in various formats based on the original color input.\n     *\n     * The method determines the color space of the original color input and converts\n     * the color to the appropriate format. The supported color spaces are:\n     * - HSV (Hue, Saturation, Value)\n     * - HSL (Hue, Saturation, Lightness)\n     * - Hexadecimal (with or without alpha)\n     * - RGB (Red, Green, Blue) with optional alpha\n     *\n     * @returns {ColorTypes} The color value in the appropriate format.\n     *\n     * The method handles the following cases:\n     * - If the original color input is a string, it checks the prefix to determine the color space.\n     * - If the original color input is an object, it checks the properties to determine the color space.\n     * - If the original color input is not provided, it defaults to the current color space of the color object.\n     *\n     * The returned color value can be in one of the following formats:\n     * - `hsv(h, s%, v%)` or `hsva(h, s%, v%, a)`\n     * - `hsl(h, s%, l%)` or `hsla(h, s%, l%, a)`\n     * - `#rrggbb` or `#rrggbbaa`\n     * - `rgb(r, g, b)` or `rgba(r, g, b, a)`\n     * - `{ h, s, v, a }` for HSV object\n     * - `{ h, s, l, a }` for HSL object\n     * - `{ r, g, b, a }` for RGB object\n     */\n    get colorValue(): ColorTypes {\n        if (typeof this._colorOrigin === 'string') {\n            let spaceId = '';\n            if (this._colorOrigin.startsWith('#')) {\n                spaceId = 'hex string';\n            } else if (this._colorOrigin.startsWith('rgb')) {\n                spaceId = 'rgb';\n            } else if (this._colorOrigin.startsWith('hsl')) {\n                spaceId = 'hsl';\n            } else if (this._colorOrigin.startsWith('hsv')) {\n                spaceId = 'hsv';\n            } else {\n                spaceId = 'hex';\n            }\n            switch (spaceId) {\n                case 'hsv': {\n                    const hadAlpha = this._colorOrigin[3] === 'a';\n                    const { h, s, v } = (this._color.to('hsv') as Color).hsv;\n                    const a = this._color.alpha;\n                    return `hsv${hadAlpha ? `a` : ''}(${Math.round(\n                        h\n                    )}, ${Math.round(s)}%, ${Math.round(v)}%${\n                        hadAlpha ? `, ${a}` : ''\n                    })`;\n                }\n                case 'hsl': {\n                    const hadAlpha = this._colorOrigin[3] === 'a';\n                    const { h, s, l } = (this._color.to('hsl') as Color).hsl;\n                    const a = this._color.alpha;\n                    return `hsl${hadAlpha ? `a` : ''}(${Math.round(\n                        h\n                    )}, ${Math.round(s)}%, ${Math.round(l)}%${\n                        hadAlpha ? `, ${a}` : ''\n                    })`;\n                }\n                case 'hex string': {\n                    const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n                    const hadAlpha =\n                        this._colorOrigin.length === 5 ||\n                        this._colorOrigin.length === 9;\n                    const a = this._color.alpha;\n                    const rHex = Math.round(r * 255).toString(16);\n                    const gHex = Math.round(g * 255).toString(16);\n                    const bHex = Math.round(b * 255).toString(16);\n                    const aHex = Math.round(a * 255).toString(16);\n                    return `#${rHex.padStart(2, '0')}${gHex.padStart(\n                        2,\n                        '0'\n                    )}${bHex.padStart(2, '0')}${\n                        hadAlpha ? aHex.padStart(2, '0') : ''\n                    }`;\n                }\n                case 'hex': {\n                    const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n                    const hadAlpha =\n                        this._colorOrigin.length === 4 ||\n                        this._colorOrigin.length === 8;\n                    const a = this._color.alpha;\n                    const rHex = Math.round(r * 255).toString(16);\n                    const gHex = Math.round(g * 255).toString(16);\n                    const bHex = Math.round(b * 255).toString(16);\n                    const aHex = Math.round(a * 255).toString(16);\n                    return `${rHex.padStart(2, '0')}${gHex.padStart(\n                        2,\n                        '0'\n                    )}${bHex.padStart(2, '0')}${\n                        hadAlpha ? aHex.padStart(2, '0') : ''\n                    }`;\n                }\n                //rgb\n                default: {\n                    const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n                    const hadAlpha = this._colorOrigin[3] === 'a';\n                    const a = this._color.alpha;\n                    if (this._colorOrigin.search('%') > -1) {\n                        return `rgb${hadAlpha ? `a` : ''}(${Math.round(r * 100)}%, ${Math.round(\n                            g * 100\n                        )}%, ${Math.round(b * 100)}%${hadAlpha ? `,${Math.round(a * 100)}%` : ''})`;\n                    }\n                    return `rgb${hadAlpha ? `a` : ''}(${Math.round(r * 255)}, ${Math.round(\n                        g * 255\n                    )}, ${Math.round(b * 255)}${hadAlpha ? `, ${a}` : ''})`;\n                }\n            }\n        }\n        let spaceId;\n        if (this._colorOrigin) {\n            try {\n                ({ spaceId } = new Color(\n                    this._colorOrigin as DefaultColorTypes\n                ));\n            } catch (error) {\n                const { h, s, l, v, r, g, b } = this._colorOrigin as {\n                    h: string;\n                    s: string;\n                    l: string;\n                    v: string;\n                    r: string;\n                    g: string;\n                    b: string;\n                };\n                if (\n                    typeof h !== 'undefined' &&\n                    typeof s !== 'undefined' &&\n                    typeof l !== 'undefined'\n                ) {\n                    spaceId = 'hsl';\n                } else if (\n                    typeof h !== 'undefined' &&\n                    typeof s !== 'undefined' &&\n                    typeof v !== 'undefined'\n                ) {\n                    spaceId = 'hsv';\n                } else if (\n                    typeof r !== 'undefined' &&\n                    typeof g !== 'undefined' &&\n                    typeof b !== 'undefined'\n                ) {\n                    spaceId = 'srgb';\n                }\n            }\n        } else {\n            ({ spaceId } = this.color);\n        }\n        switch (spaceId) {\n            case 'hsv': {\n                const { h, s, v } = (this._color.to('hsv') as Color).hsv;\n                return {\n                    h,\n                    s: s / 100,\n                    v: v / 100,\n                    a: this._color.alpha,\n                };\n            }\n            case 'hsl': {\n                const { h, s, l } = (this._color.to('hsl') as Color).hsl;\n                return {\n                    h,\n                    s: s / 100,\n                    l: l / 100,\n                    a: this._color.alpha,\n                };\n            }\n            case 'srgb': {\n                const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n                if (\n                    this._colorOrigin &&\n                    typeof (this._colorOrigin as { r: string }).r ===\n                        'string' &&\n                    (this._colorOrigin as { r: string }).r.search('%')\n                ) {\n                    return {\n                        r: `${Math.round(r * 255)}%`,\n                        g: `${Math.round(g * 255)}%`,\n                        b: `${Math.round(b * 255)}%`,\n                        a: this._color.alpha,\n                    };\n                }\n                return {\n                    r: Math.round(r * 255),\n                    g: Math.round(g * 255),\n                    b: Math.round(b * 255),\n                    a: this._color.alpha,\n                };\n            }\n        }\n        return this._color;\n    }\n\n    protected host: ReactiveElement;\n\n    /**\n     * Gets the hue value of the current color in HSL format.\n     *\n     * @returns {number} The hue value as a number.\n     */\n    get hue(): number {\n        return Number((this._color.to('hsl') as Color).hsl.h);\n    }\n\n    /**\n     * Sets the hue value of the color and requests an update from the host.\n     *\n     * @param hue - The hue value to set, represented as a number.\n     */\n    set hue(hue: number) {\n        this._color.set('h', hue);\n        this.host.requestUpdate();\n    }\n\n    /**\n     * Creates an instance of ColorController.\n     *\n     * @param host - The ReactiveElement that this controller is associated with.\n     * @param options - An object containing optional parameters.\n     * @param options.manageAs - A string to manage the controller as a specific type.\n     */\n    constructor(\n        host: ReactiveElement,\n        {\n            manageAs,\n        }: {\n            manageAs?: string;\n        } = {}\n    ) {\n        this.host = host;\n        this.manageAs = manageAs;\n    }\n\n    /**\n     * Converts the current color to the specified format.\n     *\n     * @param format - The desired color format. It can be a string representing one of the valid formats\n     * ('srgb', 'hsva', 'hsv', 'hsl', 'hsla') or a ColorSpace object.\n     * @returns The color object in the specified format.\n     * @throws Will throw an error if the provided format is not a valid string format.\n     */\n    getColor(format: string | ColorSpace): ColorObject {\n        const validFormats = ['srgb', 'hsva', 'hsv', 'hsl', 'hsla'];\n        if (typeof format === 'string' && !validFormats.includes(format)) {\n            throw new Error('not a valid format');\n        }\n\n        return this._color.to(format);\n    }\n\n    /**\n     * Converts the current color to an HSL string representation.\n     *\n     * @returns {string} The HSL string representation of the current color.\n     */\n    getHslString(): string {\n        return this._color.to('hsl').toString();\n    }\n\n    /**\n     * Saves the current color state by cloning the current color and storing it\n     * as the previous color. This allows for the ability to revert to the previous\n     * color state if needed.\n     *\n     * @returns {void}\n     */\n    savePreviousColor(): void {\n        this._previousColor = this._color.clone();\n    }\n\n    /**\n     * Restores the color to the previously saved color value.\n     *\n     * This method sets the current color (`_color`) to the previously stored color (`_previousColor`).\n     */\n    restorePreviousColor(): void {\n        this._color = this._previousColor;\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["Color", "host", "manageAs", "color", "_a", "_b", "_c", "_d", "result", "rgbRegExpArray", "hslRegExpArray", "hsvRegExpArray", "hexRegExpArray", "rgbaMatch", "regex", "hslaMatch", "hsvaMatch", "hexMatch", "r", "g", "b", "a", "element", "alpha", "processValue", "value", "numericR", "numericG", "numericB", "h", "s", "l", "values", "numericH", "numericS", "numericL", "numericA", "v", "numericV", "hex", "processHex", "colorOrigin", "newColor", "colorValidationResult", "coord1", "coord2", "coord3", "error", "lv", "spaceId", "hadAlpha", "rHex", "gHex", "bHex", "aHex", "hue", "format"]
+}

package/src/FocusGroup.d.ts

@@ -1,6 +1,7 @@
 import type { ReactiveController, ReactiveElement } from 'lit';
 type DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';
 export type FocusGroupConfig<T> = {
+    hostDelegatesFocus?: boolean;
     focusInIndex?: (_elements: T[]) => number;
     direction?: DirectionTypes | (() => DirectionTypes);
     elementEnterAction?: (el: T) => void;
@@ -18,6 +19,7 @@ export declare class FocusGroupController<T extends HTMLElement> implements Reac
     get direction(): DirectionTypes;
     _direction: () => DirectionTypes;
     directionLength: number;
+    hostDelegatesFocus: boolean;
     elementEnterAction: (_el: T) => void;
     get elements(): T[];
     private _elements;
@@ -33,9 +35,14 @@ export declare class FocusGroupController<T extends HTMLElement> implements Reac
     _listenerScope: () => HTMLElement;
     offset: number;
     recentlyConnected: boolean;
-    constructor(host: ReactiveElement, { direction, elementEnterAction, elements, focusInIndex, isFocusableElement, listenerScope, }?: FocusGroupConfig<T>);
+    constructor(host: ReactiveElement, { hostDelegatesFocus, direction, elementEnterAction, elements, focusInIndex, isFocusableElement, listenerScope, }?: FocusGroupConfig<T>);
     handleItemMutation(): void;
     update({ elements }?: FocusGroupConfig<T>): void;
+    /**
+     * resets the focusedItem to initial item
+     */
+    reset(): void;
+    focusOnItem(item?: T, options?: FocusOptions): void;
     focus(options?: FocusOptions): void;
     clearElementCache(offset?: number): void;
     setCurrentIndexCircularly(diff: number): void;
@@ -49,7 +56,7 @@ export declare class FocusGroupController<T extends HTMLElement> implements Reac
      */
     handleClick: () => void;
     handleFocusout: (event: FocusEvent) => void;
-    acceptsEventCode(code: string): boolean;
+    acceptsEventKey(key: string): boolean;
     handleKeydown: (event: KeyboardEvent) => void;
     manage(): void;
     unmanage(): void;

package/src/FocusGroup.dev.js

@@ -9,6 +9,7 @@ function ensureMethod(value, type, fallback) {
 }
 export class FocusGroupController {
   constructor(host, {
+    hostDelegatesFocus,
     direction,
     elementEnterAction,
     elements,
@@ -20,6 +21,7 @@ export class FocusGroupController {
     this.prevIndex = -1;
     this._direction = () => "both";
     this.directionLength = 5;
+    this.hostDelegatesFocus = false;
     this.elementEnterAction = (_el) => {
       return;
     };
@@ -74,12 +76,12 @@ export class FocusGroupController {
       }
     };
     this.handleKeydown = (event) => {
-      if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {
+      if (!this.acceptsEventKey(event.key) || event.defaultPrevented) {
         return;
       }
       let diff = 0;
       this.prevIndex = this.currentIndex;
-      switch (event.code) {
+      switch (event.key) {
         case "ArrowRight":
           diff += 1;
           break;
@@ -115,6 +117,7 @@ export class FocusGroupController {
     this.mutationObserver = new MutationObserver(() => {
       this.handleItemMutation();
     });
+    this.hostDelegatesFocus = hostDelegatesFocus || false;
     this.host = host;
     this.host.addController(this);
     this._elements = elements;
@@ -194,19 +197,54 @@ export class FocusGroupController {
     this.clearElementCache();
     this.manage();
   }
-  focus(options) {
+  /**
+   * resets the focusedItem to initial item
+   */
+  reset() {
     var _a;
     const elements = this.elements;
     if (!elements.length) return;
+    this.setCurrentIndexCircularly(this.focusInIndex - this.currentIndex);
     let focusElement = elements[this.currentIndex];
+    if (this.currentIndex < 0) {
+      return;
+    }
     if (!focusElement || !this.isFocusableElement(focusElement)) {
       this.setCurrentIndexCircularly(1);
       focusElement = elements[this.currentIndex];
     }
     if (focusElement && this.isFocusableElement(focusElement)) {
       (_a = elements[this.prevIndex]) == null ? void 0 : _a.setAttribute("tabindex", "-1");
+      focusElement.setAttribute("tabindex", "0");
+    }
+  }
+  focusOnItem(item, options) {
+    var _a;
+    if (item && this.isFocusableElement(item) && this.elements.indexOf(item)) {
+      const diff = this.elements.indexOf(item) - this.currentIndex;
+      this.setCurrentIndexCircularly(diff);
+      (_a = this.elements[this.prevIndex]) == null ? void 0 : _a.setAttribute("tabindex", "-1");
+    }
+    this.focus(options);
+  }
+  focus(options) {
+    var _a;
+    const elements = this.elements;
+    if (!elements.length) return;
+    let focusElement = elements[this.currentIndex];
+    if (!focusElement || !this.isFocusableElement(focusElement)) {
+      this.setCurrentIndexCircularly(1);
+      focusElement = elements[this.currentIndex];
+    }
+    if (focusElement && this.isFocusableElement(focusElement)) {
+      if (!this.hostDelegatesFocus || elements[this.prevIndex] !== focusElement) {
+        (_a = elements[this.prevIndex]) == null ? void 0 : _a.setAttribute("tabindex", "-1");
+      }
       focusElement.tabIndex = 0;
       focusElement.focus(options);
+      if (this.hostDelegatesFocus && !this.focused) {
+        this.hostContainsFocus();
+      }
     }
   }
   clearElementCache(offset = 0) {
@@ -256,18 +294,18 @@ export class FocusGroupController {
     );
     return !(isRelatedTargetAnElement || isRelatedTargetContainedWithinElements);
   }
-  acceptsEventCode(code) {
-    if (code === "End" || code === "Home") {
+  acceptsEventKey(key) {
+    if (key === "End" || key === "Home") {
       return true;
     }
     switch (this.direction) {
       case "horizontal":
-        return code === "ArrowLeft" || code === "ArrowRight";
+        return key === "ArrowLeft" || key === "ArrowRight";
       case "vertical":
-        return code === "ArrowUp" || code === "ArrowDown";
+        return key === "ArrowUp" || key === "ArrowDown";
       case "both":
       case "grid":
-        return code.startsWith("Arrow");
+        return key.startsWith("Arrow");
     }
   }
   manage() {

package/src/FocusGroup.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["FocusGroup.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 type { ReactiveController, ReactiveElement } from 'lit';\n\ntype DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';\nexport type FocusGroupConfig<T> = {\n    focusInIndex?: (_elements: T[]) => number;\n    direction?: DirectionTypes | (() => DirectionTypes);\n    elementEnterAction?: (el: T) => void;\n    elements: () => T[];\n    isFocusableElement?: (el: T) => boolean;\n    listenerScope?: HTMLElement | (() => HTMLElement);\n};\n\nfunction ensureMethod<T, RT>(\n    value: T | RT | undefined,\n    type: string,\n    fallback: T\n): T {\n    if (typeof value === type) {\n        return (() => value) as T;\n    } else if (typeof value === 'function') {\n        return value as T;\n    }\n    return fallback;\n}\n\nexport class FocusGroupController<T extends HTMLElement>\n    implements ReactiveController\n{\n    protected cachedElements?: T[];\n    private mutationObserver: MutationObserver;\n\n    get currentIndex(): number {\n        if (this._currentIndex === -1) {\n            this._currentIndex = this.focusInIndex;\n        }\n        return this._currentIndex - this.offset;\n    }\n\n    set currentIndex(currentIndex) {\n        this._currentIndex = currentIndex + this.offset;\n    }\n\n    private _currentIndex = -1;\n\n    private prevIndex = -1;\n\n    get direction(): DirectionTypes {\n        return this._direction();\n    }\n\n    _direction = (): DirectionTypes => 'both';\n\n    public directionLength = 5;\n\n    elementEnterAction = (_el: T): void => {\n        return;\n    };\n\n    get elements(): T[] {\n        if (!this.cachedElements) {\n            this.cachedElements = this._elements();\n        }\n        return this.cachedElements;\n    }\n\n    private _elements!: () => T[];\n\n    protected set focused(focused: boolean) {\n        /* c8 ignore next 1 */\n        if (focused === this.focused) return;\n        this._focused = focused;\n    }\n\n    protected get focused(): boolean {\n        return this._focused;\n    }\n\n    private _focused = false;\n\n    get focusInElement(): T {\n        return this.elements[this.focusInIndex];\n    }\n\n    get focusInIndex(): number {\n        return this._focusInIndex(this.elements);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    _focusInIndex = (_elements: T[]): number => 0;\n\n    host: ReactiveElement;\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    isFocusableElement = (_el: T): boolean => true;\n\n    isEventWithinListenerScope(event: Event): boolean {\n        if (this._listenerScope() === this.host) return true;\n        return event.composedPath().includes(this._listenerScope());\n    }\n\n    _listenerScope = (): HTMLElement => this.host;\n\n    // When elements are virtualized, the delta between the first element\n    // and the first rendered element.\n    offset = 0;\n\n    recentlyConnected = false;\n\n    constructor(\n        host: ReactiveElement,\n        {\n            direction,\n            elementEnterAction,\n            elements,\n            focusInIndex,\n            isFocusableElement,\n            listenerScope,\n        }: FocusGroupConfig<T> = { elements: () => [] }\n    ) {\n        this.mutationObserver = new MutationObserver(() => {\n            this.handleItemMutation();\n        });\n        this.host = host;\n        this.host.addController(this);\n        this._elements = elements;\n        this.isFocusableElement = isFocusableElement || this.isFocusableElement;\n        this._direction = ensureMethod<() => DirectionTypes, DirectionTypes>(\n            direction,\n            'string',\n            this._direction\n        );\n        this.elementEnterAction = elementEnterAction || this.elementEnterAction;\n        this._focusInIndex = ensureMethod<(_elements: T[]) => number, number>(\n            focusInIndex,\n            'number',\n            this._focusInIndex\n        );\n        this._listenerScope = ensureMethod<() => HTMLElement, HTMLElement>(\n            listenerScope,\n            'object',\n            this._listenerScope\n        );\n    }\n    /*  In  handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.\n        Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;\n    */\n    handleItemMutation(): void {\n        if (\n            this._currentIndex == -1 ||\n            this.elements.length <= this._elements().length\n        )\n            return;\n        const focusedElement = this.elements[this.currentIndex];\n        this.clearElementCache();\n        if (this.elements.includes(focusedElement)) return;\n        const moveToNextElement = this.currentIndex !== this.elements.length;\n        const diff = moveToNextElement ? 1 : -1;\n        if (moveToNextElement) {\n            this.setCurrentIndexCircularly(-1);\n        }\n        this.setCurrentIndexCircularly(diff);\n        this.focus();\n    }\n\n    update({ elements }: FocusGroupConfig<T> = { elements: () => [] }): void {\n        this.unmanage();\n        this._elements = elements;\n        this.clearElementCache();\n        this.manage();\n    }\n\n    focus(options?: FocusOptions): void {\n        const elements = this.elements;\n        if (!elements.length) return;\n        let focusElement = elements[this.currentIndex];\n        if (!focusElement || !this.isFocusableElement(focusElement)) {\n            this.setCurrentIndexCircularly(1);\n            focusElement = elements[this.currentIndex];\n        }\n        if (focusElement && this.isFocusableElement(focusElement)) {\n            elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n            focusElement.tabIndex = 0;\n            focusElement.focus(options);\n        }\n    }\n\n    clearElementCache(offset = 0): void {\n        this.mutationObserver.disconnect();\n        delete this.cachedElements;\n        this.offset = offset;\n        requestAnimationFrame(() => {\n            this.elements.forEach((element) => {\n                this.mutationObserver.observe(element, {\n                    attributes: true,\n                });\n            });\n        });\n    }\n\n    setCurrentIndexCircularly(diff: number): void {\n        const { length } = this.elements;\n        let steps = length;\n        this.prevIndex = this.currentIndex;\n        // start at a possibly not 0 index\n        let nextIndex = (length + this.currentIndex + diff) % length;\n        while (\n            // don't cycle the elements more than once\n            steps &&\n            this.elements[nextIndex] &&\n            !this.isFocusableElement(this.elements[nextIndex])\n        ) {\n            nextIndex = (length + nextIndex + diff) % length;\n            steps -= 1;\n        }\n        this.currentIndex = nextIndex;\n    }\n\n    hostContainsFocus(): void {\n        this.host.addEventListener('focusout', this.handleFocusout);\n        this.host.addEventListener('keydown', this.handleKeydown);\n        this.focused = true;\n    }\n\n    hostNoLongerContainsFocus(): void {\n        this.host.addEventListener('focusin', this.handleFocusin);\n        this.host.removeEventListener('focusout', this.handleFocusout);\n        this.host.removeEventListener('keydown', this.handleKeydown);\n        this.focused = false;\n    }\n\n    isRelatedTargetOrContainAnElement(event: FocusEvent): boolean {\n        const relatedTarget = event.relatedTarget as null | Element;\n\n        const isRelatedTargetAnElement = this.elements.includes(\n            relatedTarget as T\n        );\n        const isRelatedTargetContainedWithinElements = this.elements.some(\n            (el) => el.contains(relatedTarget)\n        );\n        return !(\n            isRelatedTargetAnElement || isRelatedTargetContainedWithinElements\n        );\n    }\n\n    handleFocusin = (event: FocusEvent): void => {\n        if (!this.isEventWithinListenerScope(event)) return;\n\n        const path = event.composedPath() as T[];\n        let targetIndex = -1;\n        path.find((el) => {\n            targetIndex = this.elements.indexOf(el);\n            return targetIndex !== -1;\n        });\n        this.prevIndex = this.currentIndex;\n        this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;\n\n        if (this.isRelatedTargetOrContainAnElement(event)) {\n            this.hostContainsFocus();\n        }\n    };\n\n    /**\n     * handleClick - Finds the element that was clicked and sets the tabindex to 0\n     * @returns void\n     */\n    handleClick = (): void => {\n        // Manually set the tabindex to 0 for the current element on receiving focus (from keyboard or mouse)\n        const elements = this.elements;\n        if (!elements.length) return;\n        let focusElement = elements[this.currentIndex];\n        if (this.currentIndex < 0) {\n            return;\n        }\n        if (!focusElement || !this.isFocusableElement(focusElement)) {\n            this.setCurrentIndexCircularly(1);\n            focusElement = elements[this.currentIndex];\n        }\n        if (focusElement && this.isFocusableElement(focusElement)) {\n            elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n            focusElement.setAttribute('tabindex', '0');\n        }\n    };\n\n    handleFocusout = (event: FocusEvent): void => {\n        if (this.isRelatedTargetOrContainAnElement(event)) {\n            this.hostNoLongerContainsFocus();\n        }\n    };\n\n    acceptsEventCode(code: string): boolean {\n        if (code === 'End' || code === 'Home') {\n            return true;\n        }\n        switch (this.direction) {\n            case 'horizontal':\n                return code === 'ArrowLeft' || code === 'ArrowRight';\n            case 'vertical':\n                return code === 'ArrowUp' || code === 'ArrowDown';\n            case 'both':\n            case 'grid':\n                return code.startsWith('Arrow');\n        }\n    }\n\n    handleKeydown = (event: KeyboardEvent): void => {\n        if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {\n            return;\n        }\n        let diff = 0;\n        this.prevIndex = this.currentIndex;\n        switch (event.code) {\n            case 'ArrowRight':\n                diff += 1;\n                break;\n            case 'ArrowDown':\n                diff += this.direction === 'grid' ? this.directionLength : 1;\n                break;\n            case 'ArrowLeft':\n                diff -= 1;\n                break;\n            case 'ArrowUp':\n                diff -= this.direction === 'grid' ? this.directionLength : 1;\n                break;\n            case 'End':\n                this.currentIndex = 0;\n                diff -= 1;\n                break;\n            case 'Home':\n                this.currentIndex = this.elements.length - 1;\n                diff += 1;\n                break;\n        }\n        event.preventDefault();\n        if (this.direction === 'grid' && this.currentIndex + diff < 0) {\n            this.currentIndex = 0;\n        } else if (\n            this.direction === 'grid' &&\n            this.currentIndex + diff > this.elements.length - 1\n        ) {\n            this.currentIndex = this.elements.length - 1;\n        } else {\n            this.setCurrentIndexCircularly(diff);\n        }\n        // To allow the `focusInIndex` to be calculated with the \"after\" state of the keyboard interaction\n        // do `elementEnterAction` _before_ focusing the next element.\n        this.elementEnterAction(this.elements[this.currentIndex]);\n        this.focus();\n    };\n\n    manage(): void {\n        this.addEventListeners();\n    }\n\n    unmanage(): void {\n        this.removeEventListeners();\n    }\n\n    addEventListeners(): void {\n        this.host.addEventListener('focusin', this.handleFocusin);\n        this.host.addEventListener('click', this.handleClick);\n    }\n\n    removeEventListeners(): void {\n        this.host.removeEventListener('focusin', this.handleFocusin);\n        this.host.removeEventListener('focusout', this.handleFocusout);\n        this.host.removeEventListener('keydown', this.handleKeydown);\n        this.host.removeEventListener('click', this.handleClick);\n    }\n\n    hostConnected(): void {\n        this.recentlyConnected = true;\n        this.addEventListeners();\n    }\n\n    hostDisconnected(): void {\n        this.mutationObserver.disconnect();\n        this.removeEventListeners();\n    }\n\n    hostUpdated(): void {\n        if (this.recentlyConnected) {\n            this.recentlyConnected = false;\n            this.elements.forEach((element) => {\n                this.mutationObserver.observe(element, {\n                    attributes: true,\n                });\n            });\n        }\n    }\n}\n"],
-  "mappings": "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",
+  "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 type { ReactiveController, ReactiveElement } from 'lit';\n\ntype DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';\nexport type FocusGroupConfig<T> = {\n    hostDelegatesFocus?: boolean;\n    focusInIndex?: (_elements: T[]) => number;\n    direction?: DirectionTypes | (() => DirectionTypes);\n    elementEnterAction?: (el: T) => void;\n    elements: () => T[];\n    isFocusableElement?: (el: T) => boolean;\n    listenerScope?: HTMLElement | (() => HTMLElement);\n};\n\nfunction ensureMethod<T, RT>(\n    value: T | RT | undefined,\n    type: string,\n    fallback: T\n): T {\n    if (typeof value === type) {\n        return (() => value) as T;\n    } else if (typeof value === 'function') {\n        return value as T;\n    }\n    return fallback;\n}\n\nexport class FocusGroupController<T extends HTMLElement>\n    implements ReactiveController\n{\n    protected cachedElements?: T[];\n    private mutationObserver: MutationObserver;\n\n    get currentIndex(): number {\n        if (this._currentIndex === -1) {\n            this._currentIndex = this.focusInIndex;\n        }\n        return this._currentIndex - this.offset;\n    }\n\n    set currentIndex(currentIndex) {\n        this._currentIndex = currentIndex + this.offset;\n    }\n\n    private _currentIndex = -1;\n\n    private prevIndex = -1;\n\n    get direction(): DirectionTypes {\n        return this._direction();\n    }\n\n    _direction = (): DirectionTypes => 'both';\n\n    public directionLength = 5;\n\n    public hostDelegatesFocus = false;\n\n    elementEnterAction = (_el: T): void => {\n        return;\n    };\n\n    get elements(): T[] {\n        if (!this.cachedElements) {\n            this.cachedElements = this._elements();\n        }\n        return this.cachedElements;\n    }\n\n    private _elements!: () => T[];\n\n    protected set focused(focused: boolean) {\n        /* c8 ignore next 1 */\n        if (focused === this.focused) return;\n        this._focused = focused;\n    }\n\n    protected get focused(): boolean {\n        return this._focused;\n    }\n\n    private _focused = false;\n\n    get focusInElement(): T {\n        return this.elements[this.focusInIndex];\n    }\n\n    get focusInIndex(): number {\n        return this._focusInIndex(this.elements);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    _focusInIndex = (_elements: T[]): number => 0;\n\n    host: ReactiveElement;\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    isFocusableElement = (_el: T): boolean => true;\n\n    isEventWithinListenerScope(event: Event): boolean {\n        if (this._listenerScope() === this.host) return true;\n        return event.composedPath().includes(this._listenerScope());\n    }\n\n    _listenerScope = (): HTMLElement => this.host;\n\n    // When elements are virtualized, the delta between the first element\n    // and the first rendered element.\n    offset = 0;\n\n    recentlyConnected = false;\n\n    constructor(\n        host: ReactiveElement,\n        {\n            hostDelegatesFocus,\n            direction,\n            elementEnterAction,\n            elements,\n            focusInIndex,\n            isFocusableElement,\n            listenerScope,\n        }: FocusGroupConfig<T> = { elements: () => [] }\n    ) {\n        this.mutationObserver = new MutationObserver(() => {\n            this.handleItemMutation();\n        });\n        this.hostDelegatesFocus = hostDelegatesFocus || false;\n        this.host = host;\n        this.host.addController(this);\n        this._elements = elements;\n        this.isFocusableElement = isFocusableElement || this.isFocusableElement;\n        this._direction = ensureMethod<() => DirectionTypes, DirectionTypes>(\n            direction,\n            'string',\n            this._direction\n        );\n        this.elementEnterAction = elementEnterAction || this.elementEnterAction;\n        this._focusInIndex = ensureMethod<(_elements: T[]) => number, number>(\n            focusInIndex,\n            'number',\n            this._focusInIndex\n        );\n        this._listenerScope = ensureMethod<() => HTMLElement, HTMLElement>(\n            listenerScope,\n            'object',\n            this._listenerScope\n        );\n    }\n    /*  In  handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.\n        Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;\n    */\n    handleItemMutation(): void {\n        if (\n            this._currentIndex == -1 ||\n            this.elements.length <= this._elements().length\n        )\n            return;\n        const focusedElement = this.elements[this.currentIndex];\n        this.clearElementCache();\n        if (this.elements.includes(focusedElement)) return;\n        const moveToNextElement = this.currentIndex !== this.elements.length;\n        const diff = moveToNextElement ? 1 : -1;\n        if (moveToNextElement) {\n            this.setCurrentIndexCircularly(-1);\n        }\n        this.setCurrentIndexCircularly(diff);\n        this.focus();\n    }\n\n    update({ elements }: FocusGroupConfig<T> = { elements: () => [] }): void {\n        this.unmanage();\n        this._elements = elements;\n        this.clearElementCache();\n        this.manage();\n    }\n\n    /**\n     * resets the focusedItem to initial item\n     */\n    reset(): void {\n        const elements = this.elements;\n        if (!elements.length) return;\n        this.setCurrentIndexCircularly(this.focusInIndex - this.currentIndex);\n        let focusElement = elements[this.currentIndex];\n        if (this.currentIndex < 0) {\n            return;\n        }\n        if (!focusElement || !this.isFocusableElement(focusElement)) {\n            this.setCurrentIndexCircularly(1);\n            focusElement = elements[this.currentIndex];\n        }\n        if (focusElement && this.isFocusableElement(focusElement)) {\n            elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n            focusElement.setAttribute('tabindex', '0');\n        }\n    }\n\n    focusOnItem(item?: T, options?: FocusOptions): void {\n        if (\n            item &&\n            this.isFocusableElement(item) &&\n            this.elements.indexOf(item)\n        ) {\n            const diff = this.elements.indexOf(item) - this.currentIndex;\n            this.setCurrentIndexCircularly(diff);\n            this.elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n        }\n        this.focus(options);\n    }\n\n    focus(options?: FocusOptions): void {\n        const elements = this.elements;\n        if (!elements.length) return;\n        let focusElement = elements[this.currentIndex];\n        if (!focusElement || !this.isFocusableElement(focusElement)) {\n            this.setCurrentIndexCircularly(1);\n            focusElement = elements[this.currentIndex];\n        }\n        if (focusElement && this.isFocusableElement(focusElement)) {\n            if (\n                !this.hostDelegatesFocus ||\n                elements[this.prevIndex] !== focusElement\n            ) {\n                elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n            }\n            focusElement.tabIndex = 0;\n            focusElement.focus(options);\n            if (this.hostDelegatesFocus && !this.focused) {\n                this.hostContainsFocus();\n            }\n        }\n    }\n\n    clearElementCache(offset = 0): void {\n        this.mutationObserver.disconnect();\n        delete this.cachedElements;\n        this.offset = offset;\n        requestAnimationFrame(() => {\n            this.elements.forEach((element) => {\n                this.mutationObserver.observe(element, {\n                    attributes: true,\n                });\n            });\n        });\n    }\n\n    setCurrentIndexCircularly(diff: number): void {\n        const { length } = this.elements;\n        let steps = length;\n        this.prevIndex = this.currentIndex;\n        // start at a possibly not 0 index\n        let nextIndex = (length + this.currentIndex + diff) % length;\n        while (\n            // don't cycle the elements more than once\n            steps &&\n            this.elements[nextIndex] &&\n            !this.isFocusableElement(this.elements[nextIndex])\n        ) {\n            nextIndex = (length + nextIndex + diff) % length;\n            steps -= 1;\n        }\n        this.currentIndex = nextIndex;\n    }\n\n    hostContainsFocus(): void {\n        this.host.addEventListener('focusout', this.handleFocusout);\n        this.host.addEventListener('keydown', this.handleKeydown);\n        this.focused = true;\n    }\n\n    hostNoLongerContainsFocus(): void {\n        this.host.addEventListener('focusin', this.handleFocusin);\n        this.host.removeEventListener('focusout', this.handleFocusout);\n        this.host.removeEventListener('keydown', this.handleKeydown);\n        this.focused = false;\n    }\n\n    isRelatedTargetOrContainAnElement(event: FocusEvent): boolean {\n        const relatedTarget = event.relatedTarget as null | Element;\n\n        const isRelatedTargetAnElement = this.elements.includes(\n            relatedTarget as T\n        );\n        const isRelatedTargetContainedWithinElements = this.elements.some(\n            (el) => el.contains(relatedTarget)\n        );\n        return !(\n            isRelatedTargetAnElement || isRelatedTargetContainedWithinElements\n        );\n    }\n\n    handleFocusin = (event: FocusEvent): void => {\n        if (!this.isEventWithinListenerScope(event)) return;\n\n        const path = event.composedPath() as T[];\n        let targetIndex = -1;\n        path.find((el) => {\n            targetIndex = this.elements.indexOf(el);\n            return targetIndex !== -1;\n        });\n        this.prevIndex = this.currentIndex;\n        this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;\n\n        if (this.isRelatedTargetOrContainAnElement(event)) {\n            this.hostContainsFocus();\n        }\n    };\n\n    /**\n     * handleClick - Finds the element that was clicked and sets the tabindex to 0\n     * @returns void\n     */\n    handleClick = (): void => {\n        // Manually set the tabindex to 0 for the current element on receiving focus (from keyboard or mouse)\n        const elements = this.elements;\n        if (!elements.length) return;\n        let focusElement = elements[this.currentIndex];\n        if (this.currentIndex < 0) {\n            return;\n        }\n        if (!focusElement || !this.isFocusableElement(focusElement)) {\n            this.setCurrentIndexCircularly(1);\n            focusElement = elements[this.currentIndex];\n        }\n        if (focusElement && this.isFocusableElement(focusElement)) {\n            elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n            focusElement.setAttribute('tabindex', '0');\n        }\n    };\n\n    handleFocusout = (event: FocusEvent): void => {\n        if (this.isRelatedTargetOrContainAnElement(event)) {\n            this.hostNoLongerContainsFocus();\n        }\n    };\n\n    acceptsEventKey(key: string): boolean {\n        if (key === 'End' || key === 'Home') {\n            return true;\n        }\n        switch (this.direction) {\n            case 'horizontal':\n                return key === 'ArrowLeft' || key === 'ArrowRight';\n            case 'vertical':\n                return key === 'ArrowUp' || key === 'ArrowDown';\n            case 'both':\n            case 'grid':\n                return key.startsWith('Arrow');\n        }\n    }\n\n    handleKeydown = (event: KeyboardEvent): void => {\n        if (!this.acceptsEventKey(event.key) || event.defaultPrevented) {\n            return;\n        }\n        let diff = 0;\n        this.prevIndex = this.currentIndex;\n        switch (event.key) {\n            case 'ArrowRight':\n                diff += 1;\n                break;\n            case 'ArrowDown':\n                diff += this.direction === 'grid' ? this.directionLength : 1;\n                break;\n            case 'ArrowLeft':\n                diff -= 1;\n                break;\n            case 'ArrowUp':\n                diff -= this.direction === 'grid' ? this.directionLength : 1;\n                break;\n            case 'End':\n                this.currentIndex = 0;\n                diff -= 1;\n                break;\n            case 'Home':\n                this.currentIndex = this.elements.length - 1;\n                diff += 1;\n                break;\n        }\n        event.preventDefault();\n        if (this.direction === 'grid' && this.currentIndex + diff < 0) {\n            this.currentIndex = 0;\n        } else if (\n            this.direction === 'grid' &&\n            this.currentIndex + diff > this.elements.length - 1\n        ) {\n            this.currentIndex = this.elements.length - 1;\n        } else {\n            this.setCurrentIndexCircularly(diff);\n        }\n        // To allow the `focusInIndex` to be calculated with the \"after\" state of the keyboard interaction\n        // do `elementEnterAction` _before_ focusing the next element.\n        this.elementEnterAction(this.elements[this.currentIndex]);\n        this.focus();\n    };\n\n    manage(): void {\n        this.addEventListeners();\n    }\n\n    unmanage(): void {\n        this.removeEventListeners();\n    }\n\n    addEventListeners(): void {\n        this.host.addEventListener('focusin', this.handleFocusin);\n        this.host.addEventListener('click', this.handleClick);\n    }\n\n    removeEventListeners(): void {\n        this.host.removeEventListener('focusin', this.handleFocusin);\n        this.host.removeEventListener('focusout', this.handleFocusout);\n        this.host.removeEventListener('keydown', this.handleKeydown);\n        this.host.removeEventListener('click', this.handleClick);\n    }\n\n    hostConnected(): void {\n        this.recentlyConnected = true;\n        this.addEventListeners();\n    }\n\n    hostDisconnected(): void {\n        this.mutationObserver.disconnect();\n        this.removeEventListeners();\n    }\n\n    hostUpdated(): void {\n        if (this.recentlyConnected) {\n            this.recentlyConnected = false;\n            this.elements.forEach((element) => {\n                this.mutationObserver.observe(element, {\n                    attributes: true,\n                });\n            });\n        }\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/src/FocusGroup.js

@@ -1,2 +1,2 @@
-"use strict";function o(i,e,t){return typeof i===e?()=>i:typeof i=="function"?i:t}export class FocusGroupController{constructor(e,{direction:t,elementEnterAction:n,elements:s,focusInIndex:r,isFocusableElement:h,listenerScope:c}={elements:()=>[]}){this._currentIndex=-1;this.prevIndex=-1;this._direction=()=>"both";this.directionLength=5;this.elementEnterAction=e=>{};this._focused=!1;this._focusInIndex=e=>0;this.isFocusableElement=e=>!0;this._listenerScope=()=>this.host;this.offset=0;this.recentlyConnected=!1;this.handleFocusin=e=>{if(!this.isEventWithinListenerScope(e))return;const t=e.composedPath();let n=-1;t.find(s=>(n=this.elements.indexOf(s),n!==-1)),this.prevIndex=this.currentIndex,this.currentIndex=n>-1?n:this.currentIndex,this.isRelatedTargetOrContainAnElement(e)&&this.hostContainsFocus()};this.handleClick=()=>{var n;const e=this.elements;if(!e.length)return;let t=e[this.currentIndex];this.currentIndex<0||((!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=e[this.currentIndex]),t&&this.isFocusableElement(t)&&((n=e[this.prevIndex])==null||n.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0")))};this.handleFocusout=e=>{this.isRelatedTargetOrContainAnElement(e)&&this.hostNoLongerContainsFocus()};this.handleKeydown=e=>{if(!this.acceptsEventCode(e.code)||e.defaultPrevented)return;let t=0;switch(this.prevIndex=this.currentIndex,e.code){case"ArrowRight":t+=1;break;case"ArrowDown":t+=this.direction==="grid"?this.directionLength:1;break;case"ArrowLeft":t-=1;break;case"ArrowUp":t-=this.direction==="grid"?this.directionLength:1;break;case"End":this.currentIndex=0,t-=1;break;case"Home":this.currentIndex=this.elements.length-1,t+=1;break}e.preventDefault(),this.direction==="grid"&&this.currentIndex+t<0?this.currentIndex=0:this.direction==="grid"&&this.currentIndex+t>this.elements.length-1?this.currentIndex=this.elements.length-1:this.setCurrentIndexCircularly(t),this.elementEnterAction(this.elements[this.currentIndex]),this.focus()};this.mutationObserver=new MutationObserver(()=>{this.handleItemMutation()}),this.host=e,this.host.addController(this),this._elements=s,this.isFocusableElement=h||this.isFocusableElement,this._direction=o(t,"string",this._direction),this.elementEnterAction=n||this.elementEnterAction,this._focusInIndex=o(r,"number",this._focusInIndex),this._listenerScope=o(c,"object",this._listenerScope)}get currentIndex(){return this._currentIndex===-1&&(this._currentIndex=this.focusInIndex),this._currentIndex-this.offset}set currentIndex(e){this._currentIndex=e+this.offset}get direction(){return this._direction()}get elements(){return this.cachedElements||(this.cachedElements=this._elements()),this.cachedElements}set focused(e){e!==this.focused&&(this._focused=e)}get focused(){return this._focused}get focusInElement(){return this.elements[this.focusInIndex]}get focusInIndex(){return this._focusInIndex(this.elements)}isEventWithinListenerScope(e){return this._listenerScope()===this.host?!0:e.composedPath().includes(this._listenerScope())}handleItemMutation(){if(this._currentIndex==-1||this.elements.length<=this._elements().length)return;const e=this.elements[this.currentIndex];if(this.clearElementCache(),this.elements.includes(e))return;const t=this.currentIndex!==this.elements.length,n=t?1:-1;t&&this.setCurrentIndexCircularly(-1),this.setCurrentIndexCircularly(n),this.focus()}update({elements:e}={elements:()=>[]}){this.unmanage(),this._elements=e,this.clearElementCache(),this.manage()}focus(e){var s;const t=this.elements;if(!t.length)return;let n=t[this.currentIndex];(!n||!this.isFocusableElement(n))&&(this.setCurrentIndexCircularly(1),n=t[this.currentIndex]),n&&this.isFocusableElement(n)&&((s=t[this.prevIndex])==null||s.setAttribute("tabindex","-1"),n.tabIndex=0,n.focus(e))}clearElementCache(e=0){this.mutationObserver.disconnect(),delete this.cachedElements,this.offset=e,requestAnimationFrame(()=>{this.elements.forEach(t=>{this.mutationObserver.observe(t,{attributes:!0})})})}setCurrentIndexCircularly(e){const{length:t}=this.elements;let n=t;this.prevIndex=this.currentIndex;let s=(t+this.currentIndex+e)%t;for(;n&&this.elements[s]&&!this.isFocusableElement(this.elements[s]);)s=(t+s+e)%t,n-=1;this.currentIndex=s}hostContainsFocus(){this.host.addEventListener("focusout",this.handleFocusout),this.host.addEventListener("keydown",this.handleKeydown),this.focused=!0}hostNoLongerContainsFocus(){this.host.addEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.focused=!1}isRelatedTargetOrContainAnElement(e){const t=e.relatedTarget,n=this.elements.includes(t),s=this.elements.some(r=>r.contains(t));return!(n||s)}acceptsEventCode(e){if(e==="End"||e==="Home")return!0;switch(this.direction){case"horizontal":return e==="ArrowLeft"||e==="ArrowRight";case"vertical":return e==="ArrowUp"||e==="ArrowDown";case"both":case"grid":return e.startsWith("Arrow")}}manage(){this.addEventListeners()}unmanage(){this.removeEventListeners()}addEventListeners(){this.host.addEventListener("focusin",this.handleFocusin),this.host.addEventListener("click",this.handleClick)}removeEventListeners(){this.host.removeEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.host.removeEventListener("click",this.handleClick)}hostConnected(){this.recentlyConnected=!0,this.addEventListeners()}hostDisconnected(){this.mutationObserver.disconnect(),this.removeEventListeners()}hostUpdated(){this.recentlyConnected&&(this.recentlyConnected=!1,this.elements.forEach(e=>{this.mutationObserver.observe(e,{attributes:!0})}))}}
+"use strict";function o(i,e,t){return typeof i===e?()=>i:typeof i=="function"?i:t}export class FocusGroupController{constructor(e,{hostDelegatesFocus:t,direction:n,elementEnterAction:s,elements:r,focusInIndex:h,isFocusableElement:c,listenerScope:l}={elements:()=>[]}){this._currentIndex=-1;this.prevIndex=-1;this._direction=()=>"both";this.directionLength=5;this.hostDelegatesFocus=!1;this.elementEnterAction=e=>{};this._focused=!1;this._focusInIndex=e=>0;this.isFocusableElement=e=>!0;this._listenerScope=()=>this.host;this.offset=0;this.recentlyConnected=!1;this.handleFocusin=e=>{if(!this.isEventWithinListenerScope(e))return;const t=e.composedPath();let n=-1;t.find(s=>(n=this.elements.indexOf(s),n!==-1)),this.prevIndex=this.currentIndex,this.currentIndex=n>-1?n:this.currentIndex,this.isRelatedTargetOrContainAnElement(e)&&this.hostContainsFocus()};this.handleClick=()=>{var n;const e=this.elements;if(!e.length)return;let t=e[this.currentIndex];this.currentIndex<0||((!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=e[this.currentIndex]),t&&this.isFocusableElement(t)&&((n=e[this.prevIndex])==null||n.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0")))};this.handleFocusout=e=>{this.isRelatedTargetOrContainAnElement(e)&&this.hostNoLongerContainsFocus()};this.handleKeydown=e=>{if(!this.acceptsEventKey(e.key)||e.defaultPrevented)return;let t=0;switch(this.prevIndex=this.currentIndex,e.key){case"ArrowRight":t+=1;break;case"ArrowDown":t+=this.direction==="grid"?this.directionLength:1;break;case"ArrowLeft":t-=1;break;case"ArrowUp":t-=this.direction==="grid"?this.directionLength:1;break;case"End":this.currentIndex=0,t-=1;break;case"Home":this.currentIndex=this.elements.length-1,t+=1;break}e.preventDefault(),this.direction==="grid"&&this.currentIndex+t<0?this.currentIndex=0:this.direction==="grid"&&this.currentIndex+t>this.elements.length-1?this.currentIndex=this.elements.length-1:this.setCurrentIndexCircularly(t),this.elementEnterAction(this.elements[this.currentIndex]),this.focus()};this.mutationObserver=new MutationObserver(()=>{this.handleItemMutation()}),this.hostDelegatesFocus=t||!1,this.host=e,this.host.addController(this),this._elements=r,this.isFocusableElement=c||this.isFocusableElement,this._direction=o(n,"string",this._direction),this.elementEnterAction=s||this.elementEnterAction,this._focusInIndex=o(h,"number",this._focusInIndex),this._listenerScope=o(l,"object",this._listenerScope)}get currentIndex(){return this._currentIndex===-1&&(this._currentIndex=this.focusInIndex),this._currentIndex-this.offset}set currentIndex(e){this._currentIndex=e+this.offset}get direction(){return this._direction()}get elements(){return this.cachedElements||(this.cachedElements=this._elements()),this.cachedElements}set focused(e){e!==this.focused&&(this._focused=e)}get focused(){return this._focused}get focusInElement(){return this.elements[this.focusInIndex]}get focusInIndex(){return this._focusInIndex(this.elements)}isEventWithinListenerScope(e){return this._listenerScope()===this.host?!0:e.composedPath().includes(this._listenerScope())}handleItemMutation(){if(this._currentIndex==-1||this.elements.length<=this._elements().length)return;const e=this.elements[this.currentIndex];if(this.clearElementCache(),this.elements.includes(e))return;const t=this.currentIndex!==this.elements.length,n=t?1:-1;t&&this.setCurrentIndexCircularly(-1),this.setCurrentIndexCircularly(n),this.focus()}update({elements:e}={elements:()=>[]}){this.unmanage(),this._elements=e,this.clearElementCache(),this.manage()}reset(){var n;const e=this.elements;if(!e.length)return;this.setCurrentIndexCircularly(this.focusInIndex-this.currentIndex);let t=e[this.currentIndex];this.currentIndex<0||((!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=e[this.currentIndex]),t&&this.isFocusableElement(t)&&((n=e[this.prevIndex])==null||n.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0")))}focusOnItem(e,t){var n;if(e&&this.isFocusableElement(e)&&this.elements.indexOf(e)){const s=this.elements.indexOf(e)-this.currentIndex;this.setCurrentIndexCircularly(s),(n=this.elements[this.prevIndex])==null||n.setAttribute("tabindex","-1")}this.focus(t)}focus(e){var s;const t=this.elements;if(!t.length)return;let n=t[this.currentIndex];(!n||!this.isFocusableElement(n))&&(this.setCurrentIndexCircularly(1),n=t[this.currentIndex]),n&&this.isFocusableElement(n)&&((!this.hostDelegatesFocus||t[this.prevIndex]!==n)&&((s=t[this.prevIndex])==null||s.setAttribute("tabindex","-1")),n.tabIndex=0,n.focus(e),this.hostDelegatesFocus&&!this.focused&&this.hostContainsFocus())}clearElementCache(e=0){this.mutationObserver.disconnect(),delete this.cachedElements,this.offset=e,requestAnimationFrame(()=>{this.elements.forEach(t=>{this.mutationObserver.observe(t,{attributes:!0})})})}setCurrentIndexCircularly(e){const{length:t}=this.elements;let n=t;this.prevIndex=this.currentIndex;let s=(t+this.currentIndex+e)%t;for(;n&&this.elements[s]&&!this.isFocusableElement(this.elements[s]);)s=(t+s+e)%t,n-=1;this.currentIndex=s}hostContainsFocus(){this.host.addEventListener("focusout",this.handleFocusout),this.host.addEventListener("keydown",this.handleKeydown),this.focused=!0}hostNoLongerContainsFocus(){this.host.addEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.focused=!1}isRelatedTargetOrContainAnElement(e){const t=e.relatedTarget,n=this.elements.includes(t),s=this.elements.some(r=>r.contains(t));return!(n||s)}acceptsEventKey(e){if(e==="End"||e==="Home")return!0;switch(this.direction){case"horizontal":return e==="ArrowLeft"||e==="ArrowRight";case"vertical":return e==="ArrowUp"||e==="ArrowDown";case"both":case"grid":return e.startsWith("Arrow")}}manage(){this.addEventListeners()}unmanage(){this.removeEventListeners()}addEventListeners(){this.host.addEventListener("focusin",this.handleFocusin),this.host.addEventListener("click",this.handleClick)}removeEventListeners(){this.host.removeEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.host.removeEventListener("click",this.handleClick)}hostConnected(){this.recentlyConnected=!0,this.addEventListeners()}hostDisconnected(){this.mutationObserver.disconnect(),this.removeEventListeners()}hostUpdated(){this.recentlyConnected&&(this.recentlyConnected=!1,this.elements.forEach(e=>{this.mutationObserver.observe(e,{attributes:!0})}))}}
 //# sourceMappingURL=FocusGroup.js.map

package/src/FocusGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["FocusGroup.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 type { ReactiveController, ReactiveElement } from 'lit';\n\ntype DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';\nexport type FocusGroupConfig<T> = {\n    focusInIndex?: (_elements: T[]) => number;\n    direction?: DirectionTypes | (() => DirectionTypes);\n    elementEnterAction?: (el: T) => void;\n    elements: () => T[];\n    isFocusableElement?: (el: T) => boolean;\n    listenerScope?: HTMLElement | (() => HTMLElement);\n};\n\nfunction ensureMethod<T, RT>(\n    value: T | RT | undefined,\n    type: string,\n    fallback: T\n): T {\n    if (typeof value === type) {\n        return (() => value) as T;\n    } else if (typeof value === 'function') {\n        return value as T;\n    }\n    return fallback;\n}\n\nexport class FocusGroupController<T extends HTMLElement>\n    implements ReactiveController\n{\n    protected cachedElements?: T[];\n    private mutationObserver: MutationObserver;\n\n    get currentIndex(): number {\n        if (this._currentIndex === -1) {\n            this._currentIndex = this.focusInIndex;\n        }\n        return this._currentIndex - this.offset;\n    }\n\n    set currentIndex(currentIndex) {\n        this._currentIndex = currentIndex + this.offset;\n    }\n\n    private _currentIndex = -1;\n\n    private prevIndex = -1;\n\n    get direction(): DirectionTypes {\n        return this._direction();\n    }\n\n    _direction = (): DirectionTypes => 'both';\n\n    public directionLength = 5;\n\n    elementEnterAction = (_el: T): void => {\n        return;\n    };\n\n    get elements(): T[] {\n        if (!this.cachedElements) {\n            this.cachedElements = this._elements();\n        }\n        return this.cachedElements;\n    }\n\n    private _elements!: () => T[];\n\n    protected set focused(focused: boolean) {\n        /* c8 ignore next 1 */\n        if (focused === this.focused) return;\n        this._focused = focused;\n    }\n\n    protected get focused(): boolean {\n        return this._focused;\n    }\n\n    private _focused = false;\n\n    get focusInElement(): T {\n        return this.elements[this.focusInIndex];\n    }\n\n    get focusInIndex(): number {\n        return this._focusInIndex(this.elements);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    _focusInIndex = (_elements: T[]): number => 0;\n\n    host: ReactiveElement;\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    isFocusableElement = (_el: T): boolean => true;\n\n    isEventWithinListenerScope(event: Event): boolean {\n        if (this._listenerScope() === this.host) return true;\n        return event.composedPath().includes(this._listenerScope());\n    }\n\n    _listenerScope = (): HTMLElement => this.host;\n\n    // When elements are virtualized, the delta between the first element\n    // and the first rendered element.\n    offset = 0;\n\n    recentlyConnected = false;\n\n    constructor(\n        host: ReactiveElement,\n        {\n            direction,\n            elementEnterAction,\n            elements,\n            focusInIndex,\n            isFocusableElement,\n            listenerScope,\n        }: FocusGroupConfig<T> = { elements: () => [] }\n    ) {\n        this.mutationObserver = new MutationObserver(() => {\n            this.handleItemMutation();\n        });\n        this.host = host;\n        this.host.addController(this);\n        this._elements = elements;\n        this.isFocusableElement = isFocusableElement || this.isFocusableElement;\n        this._direction = ensureMethod<() => DirectionTypes, DirectionTypes>(\n            direction,\n            'string',\n            this._direction\n        );\n        this.elementEnterAction = elementEnterAction || this.elementEnterAction;\n        this._focusInIndex = ensureMethod<(_elements: T[]) => number, number>(\n            focusInIndex,\n            'number',\n            this._focusInIndex\n        );\n        this._listenerScope = ensureMethod<() => HTMLElement, HTMLElement>(\n            listenerScope,\n            'object',\n            this._listenerScope\n        );\n    }\n    /*  In  handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.\n        Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;\n    */\n    handleItemMutation(): void {\n        if (\n            this._currentIndex == -1 ||\n            this.elements.length <= this._elements().length\n        )\n            return;\n        const focusedElement = this.elements[this.currentIndex];\n        this.clearElementCache();\n        if (this.elements.includes(focusedElement)) return;\n        const moveToNextElement = this.currentIndex !== this.elements.length;\n        const diff = moveToNextElement ? 1 : -1;\n        if (moveToNextElement) {\n            this.setCurrentIndexCircularly(-1);\n        }\n        this.setCurrentIndexCircularly(diff);\n        this.focus();\n    }\n\n    update({ elements }: FocusGroupConfig<T> = { elements: () => [] }): void {\n        this.unmanage();\n        this._elements = elements;\n        this.clearElementCache();\n        this.manage();\n    }\n\n    focus(options?: FocusOptions): void {\n        const elements = this.elements;\n        if (!elements.length) return;\n        let focusElement = elements[this.currentIndex];\n        if (!focusElement || !this.isFocusableElement(focusElement)) {\n            this.setCurrentIndexCircularly(1);\n            focusElement = elements[this.currentIndex];\n        }\n        if (focusElement && this.isFocusableElement(focusElement)) {\n            elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n            focusElement.tabIndex = 0;\n            focusElement.focus(options);\n        }\n    }\n\n    clearElementCache(offset = 0): void {\n        this.mutationObserver.disconnect();\n        delete this.cachedElements;\n        this.offset = offset;\n        requestAnimationFrame(() => {\n            this.elements.forEach((element) => {\n                this.mutationObserver.observe(element, {\n                    attributes: true,\n                });\n            });\n        });\n    }\n\n    setCurrentIndexCircularly(diff: number): void {\n        const { length } = this.elements;\n        let steps = length;\n        this.prevIndex = this.currentIndex;\n        // start at a possibly not 0 index\n        let nextIndex = (length + this.currentIndex + diff) % length;\n        while (\n            // don't cycle the elements more than once\n            steps &&\n            this.elements[nextIndex] &&\n            !this.isFocusableElement(this.elements[nextIndex])\n        ) {\n            nextIndex = (length + nextIndex + diff) % length;\n            steps -= 1;\n        }\n        this.currentIndex = nextIndex;\n    }\n\n    hostContainsFocus(): void {\n        this.host.addEventListener('focusout', this.handleFocusout);\n        this.host.addEventListener('keydown', this.handleKeydown);\n        this.focused = true;\n    }\n\n    hostNoLongerContainsFocus(): void {\n        this.host.addEventListener('focusin', this.handleFocusin);\n        this.host.removeEventListener('focusout', this.handleFocusout);\n        this.host.removeEventListener('keydown', this.handleKeydown);\n        this.focused = false;\n    }\n\n    isRelatedTargetOrContainAnElement(event: FocusEvent): boolean {\n        const relatedTarget = event.relatedTarget as null | Element;\n\n        const isRelatedTargetAnElement = this.elements.includes(\n            relatedTarget as T\n        );\n        const isRelatedTargetContainedWithinElements = this.elements.some(\n            (el) => el.contains(relatedTarget)\n        );\n        return !(\n            isRelatedTargetAnElement || isRelatedTargetContainedWithinElements\n        );\n    }\n\n    handleFocusin = (event: FocusEvent): void => {\n        if (!this.isEventWithinListenerScope(event)) return;\n\n        const path = event.composedPath() as T[];\n        let targetIndex = -1;\n        path.find((el) => {\n            targetIndex = this.elements.indexOf(el);\n            return targetIndex !== -1;\n        });\n        this.prevIndex = this.currentIndex;\n        this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;\n\n        if (this.isRelatedTargetOrContainAnElement(event)) {\n            this.hostContainsFocus();\n        }\n    };\n\n    /**\n     * handleClick - Finds the element that was clicked and sets the tabindex to 0\n     * @returns void\n     */\n    handleClick = (): void => {\n        // Manually set the tabindex to 0 for the current element on receiving focus (from keyboard or mouse)\n        const elements = this.elements;\n        if (!elements.length) return;\n        let focusElement = elements[this.currentIndex];\n        if (this.currentIndex < 0) {\n            return;\n        }\n        if (!focusElement || !this.isFocusableElement(focusElement)) {\n            this.setCurrentIndexCircularly(1);\n            focusElement = elements[this.currentIndex];\n        }\n        if (focusElement && this.isFocusableElement(focusElement)) {\n            elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n            focusElement.setAttribute('tabindex', '0');\n        }\n    };\n\n    handleFocusout = (event: FocusEvent): void => {\n        if (this.isRelatedTargetOrContainAnElement(event)) {\n            this.hostNoLongerContainsFocus();\n        }\n    };\n\n    acceptsEventCode(code: string): boolean {\n        if (code === 'End' || code === 'Home') {\n            return true;\n        }\n        switch (this.direction) {\n            case 'horizontal':\n                return code === 'ArrowLeft' || code === 'ArrowRight';\n            case 'vertical':\n                return code === 'ArrowUp' || code === 'ArrowDown';\n            case 'both':\n            case 'grid':\n                return code.startsWith('Arrow');\n        }\n    }\n\n    handleKeydown = (event: KeyboardEvent): void => {\n        if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {\n            return;\n        }\n        let diff = 0;\n        this.prevIndex = this.currentIndex;\n        switch (event.code) {\n            case 'ArrowRight':\n                diff += 1;\n                break;\n            case 'ArrowDown':\n                diff += this.direction === 'grid' ? this.directionLength : 1;\n                break;\n            case 'ArrowLeft':\n                diff -= 1;\n                break;\n            case 'ArrowUp':\n                diff -= this.direction === 'grid' ? this.directionLength : 1;\n                break;\n            case 'End':\n                this.currentIndex = 0;\n                diff -= 1;\n                break;\n            case 'Home':\n                this.currentIndex = this.elements.length - 1;\n                diff += 1;\n                break;\n        }\n        event.preventDefault();\n        if (this.direction === 'grid' && this.currentIndex + diff < 0) {\n            this.currentIndex = 0;\n        } else if (\n            this.direction === 'grid' &&\n            this.currentIndex + diff > this.elements.length - 1\n        ) {\n            this.currentIndex = this.elements.length - 1;\n        } else {\n            this.setCurrentIndexCircularly(diff);\n        }\n        // To allow the `focusInIndex` to be calculated with the \"after\" state of the keyboard interaction\n        // do `elementEnterAction` _before_ focusing the next element.\n        this.elementEnterAction(this.elements[this.currentIndex]);\n        this.focus();\n    };\n\n    manage(): void {\n        this.addEventListeners();\n    }\n\n    unmanage(): void {\n        this.removeEventListeners();\n    }\n\n    addEventListeners(): void {\n        this.host.addEventListener('focusin', this.handleFocusin);\n        this.host.addEventListener('click', this.handleClick);\n    }\n\n    removeEventListeners(): void {\n        this.host.removeEventListener('focusin', this.handleFocusin);\n        this.host.removeEventListener('focusout', this.handleFocusout);\n        this.host.removeEventListener('keydown', this.handleKeydown);\n        this.host.removeEventListener('click', this.handleClick);\n    }\n\n    hostConnected(): void {\n        this.recentlyConnected = true;\n        this.addEventListeners();\n    }\n\n    hostDisconnected(): void {\n        this.mutationObserver.disconnect();\n        this.removeEventListeners();\n    }\n\n    hostUpdated(): void {\n        if (this.recentlyConnected) {\n            this.recentlyConnected = false;\n            this.elements.forEach((element) => {\n                this.mutationObserver.observe(element, {\n                    attributes: true,\n                });\n            });\n        }\n    }\n}\n"],
-  "mappings": "aAuBA,SAASA,EACLC,EACAC,EACAC,EACC,CACD,OAAI,OAAOF,IAAUC,EACT,IAAMD,EACP,OAAOA,GAAU,WACjBA,EAEJE,CACX,CAEO,aAAM,oBAEb,CAiFI,YACIC,EACA,CACI,UAAAC,EACA,mBAAAC,EACA,SAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,cAAAC,CACJ,EAAyB,CAAE,SAAU,IAAM,CAAC,CAAE,EAChD,CA5EF,KAAQ,cAAgB,GAExB,KAAQ,UAAY,GAMpB,gBAAa,IAAsB,OAEnC,KAAO,gBAAkB,EAEzB,wBAAsBC,GAAiB,CAEvC,EAqBA,KAAQ,SAAW,GAWnB,mBAAiBC,GAA2B,EAK5C,wBAAsBD,GAAoB,GAO1C,oBAAiB,IAAmB,KAAK,KAIzC,YAAS,EAET,uBAAoB,GA0IpB,mBAAiBE,GAA4B,CACzC,GAAI,CAAC,KAAK,2BAA2BA,CAAK,EAAG,OAE7C,MAAMC,EAAOD,EAAM,aAAa,EAChC,IAAIE,EAAc,GAClBD,EAAK,KAAME,IACPD,EAAc,KAAK,SAAS,QAAQC,CAAE,EAC/BD,IAAgB,GAC1B,EACD,KAAK,UAAY,KAAK,aACtB,KAAK,aAAeA,EAAc,GAAKA,EAAc,KAAK,aAEtD,KAAK,kCAAkCF,CAAK,GAC5C,KAAK,kBAAkB,CAE/B,EAMA,iBAAc,IAAY,CApR9B,IAAAI,EAsRQ,MAAMV,EAAW,KAAK,SACtB,GAAI,CAACA,EAAS,OAAQ,OACtB,IAAIW,EAAeX,EAAS,KAAK,YAAY,EACzC,KAAK,aAAe,KAGpB,CAACW,GAAgB,CAAC,KAAK,mBAAmBA,CAAY,KACtD,KAAK,0BAA0B,CAAC,EAChCA,EAAeX,EAAS,KAAK,YAAY,GAEzCW,GAAgB,KAAK,mBAAmBA,CAAY,KACpDD,EAAAV,EAAS,KAAK,SAAS,IAAvB,MAAAU,EAA0B,aAAa,WAAY,MACnDC,EAAa,aAAa,WAAY,GAAG,GAEjD,EAEA,oBAAkBL,GAA4B,CACtC,KAAK,kCAAkCA,CAAK,GAC5C,KAAK,0BAA0B,CAEvC,EAiBA,mBAAiBA,GAA+B,CAC5C,GAAI,CAAC,KAAK,iBAAiBA,EAAM,IAAI,GAAKA,EAAM,iBAC5C,OAEJ,IAAIM,EAAO,EAEX,OADA,KAAK,UAAY,KAAK,aACdN,EAAM,KAAM,CAChB,IAAK,aACDM,GAAQ,EACR,MACJ,IAAK,YACDA,GAAQ,KAAK,YAAc,OAAS,KAAK,gBAAkB,EAC3D,MACJ,IAAK,YACDA,GAAQ,EACR,MACJ,IAAK,UACDA,GAAQ,KAAK,YAAc,OAAS,KAAK,gBAAkB,EAC3D,MACJ,IAAK,MACD,KAAK,aAAe,EACpBA,GAAQ,EACR,MACJ,IAAK,OACD,KAAK,aAAe,KAAK,SAAS,OAAS,EAC3CA,GAAQ,EACR,KACR,CACAN,EAAM,eAAe,EACjB,KAAK,YAAc,QAAU,KAAK,aAAeM,EAAO,EACxD,KAAK,aAAe,EAEpB,KAAK,YAAc,QACnB,KAAK,aAAeA,EAAO,KAAK,SAAS,OAAS,EAElD,KAAK,aAAe,KAAK,SAAS,OAAS,EAE3C,KAAK,0BAA0BA,CAAI,EAIvC,KAAK,mBAAmB,KAAK,SAAS,KAAK,YAAY,CAAC,EACxD,KAAK,MAAM,CACf,EApOI,KAAK,iBAAmB,IAAI,iBAAiB,IAAM,CAC/C,KAAK,mBAAmB,CAC5B,CAAC,EACD,KAAK,KAAOf,EACZ,KAAK,KAAK,cAAc,IAAI,EAC5B,KAAK,UAAYG,EACjB,KAAK,mBAAqBE,GAAsB,KAAK,mBACrD,KAAK,WAAaT,EACdK,EACA,SACA,KAAK,UACT,EACA,KAAK,mBAAqBC,GAAsB,KAAK,mBACrD,KAAK,cAAgBN,EACjBQ,EACA,SACA,KAAK,aACT,EACA,KAAK,eAAiBR,EAClBU,EACA,SACA,KAAK,cACT,CACJ,CA/GA,IAAI,cAAuB,CACvB,OAAI,KAAK,gBAAkB,KACvB,KAAK,cAAgB,KAAK,cAEvB,KAAK,cAAgB,KAAK,MACrC,CAEA,IAAI,aAAaU,EAAc,CAC3B,KAAK,cAAgBA,EAAe,KAAK,MAC7C,CAMA,IAAI,WAA4B,CAC5B,OAAO,KAAK,WAAW,CAC3B,CAUA,IAAI,UAAgB,CAChB,OAAK,KAAK,iBACN,KAAK,eAAiB,KAAK,UAAU,GAElC,KAAK,cAChB,CAIA,IAAc,QAAQC,EAAkB,CAEhCA,IAAY,KAAK,UACrB,KAAK,SAAWA,EACpB,CAEA,IAAc,SAAmB,CAC7B,OAAO,KAAK,QAChB,CAIA,IAAI,gBAAoB,CACpB,OAAO,KAAK,SAAS,KAAK,YAAY,CAC1C,CAEA,IAAI,cAAuB,CACvB,OAAO,KAAK,cAAc,KAAK,QAAQ,CAC3C,CAUA,2BAA2BR,EAAuB,CAC9C,OAAI,KAAK,eAAe,IAAM,KAAK,KAAa,GACzCA,EAAM,aAAa,EAAE,SAAS,KAAK,eAAe,CAAC,CAC9D,CAgDA,oBAA2B,CACvB,GACI,KAAK,eAAiB,IACtB,KAAK,SAAS,QAAU,KAAK,UAAU,EAAE,OAEzC,OACJ,MAAMS,EAAiB,KAAK,SAAS,KAAK,YAAY,EAEtD,GADA,KAAK,kBAAkB,EACnB,KAAK,SAAS,SAASA,CAAc,EAAG,OAC5C,MAAMC,EAAoB,KAAK,eAAiB,KAAK,SAAS,OACxDJ,EAAOI,EAAoB,EAAI,GACjCA,GACA,KAAK,0BAA0B,EAAE,EAErC,KAAK,0BAA0BJ,CAAI,EACnC,KAAK,MAAM,CACf,CAEA,OAAO,CAAE,SAAAZ,CAAS,EAAyB,CAAE,SAAU,IAAM,CAAC,CAAE,EAAS,CACrE,KAAK,SAAS,EACd,KAAK,UAAYA,EACjB,KAAK,kBAAkB,EACvB,KAAK,OAAO,CAChB,CAEA,MAAMiB,EAA8B,CAtLxC,IAAAP,EAuLQ,MAAMV,EAAW,KAAK,SACtB,GAAI,CAACA,EAAS,OAAQ,OACtB,IAAIW,EAAeX,EAAS,KAAK,YAAY,GACzC,CAACW,GAAgB,CAAC,KAAK,mBAAmBA,CAAY,KACtD,KAAK,0BAA0B,CAAC,EAChCA,EAAeX,EAAS,KAAK,YAAY,GAEzCW,GAAgB,KAAK,mBAAmBA,CAAY,KACpDD,EAAAV,EAAS,KAAK,SAAS,IAAvB,MAAAU,EAA0B,aAAa,WAAY,MACnDC,EAAa,SAAW,EACxBA,EAAa,MAAMM,CAAO,EAElC,CAEA,kBAAkBC,EAAS,EAAS,CAChC,KAAK,iBAAiB,WAAW,EACjC,OAAO,KAAK,eACZ,KAAK,OAASA,EACd,sBAAsB,IAAM,CACxB,KAAK,SAAS,QAASC,GAAY,CAC/B,KAAK,iBAAiB,QAAQA,EAAS,CACnC,WAAY,EAChB,CAAC,CACL,CAAC,CACL,CAAC,CACL,CAEA,0BAA0BP,EAAoB,CAC1C,KAAM,CAAE,OAAAQ,CAAO,EAAI,KAAK,SACxB,IAAIC,EAAQD,EACZ,KAAK,UAAY,KAAK,aAEtB,IAAIE,GAAaF,EAAS,KAAK,aAAeR,GAAQQ,EACtD,KAEIC,GACA,KAAK,SAASC,CAAS,GACvB,CAAC,KAAK,mBAAmB,KAAK,SAASA,CAAS,CAAC,GAEjDA,GAAaF,EAASE,EAAYV,GAAQQ,EAC1CC,GAAS,EAEb,KAAK,aAAeC,CACxB,CAEA,mBAA0B,CACtB,KAAK,KAAK,iBAAiB,WAAY,KAAK,cAAc,EAC1D,KAAK,KAAK,iBAAiB,UAAW,KAAK,aAAa,EACxD,KAAK,QAAU,EACnB,CAEA,2BAAkC,CAC9B,KAAK,KAAK,iBAAiB,UAAW,KAAK,aAAa,EACxD,KAAK,KAAK,oBAAoB,WAAY,KAAK,cAAc,EAC7D,KAAK,KAAK,oBAAoB,UAAW,KAAK,aAAa,EAC3D,KAAK,QAAU,EACnB,CAEA,kCAAkChB,EAA4B,CAC1D,MAAMiB,EAAgBjB,EAAM,cAEtBkB,EAA2B,KAAK,SAAS,SAC3CD,CACJ,EACME,EAAyC,KAAK,SAAS,KACxDhB,GAAOA,EAAG,SAASc,CAAa,CACrC,EACA,MAAO,EACHC,GAA4BC,EAEpC,CA+CA,iBAAiBC,EAAuB,CACpC,GAAIA,IAAS,OAASA,IAAS,OAC3B,MAAO,GAEX,OAAQ,KAAK,UAAW,CACpB,IAAK,aACD,OAAOA,IAAS,aAAeA,IAAS,aAC5C,IAAK,WACD,OAAOA,IAAS,WAAaA,IAAS,YAC1C,IAAK,OACL,IAAK,OACD,OAAOA,EAAK,WAAW,OAAO,CACtC,CACJ,CA+CA,QAAe,CACX,KAAK,kBAAkB,CAC3B,CAEA,UAAiB,CACb,KAAK,qBAAqB,CAC9B,CAEA,mBAA0B,CACtB,KAAK,KAAK,iBAAiB,UAAW,KAAK,aAAa,EACxD,KAAK,KAAK,iBAAiB,QAAS,KAAK,WAAW,CACxD,CAEA,sBAA6B,CACzB,KAAK,KAAK,oBAAoB,UAAW,KAAK,aAAa,EAC3D,KAAK,KAAK,oBAAoB,WAAY,KAAK,cAAc,EAC7D,KAAK,KAAK,oBAAoB,UAAW,KAAK,aAAa,EAC3D,KAAK,KAAK,oBAAoB,QAAS,KAAK,WAAW,CAC3D,CAEA,eAAsB,CAClB,KAAK,kBAAoB,GACzB,KAAK,kBAAkB,CAC3B,CAEA,kBAAyB,CACrB,KAAK,iBAAiB,WAAW,EACjC,KAAK,qBAAqB,CAC9B,CAEA,aAAoB,CACZ,KAAK,oBACL,KAAK,kBAAoB,GACzB,KAAK,SAAS,QAASP,GAAY,CAC/B,KAAK,iBAAiB,QAAQA,EAAS,CACnC,WAAY,EAChB,CAAC,CACL,CAAC,EAET,CACJ",
-  "names": ["ensureMethod", "value", "type", "fallback", "host", "direction", "elementEnterAction", "elements", "focusInIndex", "isFocusableElement", "listenerScope", "_el", "_elements", "event", "path", "targetIndex", "el", "_a", "focusElement", "diff", "currentIndex", "focused", "focusedElement", "moveToNextElement", "options", "offset", "element", "length", "steps", "nextIndex", "relatedTarget", "isRelatedTargetAnElement", "isRelatedTargetContainedWithinElements", "code"]
+  "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 type { ReactiveController, ReactiveElement } from 'lit';\n\ntype DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';\nexport type FocusGroupConfig<T> = {\n    hostDelegatesFocus?: boolean;\n    focusInIndex?: (_elements: T[]) => number;\n    direction?: DirectionTypes | (() => DirectionTypes);\n    elementEnterAction?: (el: T) => void;\n    elements: () => T[];\n    isFocusableElement?: (el: T) => boolean;\n    listenerScope?: HTMLElement | (() => HTMLElement);\n};\n\nfunction ensureMethod<T, RT>(\n    value: T | RT | undefined,\n    type: string,\n    fallback: T\n): T {\n    if (typeof value === type) {\n        return (() => value) as T;\n    } else if (typeof value === 'function') {\n        return value as T;\n    }\n    return fallback;\n}\n\nexport class FocusGroupController<T extends HTMLElement>\n    implements ReactiveController\n{\n    protected cachedElements?: T[];\n    private mutationObserver: MutationObserver;\n\n    get currentIndex(): number {\n        if (this._currentIndex === -1) {\n            this._currentIndex = this.focusInIndex;\n        }\n        return this._currentIndex - this.offset;\n    }\n\n    set currentIndex(currentIndex) {\n        this._currentIndex = currentIndex + this.offset;\n    }\n\n    private _currentIndex = -1;\n\n    private prevIndex = -1;\n\n    get direction(): DirectionTypes {\n        return this._direction();\n    }\n\n    _direction = (): DirectionTypes => 'both';\n\n    public directionLength = 5;\n\n    public hostDelegatesFocus = false;\n\n    elementEnterAction = (_el: T): void => {\n        return;\n    };\n\n    get elements(): T[] {\n        if (!this.cachedElements) {\n            this.cachedElements = this._elements();\n        }\n        return this.cachedElements;\n    }\n\n    private _elements!: () => T[];\n\n    protected set focused(focused: boolean) {\n        /* c8 ignore next 1 */\n        if (focused === this.focused) return;\n        this._focused = focused;\n    }\n\n    protected get focused(): boolean {\n        return this._focused;\n    }\n\n    private _focused = false;\n\n    get focusInElement(): T {\n        return this.elements[this.focusInIndex];\n    }\n\n    get focusInIndex(): number {\n        return this._focusInIndex(this.elements);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    _focusInIndex = (_elements: T[]): number => 0;\n\n    host: ReactiveElement;\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    isFocusableElement = (_el: T): boolean => true;\n\n    isEventWithinListenerScope(event: Event): boolean {\n        if (this._listenerScope() === this.host) return true;\n        return event.composedPath().includes(this._listenerScope());\n    }\n\n    _listenerScope = (): HTMLElement => this.host;\n\n    // When elements are virtualized, the delta between the first element\n    // and the first rendered element.\n    offset = 0;\n\n    recentlyConnected = false;\n\n    constructor(\n        host: ReactiveElement,\n        {\n            hostDelegatesFocus,\n            direction,\n            elementEnterAction,\n            elements,\n            focusInIndex,\n            isFocusableElement,\n            listenerScope,\n        }: FocusGroupConfig<T> = { elements: () => [] }\n    ) {\n        this.mutationObserver = new MutationObserver(() => {\n            this.handleItemMutation();\n        });\n        this.hostDelegatesFocus = hostDelegatesFocus || false;\n        this.host = host;\n        this.host.addController(this);\n        this._elements = elements;\n        this.isFocusableElement = isFocusableElement || this.isFocusableElement;\n        this._direction = ensureMethod<() => DirectionTypes, DirectionTypes>(\n            direction,\n            'string',\n            this._direction\n        );\n        this.elementEnterAction = elementEnterAction || this.elementEnterAction;\n        this._focusInIndex = ensureMethod<(_elements: T[]) => number, number>(\n            focusInIndex,\n            'number',\n            this._focusInIndex\n        );\n        this._listenerScope = ensureMethod<() => HTMLElement, HTMLElement>(\n            listenerScope,\n            'object',\n            this._listenerScope\n        );\n    }\n    /*  In  handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.\n        Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;\n    */\n    handleItemMutation(): void {\n        if (\n            this._currentIndex == -1 ||\n            this.elements.length <= this._elements().length\n        )\n            return;\n        const focusedElement = this.elements[this.currentIndex];\n        this.clearElementCache();\n        if (this.elements.includes(focusedElement)) return;\n        const moveToNextElement = this.currentIndex !== this.elements.length;\n        const diff = moveToNextElement ? 1 : -1;\n        if (moveToNextElement) {\n            this.setCurrentIndexCircularly(-1);\n        }\n        this.setCurrentIndexCircularly(diff);\n        this.focus();\n    }\n\n    update({ elements }: FocusGroupConfig<T> = { elements: () => [] }): void {\n        this.unmanage();\n        this._elements = elements;\n        this.clearElementCache();\n        this.manage();\n    }\n\n    /**\n     * resets the focusedItem to initial item\n     */\n    reset(): void {\n        const elements = this.elements;\n        if (!elements.length) return;\n        this.setCurrentIndexCircularly(this.focusInIndex - this.currentIndex);\n        let focusElement = elements[this.currentIndex];\n        if (this.currentIndex < 0) {\n            return;\n        }\n        if (!focusElement || !this.isFocusableElement(focusElement)) {\n            this.setCurrentIndexCircularly(1);\n            focusElement = elements[this.currentIndex];\n        }\n        if (focusElement && this.isFocusableElement(focusElement)) {\n            elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n            focusElement.setAttribute('tabindex', '0');\n        }\n    }\n\n    focusOnItem(item?: T, options?: FocusOptions): void {\n        if (\n            item &&\n            this.isFocusableElement(item) &&\n            this.elements.indexOf(item)\n        ) {\n            const diff = this.elements.indexOf(item) - this.currentIndex;\n            this.setCurrentIndexCircularly(diff);\n            this.elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n        }\n        this.focus(options);\n    }\n\n    focus(options?: FocusOptions): void {\n        const elements = this.elements;\n        if (!elements.length) return;\n        let focusElement = elements[this.currentIndex];\n        if (!focusElement || !this.isFocusableElement(focusElement)) {\n            this.setCurrentIndexCircularly(1);\n            focusElement = elements[this.currentIndex];\n        }\n        if (focusElement && this.isFocusableElement(focusElement)) {\n            if (\n                !this.hostDelegatesFocus ||\n                elements[this.prevIndex] !== focusElement\n            ) {\n                elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n            }\n            focusElement.tabIndex = 0;\n            focusElement.focus(options);\n            if (this.hostDelegatesFocus && !this.focused) {\n                this.hostContainsFocus();\n            }\n        }\n    }\n\n    clearElementCache(offset = 0): void {\n        this.mutationObserver.disconnect();\n        delete this.cachedElements;\n        this.offset = offset;\n        requestAnimationFrame(() => {\n            this.elements.forEach((element) => {\n                this.mutationObserver.observe(element, {\n                    attributes: true,\n                });\n            });\n        });\n    }\n\n    setCurrentIndexCircularly(diff: number): void {\n        const { length } = this.elements;\n        let steps = length;\n        this.prevIndex = this.currentIndex;\n        // start at a possibly not 0 index\n        let nextIndex = (length + this.currentIndex + diff) % length;\n        while (\n            // don't cycle the elements more than once\n            steps &&\n            this.elements[nextIndex] &&\n            !this.isFocusableElement(this.elements[nextIndex])\n        ) {\n            nextIndex = (length + nextIndex + diff) % length;\n            steps -= 1;\n        }\n        this.currentIndex = nextIndex;\n    }\n\n    hostContainsFocus(): void {\n        this.host.addEventListener('focusout', this.handleFocusout);\n        this.host.addEventListener('keydown', this.handleKeydown);\n        this.focused = true;\n    }\n\n    hostNoLongerContainsFocus(): void {\n        this.host.addEventListener('focusin', this.handleFocusin);\n        this.host.removeEventListener('focusout', this.handleFocusout);\n        this.host.removeEventListener('keydown', this.handleKeydown);\n        this.focused = false;\n    }\n\n    isRelatedTargetOrContainAnElement(event: FocusEvent): boolean {\n        const relatedTarget = event.relatedTarget as null | Element;\n\n        const isRelatedTargetAnElement = this.elements.includes(\n            relatedTarget as T\n        );\n        const isRelatedTargetContainedWithinElements = this.elements.some(\n            (el) => el.contains(relatedTarget)\n        );\n        return !(\n            isRelatedTargetAnElement || isRelatedTargetContainedWithinElements\n        );\n    }\n\n    handleFocusin = (event: FocusEvent): void => {\n        if (!this.isEventWithinListenerScope(event)) return;\n\n        const path = event.composedPath() as T[];\n        let targetIndex = -1;\n        path.find((el) => {\n            targetIndex = this.elements.indexOf(el);\n            return targetIndex !== -1;\n        });\n        this.prevIndex = this.currentIndex;\n        this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;\n\n        if (this.isRelatedTargetOrContainAnElement(event)) {\n            this.hostContainsFocus();\n        }\n    };\n\n    /**\n     * handleClick - Finds the element that was clicked and sets the tabindex to 0\n     * @returns void\n     */\n    handleClick = (): void => {\n        // Manually set the tabindex to 0 for the current element on receiving focus (from keyboard or mouse)\n        const elements = this.elements;\n        if (!elements.length) return;\n        let focusElement = elements[this.currentIndex];\n        if (this.currentIndex < 0) {\n            return;\n        }\n        if (!focusElement || !this.isFocusableElement(focusElement)) {\n            this.setCurrentIndexCircularly(1);\n            focusElement = elements[this.currentIndex];\n        }\n        if (focusElement && this.isFocusableElement(focusElement)) {\n            elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n            focusElement.setAttribute('tabindex', '0');\n        }\n    };\n\n    handleFocusout = (event: FocusEvent): void => {\n        if (this.isRelatedTargetOrContainAnElement(event)) {\n            this.hostNoLongerContainsFocus();\n        }\n    };\n\n    acceptsEventKey(key: string): boolean {\n        if (key === 'End' || key === 'Home') {\n            return true;\n        }\n        switch (this.direction) {\n            case 'horizontal':\n                return key === 'ArrowLeft' || key === 'ArrowRight';\n            case 'vertical':\n                return key === 'ArrowUp' || key === 'ArrowDown';\n            case 'both':\n            case 'grid':\n                return key.startsWith('Arrow');\n        }\n    }\n\n    handleKeydown = (event: KeyboardEvent): void => {\n        if (!this.acceptsEventKey(event.key) || event.defaultPrevented) {\n            return;\n        }\n        let diff = 0;\n        this.prevIndex = this.currentIndex;\n        switch (event.key) {\n            case 'ArrowRight':\n                diff += 1;\n                break;\n            case 'ArrowDown':\n                diff += this.direction === 'grid' ? this.directionLength : 1;\n                break;\n            case 'ArrowLeft':\n                diff -= 1;\n                break;\n            case 'ArrowUp':\n                diff -= this.direction === 'grid' ? this.directionLength : 1;\n                break;\n            case 'End':\n                this.currentIndex = 0;\n                diff -= 1;\n                break;\n            case 'Home':\n                this.currentIndex = this.elements.length - 1;\n                diff += 1;\n                break;\n        }\n        event.preventDefault();\n        if (this.direction === 'grid' && this.currentIndex + diff < 0) {\n            this.currentIndex = 0;\n        } else if (\n            this.direction === 'grid' &&\n            this.currentIndex + diff > this.elements.length - 1\n        ) {\n            this.currentIndex = this.elements.length - 1;\n        } else {\n            this.setCurrentIndexCircularly(diff);\n        }\n        // To allow the `focusInIndex` to be calculated with the \"after\" state of the keyboard interaction\n        // do `elementEnterAction` _before_ focusing the next element.\n        this.elementEnterAction(this.elements[this.currentIndex]);\n        this.focus();\n    };\n\n    manage(): void {\n        this.addEventListeners();\n    }\n\n    unmanage(): void {\n        this.removeEventListeners();\n    }\n\n    addEventListeners(): void {\n        this.host.addEventListener('focusin', this.handleFocusin);\n        this.host.addEventListener('click', this.handleClick);\n    }\n\n    removeEventListeners(): void {\n        this.host.removeEventListener('focusin', this.handleFocusin);\n        this.host.removeEventListener('focusout', this.handleFocusout);\n        this.host.removeEventListener('keydown', this.handleKeydown);\n        this.host.removeEventListener('click', this.handleClick);\n    }\n\n    hostConnected(): void {\n        this.recentlyConnected = true;\n        this.addEventListeners();\n    }\n\n    hostDisconnected(): void {\n        this.mutationObserver.disconnect();\n        this.removeEventListeners();\n    }\n\n    hostUpdated(): void {\n        if (this.recentlyConnected) {\n            this.recentlyConnected = false;\n            this.elements.forEach((element) => {\n                this.mutationObserver.observe(element, {\n                    attributes: true,\n                });\n            });\n        }\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["ensureMethod", "value", "type", "fallback", "host", "hostDelegatesFocus", "direction", "elementEnterAction", "elements", "focusInIndex", "isFocusableElement", "listenerScope", "_el", "_elements", "event", "path", "targetIndex", "el", "_a", "focusElement", "diff", "currentIndex", "focused", "focusedElement", "moveToNextElement", "item", "options", "offset", "element", "length", "steps", "nextIndex", "relatedTarget", "isRelatedTargetAnElement", "isRelatedTargetContainedWithinElements", "key"]
 }

package/src/RovingTabindex.dev.js

@@ -23,7 +23,7 @@ export class RovingTabindexController extends FocusGroupController {
     );
   }
   manageTabindexes() {
-    if (this.focused) {
+    if (this.focused && !this.hostDelegatesFocus) {
       this.updateTabindexes(() => ({ tabIndex: -1 }));
     } else {
       this.updateTabindexes((el) => {
@@ -47,7 +47,6 @@ export class RovingTabindexController extends FocusGroupController {
         }
         return;
       }
-      el.removeAttribute("tabindex");
       const updatable = el;
       if (updatable.requestUpdate) updatable.requestUpdate();
     });

package/src/RovingTabindex.dev.js.map

@@ -1,7 +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;",
+  "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 && !this.hostDelegatesFocus) {\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            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,WAAW,CAAC,KAAK,oBAAoB;AAC1C,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,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

@@ -1,2 +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()}}
+"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.hostDelegatesFocus?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}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

@@ -1,7 +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",
+  "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 && !this.hostDelegatesFocus) {\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            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,SAAW,CAAC,KAAK,mBACtB,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,CACA,MAAME,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"]
 }