@spectrum-web-components/tabs 1.2.0-beta.8 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/tabs",
-    "version": "1.2.0-beta.8",
+    "version": "1.2.0",
     "publishConfig": {
         "access": "public"
     },
@@ -88,11 +88,11 @@
     ],
     "dependencies": {
         "@lit-labs/observers": "^2.0.2",
-        "@spectrum-web-components/base": "^1.2.0-beta.8",
-        "@spectrum-web-components/icon": "^1.2.0-beta.8",
-        "@spectrum-web-components/icons-ui": "^1.2.0-beta.8",
-        "@spectrum-web-components/reactive-controllers": "^1.2.0-beta.8",
-        "@spectrum-web-components/shared": "^1.2.0-beta.8"
+        "@spectrum-web-components/base": "^1.2.0",
+        "@spectrum-web-components/icon": "^1.2.0",
+        "@spectrum-web-components/icons-ui": "^1.2.0",
+        "@spectrum-web-components/reactive-controllers": "^1.2.0",
+        "@spectrum-web-components/shared": "^1.2.0"
     },
     "devDependencies": {
         "@spectrum-css/tabs": "6.0.0-s2-foundations.16"
@@ -103,5 +103,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "740377aa5f17e15650d4871e3034bd9c9a2f5c35"
+    "gitHead": "e4aec7b389e6209984e4df74f9b86b3ee0c485dd"
 }

package/src/TabsOverflow.dev.js

@@ -25,7 +25,6 @@ import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import "@spectrum-web-components/action-button/sp-action-button.js";
 import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
 import chevronIconStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
