@spectrum-web-components/tabs 0.11.5-overlay.18 → 0.30.0

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 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 [chevronIconStyles, styles, tabSizes];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    compact = false;\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 _handleScrollClick(event: MouseEvent): void {\n        const currentTarget = event.currentTarget as HTMLElement;\n        const [tabsElement] = this.scrollContent;\n\n        const dist = tabsElement.clientWidth * 0.5;\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        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                    quiet\n                    dir=\"rtl\"\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                    quiet\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": "qNAWA,OAEI,QAAAA,EAGA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,EACA,yBAAAC,EACA,SAAAC,MACG,kDACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,oBAAAC,MAAwB,2CAEjC,MAAO,6DACP,MAAO,gEACP,OAAOC,MAAuB,iEAC9B,OAAOC,MAAc,sBACrB,OAAOC,MAAY,yBASZ,aAAM,qBAAqBV,EAAWC,CAAe,CAAE,CAyBnD,aAAc,CACjB,MAAM,EApBV,aAAU,GAMV,KAAQ,cAAmC,CACvC,cAAe,GACf,eAAgB,EACpB,EAYI,KAAK,iBAAmB,IAAIM,EAAiB,KAAM,CAC/C,OAAQ,KACR,SAAU,IAAY,CAClB,KAAK,mBAAmB,CAC5B,CACJ,CAAC,CACL,CAhCA,WAA2B,QAAyB,CAChD,MAAO,CAACC,EAAmBE,EAAQD,CAAQ,CAC/C,CAgCmB,aAAaE,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAE1B,KAAM,CAACC,CAAI,EAAI,KAAK,cAChBA,IACAA,EAAK,iBAAmB,IAE5B,KAAK,iBAAiB,QAAQ,KAAK,iBAAiB,CACxD,CAEA,MAAc,mBAAmC,CAC7C,KAAM,CAACC,CAAW,EAAI,KAAK,cAC3B,MAAMA,GAAA,YAAAA,EAAa,gBACnB,KAAK,mBAAmB,CAC5B,CAEQ,oBAA2B,CAC/B,KAAM,CAAE,cAAAC,EAAe,cAAAC,CAAc,EAAI,KAEzC,GAAID,EAAe,CACf,KAAM,CAACD,CAAW,EAAI,KAAK,cACrB,CAAE,cAAAG,EAAe,eAAAC,CAAe,GAClCJ,GAAA,YAAAA,EAAa,cAAe,CACxB,cAAe,GACf,eAAgB,EACpB,EAEJ,KAAK,cAAgB,CACjB,GAAGE,EACH,cAAAC,EACA,eAAAC,CACJ,CACJ,CACJ,CAEQ,mBAAmBC,EAAyB,CAChD,MAAMC,EAAgBD,EAAM,cACtB,CAACL,CAAW,EAAI,KAAK,cAErBO,EAAOP,EAAY,YAAc,GACjCQ,EAAOF,EAAc,UAAU,SAAS,aAAa,EACrD,CAACC,EACDA,EACNP,EAAY,WAAWQ,EAAM,QAAQ,CACzC,CAEmB,QACfC,EACI,CACJ,MAAM,QAAQA,CAAiB,EAC3BA,EAAkB,IAAI,KAAK,GAC3B,KAAK,mBAAmB,CAEhC,CAEmB,QAAyB,CACxC,KAAM,CAAE,eAAAL,EAAgB,cAAAD,CAAc,EAAI,KAAK,cAC/C,OAAOjB;AAAA;AAAA,wBAESO,EAAS,CACb,0BAA2B,GAC3B,cAAeU,EACf,eAAgBC,CACpB,CAAC;AAAA;AAAA;AAAA,4BAGWX,EAAS,CACb,cAAe,GACf,KAAMU,CACV,CAAC;AAAA;AAAA;AAAA,6BAGQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAQNV,EAAS,CACb,eAAgB,GAChB,KAAMW,CACV,CAAC;AAAA;AAAA,6BAEQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAQA,KAAK;AAAA,sCACD,KAAK;AAAA;AAAA;AAAA,SAIvC,CACJ,CAhIIM,EAAA,CADCrB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GALjC,aAMT,uBAGgBqB,EAAA,CADfrB,EAAS,CAAE,QAAS,EAAK,CAAC,GARlB,aASO,mBAGRqB,EAAA,CADPlB,EAAM,GAXE,aAYD,6BAMAkB,EAAA,CADPnB,EAAsB,CAAE,SAAU,UAAW,QAAS,EAAK,CAAC,GAjBpD,aAkBD,6BAGAmB,EAAA,CADPpB,EAAM,0BAA0B,GApBxB,aAqBD",
+  "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 [chevronIconStyles, styles, tabSizes];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    compact = false;\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 _handleScrollClick(event: MouseEvent): void {\n        const currentTarget = event.currentTarget as HTMLElement;\n        const [tabsElement] = this.scrollContent;\n\n        const dist = tabsElement.clientWidth * 0.5;\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        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                    quiet\n                    dir=\"rtl\"\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                    quiet\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": "qNAWA,OAEI,QAAAA,EAGA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,EACA,yBAAAC,EACA,SAAAC,MACG,kDACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,oBAAAC,MAAwB,2CAEjC,MAAO,6DACP,MAAO,gEACP,OAAOC,MAAuB,iEAC9B,OAAOC,MAAc,sBACrB,OAAOC,MAAY,yBASZ,aAAM,qBAAqBV,EAAWC,CAAe,CAAE,CAyBnD,aAAc,CACjB,MAAM,EApBV,aAAU,GAMV,KAAQ,cAAmC,CACvC,cAAe,GACf,eAAgB,EACpB,EAYI,KAAK,iBAAmB,IAAIM,EAAiB,KAAM,CAC/C,OAAQ,KACR,SAAU,IAAY,CAClB,KAAK,mBAAmB,CAC5B,CACJ,CAAC,CACL,CAhCA,WAA2B,QAAyB,CAChD,MAAO,CAACC,EAAmBE,EAAQD,CAAQ,CAC/C,CAgCmB,aAAaE,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAE1B,KAAM,CAACC,CAAI,EAAI,KAAK,cAChBA,IACAA,EAAK,iBAAmB,IAE5B,KAAK,iBAAiB,QAAQ,KAAK,iBAAiB,CACxD,CAEA,MAAc,mBAAmC,CAC7C,KAAM,CAACC,CAAW,EAAI,KAAK,cAC3B,MAAMA,GAAA,YAAAA,EAAa,gBACnB,KAAK,mBAAmB,CAC5B,CAEQ,oBAA2B,CAC/B,KAAM,CAAE,cAAAC,EAAe,cAAAC,CAAc,EAAI,KAEzC,GAAID,EAAe,CACf,KAAM,CAACD,CAAW,EAAI,KAAK,cACrB,CAAE,cAAAG,EAAe,eAAAC,CAAe,GAClCJ,GAAA,YAAAA,EAAa,cAAe,CACxB,cAAe,GACf,eAAgB,EACpB,EAEJ,KAAK,cAAgB,CACjB,GAAGE,EACH,cAAAC,EACA,eAAAC,CACJ,EAER,CAEQ,mBAAmBC,EAAyB,CAChD,MAAMC,EAAgBD,EAAM,cACtB,CAACL,CAAW,EAAI,KAAK,cAErBO,EAAOP,EAAY,YAAc,GACjCQ,EAAOF,EAAc,UAAU,SAAS,aAAa,EACrD,CAACC,EACDA,EACNP,EAAY,WAAWQ,EAAM,QAAQ,CACzC,CAEmB,QACfC,EACI,CACJ,MAAM,QAAQA,CAAiB,EAC3BA,EAAkB,IAAI,KAAK,GAC3B,KAAK,mBAAmB,CAEhC,CAEmB,QAAyB,CACxC,KAAM,CAAE,eAAAL,EAAgB,cAAAD,CAAc,EAAI,KAAK,cAC/C,OAAOjB;AAAA;AAAA,wBAESO,EAAS,CACb,0BAA2B,GAC3B,cAAeU,EACf,eAAgBC,CACpB,CAAC;AAAA;AAAA;AAAA,4BAGWX,EAAS,CACb,cAAe,GACf,KAAMU,CACV,CAAC;AAAA;AAAA;AAAA,6BAGQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAQNV,EAAS,CACb,eAAgB,GAChB,KAAMW,CACV,CAAC;AAAA;AAAA,6BAEQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAQA,KAAK;AAAA,sCACD,KAAK;AAAA;AAAA;AAAA,SAIvC,CACJ,CAhIIM,EAAA,CADCrB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GALjC,aAMT,uBAGgBqB,EAAA,CADfrB,EAAS,CAAE,QAAS,EAAK,CAAC,GARlB,aASO,mBAGRqB,EAAA,CADPlB,EAAM,GAXE,aAYD,6BAMAkB,EAAA,CADPnB,EAAsB,CAAE,SAAU,UAAW,QAAS,EAAK,CAAC,GAjBpD,aAkBD,6BAGAmB,EAAA,CADPpB,EAAM,0BAA0B,GApBxB,aAqBD",
   "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", "__decorateClass"]
 }

package/src/spectrum-tab.css.dev.js

@@ -1,11 +1,11 @@
 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(
+:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(
 --spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration
 ) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-radius
-);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(
+);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus
 )}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus

package/src/spectrum-tab.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-tab.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host([disabled]){color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-disabled)}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host([disabled]){color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-disabled)}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaf,eAAe;",
   "names": []
 }

package/src/spectrum-tab.css.js

@@ -1,9 +1,9 @@
 "use strict";import{css as t}from"@spectrum-web-components/base";const e=t`
-:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(
+:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(
 --spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration
 ) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-radius
-);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(
+);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus
 )}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus

package/src/spectrum-tab.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-tab.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host([disabled]){color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-disabled)}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host([disabled]){color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-disabled)}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaf,eAAeC",
   "names": ["css", "styles"]
 }

package/src/tab.css.dev.js

@@ -1,11 +1,11 @@
 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(
+:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(
 --spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration
 ) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-radius
-);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(
+);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus
 )}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus

package/src/tab.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["tab.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host([disabled]){color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-disabled)}:host([disabled]){pointer-events:none}:host([vertical]){--sp-tab-vertial-margin-y:calc((var(\n--spectrum-tabs-vertical-item-height,\nvar(--spectrum-global-dimension-size-550)\n) - var(\n--spectrum-tabs-focus-ring-height,\nvar(--spectrum-alias-single-line-height)\n))/2);align-items:center;display:flex;flex-direction:column;height:auto!important;justify-content:center}:host([vertical]):before{bottom:0;height:auto;left:calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))*-1);margin-top:0!important;right:calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))*-1);top:0}:host([vertical]) ::slotted([slot=icon]){flex-shrink:0;height:var(\n--spectrum-icon-tshirt-size-height,var(\n--spectrum-alias-workflow-icon-size,var(--spectrum-global-dimension-size-225)\n)\n);margin-top:var(--sp-tab-vertial-margin-y)}:host(:not([vertical])) ::slotted([slot=icon]){height:100%}:host([dir][vertical]) slot[name=icon]+#item-label{font-size:var(\n--spectrum-tabs-text-size,var(--spectrum-alias-font-size-default)\n);font-weight:var(\n--spectrum-tabs-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);line-height:1;margin:var(--sp-tab-vertial-margin-y) 0}#item-label[hidden]{display:none}@media (forced-colors:active){:host:before{background-color:ButtonFace}:host ::slotted([slot=icon]){color:inherit;position:relative;z-index:1}#item-label{position:relative;z-index:1}:host([selected]){color:HighlightText}:host([selected]) ::slotted([slot=icon]){color:HighlightText}:host([selected]):before{background-color:Highlight;color:HighlightText}:host([selected]) #item-label{color:HighlightText}}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host([disabled]){color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-disabled)}:host([disabled]){pointer-events:none}:host([vertical]){--sp-tab-vertial-margin-y:calc((var(\n--spectrum-tabs-vertical-item-height,\nvar(--spectrum-global-dimension-size-550)\n) - var(\n--spectrum-tabs-focus-ring-height,\nvar(--spectrum-alias-single-line-height)\n))/2);align-items:center;display:flex;flex-direction:column;height:auto!important;justify-content:center}:host([vertical]):before{bottom:0;height:auto;left:calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))*-1);margin-top:0!important;right:calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))*-1);top:0}:host([vertical]) ::slotted([slot=icon]){flex-shrink:0;height:var(\n--spectrum-icon-tshirt-size-height,var(\n--spectrum-alias-workflow-icon-size,var(--spectrum-global-dimension-size-225)\n)\n);margin-top:var(--sp-tab-vertial-margin-y)}:host(:not([vertical])) ::slotted([slot=icon]){height:100%}:host([dir][vertical]) slot[name=icon]+#item-label{font-size:var(\n--spectrum-tabs-text-size,var(--spectrum-alias-font-size-default)\n);font-weight:var(\n--spectrum-tabs-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);line-height:1;margin:var(--sp-tab-vertial-margin-y) 0}#item-label[hidden]{display:none}@media (forced-colors:active){:host:before{background-color:ButtonFace}:host ::slotted([slot=icon]){color:inherit;position:relative;z-index:1}#item-label{position:relative;z-index:1}:host([selected]){color:HighlightText}:host([selected]) ::slotted([slot=icon]){color:HighlightText}:host([selected]):before{background-color:Highlight;color:HighlightText}:host([selected]) #item-label{color:HighlightText}}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2Bf,eAAe;",
   "names": []
 }

package/src/tab.css.js

@@ -1,9 +1,9 @@
 "use strict";import{css as t}from"@spectrum-web-components/base";const e=t`
-:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(
+:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(
 --spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration
 ) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-radius
-);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(
+);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus
 )}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus

package/src/tab.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["tab.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host([disabled]){color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-disabled)}:host([disabled]){pointer-events:none}:host([vertical]){--sp-tab-vertial-margin-y:calc((var(\n--spectrum-tabs-vertical-item-height,\nvar(--spectrum-global-dimension-size-550)\n) - var(\n--spectrum-tabs-focus-ring-height,\nvar(--spectrum-alias-single-line-height)\n))/2);align-items:center;display:flex;flex-direction:column;height:auto!important;justify-content:center}:host([vertical]):before{bottom:0;height:auto;left:calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))*-1);margin-top:0!important;right:calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))*-1);top:0}:host([vertical]) ::slotted([slot=icon]){flex-shrink:0;height:var(\n--spectrum-icon-tshirt-size-height,var(\n--spectrum-alias-workflow-icon-size,var(--spectrum-global-dimension-size-225)\n)\n);margin-top:var(--sp-tab-vertial-margin-y)}:host(:not([vertical])) ::slotted([slot=icon]){height:100%}:host([dir][vertical]) slot[name=icon]+#item-label{font-size:var(\n--spectrum-tabs-text-size,var(--spectrum-alias-font-size-default)\n);font-weight:var(\n--spectrum-tabs-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);line-height:1;margin:var(--sp-tab-vertial-margin-y) 0}#item-label[hidden]{display:none}@media (forced-colors:active){:host:before{background-color:ButtonFace}:host ::slotted([slot=icon]){color:inherit;position:relative;z-index:1}#item-label{position:relative;z-index:1}:host([selected]){color:HighlightText}:host([selected]) ::slotted([slot=icon]){color:HighlightText}:host([selected]):before{background-color:Highlight;color:HighlightText}:host([selected]) #item-label{color:HighlightText}}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host([disabled]){color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-disabled)}:host([disabled]){pointer-events:none}:host([vertical]){--sp-tab-vertial-margin-y:calc((var(\n--spectrum-tabs-vertical-item-height,\nvar(--spectrum-global-dimension-size-550)\n) - var(\n--spectrum-tabs-focus-ring-height,\nvar(--spectrum-alias-single-line-height)\n))/2);align-items:center;display:flex;flex-direction:column;height:auto!important;justify-content:center}:host([vertical]):before{bottom:0;height:auto;left:calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))*-1);margin-top:0!important;right:calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))*-1);top:0}:host([vertical]) ::slotted([slot=icon]){flex-shrink:0;height:var(\n--spectrum-icon-tshirt-size-height,var(\n--spectrum-alias-workflow-icon-size,var(--spectrum-global-dimension-size-225)\n)\n);margin-top:var(--sp-tab-vertial-margin-y)}:host(:not([vertical])) ::slotted([slot=icon]){height:100%}:host([dir][vertical]) slot[name=icon]+#item-label{font-size:var(\n--spectrum-tabs-text-size,var(--spectrum-alias-font-size-default)\n);font-weight:var(\n--spectrum-tabs-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);line-height:1;margin:var(--sp-tab-vertial-margin-y) 0}#item-label[hidden]{display:none}@media (forced-colors:active){:host:before{background-color:ButtonFace}:host ::slotted([slot=icon]){color:inherit;position:relative;z-index:1}#item-label{position:relative;z-index:1}:host([selected]){color:HighlightText}:host([selected]) ::slotted([slot=icon]){color:HighlightText}:host([selected]):before{background-color:Highlight;color:HighlightText}:host([selected]) #item-label{color:HighlightText}}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2Bf,eAAeC",
   "names": ["css", "styles"]
 }