-import chevronIconOverrides from "@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";
 import tabSizes from "./tabs-sizes.css.js";
 import styles from "./tabs-overflow.css.js";
 export class TabsOverflow extends SizedMixin(SpectrumElement) {
@@ -47,7 +46,7 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) {
     });
   }
   static get styles() {
-    return [styles, tabSizes, chevronIconStyles, chevronIconOverrides];
+    return [styles, tabSizes, chevronIconStyles];
   }
   firstUpdated(changes) {
     super.firstUpdated(changes);

package/src/TabsOverflow.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["TabsOverflow.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*/\nimport {\n    CSSResultArray,\n    html,\n    PropertyValueMap,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n    queryAssignedElements,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport { Tabs } from './Tabs.dev.js'\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';\nimport tabSizes from './tabs-sizes.css.js';\nimport styles from './tabs-overflow.css.js';\n\ninterface TabsOverflowState {\n    canScrollLeft: boolean;\n    canScrollRight: boolean;\n}\n/**\n * @element sp-tabs-overflow\n */\nexport class TabsOverflow extends SizedMixin(SpectrumElement) {\n    public static override get styles(): CSSResultArray {\n        return [styles, tabSizes, chevronIconStyles, chevronIconOverrides];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public compact = false;\n\n    @property({ type: String, attribute: 'label-previous' })\n    public labelPrevious = 'Scroll to previous tabs';\n\n    @property({ type: String, attribute: 'label-next' })\n    public labelNext = 'Scroll to next tabs';\n\n    @property({ reflect: true })\n    public override dir!: 'ltr' | 'rtl';\n\n    @state()\n    private overflowState: TabsOverflowState = {\n        canScrollLeft: false,\n        canScrollRight: false,\n    };\n\n    @queryAssignedElements({ selector: 'sp-tabs', flatten: true })\n    private scrollContent!: Tabs[];\n\n    @query('.tabs-overflow-container')\n    private overflowContainer!: HTMLDivElement;\n\n    resizeController!: ResizeController;\n\n    public constructor() {\n        super();\n        this.resizeController = new ResizeController(this, {\n            target: this,\n            callback: (): void => {\n                this._updateScrollState();\n            },\n        });\n    }\n\n    protected override firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        // enable scroll event\n        const [tabs] = this.scrollContent;\n        if (tabs) {\n            tabs.enableTabsScroll = true;\n        }\n        this.resizeController.observe(this.overflowContainer);\n    }\n\n    private async _handleSlotChange(): Promise<void> {\n        const [tabsElement] = this.scrollContent;\n        await tabsElement?.updateComplete;\n        this._updateScrollState();\n    }\n\n    private _updateScrollState(): void {\n        const { scrollContent, overflowState } = this;\n\n        if (scrollContent) {\n            const [tabsElement] = this.scrollContent;\n            const { canScrollLeft, canScrollRight } =\n                tabsElement?.scrollState || {\n                    canScrollLeft: false,\n                    canScrollRight: false,\n                };\n\n            this.overflowState = {\n                ...overflowState,\n                canScrollLeft,\n                canScrollRight,\n            };\n        }\n    }\n\n    private scrollFactor = 0.5;\n    private _handleScrollClick(event: MouseEvent): void {\n        const currentTarget = event.currentTarget as HTMLElement;\n        const [tabsElement] = this.scrollContent;\n\n        const dist = tabsElement.clientWidth * this.scrollFactor;\n        const left = currentTarget.classList.contains('left-scroll')\n            ? -dist\n            : dist;\n        tabsElement.scrollTabs(left, 'smooth');\n    }\n\n    protected override updated(\n        changedProperties: PropertyValueMap<this>\n    ): void {\n        super.updated(changedProperties);\n        if (changedProperties.has('dir')) {\n            this._updateScrollState();\n        }\n    }\n\n    protected override render(): TemplateResult {\n        const { canScrollRight, canScrollLeft } = this.overflowState;\n        const ariaLabelPrevious = this.labelPrevious;\n        const ariaLabelNext = this.labelNext;\n        return html`\n            <div\n                class=${classMap({\n                    'tabs-overflow-container': true,\n                    'left-shadow': canScrollLeft,\n                    'right-shadow': canScrollRight,\n                })}\n            >\n                <sp-action-button\n                    class=${classMap({\n                        'left-scroll': true,\n                        show: canScrollLeft,\n                    })}\n                    aria-label=${ariaLabelPrevious}\n                    quiet\n                    dir=\"rtl\"\n                    tabindex=\"-1\"\n                    @click=${this._handleScrollClick}\n                >\n                    <sp-icon-chevron100\n                        slot=\"icon\"\n                        class=\"spectrum-UIIcon-ChevronLeft300\"\n                    ></sp-icon-chevron100>\n                </sp-action-button>\n                <sp-action-button\n                    class=${classMap({\n                        'right-scroll': true,\n                        show: canScrollRight,\n                    })}\n                    aria-label=${ariaLabelNext}\n                    quiet\n                    tabindex=\"-1\"\n                    @click=${this._handleScrollClick}\n                >\n                    <sp-icon-chevron100\n                        slot=\"icon\"\n                        class=\"spectrum-UIIcon-ChevronRight300\"\n                    ></sp-icon-chevron100>\n                </sp-action-button>\n                <slot\n                    @slotchange=${this._handleSlotChange}\n                    @sp-tabs-scroll=${this._updateScrollState}\n                ></slot>\n            </div>\n        `;\n    }\n}\n"],
-  "mappings": "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",
+  "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*/\nimport {\n    CSSResultArray,\n    html,\n    PropertyValueMap,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n    queryAssignedElements,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport { Tabs } from './Tabs.dev.js'\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport tabSizes from './tabs-sizes.css.js';\nimport styles from './tabs-overflow.css.js';\n\ninterface TabsOverflowState {\n    canScrollLeft: boolean;\n    canScrollRight: boolean;\n}\n/**\n * @element sp-tabs-overflow\n */\nexport class TabsOverflow extends SizedMixin(SpectrumElement) {\n    public static override get styles(): CSSResultArray {\n        return [styles, tabSizes, chevronIconStyles];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public compact = false;\n\n    @property({ type: String, attribute: 'label-previous' })\n    public labelPrevious = 'Scroll to previous tabs';\n\n    @property({ type: String, attribute: 'label-next' })\n    public labelNext = 'Scroll to next tabs';\n\n    @property({ reflect: true })\n    public override dir!: 'ltr' | 'rtl';\n\n    @state()\n    private overflowState: TabsOverflowState = {\n        canScrollLeft: false,\n        canScrollRight: false,\n    };\n\n    @queryAssignedElements({ selector: 'sp-tabs', flatten: true })\n    private scrollContent!: Tabs[];\n\n    @query('.tabs-overflow-container')\n    private overflowContainer!: HTMLDivElement;\n\n    resizeController!: ResizeController;\n\n    public constructor() {\n        super();\n        this.resizeController = new ResizeController(this, {\n            target: this,\n            callback: (): void => {\n                this._updateScrollState();\n            },\n        });\n    }\n\n    protected override firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        // enable scroll event\n        const [tabs] = this.scrollContent;\n        if (tabs) {\n            tabs.enableTabsScroll = true;\n        }\n        this.resizeController.observe(this.overflowContainer);\n    }\n\n    private async _handleSlotChange(): Promise<void> {\n        const [tabsElement] = this.scrollContent;\n        await tabsElement?.updateComplete;\n        this._updateScrollState();\n    }\n\n    private _updateScrollState(): void {\n        const { scrollContent, overflowState } = this;\n\n        if (scrollContent) {\n            const [tabsElement] = this.scrollContent;\n            const { canScrollLeft, canScrollRight } =\n                tabsElement?.scrollState || {\n                    canScrollLeft: false,\n                    canScrollRight: false,\n                };\n\n            this.overflowState = {\n                ...overflowState,\n                canScrollLeft,\n                canScrollRight,\n            };\n        }\n    }\n\n    private scrollFactor = 0.5;\n    private _handleScrollClick(event: MouseEvent): void {\n        const currentTarget = event.currentTarget as HTMLElement;\n        const [tabsElement] = this.scrollContent;\n\n        const dist = tabsElement.clientWidth * this.scrollFactor;\n        const left = currentTarget.classList.contains('left-scroll')\n            ? -dist\n            : dist;\n        tabsElement.scrollTabs(left, 'smooth');\n    }\n\n    protected override updated(\n        changedProperties: PropertyValueMap<this>\n    ): void {\n        super.updated(changedProperties);\n        if (changedProperties.has('dir')) {\n            this._updateScrollState();\n        }\n    }\n\n    protected override render(): TemplateResult {\n        const { canScrollRight, canScrollLeft } = this.overflowState;\n        const ariaLabelPrevious = this.labelPrevious;\n        const ariaLabelNext = this.labelNext;\n        return html`\n            <div\n                class=${classMap({\n                    'tabs-overflow-container': true,\n                    'left-shadow': canScrollLeft,\n                    'right-shadow': canScrollRight,\n                })}\n            >\n                <sp-action-button\n                    class=${classMap({\n                        'left-scroll': true,\n                        show: canScrollLeft,\n                    })}\n                    aria-label=${ariaLabelPrevious}\n                    quiet\n                    dir=\"rtl\"\n                    tabindex=\"-1\"\n                    @click=${this._handleScrollClick}\n                >\n                    <sp-icon-chevron100\n                        slot=\"icon\"\n                        class=\"spectrum-UIIcon-ChevronLeft300\"\n                    ></sp-icon-chevron100>\n                </sp-action-button>\n                <sp-action-button\n                    class=${classMap({\n                        'right-scroll': true,\n                        show: canScrollRight,\n                    })}\n                    aria-label=${ariaLabelNext}\n                    quiet\n                    tabindex=\"-1\"\n                    @click=${this._handleScrollClick}\n                >\n                    <sp-icon-chevron100\n                        slot=\"icon\"\n                        class=\"spectrum-UIIcon-ChevronRight300\"\n                    ></sp-icon-chevron100>\n                </sp-action-button>\n                <slot\n                    @slotchange=${this._handleSlotChange}\n                    @sp-tabs-scroll=${this._updateScrollState}\n                ></slot>\n            </div>\n        `;\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/src/TabsOverflow.js

@@ -1,4 +1,4 @@
-"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=(c,i,t,o)=>{for(var e=o>1?void 0:o?u(i,t):i,r=c.length-1,s;r>=0;r--)(s=c[r])&&(e=(o?s(i,t,e):s(e))||e);return o&&e&&p(i,t,e),e};import{html as h,SizedMixin as d,SpectrumElement as S}from"@spectrum-web-components/base";import{property as a,query as v,queryAssignedElements as f,state as b}from"@spectrum-web-components/base/src/decorators.js";import{classMap as n}from"@spectrum-web-components/base/src/directives.js";import{ResizeController as m}from"@lit-labs/observers/resize-controller.js";import"@spectrum-web-components/action-button/sp-action-button.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import C from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import g from"@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";import y from"./tabs-sizes.css.js";import R from"./tabs-overflow.css.js";export class TabsOverflow extends d(S){constructor(){super();this.compact=!1;this.labelPrevious="Scroll to previous tabs";this.labelNext="Scroll to next tabs";this.overflowState={canScrollLeft:!1,canScrollRight:!1};this.scrollFactor=.5;this.resizeController=new m(this,{target:this,callback:()=>{this._updateScrollState()}})}static get styles(){return[R,y,C,g]}firstUpdated(t){super.firstUpdated(t);const[o]=this.scrollContent;o&&(o.enableTabsScroll=!0),this.resizeController.observe(this.overflowContainer)}async _handleSlotChange(){const[t]=this.scrollContent;await(t==null?void 0:t.updateComplete),this._updateScrollState()}_updateScrollState(){const{scrollContent:t,overflowState:o}=this;if(t){const[e]=this.scrollContent,{canScrollLeft:r,canScrollRight:s}=(e==null?void 0:e.scrollState)||{canScrollLeft:!1,canScrollRight:!1};this.overflowState={...o,canScrollLeft:r,canScrollRight:s}}}_handleScrollClick(t){const o=t.currentTarget,[e]=this.scrollContent,r=e.clientWidth*this.scrollFactor,s=o.classList.contains("left-scroll")?-r:r;e.scrollTabs(s,"smooth")}updated(t){super.updated(t),t.has("dir")&&this._updateScrollState()}render(){const{canScrollRight:t,canScrollLeft:o}=this.overflowState,e=this.labelPrevious,r=this.labelNext;return h`
+"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=(c,a,t,o)=>{for(var e=o>1?void 0:o?u(a,t):a,r=c.length-1,s;r>=0;r--)(s=c[r])&&(e=(o?s(a,t,e):s(e))||e);return o&&e&&p(a,t,e),e};import{html as h,SizedMixin as d,SpectrumElement as S}from"@spectrum-web-components/base";import{property as i,query as v,queryAssignedElements as b,state as f}from"@spectrum-web-components/base/src/decorators.js";import{classMap as n}from"@spectrum-web-components/base/src/directives.js";import{ResizeController as m}from"@lit-labs/observers/resize-controller.js";import"@spectrum-web-components/action-button/sp-action-button.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import C from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import g from"./tabs-sizes.css.js";import y from"./tabs-overflow.css.js";export class TabsOverflow extends d(S){constructor(){super();this.compact=!1;this.labelPrevious="Scroll to previous tabs";this.labelNext="Scroll to next tabs";this.overflowState={canScrollLeft:!1,canScrollRight:!1};this.scrollFactor=.5;this.resizeController=new m(this,{target:this,callback:()=>{this._updateScrollState()}})}static get styles(){return[y,g,C]}firstUpdated(t){super.firstUpdated(t);const[o]=this.scrollContent;o&&(o.enableTabsScroll=!0),this.resizeController.observe(this.overflowContainer)}async _handleSlotChange(){const[t]=this.scrollContent;await(t==null?void 0:t.updateComplete),this._updateScrollState()}_updateScrollState(){const{scrollContent:t,overflowState:o}=this;if(t){const[e]=this.scrollContent,{canScrollLeft:r,canScrollRight:s}=(e==null?void 0:e.scrollState)||{canScrollLeft:!1,canScrollRight:!1};this.overflowState={...o,canScrollLeft:r,canScrollRight:s}}}_handleScrollClick(t){const o=t.currentTarget,[e]=this.scrollContent,r=e.clientWidth*this.scrollFactor,s=o.classList.contains("left-scroll")?-r:r;e.scrollTabs(s,"smooth")}updated(t){super.updated(t),t.has("dir")&&this._updateScrollState()}render(){const{canScrollRight:t,canScrollLeft:o}=this.overflowState,e=this.labelPrevious,r=this.labelNext;return h`
             <div
                 class=${n({"tabs-overflow-container":!0,"left-shadow":o,"right-shadow":t})}
             >
@@ -32,5 +32,5 @@
                     @sp-tabs-scroll=${this._updateScrollState}
                 ></slot>
             </div>
-        `}}l([a({type:Boolean,reflect:!0})],TabsOverflow.prototype,"compact",2),l([a({type:String,attribute:"label-previous"})],TabsOverflow.prototype,"labelPrevious",2),l([a({type:String,attribute:"label-next"})],TabsOverflow.prototype,"labelNext",2),l([a({reflect:!0})],TabsOverflow.prototype,"dir",2),l([b()],TabsOverflow.prototype,"overflowState",2),l([f({selector:"sp-tabs",flatten:!0})],TabsOverflow.prototype,"scrollContent",2),l([v(".tabs-overflow-container")],TabsOverflow.prototype,"overflowContainer",2);
+        `}}l([i({type:Boolean,reflect:!0})],TabsOverflow.prototype,"compact",2),l([i({type:String,attribute:"label-previous"})],TabsOverflow.prototype,"labelPrevious",2),l([i({type:String,attribute:"label-next"})],TabsOverflow.prototype,"labelNext",2),l([i({reflect:!0})],TabsOverflow.prototype,"dir",2),l([f()],TabsOverflow.prototype,"overflowState",2),l([b({selector:"sp-tabs",flatten:!0})],TabsOverflow.prototype,"scrollContent",2),l([v(".tabs-overflow-container")],TabsOverflow.prototype,"overflowContainer",2);
 //# sourceMappingURL=TabsOverflow.js.map

package/src/TabsOverflow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["TabsOverflow.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*/\nimport {\n    CSSResultArray,\n    html,\n    PropertyValueMap,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n    queryAssignedElements,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport { Tabs } from './Tabs.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';\nimport tabSizes from './tabs-sizes.css.js';\nimport styles from './tabs-overflow.css.js';\n\ninterface TabsOverflowState {\n    canScrollLeft: boolean;\n    canScrollRight: boolean;\n}\n/**\n * @element sp-tabs-overflow\n */\nexport class TabsOverflow extends SizedMixin(SpectrumElement) {\n    public static override get styles(): CSSResultArray {\n        return [styles, tabSizes, chevronIconStyles, chevronIconOverrides];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public compact = false;\n\n    @property({ type: String, attribute: 'label-previous' })\n    public labelPrevious = 'Scroll to previous tabs';\n\n    @property({ type: String, attribute: 'label-next' })\n    public labelNext = 'Scroll to next tabs';\n\n    @property({ reflect: true })\n    public override dir!: 'ltr' | 'rtl';\n\n    @state()\n    private overflowState: TabsOverflowState = {\n        canScrollLeft: false,\n        canScrollRight: false,\n    };\n\n    @queryAssignedElements({ selector: 'sp-tabs', flatten: true })\n    private scrollContent!: Tabs[];\n\n    @query('.tabs-overflow-container')\n    private overflowContainer!: HTMLDivElement;\n\n    resizeController!: ResizeController;\n\n    public constructor() {\n        super();\n        this.resizeController = new ResizeController(this, {\n            target: this,\n            callback: (): void => {\n                this._updateScrollState();\n            },\n        });\n    }\n\n    protected override firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        // enable scroll event\n        const [tabs] = this.scrollContent;\n        if (tabs) {\n            tabs.enableTabsScroll = true;\n        }\n        this.resizeController.observe(this.overflowContainer);\n    }\n\n    private async _handleSlotChange(): Promise<void> {\n        const [tabsElement] = this.scrollContent;\n        await tabsElement?.updateComplete;\n        this._updateScrollState();\n    }\n\n    private _updateScrollState(): void {\n        const { scrollContent, overflowState } = this;\n\n        if (scrollContent) {\n            const [tabsElement] = this.scrollContent;\n            const { canScrollLeft, canScrollRight } =\n                tabsElement?.scrollState || {\n                    canScrollLeft: false,\n                    canScrollRight: false,\n                };\n\n            this.overflowState = {\n                ...overflowState,\n                canScrollLeft,\n                canScrollRight,\n            };\n        }\n    }\n\n    private scrollFactor = 0.5;\n    private _handleScrollClick(event: MouseEvent): void {\n        const currentTarget = event.currentTarget as HTMLElement;\n        const [tabsElement] = this.scrollContent;\n\n        const dist = tabsElement.clientWidth * this.scrollFactor;\n        const left = currentTarget.classList.contains('left-scroll')\n            ? -dist\n            : dist;\n        tabsElement.scrollTabs(left, 'smooth');\n    }\n\n    protected override updated(\n        changedProperties: PropertyValueMap<this>\n    ): void {\n        super.updated(changedProperties);\n        if (changedProperties.has('dir')) {\n            this._updateScrollState();\n        }\n    }\n\n    protected override render(): TemplateResult {\n        const { canScrollRight, canScrollLeft } = this.overflowState;\n        const ariaLabelPrevious = this.labelPrevious;\n        const ariaLabelNext = this.labelNext;\n        return html`\n            <div\n                class=${classMap({\n                    'tabs-overflow-container': true,\n                    'left-shadow': canScrollLeft,\n                    'right-shadow': canScrollRight,\n                })}\n            >\n                <sp-action-button\n                    class=${classMap({\n                        'left-scroll': true,\n                        show: canScrollLeft,\n                    })}\n                    aria-label=${ariaLabelPrevious}\n                    quiet\n                    dir=\"rtl\"\n                    tabindex=\"-1\"\n                    @click=${this._handleScrollClick}\n                >\n                    <sp-icon-chevron100\n                        slot=\"icon\"\n                        class=\"spectrum-UIIcon-ChevronLeft300\"\n                    ></sp-icon-chevron100>\n                </sp-action-button>\n                <sp-action-button\n                    class=${classMap({\n                        'right-scroll': true,\n                        show: canScrollRight,\n                    })}\n                    aria-label=${ariaLabelNext}\n                    quiet\n                    tabindex=\"-1\"\n                    @click=${this._handleScrollClick}\n                >\n                    <sp-icon-chevron100\n                        slot=\"icon\"\n                        class=\"spectrum-UIIcon-ChevronRight300\"\n                    ></sp-icon-chevron100>\n                </sp-action-button>\n                <slot\n                    @slotchange=${this._handleSlotChange}\n                    @sp-tabs-scroll=${this._updateScrollState}\n                ></slot>\n            </div>\n        `;\n    }\n}\n"],
-  "mappings": "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",
-  "names": ["html", "SizedMixin", "SpectrumElement", "property", "query", "queryAssignedElements", "state", "classMap", "ResizeController", "chevronIconStyles", "chevronIconOverrides", "tabSizes", "styles", "changes", "tabs", "tabsElement", "scrollContent", "overflowState", "canScrollLeft", "canScrollRight", "event", "currentTarget", "dist", "left", "changedProperties", "ariaLabelPrevious", "ariaLabelNext", "__decorateClass"]
+  "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*/\nimport {\n    CSSResultArray,\n    html,\n    PropertyValueMap,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n    queryAssignedElements,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport { Tabs } from './Tabs.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport tabSizes from './tabs-sizes.css.js';\nimport styles from './tabs-overflow.css.js';\n\ninterface TabsOverflowState {\n    canScrollLeft: boolean;\n    canScrollRight: boolean;\n}\n/**\n * @element sp-tabs-overflow\n */\nexport class TabsOverflow extends SizedMixin(SpectrumElement) {\n    public static override get styles(): CSSResultArray {\n        return [styles, tabSizes, chevronIconStyles];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public compact = false;\n\n    @property({ type: String, attribute: 'label-previous' })\n    public labelPrevious = 'Scroll to previous tabs';\n\n    @property({ type: String, attribute: 'label-next' })\n    public labelNext = 'Scroll to next tabs';\n\n    @property({ reflect: true })\n    public override dir!: 'ltr' | 'rtl';\n\n    @state()\n    private overflowState: TabsOverflowState = {\n        canScrollLeft: false,\n        canScrollRight: false,\n    };\n\n    @queryAssignedElements({ selector: 'sp-tabs', flatten: true })\n    private scrollContent!: Tabs[];\n\n    @query('.tabs-overflow-container')\n    private overflowContainer!: HTMLDivElement;\n\n    resizeController!: ResizeController;\n\n    public constructor() {\n        super();\n        this.resizeController = new ResizeController(this, {\n            target: this,\n            callback: (): void => {\n                this._updateScrollState();\n            },\n        });\n    }\n\n    protected override firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        // enable scroll event\n        const [tabs] = this.scrollContent;\n        if (tabs) {\n            tabs.enableTabsScroll = true;\n        }\n        this.resizeController.observe(this.overflowContainer);\n    }\n\n    private async _handleSlotChange(): Promise<void> {\n        const [tabsElement] = this.scrollContent;\n        await tabsElement?.updateComplete;\n        this._updateScrollState();\n    }\n\n    private _updateScrollState(): void {\n        const { scrollContent, overflowState } = this;\n\n        if (scrollContent) {\n            const [tabsElement] = this.scrollContent;\n            const { canScrollLeft, canScrollRight } =\n                tabsElement?.scrollState || {\n                    canScrollLeft: false,\n                    canScrollRight: false,\n                };\n\n            this.overflowState = {\n                ...overflowState,\n                canScrollLeft,\n                canScrollRight,\n            };\n        }\n    }\n\n    private scrollFactor = 0.5;\n    private _handleScrollClick(event: MouseEvent): void {\n        const currentTarget = event.currentTarget as HTMLElement;\n        const [tabsElement] = this.scrollContent;\n\n        const dist = tabsElement.clientWidth * this.scrollFactor;\n        const left = currentTarget.classList.contains('left-scroll')\n            ? -dist\n            : dist;\n        tabsElement.scrollTabs(left, 'smooth');\n    }\n\n    protected override updated(\n        changedProperties: PropertyValueMap<this>\n    ): void {\n        super.updated(changedProperties);\n        if (changedProperties.has('dir')) {\n            this._updateScrollState();\n        }\n    }\n\n    protected override render(): TemplateResult {\n        const { canScrollRight, canScrollLeft } = this.overflowState;\n        const ariaLabelPrevious = this.labelPrevious;\n        const ariaLabelNext = this.labelNext;\n        return html`\n            <div\n                class=${classMap({\n                    'tabs-overflow-container': true,\n                    'left-shadow': canScrollLeft,\n                    'right-shadow': canScrollRight,\n                })}\n            >\n                <sp-action-button\n                    class=${classMap({\n                        'left-scroll': true,\n                        show: canScrollLeft,\n                    })}\n                    aria-label=${ariaLabelPrevious}\n                    quiet\n                    dir=\"rtl\"\n                    tabindex=\"-1\"\n                    @click=${this._handleScrollClick}\n                >\n                    <sp-icon-chevron100\n                        slot=\"icon\"\n                        class=\"spectrum-UIIcon-ChevronLeft300\"\n                    ></sp-icon-chevron100>\n                </sp-action-button>\n                <sp-action-button\n                    class=${classMap({\n                        'right-scroll': true,\n                        show: canScrollRight,\n                    })}\n                    aria-label=${ariaLabelNext}\n                    quiet\n                    tabindex=\"-1\"\n                    @click=${this._handleScrollClick}\n                >\n                    <sp-icon-chevron100\n                        slot=\"icon\"\n                        class=\"spectrum-UIIcon-ChevronRight300\"\n                    ></sp-icon-chevron100>\n                </sp-action-button>\n                <slot\n                    @slotchange=${this._handleSlotChange}\n                    @sp-tabs-scroll=${this._updateScrollState}\n                ></slot>\n            </div>\n        `;\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["html", "SizedMixin", "SpectrumElement", "property", "query", "queryAssignedElements", "state", "classMap", "ResizeController", "chevronIconStyles", "tabSizes", "styles", "changes", "tabs", "tabsElement", "scrollContent", "overflowState", "canScrollLeft", "canScrollRight", "event", "currentTarget", "dist", "left", "changedProperties", "ariaLabelPrevious", "ariaLabelNext", "__decorateClass"]
 }

package/test/tabs.test.js

@@ -287,36 +287,6 @@ describe("Tabs", () => {
     await elementUpdated(el);
     expect(el.selected).to.be.equal("first");
   });
-  it("prevents [tabindex=0] while `focusin`", async () => {
-    const el = await fixture(html`
-            <sp-tabs>
-                <sp-tab label="Tab 1" value="first" selected>
-                    <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
-                </sp-tab>
-                <sp-tab label="Tab 2" value="second">
-                    <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
-                </sp-tab>
-            </sp-tabs>
-        `);
-    const selected = el.querySelector('[value="first"]');
-    const toBeSelected = el.querySelector('[value="second"]');
-    await elementUpdated(el);
-    await waitUntil(() => el.selected === "first", "wait for selection");
-    expect(el.selected).to.equal("first");
-    expect(selected.tabIndex).to.equal(0);
-    toBeSelected.dispatchEvent(new Event("focusin", { bubbles: true }));
-    await elementUpdated(el);
-    expect(el.selected).to.equal("first");
-    expect(selected.tabIndex).to.equal(-1);
-    toBeSelected.dispatchEvent(new Event("focusout", { bubbles: true }));
-    await elementUpdated(el);
-    expect(el.selected).to.equal("first");
-    expect(selected.tabIndex).to.equal(0);
-    toBeSelected.click();
-    await elementUpdated(el);
-    expect(el.selected).to.equal("second");
-    expect(toBeSelected.tabIndex).to.equal(0);
-  });
   it("accepts keyboard based selection", async () => {
     const el = await fixture(html`
             <sp-tabs selected="Unknown">

package/test/tabs.test.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["tabs.test.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/tabs/sp-tabs.js';\nimport '@spectrum-web-components/tabs/sp-tab.js';\nimport '@spectrum-web-components/tabs/sp-tab-panel.js';\nimport { Tab, TabPanel, Tabs } from '@spectrum-web-components/tabs';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport {\n    elementUpdated,\n    expect,\n    fixture,\n    nextFrame,\n    waitUntil,\n} from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\nimport { LitElement, TemplateResult } from '@spectrum-web-components/base';\nimport {\n    arrowDownEvent,\n    arrowLeftEvent,\n    arrowRightEvent,\n    arrowUpEvent,\n    enterEvent,\n    spaceEvent,\n} from '../../../test/testing-helpers.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nconst createTabs = async (): Promise<Tabs> => {\n    const tabs = await fixture<Tabs>(\n        html`\n            <sp-tabs selected=\"first\">\n                <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n                <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n                <sp-tab-panel value=\"first\">First tab content</sp-tab-panel>\n                <sp-tab-panel value=\"second\">Second tab content</sp-tab-panel>\n                <sp-tab-panel value=\"third\">Third tab content</sp-tab-panel>\n            </sp-tabs>\n        `\n    );\n    await elementUpdated(tabs);\n    return tabs;\n};\n\ndescribe('Tabs', () => {\n    it('loads accessibly', async () => {\n        const tabs = await createTabs();\n\n        const tabList = tabs.querySelectorAll('sp-tab');\n\n        expect(tabList).to.exist;\n        expect(tabList.length).to.equal(3);\n\n        await expect(tabs).to.be.accessible();\n    });\n\n    it('loads accessibly w/o panels', async () => {\n        const tabs = await fixture<Tabs>(\n            html`\n                <sp-tabs selected=\"first\">\n                    <sp-tab value=\"first\">Tab 1</sp-tab>\n                    <sp-tab value=\"second\">Tab 2</sp-tab>\n                    <sp-tab value=\"third\">Tab 3</sp-tab>\n                </sp-tabs>\n            `\n        );\n\n        const tabList = tabs.querySelectorAll('sp-tab');\n\n        expect(tabList).to.exist;\n        expect(tabList.length).to.equal(3);\n\n        await expect(tabs).to.be.accessible();\n    });\n\n    it('can be disabled', async () => {\n        const tabs = await createTabs();\n        const tab = tabs.querySelector('[label=\"Tab 3\"]') as Tab;\n        tabs.disabled = true;\n        await elementUpdated(tabs);\n        expect(tabs.selected).to.equal('first');\n        tab.click();\n        await elementUpdated(tabs);\n        expect(tabs.selected).to.equal('first');\n    });\n\n    it('can have disabled sp-tab children', async () => {\n        const tabs = await createTabs();\n        const tab2 = tabs.querySelector('[label=\"Tab 2\"]') as Tab;\n        const tab3 = tabs.querySelector('[label=\"Tab 3\"]') as Tab;\n        tab3.disabled = true;\n        await elementUpdated(tab3);\n        expect(tabs.selected).to.equal('first');\n        tab3.click();\n        await elementUpdated(tabs);\n        expect(tabs.selected).to.equal('first');\n        tab2.click();\n        await elementUpdated(tabs);\n        expect(tabs.selected).to.equal('second');\n    });\n\n    it('reflects selected tab with selected property', async () => {\n        const tabs = await createTabs();\n\n        const firstTab = tabs.querySelector('sp-tab[value=first]') as Tab;\n        const secondTab = tabs.querySelector('sp-tab[value=second]') as Tab;\n        const thirdTab = tabs.querySelector('sp-tab[value=third]') as Tab;\n        const firstPanel = tabs.querySelector(\n            'sp-tab-panel[value=first]'\n        ) as TabPanel;\n        const secondPanel = tabs.querySelector(\n            'sp-tab-panel[value=second]'\n        ) as TabPanel;\n        const thirdPanel = tabs.querySelector(\n            'sp-tab-panel[value=third]'\n        ) as TabPanel;\n\n        expect(firstTab.selected, 'first: 1, selected').to.be.true;\n        expect(firstPanel.selected, 'first panel: 1, selected').to.be.true;\n        expect(secondTab.selected, 'second: 1, not selected').to.be.false;\n        expect(secondPanel.selected, 'second panel: 1, not selected').to.be\n            .false;\n        expect(thirdTab.selected, 'third: 1, not selected').to.be.false;\n        expect(thirdPanel.selected, 'third panel: 1, not selected').to.be.false;\n        expect(tabs.selected).to.equal(firstTab.value);\n\n        secondTab.click();\n        await elementUpdated(tabs);\n\n        expect(firstTab.selected, 'first: 2, not selected').to.be.false;\n        expect(firstPanel.selected, 'first panel: 2, not selected').to.be.false;\n        expect(secondTab.selected, 'second: 2, selected').to.be.true;\n        expect(secondTab.selected, 'first panel: 2, selected').to.be.true;\n        expect(thirdTab.selected, 'third: 2, not selected').to.be.false;\n        expect(thirdTab.selected, 'first panel: 2, not selected').to.be.false;\n        expect(tabs.selected).to.equal(secondTab.value);\n\n        thirdTab.click();\n        await elementUpdated(tabs);\n\n        expect(firstTab.selected, 'first: 3, not selected').to.be.false;\n        expect(firstPanel.selected, 'first panel: 3, not selected').to.be.false;\n        expect(secondTab.selected, 'second: 3, not selected').to.be.false;\n        expect(secondPanel.selected, 'second panel: 3, not selected').to.be\n            .false;\n        expect(thirdTab.selected, 'third: 3, selected').to.be.true;\n        expect(thirdTab.selected, 'first panel: 3, selected').to.be.true;\n        expect(tabs.selected).to.equal(thirdTab.value);\n    });\n\n    it('autofocuses', async () => {\n        const tabs = await fixture<Tabs>(\n            html`\n                <sp-tabs selected=\"second\" autofocus>\n                    <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                    <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n                    <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n                </sp-tabs>\n            `\n        );\n\n        await elementUpdated(tabs);\n\n        const autoElement = tabs.querySelector('[label=\"Tab 2\"]') as Tab;\n\n        await waitUntil(\n            () => document.activeElement === autoElement,\n            'Autofocused'\n        );\n    });\n\n    it('auto', async () => {\n        const el = await fixture<Tabs>(\n            html`\n                <sp-tabs selected=\"second\" auto>\n                    <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                    <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n                    <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n                </sp-tabs>\n            `\n        );\n\n        await elementUpdated(el);\n\n        expect(el.selected).to.equal('second');\n        el.focus();\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        expect(el.selected).to.equal('first');\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        expect(el.selected).to.equal('third');\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        expect(el.selected).to.equal('first');\n    });\n\n    it('forces only one tab to be selected', async () => {\n        const tabs = await createTabs();\n\n        const selectedTabs = tabs.querySelectorAll('sp-tab[selected]');\n\n        expect(tabs.selected).to.equal('first');\n        expect(selectedTabs.length).to.equal(1);\n    });\n\n    it('de-selects all but first selected tab if multiple selected', async () => {\n        const tabs = await createTabs();\n\n        const tab1 = tabs.querySelector('sp-tab[value=first]') as Tab;\n        const tab2 = tabs.querySelector('sp-tab[value=second]') as Tab;\n        if (!(tab1 instanceof Tab)) throw new Error('tab1 not of type Tab');\n        if (!(tab2 instanceof Tab)) throw new Error('tab2 not of type Tab');\n\n        expect(tabs.selected).to.equal('first');\n        expect(tab1.selected).to.be.true;\n        expect(tab2.selected).to.be.false;\n    });\n\n    it('ensures setting selection updates selected tab', async () => {\n        const tabs = await createTabs();\n\n        const tab1 = tabs.querySelector('sp-tab[value=first]') as Tab;\n        const tab2 = tabs.querySelector('sp-tab[value=second]') as Tab;\n        const tab3 = tabs.querySelector('sp-tab[value=third]') as Tab;\n\n        if (!(tab1 instanceof Tab)) throw new Error('tab1 not of type Tab');\n        if (!(tab2 instanceof Tab)) throw new Error('tab2 not of type Tab');\n        if (!(tab3 instanceof Tab)) throw new Error('tab3 not of type Tab');\n\n        expect(tabs.selected).to.equal('first');\n        expect(tab1.selected, 'first: 1, selected').to.be.true;\n        expect(tab2.selected, 'second: 1, not selected').to.be.false;\n        expect(tab3.selected, 'thurd: 1, not selected').to.be.false;\n\n        tabs.selected = 'second';\n        await elementUpdated(tabs);\n\n        expect(tabs.selected).to.equal('second');\n        expect(tab1.selected, 'first: 2, not selected').to.be.false;\n        expect(tab2.selected, 'second: 2, selected').to.be.true;\n        expect(tab3.selected, 'third: 2, not selected').to.be.false;\n\n        tabs.selected = 'third';\n        await elementUpdated(tabs);\n\n        expect(tabs.selected).to.equal('third');\n        expect(tab1.selected, 'first: 3, not selected').to.be.false;\n        expect(tab2.selected, 'second: 3, not selected').to.be.false;\n        expect(tab3.selected, 'third: 3, selected').to.be.true;\n    });\n\n    it('ensures setting selected and clicking on tab both work together', async () => {\n        const tabs = await createTabs();\n\n        const tab1 = tabs.querySelector('sp-tab[value=first]') as Tab;\n        const tab2 = tabs.querySelector('sp-tab[value=second]') as Tab;\n        const tab3 = tabs.querySelector('sp-tab[value=third]') as Tab;\n\n        if (!(tab1 instanceof Tab)) throw new Error('tab1 not of type Tab');\n        if (!(tab2 instanceof Tab)) throw new Error('tab2 not of type Tab');\n        if (!(tab3 instanceof Tab)) throw new Error('tab3 not of type Tab');\n\n        tab2.click();\n        await elementUpdated(tabs);\n\n        expect(tabs.selected).to.equal('second');\n        expect(tab1.selected).to.be.false;\n        expect(tab2.selected).to.be.true;\n        expect(tab3.selected).to.be.false;\n\n        tabs.selected = 'first';\n        await elementUpdated(tabs);\n\n        expect(tabs.selected).to.equal('first');\n        expect(tab1.selected).to.be.true;\n        expect(tab2.selected).to.be.false;\n        expect(tab3.selected).to.be.false;\n    });\n    it('displays `vertical`', async () => {\n        const el = await fixture<Tabs>(html`\n            <sp-tabs selected=\"first\" direction=\"vertical\">\n                <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n                <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n            </sp-tabs>\n        `);\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n\n        el.selected = 'first';\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n    });\n    it('displays with nothing `selected`', async () => {\n        const el = await fixture<Tabs>(html`\n            <sp-tabs>\n                <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n                <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n            </sp-tabs>\n        `);\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('');\n\n        el.selected = 'first';\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n    });\n    it('ignores children with no `value`', async () => {\n        const el = await fixture<Tabs>(html`\n            <sp-tabs selected=\"first\">\n                <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                <div id=\"other\">Other thing</div>\n            </sp-tabs>\n        `);\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n\n        const otherThing = el.querySelector('#other') as HTMLDivElement;\n        otherThing.click();\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n    });\n    it('allows selection to be cancellable', async () => {\n        const cancelSelection = (event: Event): void => event.preventDefault();\n        const el = await fixture<Tabs>(html`\n            <sp-tabs selected=\"first\" @change=${cancelSelection}>\n                <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n            </sp-tabs>\n        `);\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n\n        const secondTab = el.querySelector('[value=\"second\"]') as Tab;\n        secondTab.click();\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n    });\n    it('prevents [tabindex=0] while `focusin`', async () => {\n        const el = await fixture<Tabs>(html`\n            <sp-tabs>\n                <sp-tab label=\"Tab 1\" value=\"first\" selected>\n                    <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                </sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\">\n                    <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                </sp-tab>\n            </sp-tabs>\n        `);\n\n        const selected = el.querySelector('[value=\"first\"]') as Tab;\n        const toBeSelected = el.querySelector('[value=\"second\"]') as Tab;\n\n        await elementUpdated(el);\n        await waitUntil(() => el.selected === 'first', 'wait for selection');\n\n        expect(el.selected).to.equal('first');\n        expect(selected.tabIndex).to.equal(0);\n\n        toBeSelected.dispatchEvent(new Event('focusin', { bubbles: true }));\n\n        await elementUpdated(el);\n\n        expect(el.selected).to.equal('first');\n        expect(selected.tabIndex).to.equal(-1);\n\n        toBeSelected.dispatchEvent(new Event('focusout', { bubbles: true }));\n\n        await elementUpdated(el);\n\n        expect(el.selected).to.equal('first');\n        expect(selected.tabIndex).to.equal(0);\n\n        toBeSelected.click();\n\n        await elementUpdated(el);\n\n        expect(el.selected).to.equal('second');\n        expect(toBeSelected.tabIndex).to.equal(0);\n    });\n    it('accepts keyboard based selection', async () => {\n        const el = await fixture<Tabs>(html`\n            <sp-tabs selected=\"Unknown\">\n                <sp-tab label=\"Tab 1\" value=\"first\">\n                    <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                </sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\">\n                    <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                </sp-tab>\n            </sp-tabs>\n        `);\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('');\n\n        const firstTab = el.querySelector('[value=\"first\"]') as Tab;\n        const secondTab = el.querySelector('[value=\"second\"]') as Tab;\n        firstTab.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));\n        firstTab.focus();\n\n        await elementUpdated(el);\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n\n        firstTab.dispatchEvent(arrowLeftEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === secondTab, 'Focus second tab').to.be\n            .true;\n\n        secondTab.dispatchEvent(enterEvent());\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('second');\n\n        secondTab.dispatchEvent(arrowRightEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n\n        firstTab.dispatchEvent(spaceEvent());\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n\n        firstTab.dispatchEvent(arrowUpEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === secondTab, 'Focus second tab').to.be\n            .true;\n\n        secondTab.dispatchEvent(arrowDownEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n    });\n\n    it('accepts keyboard based selection through shadow DOM', async () => {\n        class TabTestEl extends LitElement {\n            protected override render(): TemplateResult {\n                return html`\n                    <sp-tabs selected=\"Unknown\">\n                        <sp-tab label=\"Tab 1\" value=\"first\">\n                            <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                        </sp-tab>\n                        <sp-tab label=\"Tab 2\" value=\"second\">\n                            <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                        </sp-tab>\n                    </sp-tabs>\n                `;\n            }\n        }\n        customElements.define('tab-test-el', TabTestEl);\n        const el = await fixture<TabTestEl>(\n            html`\n                <tab-test-el></tab-test-el>\n            `\n        );\n\n        await elementUpdated(el);\n        const rootNode = el.shadowRoot as ShadowRoot;\n        const tabsEl = rootNode.querySelector('sp-tabs') as Tabs;\n\n        await elementUpdated(tabsEl);\n        expect(tabsEl.selected).to.be.equal('');\n\n        const firstTab = tabsEl.querySelector('[value=\"first\"]') as Tab;\n        const secondTab = tabsEl.querySelector('[value=\"second\"]') as Tab;\n        firstTab.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));\n        firstTab.focus();\n\n        await elementUpdated(el);\n        let activeElement = rootNode.activeElement as Tab;\n        expect(activeElement === firstTab, 'Focus first tab').to.be.true;\n\n        firstTab.dispatchEvent(arrowLeftEvent());\n\n        await elementUpdated(el);\n        activeElement = rootNode.activeElement as Tab;\n        expect(activeElement === secondTab, 'Focus second tab').to.be.true;\n\n        secondTab.dispatchEvent(enterEvent());\n\n        await elementUpdated(el);\n        expect(tabsEl.selected).to.be.equal('second');\n\n        secondTab.dispatchEvent(arrowRightEvent());\n\n        await elementUpdated(el);\n        activeElement = rootNode.activeElement as Tab;\n        expect(activeElement === firstTab, 'Focus first tab').to.be.true;\n\n        firstTab.dispatchEvent(spaceEvent());\n\n        await elementUpdated(el);\n        expect(tabsEl.selected).to.be.equal('first');\n    });\n    it('accepts keyboard based selection - [direction=\"vertical\"]', async () => {\n        const el = await fixture<Tabs>(html`\n            <sp-tabs selected=\"Unknown\" direction=\"vertical\">\n                <sp-tab label=\"Tab 1\" value=\"first\">\n                    <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                </sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\">\n                    <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                </sp-tab>\n            </sp-tabs>\n        `);\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('');\n\n        const firstTab = el.querySelector('[value=\"first\"]') as Tab;\n        const secondTab = el.querySelector('[value=\"second\"]') as Tab;\n        firstTab.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));\n        firstTab.focus();\n\n        await elementUpdated(el);\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n\n        firstTab.dispatchEvent(arrowLeftEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === secondTab, 'Focus second tab').to.be\n            .true;\n\n        secondTab.dispatchEvent(enterEvent());\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('second');\n\n        secondTab.dispatchEvent(arrowDownEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n\n        firstTab.dispatchEvent(spaceEvent());\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n\n        firstTab.dispatchEvent(arrowRightEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === secondTab, 'Focus second tab').to.be\n            .true;\n\n        secondTab.dispatchEvent(arrowLeftEvent());\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n    });\n    it('selects through slotted DOM', async () => {\n        const el = await fixture<Tabs>(\n            html`\n                <sp-tabs selected=\"first\">\n                    <sp-tab value=\"first\">Tab 1</sp-tab>\n                    <sp-tab value=\"second\"><span>Tab 2</span></sp-tab>\n                </sp-tabs>\n            `\n        );\n        const span = el.querySelector('span') as HTMLSpanElement;\n        await elementUpdated(el);\n\n        expect(el.selected).to.equal('first');\n\n        span.click();\n        await elementUpdated(el);\n\n        expect(el.selected).to.equal('second');\n    });\n    it('updates selection indicator in response to tab updates', async () => {\n        const el = await fixture<Tabs>(\n            html`\n                <sp-tabs selected=\"first\">\n                    <sp-tab value=\"first\">Tab 1</sp-tab>\n                    <sp-tab value=\"second\">Tab 2</sp-tab>\n                </sp-tabs>\n            `\n        );\n        const selected = el.querySelector('[value=\"first\"]') as Tab;\n        await elementUpdated(el);\n\n        const extractScaleX = /scaleX\\((.+)\\)/;\n        const initialExec = extractScaleX.exec(\n            el.selectionIndicatorStyle\n        ) as unknown as [string, string];\n        const initialWidth = parseFloat(initialExec[1]);\n        selected.textContent = 'WWWWWWWWWWWWWWWWWWWWWWWWW';\n        await nextFrame();\n        await nextFrame();\n\n        const longerExec = extractScaleX.exec(\n            el.selectionIndicatorStyle\n        ) as unknown as [string, string];\n        const longerWidth = parseFloat(longerExec[1]);\n        expect(initialWidth).to.be.lessThan(longerWidth);\n        selected.textContent = 'W';\n        await nextFrame();\n\n        const shorterExec = extractScaleX.exec(\n            el.selectionIndicatorStyle\n        ) as unknown as [string, string];\n        const shorterWidth = parseFloat(shorterExec[1]);\n        expect(initialWidth).to.be.greaterThan(shorterWidth);\n        expect(longerWidth).to.be.greaterThan(shorterWidth);\n    });\n    it('clicks on #list do not throw', async () => {\n        const tabs = await createTabs();\n        const tabList = (tabs.shadowRoot as ShadowRoot).querySelector(\n            '#list'\n        ) as HTMLDivElement;\n        // exceptions thrown in event listeners do not propagate to caller\n        // we must catch them with window.onerror\n        let hasError = false;\n        const oldOnerror = window.onerror;\n        window.onerror = () => {\n            hasError = true;\n        };\n        tabList.dispatchEvent(new MouseEvent('click'));\n        expect(hasError, 'it should not error').to.be.false;\n        window.onerror = oldOnerror;\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 '@spectrum-web-components/tabs/sp-tabs.js';\nimport '@spectrum-web-components/tabs/sp-tab.js';\nimport '@spectrum-web-components/tabs/sp-tab-panel.js';\nimport { Tab, TabPanel, Tabs } from '@spectrum-web-components/tabs';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport {\n    elementUpdated,\n    expect,\n    fixture,\n    nextFrame,\n    waitUntil,\n} from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\nimport { LitElement, TemplateResult } from '@spectrum-web-components/base';\nimport {\n    arrowDownEvent,\n    arrowLeftEvent,\n    arrowRightEvent,\n    arrowUpEvent,\n    enterEvent,\n    spaceEvent,\n} from '../../../test/testing-helpers.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nconst createTabs = async (): Promise<Tabs> => {\n    const tabs = await fixture<Tabs>(\n        html`\n            <sp-tabs selected=\"first\">\n                <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n                <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n                <sp-tab-panel value=\"first\">First tab content</sp-tab-panel>\n                <sp-tab-panel value=\"second\">Second tab content</sp-tab-panel>\n                <sp-tab-panel value=\"third\">Third tab content</sp-tab-panel>\n            </sp-tabs>\n        `\n    );\n    await elementUpdated(tabs);\n    return tabs;\n};\n\ndescribe('Tabs', () => {\n    it('loads accessibly', async () => {\n        const tabs = await createTabs();\n\n        const tabList = tabs.querySelectorAll('sp-tab');\n\n        expect(tabList).to.exist;\n        expect(tabList.length).to.equal(3);\n\n        await expect(tabs).to.be.accessible();\n    });\n\n    it('loads accessibly w/o panels', async () => {\n        const tabs = await fixture<Tabs>(\n            html`\n                <sp-tabs selected=\"first\">\n                    <sp-tab value=\"first\">Tab 1</sp-tab>\n                    <sp-tab value=\"second\">Tab 2</sp-tab>\n                    <sp-tab value=\"third\">Tab 3</sp-tab>\n                </sp-tabs>\n            `\n        );\n\n        const tabList = tabs.querySelectorAll('sp-tab');\n\n        expect(tabList).to.exist;\n        expect(tabList.length).to.equal(3);\n\n        await expect(tabs).to.be.accessible();\n    });\n\n    it('can be disabled', async () => {\n        const tabs = await createTabs();\n        const tab = tabs.querySelector('[label=\"Tab 3\"]') as Tab;\n        tabs.disabled = true;\n        await elementUpdated(tabs);\n        expect(tabs.selected).to.equal('first');\n        tab.click();\n        await elementUpdated(tabs);\n        expect(tabs.selected).to.equal('first');\n    });\n\n    it('can have disabled sp-tab children', async () => {\n        const tabs = await createTabs();\n        const tab2 = tabs.querySelector('[label=\"Tab 2\"]') as Tab;\n        const tab3 = tabs.querySelector('[label=\"Tab 3\"]') as Tab;\n        tab3.disabled = true;\n        await elementUpdated(tab3);\n        expect(tabs.selected).to.equal('first');\n        tab3.click();\n        await elementUpdated(tabs);\n        expect(tabs.selected).to.equal('first');\n        tab2.click();\n        await elementUpdated(tabs);\n        expect(tabs.selected).to.equal('second');\n    });\n\n    it('reflects selected tab with selected property', async () => {\n        const tabs = await createTabs();\n\n        const firstTab = tabs.querySelector('sp-tab[value=first]') as Tab;\n        const secondTab = tabs.querySelector('sp-tab[value=second]') as Tab;\n        const thirdTab = tabs.querySelector('sp-tab[value=third]') as Tab;\n        const firstPanel = tabs.querySelector(\n            'sp-tab-panel[value=first]'\n        ) as TabPanel;\n        const secondPanel = tabs.querySelector(\n            'sp-tab-panel[value=second]'\n        ) as TabPanel;\n        const thirdPanel = tabs.querySelector(\n            'sp-tab-panel[value=third]'\n        ) as TabPanel;\n\n        expect(firstTab.selected, 'first: 1, selected').to.be.true;\n        expect(firstPanel.selected, 'first panel: 1, selected').to.be.true;\n        expect(secondTab.selected, 'second: 1, not selected').to.be.false;\n        expect(secondPanel.selected, 'second panel: 1, not selected').to.be\n            .false;\n        expect(thirdTab.selected, 'third: 1, not selected').to.be.false;\n        expect(thirdPanel.selected, 'third panel: 1, not selected').to.be.false;\n        expect(tabs.selected).to.equal(firstTab.value);\n\n        secondTab.click();\n        await elementUpdated(tabs);\n\n        expect(firstTab.selected, 'first: 2, not selected').to.be.false;\n        expect(firstPanel.selected, 'first panel: 2, not selected').to.be.false;\n        expect(secondTab.selected, 'second: 2, selected').to.be.true;\n        expect(secondTab.selected, 'first panel: 2, selected').to.be.true;\n        expect(thirdTab.selected, 'third: 2, not selected').to.be.false;\n        expect(thirdTab.selected, 'first panel: 2, not selected').to.be.false;\n        expect(tabs.selected).to.equal(secondTab.value);\n\n        thirdTab.click();\n        await elementUpdated(tabs);\n\n        expect(firstTab.selected, 'first: 3, not selected').to.be.false;\n        expect(firstPanel.selected, 'first panel: 3, not selected').to.be.false;\n        expect(secondTab.selected, 'second: 3, not selected').to.be.false;\n        expect(secondPanel.selected, 'second panel: 3, not selected').to.be\n            .false;\n        expect(thirdTab.selected, 'third: 3, selected').to.be.true;\n        expect(thirdTab.selected, 'first panel: 3, selected').to.be.true;\n        expect(tabs.selected).to.equal(thirdTab.value);\n    });\n\n    it('autofocuses', async () => {\n        const tabs = await fixture<Tabs>(\n            html`\n                <sp-tabs selected=\"second\" autofocus>\n                    <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                    <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n                    <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n                </sp-tabs>\n            `\n        );\n\n        await elementUpdated(tabs);\n\n        const autoElement = tabs.querySelector('[label=\"Tab 2\"]') as Tab;\n\n        await waitUntil(\n            () => document.activeElement === autoElement,\n            'Autofocused'\n        );\n    });\n\n    it('auto', async () => {\n        const el = await fixture<Tabs>(\n            html`\n                <sp-tabs selected=\"second\" auto>\n                    <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                    <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n                    <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n                </sp-tabs>\n            `\n        );\n\n        await elementUpdated(el);\n\n        expect(el.selected).to.equal('second');\n        el.focus();\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        expect(el.selected).to.equal('first');\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        expect(el.selected).to.equal('third');\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        expect(el.selected).to.equal('first');\n    });\n\n    it('forces only one tab to be selected', async () => {\n        const tabs = await createTabs();\n\n        const selectedTabs = tabs.querySelectorAll('sp-tab[selected]');\n\n        expect(tabs.selected).to.equal('first');\n        expect(selectedTabs.length).to.equal(1);\n    });\n\n    it('de-selects all but first selected tab if multiple selected', async () => {\n        const tabs = await createTabs();\n\n        const tab1 = tabs.querySelector('sp-tab[value=first]') as Tab;\n        const tab2 = tabs.querySelector('sp-tab[value=second]') as Tab;\n        if (!(tab1 instanceof Tab)) throw new Error('tab1 not of type Tab');\n        if (!(tab2 instanceof Tab)) throw new Error('tab2 not of type Tab');\n\n        expect(tabs.selected).to.equal('first');\n        expect(tab1.selected).to.be.true;\n        expect(tab2.selected).to.be.false;\n    });\n\n    it('ensures setting selection updates selected tab', async () => {\n        const tabs = await createTabs();\n\n        const tab1 = tabs.querySelector('sp-tab[value=first]') as Tab;\n        const tab2 = tabs.querySelector('sp-tab[value=second]') as Tab;\n        const tab3 = tabs.querySelector('sp-tab[value=third]') as Tab;\n\n        if (!(tab1 instanceof Tab)) throw new Error('tab1 not of type Tab');\n        if (!(tab2 instanceof Tab)) throw new Error('tab2 not of type Tab');\n        if (!(tab3 instanceof Tab)) throw new Error('tab3 not of type Tab');\n\n        expect(tabs.selected).to.equal('first');\n        expect(tab1.selected, 'first: 1, selected').to.be.true;\n        expect(tab2.selected, 'second: 1, not selected').to.be.false;\n        expect(tab3.selected, 'thurd: 1, not selected').to.be.false;\n\n        tabs.selected = 'second';\n        await elementUpdated(tabs);\n\n        expect(tabs.selected).to.equal('second');\n        expect(tab1.selected, 'first: 2, not selected').to.be.false;\n        expect(tab2.selected, 'second: 2, selected').to.be.true;\n        expect(tab3.selected, 'third: 2, not selected').to.be.false;\n\n        tabs.selected = 'third';\n        await elementUpdated(tabs);\n\n        expect(tabs.selected).to.equal('third');\n        expect(tab1.selected, 'first: 3, not selected').to.be.false;\n        expect(tab2.selected, 'second: 3, not selected').to.be.false;\n        expect(tab3.selected, 'third: 3, selected').to.be.true;\n    });\n\n    it('ensures setting selected and clicking on tab both work together', async () => {\n        const tabs = await createTabs();\n\n        const tab1 = tabs.querySelector('sp-tab[value=first]') as Tab;\n        const tab2 = tabs.querySelector('sp-tab[value=second]') as Tab;\n        const tab3 = tabs.querySelector('sp-tab[value=third]') as Tab;\n\n        if (!(tab1 instanceof Tab)) throw new Error('tab1 not of type Tab');\n        if (!(tab2 instanceof Tab)) throw new Error('tab2 not of type Tab');\n        if (!(tab3 instanceof Tab)) throw new Error('tab3 not of type Tab');\n\n        tab2.click();\n        await elementUpdated(tabs);\n\n        expect(tabs.selected).to.equal('second');\n        expect(tab1.selected).to.be.false;\n        expect(tab2.selected).to.be.true;\n        expect(tab3.selected).to.be.false;\n\n        tabs.selected = 'first';\n        await elementUpdated(tabs);\n\n        expect(tabs.selected).to.equal('first');\n        expect(tab1.selected).to.be.true;\n        expect(tab2.selected).to.be.false;\n        expect(tab3.selected).to.be.false;\n    });\n    it('displays `vertical`', async () => {\n        const el = await fixture<Tabs>(html`\n            <sp-tabs selected=\"first\" direction=\"vertical\">\n                <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n                <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n            </sp-tabs>\n        `);\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n\n        el.selected = 'first';\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n    });\n    it('displays with nothing `selected`', async () => {\n        const el = await fixture<Tabs>(html`\n            <sp-tabs>\n                <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n                <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n            </sp-tabs>\n        `);\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('');\n\n        el.selected = 'first';\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n    });\n    it('ignores children with no `value`', async () => {\n        const el = await fixture<Tabs>(html`\n            <sp-tabs selected=\"first\">\n                <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                <div id=\"other\">Other thing</div>\n            </sp-tabs>\n        `);\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n\n        const otherThing = el.querySelector('#other') as HTMLDivElement;\n        otherThing.click();\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n    });\n    it('allows selection to be cancellable', async () => {\n        const cancelSelection = (event: Event): void => event.preventDefault();\n        const el = await fixture<Tabs>(html`\n            <sp-tabs selected=\"first\" @change=${cancelSelection}>\n                <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n            </sp-tabs>\n        `);\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n\n        const secondTab = el.querySelector('[value=\"second\"]') as Tab;\n        secondTab.click();\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n    });\n    it('accepts keyboard based selection', async () => {\n        const el = await fixture<Tabs>(html`\n            <sp-tabs selected=\"Unknown\">\n                <sp-tab label=\"Tab 1\" value=\"first\">\n                    <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                </sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\">\n                    <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                </sp-tab>\n            </sp-tabs>\n        `);\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('');\n\n        const firstTab = el.querySelector('[value=\"first\"]') as Tab;\n        const secondTab = el.querySelector('[value=\"second\"]') as Tab;\n        firstTab.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));\n        firstTab.focus();\n\n        await elementUpdated(el);\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n\n        firstTab.dispatchEvent(arrowLeftEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === secondTab, 'Focus second tab').to.be\n            .true;\n\n        secondTab.dispatchEvent(enterEvent());\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('second');\n\n        secondTab.dispatchEvent(arrowRightEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n\n        firstTab.dispatchEvent(spaceEvent());\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n\n        firstTab.dispatchEvent(arrowUpEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === secondTab, 'Focus second tab').to.be\n            .true;\n\n        secondTab.dispatchEvent(arrowDownEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n    });\n\n    it('accepts keyboard based selection through shadow DOM', async () => {\n        class TabTestEl extends LitElement {\n            protected override render(): TemplateResult {\n                return html`\n                    <sp-tabs selected=\"Unknown\">\n                        <sp-tab label=\"Tab 1\" value=\"first\">\n                            <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                        </sp-tab>\n                        <sp-tab label=\"Tab 2\" value=\"second\">\n                            <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                        </sp-tab>\n                    </sp-tabs>\n                `;\n            }\n        }\n        customElements.define('tab-test-el', TabTestEl);\n        const el = await fixture<TabTestEl>(\n            html`\n                <tab-test-el></tab-test-el>\n            `\n        );\n\n        await elementUpdated(el);\n        const rootNode = el.shadowRoot as ShadowRoot;\n        const tabsEl = rootNode.querySelector('sp-tabs') as Tabs;\n\n        await elementUpdated(tabsEl);\n        expect(tabsEl.selected).to.be.equal('');\n\n        const firstTab = tabsEl.querySelector('[value=\"first\"]') as Tab;\n        const secondTab = tabsEl.querySelector('[value=\"second\"]') as Tab;\n        firstTab.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));\n        firstTab.focus();\n\n        await elementUpdated(el);\n        let activeElement = rootNode.activeElement as Tab;\n        expect(activeElement === firstTab, 'Focus first tab').to.be.true;\n\n        firstTab.dispatchEvent(arrowLeftEvent());\n\n        await elementUpdated(el);\n        activeElement = rootNode.activeElement as Tab;\n        expect(activeElement === secondTab, 'Focus second tab').to.be.true;\n\n        secondTab.dispatchEvent(enterEvent());\n\n        await elementUpdated(el);\n        expect(tabsEl.selected).to.be.equal('second');\n\n        secondTab.dispatchEvent(arrowRightEvent());\n\n        await elementUpdated(el);\n        activeElement = rootNode.activeElement as Tab;\n        expect(activeElement === firstTab, 'Focus first tab').to.be.true;\n\n        firstTab.dispatchEvent(spaceEvent());\n\n        await elementUpdated(el);\n        expect(tabsEl.selected).to.be.equal('first');\n    });\n    it('accepts keyboard based selection - [direction=\"vertical\"]', async () => {\n        const el = await fixture<Tabs>(html`\n            <sp-tabs selected=\"Unknown\" direction=\"vertical\">\n                <sp-tab label=\"Tab 1\" value=\"first\">\n                    <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                </sp-tab>\n                <sp-tab label=\"Tab 2\" value=\"second\">\n                    <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n                </sp-tab>\n            </sp-tabs>\n        `);\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('');\n\n        const firstTab = el.querySelector('[value=\"first\"]') as Tab;\n        const secondTab = el.querySelector('[value=\"second\"]') as Tab;\n        firstTab.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));\n        firstTab.focus();\n\n        await elementUpdated(el);\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n\n        firstTab.dispatchEvent(arrowLeftEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === secondTab, 'Focus second tab').to.be\n            .true;\n\n        secondTab.dispatchEvent(enterEvent());\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('second');\n\n        secondTab.dispatchEvent(arrowDownEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n\n        firstTab.dispatchEvent(spaceEvent());\n\n        await elementUpdated(el);\n        expect(el.selected).to.be.equal('first');\n\n        firstTab.dispatchEvent(arrowRightEvent());\n\n        await elementUpdated(el);\n        expect(document.activeElement === secondTab, 'Focus second tab').to.be\n            .true;\n\n        secondTab.dispatchEvent(arrowLeftEvent());\n        expect(document.activeElement === firstTab, 'Focus first tab').to.be\n            .true;\n    });\n    it('selects through slotted DOM', async () => {\n        const el = await fixture<Tabs>(\n            html`\n                <sp-tabs selected=\"first\">\n                    <sp-tab value=\"first\">Tab 1</sp-tab>\n                    <sp-tab value=\"second\"><span>Tab 2</span></sp-tab>\n                </sp-tabs>\n            `\n        );\n        const span = el.querySelector('span') as HTMLSpanElement;\n        await elementUpdated(el);\n\n        expect(el.selected).to.equal('first');\n\n        span.click();\n        await elementUpdated(el);\n\n        expect(el.selected).to.equal('second');\n    });\n    it('updates selection indicator in response to tab updates', async () => {\n        const el = await fixture<Tabs>(\n            html`\n                <sp-tabs selected=\"first\">\n                    <sp-tab value=\"first\">Tab 1</sp-tab>\n                    <sp-tab value=\"second\">Tab 2</sp-tab>\n                </sp-tabs>\n            `\n        );\n        const selected = el.querySelector('[value=\"first\"]') as Tab;\n        await elementUpdated(el);\n\n        const extractScaleX = /scaleX\\((.+)\\)/;\n        const initialExec = extractScaleX.exec(\n            el.selectionIndicatorStyle\n        ) as unknown as [string, string];\n        const initialWidth = parseFloat(initialExec[1]);\n        selected.textContent = 'WWWWWWWWWWWWWWWWWWWWWWWWW';\n        await nextFrame();\n        await nextFrame();\n\n        const longerExec = extractScaleX.exec(\n            el.selectionIndicatorStyle\n        ) as unknown as [string, string];\n        const longerWidth = parseFloat(longerExec[1]);\n        expect(initialWidth).to.be.lessThan(longerWidth);\n        selected.textContent = 'W';\n        await nextFrame();\n\n        const shorterExec = extractScaleX.exec(\n            el.selectionIndicatorStyle\n        ) as unknown as [string, string];\n        const shorterWidth = parseFloat(shorterExec[1]);\n        expect(initialWidth).to.be.greaterThan(shorterWidth);\n        expect(longerWidth).to.be.greaterThan(shorterWidth);\n    });\n    it('clicks on #list do not throw', async () => {\n        const tabs = await createTabs();\n        const tabList = (tabs.shadowRoot as ShadowRoot).querySelector(\n            '#list'\n        ) as HTMLDivElement;\n        // exceptions thrown in event listeners do not propagate to caller\n        // we must catch them with window.onerror\n        let hasError = false;\n        const oldOnerror = window.onerror;\n        window.onerror = () => {\n            hasError = true;\n        };\n        tabList.dispatchEvent(new MouseEvent('click'));\n        expect(hasError, 'it should not error').to.be.false;\n        window.onerror = oldOnerror;\n    });\n});\n"],
+  "mappings": ";AAWA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,WAA2B;AACpC,OAAO;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,YAAY;AACrB,SAAS,kBAAkC;AAC3C;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,gBAAgB;AAEzB,MAAM,aAAa,YAA2B;AAC1C,QAAM,OAAO,MAAM;AAAA,IACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUJ;AACA,QAAM,eAAe,IAAI;AACzB,SAAO;AACX;AAEA,SAAS,QAAQ,MAAM;AACnB,KAAG,oBAAoB,YAAY;AAC/B,UAAM,OAAO,MAAM,WAAW;AAE9B,UAAM,UAAU,KAAK,iBAAiB,QAAQ;AAE9C,WAAO,OAAO,EAAE,GAAG;AACnB,WAAO,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;AAEjC,UAAM,OAAO,IAAI,EAAE,GAAG,GAAG,WAAW;AAAA,EACxC,CAAC;AAED,KAAG,+BAA+B,YAAY;AAC1C,UAAM,OAAO,MAAM;AAAA,MACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOJ;AAEA,UAAM,UAAU,KAAK,iBAAiB,QAAQ;AAE9C,WAAO,OAAO,EAAE,GAAG;AACnB,WAAO,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;AAEjC,UAAM,OAAO,IAAI,EAAE,GAAG,GAAG,WAAW;AAAA,EACxC,CAAC;AAED,KAAG,mBAAmB,YAAY;AAC9B,UAAM,OAAO,MAAM,WAAW;AAC9B,UAAM,MAAM,KAAK,cAAc,iBAAiB;AAChD,SAAK,WAAW;AAChB,UAAM,eAAe,IAAI;AACzB,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,OAAO;AACtC,QAAI,MAAM;AACV,UAAM,eAAe,IAAI;AACzB,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,OAAO;AAAA,EAC1C,CAAC;AAED,KAAG,qCAAqC,YAAY;AAChD,UAAM,OAAO,MAAM,WAAW;AAC9B,UAAM,OAAO,KAAK,cAAc,iBAAiB;AACjD,UAAM,OAAO,KAAK,cAAc,iBAAiB;AACjD,SAAK,WAAW;AAChB,UAAM,eAAe,IAAI;AACzB,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,OAAO;AACtC,SAAK,MAAM;AACX,UAAM,eAAe,IAAI;AACzB,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,OAAO;AACtC,SAAK,MAAM;AACX,UAAM,eAAe,IAAI;AACzB,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,QAAQ;AAAA,EAC3C,CAAC;AAED,KAAG,gDAAgD,YAAY;AAC3D,UAAM,OAAO,MAAM,WAAW;AAE9B,UAAM,WAAW,KAAK,cAAc,qBAAqB;AACzD,UAAM,YAAY,KAAK,cAAc,sBAAsB;AAC3D,UAAM,WAAW,KAAK,cAAc,qBAAqB;AACzD,UAAM,aAAa,KAAK;AAAA,MACpB;AAAA,IACJ;AACA,UAAM,cAAc,KAAK;AAAA,MACrB;AAAA,IACJ;AACA,UAAM,aAAa,KAAK;AAAA,MACpB;AAAA,IACJ;AAEA,WAAO,SAAS,UAAU,oBAAoB,EAAE,GAAG,GAAG;AACtD,WAAO,WAAW,UAAU,0BAA0B,EAAE,GAAG,GAAG;AAC9D,WAAO,UAAU,UAAU,yBAAyB,EAAE,GAAG,GAAG;AAC5D,WAAO,YAAY,UAAU,+BAA+B,EAAE,GAAG,GAC5D;AACL,WAAO,SAAS,UAAU,wBAAwB,EAAE,GAAG,GAAG;AAC1D,WAAO,WAAW,UAAU,8BAA8B,EAAE,GAAG,GAAG;AAClE,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,SAAS,KAAK;AAE7C,cAAU,MAAM;AAChB,UAAM,eAAe,IAAI;AAEzB,WAAO,SAAS,UAAU,wBAAwB,EAAE,GAAG,GAAG;AAC1D,WAAO,WAAW,UAAU,8BAA8B,EAAE,GAAG,GAAG;AAClE,WAAO,UAAU,UAAU,qBAAqB,EAAE,GAAG,GAAG;AACxD,WAAO,UAAU,UAAU,0BAA0B,EAAE,GAAG,GAAG;AAC7D,WAAO,SAAS,UAAU,wBAAwB,EAAE,GAAG,GAAG;AAC1D,WAAO,SAAS,UAAU,8BAA8B,EAAE,GAAG,GAAG;AAChE,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,UAAU,KAAK;AAE9C,aAAS,MAAM;AACf,UAAM,eAAe,IAAI;AAEzB,WAAO,SAAS,UAAU,wBAAwB,EAAE,GAAG,GAAG;AAC1D,WAAO,WAAW,UAAU,8BAA8B,EAAE,GAAG,GAAG;AAClE,WAAO,UAAU,UAAU,yBAAyB,EAAE,GAAG,GAAG;AAC5D,WAAO,YAAY,UAAU,+BAA+B,EAAE,GAAG,GAC5D;AACL,WAAO,SAAS,UAAU,oBAAoB,EAAE,GAAG,GAAG;AACtD,WAAO,SAAS,UAAU,0BAA0B,EAAE,GAAG,GAAG;AAC5D,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,SAAS,KAAK;AAAA,EACjD,CAAC;AAED,KAAG,eAAe,YAAY;AAC1B,UAAM,OAAO,MAAM;AAAA,MACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOJ;AAEA,UAAM,eAAe,IAAI;AAEzB,UAAM,cAAc,KAAK,cAAc,iBAAiB;AAExD,UAAM;AAAA,MACF,MAAM,SAAS,kBAAkB;AAAA,MACjC;AAAA,IACJ;AAAA,EACJ,CAAC;AAED,KAAG,QAAQ,YAAY;AACnB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOJ;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,QAAQ,EAAE,GAAG,MAAM,QAAQ;AACrC,OAAG,MAAM;AACT,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,GAAG,QAAQ,EAAE,GAAG,MAAM,OAAO;AACpC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,GAAG,QAAQ,EAAE,GAAG,MAAM,OAAO;AACpC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,GAAG,QAAQ,EAAE,GAAG,MAAM,OAAO;AAAA,EACxC,CAAC;AAED,KAAG,sCAAsC,YAAY;AACjD,UAAM,OAAO,MAAM,WAAW;AAE9B,UAAM,eAAe,KAAK,iBAAiB,kBAAkB;AAE7D,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,OAAO;AACtC,WAAO,aAAa,MAAM,EAAE,GAAG,MAAM,CAAC;AAAA,EAC1C,CAAC;AAED,KAAG,8DAA8D,YAAY;AACzE,UAAM,OAAO,MAAM,WAAW;AAE9B,UAAM,OAAO,KAAK,cAAc,qBAAqB;AACrD,UAAM,OAAO,KAAK,cAAc,sBAAsB;AACtD,QAAI,EAAE,gBAAgB,KAAM,OAAM,IAAI,MAAM,sBAAsB;AAClE,QAAI,EAAE,gBAAgB,KAAM,OAAM,IAAI,MAAM,sBAAsB;AAElE,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,OAAO;AACtC,WAAO,KAAK,QAAQ,EAAE,GAAG,GAAG;AAC5B,WAAO,KAAK,QAAQ,EAAE,GAAG,GAAG;AAAA,EAChC,CAAC;AAED,KAAG,kDAAkD,YAAY;AAC7D,UAAM,OAAO,MAAM,WAAW;AAE9B,UAAM,OAAO,KAAK,cAAc,qBAAqB;AACrD,UAAM,OAAO,KAAK,cAAc,sBAAsB;AACtD,UAAM,OAAO,KAAK,cAAc,qBAAqB;AAErD,QAAI,EAAE,gBAAgB,KAAM,OAAM,IAAI,MAAM,sBAAsB;AAClE,QAAI,EAAE,gBAAgB,KAAM,OAAM,IAAI,MAAM,sBAAsB;AAClE,QAAI,EAAE,gBAAgB,KAAM,OAAM,IAAI,MAAM,sBAAsB;AAElE,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,OAAO;AACtC,WAAO,KAAK,UAAU,oBAAoB,EAAE,GAAG,GAAG;AAClD,WAAO,KAAK,UAAU,yBAAyB,EAAE,GAAG,GAAG;AACvD,WAAO,KAAK,UAAU,wBAAwB,EAAE,GAAG,GAAG;AAEtD,SAAK,WAAW;AAChB,UAAM,eAAe,IAAI;AAEzB,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,QAAQ;AACvC,WAAO,KAAK,UAAU,wBAAwB,EAAE,GAAG,GAAG;AACtD,WAAO,KAAK,UAAU,qBAAqB,EAAE,GAAG,GAAG;AACnD,WAAO,KAAK,UAAU,wBAAwB,EAAE,GAAG,GAAG;AAEtD,SAAK,WAAW;AAChB,UAAM,eAAe,IAAI;AAEzB,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,OAAO;AACtC,WAAO,KAAK,UAAU,wBAAwB,EAAE,GAAG,GAAG;AACtD,WAAO,KAAK,UAAU,yBAAyB,EAAE,GAAG,GAAG;AACvD,WAAO,KAAK,UAAU,oBAAoB,EAAE,GAAG,GAAG;AAAA,EACtD,CAAC;AAED,KAAG,mEAAmE,YAAY;AAC9E,UAAM,OAAO,MAAM,WAAW;AAE9B,UAAM,OAAO,KAAK,cAAc,qBAAqB;AACrD,UAAM,OAAO,KAAK,cAAc,sBAAsB;AACtD,UAAM,OAAO,KAAK,cAAc,qBAAqB;AAErD,QAAI,EAAE,gBAAgB,KAAM,OAAM,IAAI,MAAM,sBAAsB;AAClE,QAAI,EAAE,gBAAgB,KAAM,OAAM,IAAI,MAAM,sBAAsB;AAClE,QAAI,EAAE,gBAAgB,KAAM,OAAM,IAAI,MAAM,sBAAsB;AAElE,SAAK,MAAM;AACX,UAAM,eAAe,IAAI;AAEzB,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,QAAQ;AACvC,WAAO,KAAK,QAAQ,EAAE,GAAG,GAAG;AAC5B,WAAO,KAAK,QAAQ,EAAE,GAAG,GAAG;AAC5B,WAAO,KAAK,QAAQ,EAAE,GAAG,GAAG;AAE5B,SAAK,WAAW;AAChB,UAAM,eAAe,IAAI;AAEzB,WAAO,KAAK,QAAQ,EAAE,GAAG,MAAM,OAAO;AACtC,WAAO,KAAK,QAAQ,EAAE,GAAG,GAAG;AAC5B,WAAO,KAAK,QAAQ,EAAE,GAAG,GAAG;AAC5B,WAAO,KAAK,QAAQ,EAAE,GAAG,GAAG;AAAA,EAChC,CAAC;AACD,KAAG,uBAAuB,YAAY;AAClC,UAAM,KAAK,MAAM,QAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAM9B;AAED,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,OAAO;AAEvC,OAAG,WAAW;AACd,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,OAAO;AAAA,EAC3C,CAAC;AACD,KAAG,oCAAoC,YAAY;AAC/C,UAAM,KAAK,MAAM,QAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAM9B;AAED,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,EAAE;AAElC,OAAG,WAAW;AACd,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,OAAO;AAAA,EAC3C,CAAC;AACD,KAAG,oCAAoC,YAAY;AAC/C,UAAM,KAAK,MAAM,QAAc;AAAA;AAAA;AAAA;AAAA;AAAA,SAK9B;AAED,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,OAAO;AAEvC,UAAM,aAAa,GAAG,cAAc,QAAQ;AAC5C,eAAW,MAAM;AACjB,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,OAAO;AAAA,EAC3C,CAAC;AACD,KAAG,sCAAsC,YAAY;AACjD,UAAM,kBAAkB,CAAC,UAAuB,MAAM,eAAe;AACrE,UAAM,KAAK,MAAM,QAAc;AAAA,gDACS,eAAe;AAAA;AAAA;AAAA;AAAA,SAItD;AAED,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,OAAO;AAEvC,UAAM,YAAY,GAAG,cAAc,kBAAkB;AACrD,cAAU,MAAM;AAChB,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,OAAO;AAAA,EAC3C,CAAC;AACD,KAAG,oCAAoC,YAAY;AAC/C,UAAM,KAAK,MAAM,QAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAS9B;AACD,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,EAAE;AAElC,UAAM,WAAW,GAAG,cAAc,iBAAiB;AACnD,UAAM,YAAY,GAAG,cAAc,kBAAkB;AACrD,aAAS,cAAc,IAAI,WAAW,WAAW,EAAE,SAAS,KAAK,CAAC,CAAC;AACnE,aAAS,MAAM;AAEf,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,UAAU,iBAAiB,EAAE,GAAG,GAC7D;AAEL,aAAS,cAAc,eAAe,CAAC;AAEvC,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,WAAW,kBAAkB,EAAE,GAAG,GAC/D;AAEL,cAAU,cAAc,WAAW,CAAC;AAEpC,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,QAAQ;AAExC,cAAU,cAAc,gBAAgB,CAAC;AAEzC,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,UAAU,iBAAiB,EAAE,GAAG,GAC7D;AAEL,aAAS,cAAc,WAAW,CAAC;AAEnC,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,OAAO;AAEvC,aAAS,cAAc,aAAa,CAAC;AAErC,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,WAAW,kBAAkB,EAAE,GAAG,GAC/D;AAEL,cAAU,cAAc,eAAe,CAAC;AAExC,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,UAAU,iBAAiB,EAAE,GAAG,GAC7D;AAAA,EACT,CAAC;AAED,KAAG,uDAAuD,YAAY;AAAA,IAClE,MAAM,kBAAkB,WAAW;AAAA,MACZ,SAAyB;AACxC,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUX;AAAA,IACJ;AACA,mBAAe,OAAO,eAAe,SAAS;AAC9C,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,UAAM,eAAe,EAAE;AACvB,UAAM,WAAW,GAAG;AACpB,UAAM,SAAS,SAAS,cAAc,SAAS;AAE/C,UAAM,eAAe,MAAM;AAC3B,WAAO,OAAO,QAAQ,EAAE,GAAG,GAAG,MAAM,EAAE;AAEtC,UAAM,WAAW,OAAO,cAAc,iBAAiB;AACvD,UAAM,YAAY,OAAO,cAAc,kBAAkB;AACzD,aAAS,cAAc,IAAI,WAAW,WAAW,EAAE,SAAS,KAAK,CAAC,CAAC;AACnE,aAAS,MAAM;AAEf,UAAM,eAAe,EAAE;AACvB,QAAI,gBAAgB,SAAS;AAC7B,WAAO,kBAAkB,UAAU,iBAAiB,EAAE,GAAG,GAAG;AAE5D,aAAS,cAAc,eAAe,CAAC;AAEvC,UAAM,eAAe,EAAE;AACvB,oBAAgB,SAAS;AACzB,WAAO,kBAAkB,WAAW,kBAAkB,EAAE,GAAG,GAAG;AAE9D,cAAU,cAAc,WAAW,CAAC;AAEpC,UAAM,eAAe,EAAE;AACvB,WAAO,OAAO,QAAQ,EAAE,GAAG,GAAG,MAAM,QAAQ;AAE5C,cAAU,cAAc,gBAAgB,CAAC;AAEzC,UAAM,eAAe,EAAE;AACvB,oBAAgB,SAAS;AACzB,WAAO,kBAAkB,UAAU,iBAAiB,EAAE,GAAG,GAAG;AAE5D,aAAS,cAAc,WAAW,CAAC;AAEnC,UAAM,eAAe,EAAE;AACvB,WAAO,OAAO,QAAQ,EAAE,GAAG,GAAG,MAAM,OAAO;AAAA,EAC/C,CAAC;AACD,KAAG,6DAA6D,YAAY;AACxE,UAAM,KAAK,MAAM,QAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAS9B;AAED,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,EAAE;AAElC,UAAM,WAAW,GAAG,cAAc,iBAAiB;AACnD,UAAM,YAAY,GAAG,cAAc,kBAAkB;AACrD,aAAS,cAAc,IAAI,WAAW,WAAW,EAAE,SAAS,KAAK,CAAC,CAAC;AACnE,aAAS,MAAM;AAEf,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,UAAU,iBAAiB,EAAE,GAAG,GAC7D;AAEL,aAAS,cAAc,eAAe,CAAC;AAEvC,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,WAAW,kBAAkB,EAAE,GAAG,GAC/D;AAEL,cAAU,cAAc,WAAW,CAAC;AAEpC,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,QAAQ;AAExC,cAAU,cAAc,eAAe,CAAC;AAExC,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,UAAU,iBAAiB,EAAE,GAAG,GAC7D;AAEL,aAAS,cAAc,WAAW,CAAC;AAEnC,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,MAAM,OAAO;AAEvC,aAAS,cAAc,gBAAgB,CAAC;AAExC,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,kBAAkB,WAAW,kBAAkB,EAAE,GAAG,GAC/D;AAEL,cAAU,cAAc,eAAe,CAAC;AACxC,WAAO,SAAS,kBAAkB,UAAU,iBAAiB,EAAE,GAAG,GAC7D;AAAA,EACT,CAAC;AACD,KAAG,+BAA+B,YAAY;AAC1C,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMJ;AACA,UAAM,OAAO,GAAG,cAAc,MAAM;AACpC,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,QAAQ,EAAE,GAAG,MAAM,OAAO;AAEpC,SAAK,MAAM;AACX,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,QAAQ,EAAE,GAAG,MAAM,QAAQ;AAAA,EACzC,CAAC;AACD,KAAG,0DAA0D,YAAY;AACrE,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMJ;AACA,UAAM,WAAW,GAAG,cAAc,iBAAiB;AACnD,UAAM,eAAe,EAAE;AAEvB,UAAM,gBAAgB;AACtB,UAAM,cAAc,cAAc;AAAA,MAC9B,GAAG;AAAA,IACP;AACA,UAAM,eAAe,WAAW,YAAY,CAAC,CAAC;AAC9C,aAAS,cAAc;AACvB,UAAM,UAAU;AAChB,UAAM,UAAU;AAEhB,UAAM,aAAa,cAAc;AAAA,MAC7B,GAAG;AAAA,IACP;AACA,UAAM,cAAc,WAAW,WAAW,CAAC,CAAC;AAC5C,WAAO,YAAY,EAAE,GAAG,GAAG,SAAS,WAAW;AAC/C,aAAS,cAAc;AACvB,UAAM,UAAU;AAEhB,UAAM,cAAc,cAAc;AAAA,MAC9B,GAAG;AAAA,IACP;AACA,UAAM,eAAe,WAAW,YAAY,CAAC,CAAC;AAC9C,WAAO,YAAY,EAAE,GAAG,GAAG,YAAY,YAAY;AACnD,WAAO,WAAW,EAAE,GAAG,GAAG,YAAY,YAAY;AAAA,EACtD,CAAC;AACD,KAAG,gCAAgC,YAAY;AAC3C,UAAM,OAAO,MAAM,WAAW;AAC9B,UAAM,UAAW,KAAK,WAA0B;AAAA,MAC5C;AAAA,IACJ;AAGA,QAAI,WAAW;AACf,UAAM,aAAa,OAAO;AAC1B,WAAO,UAAU,MAAM;AACnB,iBAAW;AAAA,IACf;AACA,YAAQ,cAAc,IAAI,WAAW,OAAO,CAAC;AAC7C,WAAO,UAAU,qBAAqB,EAAE,GAAG,GAAG;AAC9C,WAAO,UAAU;AAAA,EACrB,CAAC;AACL,CAAC;",
   "names": []
 }