@spectrum-web-components/tabs 0.8.16-devmode.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -5
- package/sp-tab-panel.js +1 -2
- package/sp-tab-panel.js.map +1 -1
- package/sp-tab.js +1 -2
- package/sp-tab.js.map +1 -1
- package/sp-tabs.js +1 -2
- package/sp-tabs.js.map +1 -1
- package/src/Tab.js +5 -96
- package/src/Tab.js.map +1 -1
- package/src/TabPanel.js +2 -56
- package/src/TabPanel.js.map +1 -1
- package/src/Tabs.js +4 -287
- package/src/Tabs.js.map +1 -1
- package/src/index.js +1 -3
- package/src/index.js.map +1 -1
- package/src/spectrum-tab.css.js +2 -4
- package/src/spectrum-tab.css.js.map +1 -1
- package/src/spectrum-tabs.css.js +2 -4
- package/src/spectrum-tabs.css.js.map +1 -1
- package/src/tab-panel.css.js +2 -4
- package/src/tab-panel.css.js.map +1 -1
- package/src/tab.css.js +2 -4
- package/src/tab.css.js.map +1 -1
- package/src/tabs.css.js +2 -4
- package/src/tabs.css.js.map +1 -1
- package/stories/tabs-horizontal-sizes.stories.js +7 -76
- package/stories/tabs-horizontal-sizes.stories.js.map +1 -1
- package/stories/tabs-vertical-right-sizes.stories.js +7 -73
- package/stories/tabs-vertical-right-sizes.stories.js.map +1 -1
- package/stories/tabs-vertical-sizes.stories.js +7 -73
- package/stories/tabs-vertical-sizes.stories.js.map +1 -1
- package/stories/tabs.stories.js +75 -196
- package/stories/tabs.stories.js.map +1 -1
- package/test/benchmark/basic-test.js +1 -5
- package/test/benchmark/basic-test.js.map +1 -1
- package/test/tab.test.js +4 -26
- package/test/tab.test.js.map +1 -1
- package/test/tabs-horizontal-sizes.test-vrt.js +1 -3
- package/test/tabs-horizontal-sizes.test-vrt.js.map +1 -1
- package/test/tabs-vertical-right-sizes.test-vrt.js +1 -3
- package/test/tabs-vertical-right-sizes.test-vrt.js.map +1 -1
- package/test/tabs-vertical-sizes.test-vrt.js +1 -3
- package/test/tabs-vertical-sizes.test-vrt.js.map +1 -1
- package/test/tabs.test-vrt.js +1 -3
- package/test/tabs.test-vrt.js.map +1 -1
- package/test/tabs.test.js +17 -396
- package/test/tabs.test.js.map +1 -1
package/src/Tabs.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tabs.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { Tab } from './Tab.js';\nimport { Focusable } from '@spectrum-web-components/shared';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport tabStyles from './tabs.css.js';\nimport { TabPanel } from './TabPanel.js';\n\nconst noSelectionStyle = 'transform: translateX(0px) scaleX(0) scaleY(0)';\n\n/**\n * @element sp-tabs\n *\n * @slot - Tab elements to manage as a group\n * @slot tab-panel - Tab Panel elements related to the listed Tab elements\n * @attr {Boolean} quiet - The tabs border is a lot smaller\n * @attr {Boolean} compact - The collection of tabs take up less space\n * @csspart tablist - Container element for the slotted sp-tab elements\n *\n * @fires change - The selected Tab child has changed.\n */\nexport class Tabs extends SizedMixin(Focusable) {\n public static override get styles(): CSSResultArray {\n return [tabStyles];\n }\n\n /**\n * Whether to activate a tab on keyboard focus or not.\n *\n * By default a tab is activated via a \"click\" interaction. This is specifically intended for when\n * tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\n * To learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\n * https://w3c.github.io/aria-practices/#kbd_selection_follows_focus\n */\n @property({ type: Boolean })\n public auto = false;\n\n @property({ reflect: true })\n public direction: 'vertical' | 'vertical-right' | 'horizontal' =\n 'horizontal';\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property()\n public label = '';\n\n @property({ attribute: false })\n public selectionIndicatorStyle = noSelectionStyle;\n\n @property({ attribute: false })\n public shouldAnimate = false;\n\n @query('#list')\n private tabList!: HTMLDivElement;\n\n @property({ reflect: true })\n public get selected(): string {\n return this._selected;\n }\n\n public set selected(value: string) {\n const oldValue = this.selected;\n\n if (value === oldValue) {\n return;\n }\n\n this._selected = value;\n this.shouldUpdateCheckedState();\n this.requestUpdate('selected', oldValue);\n }\n\n private _selected = '';\n\n private set tabs(tabs: Tab[]) {\n if (tabs === this.tabs) return;\n this._tabs = tabs;\n this.rovingTabindexController.clearElementCache();\n }\n\n private get tabs(): Tab[] {\n return this._tabs;\n }\n\n private _tabs: Tab[] = [];\n\n rovingTabindexController = new RovingTabindexController<Tab>(this, {\n focusInIndex: (elements) => {\n let focusInIndex = 0;\n const firstFocusableElement = elements.find((el, index) => {\n const focusInElement = this.selected\n ? !el.disabled && el.value === this.selected\n : !el.disabled;\n focusInIndex = index;\n return focusInElement;\n });\n return firstFocusableElement ? focusInIndex : -1;\n },\n direction: () =>\n this.direction === 'horizontal' ? 'horizontal' : 'vertical',\n elementEnterAction: (el) => {\n if (!this.auto) return;\n\n this.shouldAnimate = true;\n this.selectTarget(el);\n },\n elements: () => this.tabs,\n isFocusableElement: (el) => !el.disabled,\n listenerScope: () => this.tabList,\n });\n\n /**\n * @private\n */\n public override get focusElement(): Tab | this {\n return this.rovingTabindexController.focusInElement || this;\n }\n\n protected override manageAutoFocus(): void {\n const tabs = [...this.children] as Tab[];\n const tabUpdateCompletes = tabs.map((tab) => {\n if (typeof tab.updateComplete !== 'undefined') {\n return tab.updateComplete;\n }\n return Promise.resolve(true);\n });\n Promise.all(tabUpdateCompletes).then(() => super.manageAutoFocus());\n }\n\n protected managePanels({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n const panels = target.assignedElements() as TabPanel[];\n panels.map((panel) => {\n const { value, id } = panel;\n const tab = this.querySelector(`[role=\"tab\"][value=\"${value}\"]`);\n if (tab) {\n tab.setAttribute('aria-controls', id);\n panel.setAttribute('aria-labelledby', tab.id);\n }\n panel.selected = value === this.selected;\n });\n }\n\n protected override render(): TemplateResult {\n return html`\n <div\n aria-label=${ifDefined(this.label ? this.label : undefined)}\n @click=${this.onClick}\n @keydown=${this.onKeyDown}\n @sp-tab-contentchange=${this.updateSelectionIndicator}\n id=\"list\"\n role=\"tablist\"\n part=\"tablist\"\n >\n <slot @slotchange=${this.onSlotChange}></slot>\n <div\n id=\"selection-indicator\"\n class=${ifDefined(\n this.shouldAnimate ? undefined : 'first-position'\n )}\n style=${this.selectionIndicatorStyle}\n role=\"presentation\"\n ></div>\n </div>\n <slot name=\"tab-panel\" @slotchange=${this.managePanels}></slot>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues): void {\n if (!this.hasUpdated) {\n const selectedChild = this.querySelector(\n ':scope > [selected]'\n ) as Tab;\n if (selectedChild) {\n this.selectTarget(selectedChild);\n }\n }\n\n super.updated(changes);\n if (changes.has('selected')) {\n if (changes.get('selected')) {\n const previous = this.querySelector(\n `[role=\"tabpanel\"][value=\"${changes.get('selected')}\"]`\n ) as TabPanel;\n if (previous) previous.selected = false;\n }\n const next = this.querySelector(\n `[role=\"tabpanel\"][value=\"${this.selected}\"]`\n ) as TabPanel;\n if (next) next.selected = true;\n }\n if (changes.has('direction')) {\n if (this.direction === 'horizontal') {\n this.removeAttribute('aria-orientation');\n } else {\n this.setAttribute('aria-orientation', 'vertical');\n }\n }\n if (changes.has('dir')) {\n this.updateSelectionIndicator();\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n if (\n !this.shouldAnimate &&\n typeof changes.get('shouldAnimate') !== 'undefined'\n ) {\n this.shouldAnimate = true;\n }\n }\n\n private onClick = (event: Event): void => {\n if (this.disabled) {\n return;\n }\n const target = event\n .composedPath()\n .find((el) => (el as Tab).parentElement === this) as Tab;\n if (!target || target.disabled) {\n return;\n }\n this.shouldAnimate = true;\n this.selectTarget(target);\n };\n\n private onKeyDown = (event: KeyboardEvent): void => {\n if (event.code === 'Enter' || event.code === 'Space') {\n event.preventDefault();\n const target = event.target as HTMLElement;\n if (target) {\n this.selectTarget(target);\n }\n }\n };\n\n private selectTarget(target: HTMLElement): void {\n const value = target.getAttribute('value');\n if (value) {\n const selected = this.selected;\n this.selected = value;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.selected = selected;\n }\n }\n }\n\n private onSlotChange(): void {\n this.tabs = [...this.querySelectorAll('[role=\"tab\"]')] as Tab[];\n this.shouldUpdateCheckedState();\n }\n\n private shouldUpdateCheckedState(): void {\n this.tabChangeResolver();\n this.tabChangePromise = new Promise(\n (res) => (this.tabChangeResolver = res)\n );\n setTimeout(this.updateCheckedState);\n }\n\n private updateCheckedState = (): void => {\n if (!this.tabs.length) {\n this.tabs = [...this.querySelectorAll('[role=\"tab\"]')] as Tab[];\n }\n this.tabs.forEach((element) => {\n element.removeAttribute('selected');\n });\n\n if (this.selected) {\n const currentChecked = this.tabs.find(\n (el) => el.value === this.selected\n );\n\n if (currentChecked) {\n currentChecked.selected = true;\n } else {\n this.selected = '';\n }\n } else {\n const firstTab = this.tabs[0];\n if (firstTab) {\n firstTab.setAttribute('tabindex', '0');\n }\n }\n\n this.updateSelectionIndicator();\n this.tabChangeResolver();\n };\n\n private updateSelectionIndicator = async (): Promise<void> => {\n const selectedElement = this.tabs.find((el) => el.selected);\n if (!selectedElement) {\n this.selectionIndicatorStyle = noSelectionStyle;\n return;\n }\n await Promise.all([\n selectedElement.updateComplete,\n document.fonts ? document.fonts.ready : Promise.resolve(),\n ]);\n const tabBoundingClientRect = selectedElement.getBoundingClientRect();\n\n if (this.direction === 'horizontal') {\n const width = tabBoundingClientRect.width;\n const offset = selectedElement.offsetLeft;\n\n this.selectionIndicatorStyle = `transform: translateX(${offset}px) scaleX(${width});`;\n } else {\n const height = tabBoundingClientRect.height;\n const offset = selectedElement.offsetTop;\n\n this.selectionIndicatorStyle = `transform: translateY(${offset}px) scaleY(${height});`;\n }\n };\n\n private tabChangePromise = Promise.resolve();\n private tabChangeResolver: () => void = function () {\n return;\n };\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.tabChangePromise;\n return complete;\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener('resize', this.updateSelectionIndicator);\n if ('fonts' in document) {\n (\n document as unknown as {\n fonts: {\n addEventListener: (\n name: string,\n callback: () => void\n ) => void;\n };\n }\n ).fonts.addEventListener(\n 'loadingdone',\n this.updateSelectionIndicator\n );\n }\n }\n\n public override disconnectedCallback(): void {\n window.removeEventListener('resize', this.updateSelectionIndicator);\n if ('fonts' in document) {\n (\n document as unknown as {\n fonts: {\n removeEventListener: (\n name: string,\n callback: () => void\n ) => void;\n };\n }\n ).fonts.removeEventListener(\n 'loadingdone',\n this.updateSelectionIndicator\n );\n }\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "wMAYA,qEAOA,sFAIA,4EAEA,4DACA,+GAEA,6BAGA,KAAM,GAAmB,iDAalB,aAAM,YAAa,GAAW,CAAS,CAAE,CAAzC,kCAcI,UAAO,GAGP,eACH,aAGG,gBAAa,GAGb,WAAQ,GAGR,6BAA0B,EAG1B,mBAAgB,GAsBf,eAAY,GAYZ,WAAe,CAAC,EAExB,8BAA2B,GAAI,GAA8B,KAAM,CAC/D,aAAc,AAAC,GAAa,CACxB,GAAI,GAAe,EAQnB,MAAO,AAPuB,GAAS,KAAK,CAAC,EAAI,IAAU,CACvD,KAAM,GAAiB,KAAK,SACtB,CAAC,EAAG,UAAY,EAAG,QAAU,KAAK,SAClC,CAAC,EAAG,SACV,SAAe,EACR,CACX,CAAC,EAC8B,EAAe,EAClD,EACA,UAAW,IACP,KAAK,YAAc,aAAe,aAAe,WACrD,mBAAoB,AAAC,GAAO,CACxB,AAAI,CAAC,KAAK,MAEV,MAAK,cAAgB,GACrB,KAAK,aAAa,CAAE,EACxB,EACA,SAAU,IAAM,KAAK,KACrB,mBAAoB,AAAC,GAAO,CAAC,EAAG,SAChC,cAAe,IAAM,KAAK,OAC9B,CAAC,EA4GO,aAAU,AAAC,GAAuB,CACtC,GAAI,KAAK,SACL,OAEJ,KAAM,GAAS,EACV,aAAa,EACb,KAAK,AAAC,GAAQ,EAAW,gBAAkB,IAAI,EACpD,AAAI,CAAC,GAAU,EAAO,UAGtB,MAAK,cAAgB,GACrB,KAAK,aAAa,CAAM,EAC5B,EAEQ,eAAY,AAAC,GAA+B,CAChD,GAAI,EAAM,OAAS,SAAW,EAAM,OAAS,QAAS,CAClD,EAAM,eAAe,EACrB,KAAM,GAAS,EAAM,OACrB,AAAI,GACA,KAAK,aAAa,CAAM,CAEhC,CACJ,EA+BQ,wBAAqB,IAAY,CAQrC,GAPK,KAAK,KAAK,QACX,MAAK,KAAO,CAAC,GAAG,KAAK,iBAAiB,cAAc,CAAC,GAEzD,KAAK,KAAK,QAAQ,AAAC,GAAY,CAC3B,EAAQ,gBAAgB,UAAU,CACtC,CAAC,EAEG,KAAK,SAAU,CACf,KAAM,GAAiB,KAAK,KAAK,KAC7B,AAAC,GAAO,EAAG,QAAU,KAAK,QAC9B,EAEA,AAAI,EACA,EAAe,SAAW,GAE1B,KAAK,SAAW,EAExB,KAAO,CACH,KAAM,GAAW,KAAK,KAAK,GAC3B,AAAI,GACA,EAAS,aAAa,WAAY,GAAG,CAE7C,CAEA,KAAK,yBAAyB,EAC9B,KAAK,kBAAkB,CAC3B,EAEQ,8BAA2B,SAA2B,CAC1D,KAAM,GAAkB,KAAK,KAAK,KAAK,AAAC,GAAO,EAAG,QAAQ,EAC1D,GAAI,CAAC,EAAiB,CAClB,KAAK,wBAA0B,EAC/B,MACJ,CACA,KAAM,SAAQ,IAAI,CACd,EAAgB,eAChB,SAAS,MAAQ,SAAS,MAAM,MAAQ,QAAQ,QAAQ,CAC5D,CAAC,EACD,KAAM,GAAwB,EAAgB,sBAAsB,EAEpE,GAAI,KAAK,YAAc,aAAc,CACjC,KAAM,GAAQ,EAAsB,MAC9B,EAAS,EAAgB,WAE/B,KAAK,wBAA0B,yBAAyB,eAAoB,KAChF,KAAO,CACH,KAAM,GAAS,EAAsB,OAC/B,EAAS,EAAgB,UAE/B,KAAK,wBAA0B,yBAAyB,eAAoB,KAChF,CACJ,EAEQ,sBAAmB,QAAQ,QAAQ,EACnC,uBAAgC,UAAY,CAEpD,YAlT2B,SAAyB,CAChD,MAAO,CAAC,CAAS,CACrB,IAiCW,WAAmB,CAC1B,MAAO,MAAK,SAChB,IAEW,UAAS,EAAe,CAC/B,KAAM,GAAW,KAAK,SAEtB,AAAI,IAAU,GAId,MAAK,UAAY,EACjB,KAAK,yBAAyB,EAC9B,KAAK,cAAc,WAAY,CAAQ,EAC3C,IAIY,MAAK,EAAa,CAC1B,AAAI,IAAS,KAAK,MAClB,MAAK,MAAQ,EACb,KAAK,yBAAyB,kBAAkB,EACpD,IAEY,OAAc,CACtB,MAAO,MAAK,KAChB,IAgCoB,eAA2B,CAC3C,MAAO,MAAK,yBAAyB,gBAAkB,IAC3D,CAEmB,iBAAwB,CAEvC,KAAM,GAAqB,AADd,CAAC,GAAG,KAAK,QAAQ,EACE,IAAI,AAAC,GAC7B,MAAO,GAAI,gBAAmB,YACvB,EAAI,eAER,QAAQ,QAAQ,EAAI,CAC9B,EACD,QAAQ,IAAI,CAAkB,EAAE,KAAK,IAAM,MAAM,gBAAgB,CAAC,CACtE,CAEU,aAAa,CACnB,UAC0C,CAE1C,AADe,EAAO,iBAAiB,EAChC,IAAI,AAAC,GAAU,CAClB,KAAM,CAAE,QAAO,MAAO,EAChB,EAAM,KAAK,cAAc,uBAAuB,KAAS,EAC/D,AAAI,GACA,GAAI,aAAa,gBAAiB,CAAE,EACpC,EAAM,aAAa,kBAAmB,EAAI,EAAE,GAEhD,EAAM,SAAW,IAAU,KAAK,QACpC,CAAC,CACL,CAEmB,QAAyB,CACxC,MAAO;AAAA;AAAA,6BAEc,EAAU,KAAK,MAAQ,KAAK,MAAQ,MAAS;AAAA,yBACjD,KAAK;AAAA,2BACH,KAAK;AAAA,wCACQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,oCAKT,KAAK;AAAA;AAAA;AAAA,4BAGb,EACJ,KAAK,cAAgB,OAAY,gBACrC;AAAA,4BACQ,KAAK;AAAA;AAAA;AAAA;AAAA,iDAIgB,KAAK;AAAA,SAElD,CAEmB,WAAW,EAA+B,CACzD,GAAI,CAAC,KAAK,WAAY,CAClB,KAAM,GAAgB,KAAK,cACvB,qBACJ,EACA,AAAI,GACA,KAAK,aAAa,CAAa,CAEvC,CAGA,GADA,MAAM,QAAQ,CAAO,EACjB,EAAQ,IAAI,UAAU,EAAG,CACzB,GAAI,EAAQ,IAAI,UAAU,EAAG,CACzB,KAAM,GAAW,KAAK,cAClB,4BAA4B,EAAQ,IAAI,UAAU,KACtD,EACA,AAAI,GAAU,GAAS,SAAW,GACtC,CACA,KAAM,GAAO,KAAK,cACd,4BAA4B,KAAK,YACrC,EACA,AAAI,GAAM,GAAK,SAAW,GAC9B,CACA,AAAI,EAAQ,IAAI,WAAW,GACvB,CAAI,KAAK,YAAc,aACnB,KAAK,gBAAgB,kBAAkB,EAEvC,KAAK,aAAa,mBAAoB,UAAU,GAGpD,EAAQ,IAAI,KAAK,GACjB,KAAK,yBAAyB,EAE9B,EAAQ,IAAI,UAAU,GACtB,CAAI,KAAK,SACL,KAAK,aAAa,gBAAiB,MAAM,EAEzC,KAAK,gBAAgB,eAAe,GAIxC,CAAC,KAAK,eACN,MAAO,GAAQ,IAAI,eAAe,GAAM,aAExC,MAAK,cAAgB,GAE7B,CA0BQ,aAAa,EAA2B,CAC5C,KAAM,GAAQ,EAAO,aAAa,OAAO,EACzC,GAAI,EAAO,CACP,KAAM,GAAW,KAAK,SACtB,KAAK,SAAW,EAMX,AALgB,KAAK,cACtB,GAAI,OAAM,SAAU,CAChB,WAAY,EAChB,CAAC,CACL,GAEI,MAAK,SAAW,EAExB,CACJ,CAEQ,cAAqB,CACzB,KAAK,KAAO,CAAC,GAAG,KAAK,iBAAiB,cAAc,CAAC,EACrD,KAAK,yBAAyB,CAClC,CAEQ,0BAAiC,CACrC,KAAK,kBAAkB,EACvB,KAAK,iBAAmB,GAAI,SACxB,AAAC,GAAS,KAAK,kBAAoB,CACvC,EACA,WAAW,KAAK,kBAAkB,CACtC,MA6DyB,oBAAsC,CAC3D,KAAM,GAAY,KAAM,OAAM,kBAAkB,EAChD,YAAM,MAAK,iBACJ,CACX,CAEgB,mBAA0B,CACtC,MAAM,kBAAkB,EACxB,OAAO,iBAAiB,SAAU,KAAK,wBAAwB,EAC3D,SAAW,WAEP,SAQF,MAAM,iBACJ,cACA,KAAK,wBACT,CAER,CAEgB,sBAA6B,CACzC,OAAO,oBAAoB,SAAU,KAAK,wBAAwB,EAC9D,SAAW,WAEP,SAQF,MAAM,oBACJ,cACA,KAAK,wBACT,EAEJ,MAAM,qBAAqB,CAC/B,CACJ,CApVW,GADP,AAAC,EAAS,CAAE,KAAM,OAAQ,CAAC,GACpB,AAdJ,KAcI,oBAGA,GADP,AAAC,EAAS,CAAE,QAAS,EAAK,CAAC,GACpB,AAjBJ,KAiBI,yBAIA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AArBJ,KAqBI,0BAGA,GADP,AAAC,EAAS,GACH,AAxBJ,KAwBI,qBAGA,GADP,AAAC,EAAS,CAAE,UAAW,EAAM,CAAC,GACvB,AA3BJ,KA2BI,uCAGA,GADP,AAAC,EAAS,CAAE,UAAW,EAAM,CAAC,GACvB,AA9BJ,KA8BI,6BAGC,GADR,AAAC,EAAM,OAAO,GACN,AAjCL,KAiCK,uBAGG,GADX,AAAC,EAAS,CAAE,QAAS,EAAK,CAAC,GAChB,AApCR,KAoCQ",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js
CHANGED
package/src/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './Tabs.js';\nexport * from './Tab.js';\nexport * from './TabPanel.js';\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,uBACA,sBACA",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/spectrum-tab.css.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as t}from"@spectrum-web-components/base";const e=t`
|
|
3
2
|
: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(
|
|
4
3
|
--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration
|
|
5
4
|
) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(
|
|
@@ -35,6 +34,5 @@ const styles = css`
|
|
|
35
34
|
)}:host([disabled]) ::slotted([slot=icon]){color:var(
|
|
36
35
|
--spectrum-tabs-textonly-tabitem-icon-color-disabled
|
|
37
36
|
)}
|
|
38
|
-
`;
|
|
39
|
-
export default styles;
|
|
37
|
+
`;export default e;
|
|
40
38
|
//# sourceMappingURL=spectrum-tab.css.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tab.css.ts"],
|
|
4
4
|
"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 { 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(\n--spectrum-tabs-quiet-textonly-tabitem-height\n)}:host([dir=ltr]) slot[name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[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(\n--spectrum-tabs-textonly-tabitem-text-color\n)}::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color\n)}:host(:hover){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-hover\n)}:host(:hover) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-hover\n)}:host([selected]){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected\n)}:host([selected]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected\n)}:host(.focus-visible){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus\n)}:host(:focus-visible){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected-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(\n--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus\n)}:host(:focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus\n)}:host([disabled]){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-disabled\n)}:host([disabled]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-disabled\n)}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqCf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/spectrum-tabs.css.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as t}from"@spectrum-web-components/base";const e=t`
|
|
3
2
|
:host([size=s]){--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:var(
|
|
4
3
|
--spectrum-tabs-s-quiet-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)
|
|
5
4
|
);--spectrum-tabs-quiet-textonly-divider-background-color:var(
|
|
@@ -387,6 +386,5 @@ const styles = css`
|
|
|
387
386
|
)}:host([direction^=vertical][emphasized]) #list #selection-indicator{background-color:var(
|
|
388
387
|
--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected
|
|
389
388
|
)}@media (forced-colors:active){#list{--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:HighlightText;--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:HighlightText;--spectrum-tabs-emphasized-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-textonly-divider-background-color:transparent;--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-disabled:GrayText;--spectrum-tabs-textonly-tabitem-icon-color-hover:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-selected:HighlightText;--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-textonly-tabitem-text-color-disabled:GrayText;--spectrum-tabs-textonly-tabitem-text-color-hover:ButtonText;--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-text-color-selected:HighlightText;--spectrum-tabs-textonly-tabitem-text-color:ButtonText;--spectrum-tabs-vertical-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:Highlight;forced-color-adjust:none}::slotted(:not([slot])):before{background-color:ButtonFace}::slotted([selected]:not([slot])){color:HighlightText}::slotted([selected]:not([slot])):before{background-color:Highlight;color:HighlightText}:host([emphasized]) #list ::slotted(:not([slot])):before{background-color:ButtonFace}:host([emphasized]) #list ::slotted([selected]:not([slot])){color:HighlightText}:host([emphasized]) #list ::slotted([selected]:not([slot])):before{background-color:Highlight;color:HighlightText}}
|
|
390
|
-
`;
|
|
391
|
-
export default styles;
|
|
389
|
+
`;export default e;
|
|
392
390
|
//# sourceMappingURL=spectrum-tabs.css.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tabs.css.ts"],
|
|
4
4
|
"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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-s-quiet-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-s-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-quiet-textonly-tabitem-icon-gap:var(\n--spectrum-tabs-s-quiet-textonly-tabitem-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-s-quiet-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-85)\n);--spectrum-tabs-quiet-textonly-tabitem-height:var(\n--spectrum-tabs-s-quiet-textonly-tabitem-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-tabs-quiet-textonly-divider-size:var(\n--spectrum-tabs-s-quiet-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:var(\n--spectrum-tabs-s-emphasized-texticon-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:var(\n--spectrum-tabs-s-emphasized-texticon-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-s-emphasized-texticon-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-selection-indicator-color-emphasized)\n);--spectrum-tabs-emphasized-textonly-divider-background-color:var(\n--spectrum-tabs-s-emphasized-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-texticon-tabitem-text-size:var(\n--spectrum-tabs-s-texticon-tabitem-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration:var(\n--spectrum-tabs-s-texticon-tabitem-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease:var(\n--spectrum-tabs-s-texticon-tabitem-selection-indicator-animation-ease,var(--spectrum-global-animation-ease-in-out)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected:var(\n--spectrum-tabs-s-textonly-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected:var(\n--spectrum-tabs-s-textonly-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-s-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:var(\n--spectrum-tabs-s-textonly-tabitem-icon-color-selected-key-focus,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:var(\n--spectrum-tabs-s-textonly-tabitem-text-color-selected-key-focus,var(--spectrum-alias-tabitem-text-color-selected-key-focus)\n);--spectrum-tabs-textonly-tabitem-icon-color-disabled:var(\n--spectrum-tabs-s-textonly-tabitem-icon-color-disabled,var(--spectrum-alias-tabitem-icon-color-disabled)\n);--spectrum-tabs-textonly-tabitem-text-color-disabled:var(\n--spectrum-tabs-s-textonly-tabitem-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);--spectrum-tabs-textonly-tabitem-icon-color:var(\n--spectrum-tabs-s-textonly-tabitem-icon-color,var(--spectrum-alias-tabitem-icon-color-default)\n);--spectrum-tabs-textonly-tabitem-text-color:var(\n--spectrum-tabs-s-textonly-tabitem-text-color,var(--spectrum-alias-tabitem-text-color-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-hover:var(\n--spectrum-tabs-s-textonly-tabitem-icon-color-hover,var(--spectrum-alias-tabitem-icon-color-hover)\n);--spectrum-tabs-textonly-tabitem-text-color-hover:var(\n--spectrum-tabs-s-textonly-tabitem-text-color-hover,var(--spectrum-alias-tabitem-text-color-hover)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:var(\n--spectrum-tabs-s-textonly-tabitem-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-s-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-textonly-tabitem-text-font-weight:var(\n--spectrum-tabs-s-textonly-tabitem-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tabs-textonly-tabitem-focus-ring-size:var(\n--spectrum-tabs-s-textonly-tabitem-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tabs-textonly-tabitem-focus-ring-height:var(\n--spectrum-tabs-s-textonly-tabitem-focus-ring-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-s-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-85)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-radius:var(\n--spectrum-tabs-s-textonly-tabitem-focus-ring-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-tabs-textonly-tabitem-margin-right:var(\n--spectrum-tabs-s-textonly-tabitem-margin-right,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-textonly-divider-border-radius:var(\n--spectrum-tabs-s-textonly-divider-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-tabs-vertical-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-s-vertical-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-s-vertical-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-vertical-textonly-divider-background-color:var(\n--spectrum-tabs-s-vertical-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-s-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-450)\n);--spectrum-tabs-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-s-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tabs-compact-textonly-divider-size:var(\n--spectrum-tabs-s-compact-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-compact-textonly-height:var(\n--spectrum-tabs-s-compact-textonly-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-s-compact-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-s-compact-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-85)\n)}:host([size=m]){--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-m-quiet-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-m-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-quiet-textonly-tabitem-icon-gap:var(\n--spectrum-tabs-m-quiet-textonly-tabitem-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-m-quiet-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-100)\n);--spectrum-tabs-quiet-textonly-tabitem-height:var(\n--spectrum-tabs-m-quiet-textonly-tabitem-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-tabs-quiet-textonly-divider-size:var(\n--spectrum-tabs-m-quiet-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:var(\n--spectrum-tabs-m-emphasized-texticon-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:var(\n--spectrum-tabs-m-emphasized-texticon-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-m-emphasized-texticon-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-selection-indicator-color-emphasized)\n);--spectrum-tabs-emphasized-textonly-divider-background-color:var(\n--spectrum-tabs-m-emphasized-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-texticon-tabitem-text-size:var(\n--spectrum-tabs-m-texticon-tabitem-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration:var(\n--spectrum-tabs-m-texticon-tabitem-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease:var(\n--spectrum-tabs-m-texticon-tabitem-selection-indicator-animation-ease,var(--spectrum-global-animation-ease-in-out)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected:var(\n--spectrum-tabs-m-textonly-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected:var(\n--spectrum-tabs-m-textonly-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-m-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:var(\n--spectrum-tabs-m-textonly-tabitem-icon-color-selected-key-focus,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:var(\n--spectrum-tabs-m-textonly-tabitem-text-color-selected-key-focus,var(--spectrum-alias-tabitem-text-color-selected-key-focus)\n);--spectrum-tabs-textonly-tabitem-icon-color-disabled:var(\n--spectrum-tabs-m-textonly-tabitem-icon-color-disabled,var(--spectrum-alias-tabitem-icon-color-disabled)\n);--spectrum-tabs-textonly-tabitem-text-color-disabled:var(\n--spectrum-tabs-m-textonly-tabitem-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);--spectrum-tabs-textonly-tabitem-icon-color:var(\n--spectrum-tabs-m-textonly-tabitem-icon-color,var(--spectrum-alias-tabitem-icon-color-default)\n);--spectrum-tabs-textonly-tabitem-text-color:var(\n--spectrum-tabs-m-textonly-tabitem-text-color,var(--spectrum-alias-tabitem-text-color-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-hover:var(\n--spectrum-tabs-m-textonly-tabitem-icon-color-hover,var(--spectrum-alias-tabitem-icon-color-hover)\n);--spectrum-tabs-textonly-tabitem-text-color-hover:var(\n--spectrum-tabs-m-textonly-tabitem-text-color-hover,var(--spectrum-alias-tabitem-text-color-hover)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:var(\n--spectrum-tabs-m-textonly-tabitem-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-m-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-textonly-tabitem-text-font-weight:var(\n--spectrum-tabs-m-textonly-tabitem-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tabs-textonly-tabitem-focus-ring-size:var(\n--spectrum-tabs-m-textonly-tabitem-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tabs-textonly-tabitem-focus-ring-height:var(\n--spectrum-tabs-m-textonly-tabitem-focus-ring-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-tabs-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-m-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-100)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-radius:var(\n--spectrum-tabs-m-textonly-tabitem-focus-ring-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-tabs-textonly-tabitem-margin-right:var(\n--spectrum-tabs-m-textonly-tabitem-margin-right,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-textonly-divider-border-radius:var(\n--spectrum-tabs-m-textonly-divider-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-tabs-vertical-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-m-vertical-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-m-vertical-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-vertical-textonly-divider-background-color:var(\n--spectrum-tabs-m-vertical-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-m-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-550)\n);--spectrum-tabs-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-m-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tabs-compact-textonly-divider-size:var(\n--spectrum-tabs-m-compact-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-compact-textonly-height:var(\n--spectrum-tabs-m-compact-textonly-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-m-compact-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-m-compact-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-100)\n)}:host([size=l]){--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-l-quiet-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-l-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-quiet-textonly-tabitem-icon-gap:var(\n--spectrum-tabs-l-quiet-textonly-tabitem-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-l-quiet-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-115)\n);--spectrum-tabs-quiet-textonly-tabitem-height:var(\n--spectrum-tabs-l-quiet-textonly-tabitem-height,var(--spectrum-global-dimension-size-700)\n);--spectrum-tabs-quiet-textonly-divider-size:var(\n--spectrum-tabs-l-quiet-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:var(\n--spectrum-tabs-l-emphasized-texticon-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:var(\n--spectrum-tabs-l-emphasized-texticon-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-l-emphasized-texticon-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-selection-indicator-color-emphasized)\n);--spectrum-tabs-emphasized-textonly-divider-background-color:var(\n--spectrum-tabs-l-emphasized-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-texticon-tabitem-text-size:var(\n--spectrum-tabs-l-texticon-tabitem-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration:var(\n--spectrum-tabs-l-texticon-tabitem-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease:var(\n--spectrum-tabs-l-texticon-tabitem-selection-indicator-animation-ease,var(--spectrum-global-animation-ease-in-out)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected:var(\n--spectrum-tabs-l-textonly-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected:var(\n--spectrum-tabs-l-textonly-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-l-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:var(\n--spectrum-tabs-l-textonly-tabitem-icon-color-selected-key-focus,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:var(\n--spectrum-tabs-l-textonly-tabitem-text-color-selected-key-focus,var(--spectrum-alias-tabitem-text-color-selected-key-focus)\n);--spectrum-tabs-textonly-tabitem-icon-color-disabled:var(\n--spectrum-tabs-l-textonly-tabitem-icon-color-disabled,var(--spectrum-alias-tabitem-icon-color-disabled)\n);--spectrum-tabs-textonly-tabitem-text-color-disabled:var(\n--spectrum-tabs-l-textonly-tabitem-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);--spectrum-tabs-textonly-tabitem-icon-color:var(\n--spectrum-tabs-l-textonly-tabitem-icon-color,var(--spectrum-alias-tabitem-icon-color-default)\n);--spectrum-tabs-textonly-tabitem-text-color:var(\n--spectrum-tabs-l-textonly-tabitem-text-color,var(--spectrum-alias-tabitem-text-color-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-hover:var(\n--spectrum-tabs-l-textonly-tabitem-icon-color-hover,var(--spectrum-alias-tabitem-icon-color-hover)\n);--spectrum-tabs-textonly-tabitem-text-color-hover:var(\n--spectrum-tabs-l-textonly-tabitem-text-color-hover,var(--spectrum-alias-tabitem-text-color-hover)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:var(\n--spectrum-tabs-l-textonly-tabitem-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-l-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-textonly-tabitem-text-font-weight:var(\n--spectrum-tabs-l-textonly-tabitem-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tabs-textonly-tabitem-focus-ring-size:var(\n--spectrum-tabs-l-textonly-tabitem-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tabs-textonly-tabitem-focus-ring-height:var(\n--spectrum-tabs-l-textonly-tabitem-focus-ring-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-tabs-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-l-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-115)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-radius:var(\n--spectrum-tabs-l-textonly-tabitem-focus-ring-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-tabs-textonly-tabitem-margin-right:var(\n--spectrum-tabs-l-textonly-tabitem-margin-right,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-textonly-divider-border-radius:var(\n--spectrum-tabs-l-textonly-divider-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-tabs-vertical-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-l-vertical-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-l-vertical-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-vertical-textonly-divider-background-color:var(\n--spectrum-tabs-l-vertical-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-l-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-650)\n);--spectrum-tabs-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-l-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tabs-compact-textonly-divider-size:var(\n--spectrum-tabs-l-compact-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-compact-textonly-height:var(\n--spectrum-tabs-l-compact-textonly-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-l-compact-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-l-compact-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-115)\n)}:host([size=xl]){--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-xl-quiet-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-xl-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-quiet-textonly-tabitem-icon-gap:var(\n--spectrum-tabs-xl-quiet-textonly-tabitem-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-xl-quiet-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-125)\n);--spectrum-tabs-quiet-textonly-tabitem-height:var(\n--spectrum-tabs-xl-quiet-textonly-tabitem-height,var(--spectrum-global-dimension-size-800)\n);--spectrum-tabs-quiet-textonly-divider-size:var(\n--spectrum-tabs-xl-quiet-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:var(\n--spectrum-tabs-xl-emphasized-texticon-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:var(\n--spectrum-tabs-xl-emphasized-texticon-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-xl-emphasized-texticon-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-selection-indicator-color-emphasized)\n);--spectrum-tabs-emphasized-textonly-divider-background-color:var(\n--spectrum-tabs-xl-emphasized-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-texticon-tabitem-text-size:var(\n--spectrum-tabs-xl-texticon-tabitem-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration:var(\n--spectrum-tabs-xl-texticon-tabitem-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease:var(\n--spectrum-tabs-xl-texticon-tabitem-selection-indicator-animation-ease,var(--spectrum-global-animation-ease-in-out)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected:var(\n--spectrum-tabs-xl-textonly-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected:var(\n--spectrum-tabs-xl-textonly-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-xl-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:var(\n--spectrum-tabs-xl-textonly-tabitem-icon-color-selected-key-focus,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:var(\n--spectrum-tabs-xl-textonly-tabitem-text-color-selected-key-focus,var(--spectrum-alias-tabitem-text-color-selected-key-focus)\n);--spectrum-tabs-textonly-tabitem-icon-color-disabled:var(\n--spectrum-tabs-xl-textonly-tabitem-icon-color-disabled,var(--spectrum-alias-tabitem-icon-color-disabled)\n);--spectrum-tabs-textonly-tabitem-text-color-disabled:var(\n--spectrum-tabs-xl-textonly-tabitem-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);--spectrum-tabs-textonly-tabitem-icon-color:var(\n--spectrum-tabs-xl-textonly-tabitem-icon-color,var(--spectrum-alias-tabitem-icon-color-default)\n);--spectrum-tabs-textonly-tabitem-text-color:var(\n--spectrum-tabs-xl-textonly-tabitem-text-color,var(--spectrum-alias-tabitem-text-color-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-hover:var(\n--spectrum-tabs-xl-textonly-tabitem-icon-color-hover,var(--spectrum-alias-tabitem-icon-color-hover)\n);--spectrum-tabs-textonly-tabitem-text-color-hover:var(\n--spectrum-tabs-xl-textonly-tabitem-text-color-hover,var(--spectrum-alias-tabitem-text-color-hover)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:var(\n--spectrum-tabs-xl-textonly-tabitem-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-xl-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-textonly-tabitem-text-font-weight:var(\n--spectrum-tabs-xl-textonly-tabitem-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tabs-textonly-tabitem-focus-ring-size:var(\n--spectrum-tabs-xl-textonly-tabitem-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tabs-textonly-tabitem-focus-ring-height:var(\n--spectrum-tabs-xl-textonly-tabitem-focus-ring-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-tabs-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-xl-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-125)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-radius:var(\n--spectrum-tabs-xl-textonly-tabitem-focus-ring-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-tabs-textonly-tabitem-margin-right:var(\n--spectrum-tabs-xl-textonly-tabitem-margin-right,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-textonly-divider-border-radius:var(\n--spectrum-tabs-xl-textonly-divider-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-tabs-vertical-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-xl-vertical-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-xl-vertical-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-vertical-textonly-divider-background-color:var(\n--spectrum-tabs-xl-vertical-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-xl-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-750)\n);--spectrum-tabs-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-xl-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-tabs-compact-textonly-divider-size:var(\n--spectrum-tabs-xl-compact-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-compact-textonly-height:var(\n--spectrum-tabs-xl-compact-textonly-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-xl-compact-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-xl-compact-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-125)\n)}:host{--spectrum-tabs-compact-item-height:calc(var(--spectrum-tabs-compact-textonly-height) - var(--spectrum-tabs-compact-textonly-divider-size))}#list{display:flex;margin:0;padding-bottom:0;padding-top:0;position:relative;vertical-align:top;z-index:0}:host([dir=ltr]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]) #selection-indicator{left:0}:host([dir=rtl]) #selection-indicator{right:0}#selection-indicator{border-radius:var(--spectrum-tabs-textonly-divider-border-radius);position:absolute;transform-origin:top left;transition:transform var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) var(--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease);z-index:0}:host([compact]) ::slotted(:not([slot])){height:var(\n--spectrum-tabs-compact-item-height\n);line-height:var(--spectrum-tabs-compact-item-height)}:host([direction^=horizontal]) #list{align-items:center;border-bottom:var(--spectrum-tabs-quiet-textonly-divider-size) solid}:host([direction^=horizontal]) ::slotted(:not([slot])){vertical-align:top}:host([dir=ltr][direction^=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-left:var(\n--spectrum-tabs-textonly-tabitem-margin-right\n)}:host([dir=rtl][direction^=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-right:var(\n--spectrum-tabs-textonly-tabitem-margin-right\n)}:host([direction^=horizontal]) #selection-indicator{bottom:0;bottom:calc(var(--spectrum-tabs-quiet-textonly-divider-size)*-1);height:var(--spectrum-tabs-quiet-textonly-divider-size);position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height)}:host([quiet]) #list{display:inline-flex}:host([dir=ltr][direction^=vertical]) #list{border-left:var(--spectrum-tabs-quiet-textonly-divider-size) solid}:host([dir=rtl][direction^=vertical]) #list{border-right:var(--spectrum-tabs-quiet-textonly-divider-size) solid}:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction^=vertical]) ::slotted(:not([slot])){margin-left:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([dir=rtl][direction^=vertical]) ::slotted(:not([slot])){margin-right:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([direction^=vertical]) ::slotted(:not([slot])){height:var(\n--spectrum-tabs-vertical-textonly-tabitem-height\n);line-height:var(--spectrum-tabs-vertical-textonly-tabitem-height);margin-bottom:var(--spectrum-tabs-vertical-textonly-tabitem-gap);padding-bottom:0;padding-left:var(\n--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x\n);padding-right:var(\n--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x\n);padding-top:0}:host([dir=ltr][direction^=vertical]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=rtl][direction^=vertical]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=ltr][direction^=vertical]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=rtl][direction^=vertical]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([direction^=vertical]) .spectrum-Icon{height:var(\n--spectrum-tabs-vertical-textonly-tabitem-height\n);line-height:var(--spectrum-tabs-vertical-textonly-tabitem-height)}:host([direction^=vertical][compact]) #list ::slotted(:not([slot])){height:var(\n--spectrum-tabs-compact-vertical-textonly-tabitem-height\n);line-height:var(--spectrum-tabs-compact-vertical-textonly-tabitem-height);margin-bottom:var(--spectrum-tabs-compact-vertical-textonly-tabitem-gap)}:host([dir=ltr][direction^=vertical]) #selection-indicator{left:0}:host([dir=rtl][direction^=vertical]) #selection-indicator{right:0}:host([dir=ltr][direction^=vertical]) #selection-indicator{left:calc(var(--spectrum-tabs-quiet-textonly-divider-size)*-1)}:host([dir=rtl][direction^=vertical]) #selection-indicator{right:calc(var(--spectrum-tabs-quiet-textonly-divider-size)*-1)}:host([direction^=vertical]) #selection-indicator{position:absolute;width:var(--spectrum-tabs-quiet-textonly-divider-size)}#list{border-bottom-color:var(\n--spectrum-tabs-textonly-divider-background-color\n)}:host([dir=ltr][direction^=vertical]) #list{border-left-color:var(\n--spectrum-tabs-vertical-textonly-divider-background-color\n)}:host([dir=rtl][direction^=vertical]) #list{border-right-color:var(\n--spectrum-tabs-vertical-textonly-divider-background-color\n)}#selection-indicator{background-color:var(\n--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([emphasized]) #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}:host([emphasized]) ::slotted([selected]:not([slot])){color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected\n)}:host([emphasized]) ::slotted([selected]:not([slot])) .spectrum-Icon{color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected\n)}:host([quiet]) #list{border-bottom-color:var(\n--spectrum-tabs-quiet-textonly-divider-background-color\n)}:host([quiet]) #selection-indicator{background-color:var(\n--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([quiet][emphasized]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}:host([dir=ltr][direction^=vertical][compact]) #list,:host([dir=ltr][direction^=vertical][quiet]) #list{border-left-color:var(\n--spectrum-tabs-vertical-quiet-textonly-divider-background-color\n)}:host([dir=rtl][direction^=vertical][compact]) #list,:host([dir=rtl][direction^=vertical][quiet]) #list{border-right-color:var(\n--spectrum-tabs-vertical-quiet-textonly-divider-background-color\n)}:host([direction^=vertical][compact]) #list #selection-indicator,:host([direction^=vertical][quiet]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([dir=ltr][direction^=vertical][emphasized]) #list{border-left-color:var(\n--spectrum-tabs-emphasized-textonly-divider-background-color\n)}:host([dir=rtl][direction^=vertical][emphasized]) #list{border-right-color:var(\n--spectrum-tabs-emphasized-textonly-divider-background-color\n)}:host([direction^=vertical][emphasized]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}@media (forced-colors:active){#list{--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:HighlightText;--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:HighlightText;--spectrum-tabs-emphasized-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-textonly-divider-background-color:transparent;--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-disabled:GrayText;--spectrum-tabs-textonly-tabitem-icon-color-hover:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-selected:HighlightText;--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-textonly-tabitem-text-color-disabled:GrayText;--spectrum-tabs-textonly-tabitem-text-color-hover:ButtonText;--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-text-color-selected:HighlightText;--spectrum-tabs-textonly-tabitem-text-color:ButtonText;--spectrum-tabs-vertical-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:Highlight;forced-color-adjust:none}::slotted(:not([slot])):before{background-color:ButtonFace}::slotted([selected]:not([slot])){color:HighlightText}::slotted([selected]:not([slot])):before{background-color:Highlight;color:HighlightText}:host([emphasized]) #list ::slotted(:not([slot])):before{background-color:ButtonFace}:host([emphasized]) #list ::slotted([selected]:not([slot])){color:HighlightText}:host([emphasized]) #list ::slotted([selected]:not([slot])):before{background-color:Highlight;color:HighlightText}}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;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;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;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;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;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;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;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;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;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;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;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;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;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;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqYf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/tab-panel.css.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as s}from"@spectrum-web-components/base";const e=s`
|
|
3
2
|
:host{display:inline-flex}:host(:not([selected])){display:none}
|
|
4
|
-
`;
|
|
5
|
-
export default styles;
|
|
3
|
+
`;export default e;
|
|
6
4
|
//# sourceMappingURL=tab-panel.css.js.map
|
package/src/tab-panel.css.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tab-panel.css.ts"],
|
|
4
4
|
"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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{display:inline-flex}:host(:not([selected])){display:none}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA,EAGf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/tab.css.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as t}from"@spectrum-web-components/base";const e=t`
|
|
3
2
|
: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(
|
|
4
3
|
--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration
|
|
5
4
|
) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(
|
|
@@ -49,6 +48,5 @@ var(--spectrum-alias-single-line-height)
|
|
|
49
48
|
);font-weight:var(
|
|
50
49
|
--spectrum-tabs-text-font-weight,var(--spectrum-alias-body-text-font-weight)
|
|
51
50
|
);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}}
|
|
52
|
-
`;
|
|
53
|
-
export default styles;
|
|
51
|
+
`;export default e;
|
|
54
52
|
//# sourceMappingURL=tab.css.js.map
|
package/src/tab.css.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tab.css.ts"],
|
|
4
4
|
"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 { 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(\n--spectrum-tabs-quiet-textonly-tabitem-height\n)}:host([dir=ltr]) slot[name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[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(\n--spectrum-tabs-textonly-tabitem-text-color\n)}::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color\n)}:host(:hover){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-hover\n)}:host(:hover) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-hover\n)}:host([selected]){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected\n)}:host([selected]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected\n)}:host(.focus-visible){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus\n)}:host(:focus-visible){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected-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(\n--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus\n)}:host(:focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus\n)}:host([disabled]){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-disabled\n)}:host([disabled]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-disabled\n)}: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;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmDf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/tabs.css.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as t}from"@spectrum-web-components/base";const e=t`
|
|
3
2
|
:host([size=s]){--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:var(
|
|
4
3
|
--spectrum-tabs-s-quiet-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)
|
|
5
4
|
);--spectrum-tabs-quiet-textonly-divider-background-color:var(
|
|
@@ -407,6 +406,5 @@ const styles = css`
|
|
|
407
406
|
) solid;border-left-color:var(
|
|
408
407
|
--spectrum-tabs-vertical-rule-color,var(--spectrum-global-color-gray-200)
|
|
409
408
|
);border-right:0}:host([dir=rtl][direction=vertical-right]) #selection-indicator{left:0;right:auto}#selection-indicator.first-position{transition:none}:host([dir=ltr][direction=vertical-right]) ::slotted(:not([slot])){margin-left:0;margin-right:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([dir=rtl][direction=vertical-right]) ::slotted(:not([slot])){margin-left:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2);margin-right:0}
|
|
410
|
-
`;
|
|
411
|
-
export default styles;
|
|
409
|
+
`;export default e;
|
|
412
410
|
//# sourceMappingURL=tabs.css.js.map
|
package/src/tabs.css.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tabs.css.ts"],
|
|
4
4
|
"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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-s-quiet-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-s-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-quiet-textonly-tabitem-icon-gap:var(\n--spectrum-tabs-s-quiet-textonly-tabitem-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-s-quiet-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-85)\n);--spectrum-tabs-quiet-textonly-tabitem-height:var(\n--spectrum-tabs-s-quiet-textonly-tabitem-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-tabs-quiet-textonly-divider-size:var(\n--spectrum-tabs-s-quiet-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:var(\n--spectrum-tabs-s-emphasized-texticon-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:var(\n--spectrum-tabs-s-emphasized-texticon-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-s-emphasized-texticon-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-selection-indicator-color-emphasized)\n);--spectrum-tabs-emphasized-textonly-divider-background-color:var(\n--spectrum-tabs-s-emphasized-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-texticon-tabitem-text-size:var(\n--spectrum-tabs-s-texticon-tabitem-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration:var(\n--spectrum-tabs-s-texticon-tabitem-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease:var(\n--spectrum-tabs-s-texticon-tabitem-selection-indicator-animation-ease,var(--spectrum-global-animation-ease-in-out)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected:var(\n--spectrum-tabs-s-textonly-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected:var(\n--spectrum-tabs-s-textonly-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-s-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:var(\n--spectrum-tabs-s-textonly-tabitem-icon-color-selected-key-focus,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:var(\n--spectrum-tabs-s-textonly-tabitem-text-color-selected-key-focus,var(--spectrum-alias-tabitem-text-color-selected-key-focus)\n);--spectrum-tabs-textonly-tabitem-icon-color-disabled:var(\n--spectrum-tabs-s-textonly-tabitem-icon-color-disabled,var(--spectrum-alias-tabitem-icon-color-disabled)\n);--spectrum-tabs-textonly-tabitem-text-color-disabled:var(\n--spectrum-tabs-s-textonly-tabitem-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);--spectrum-tabs-textonly-tabitem-icon-color:var(\n--spectrum-tabs-s-textonly-tabitem-icon-color,var(--spectrum-alias-tabitem-icon-color-default)\n);--spectrum-tabs-textonly-tabitem-text-color:var(\n--spectrum-tabs-s-textonly-tabitem-text-color,var(--spectrum-alias-tabitem-text-color-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-hover:var(\n--spectrum-tabs-s-textonly-tabitem-icon-color-hover,var(--spectrum-alias-tabitem-icon-color-hover)\n);--spectrum-tabs-textonly-tabitem-text-color-hover:var(\n--spectrum-tabs-s-textonly-tabitem-text-color-hover,var(--spectrum-alias-tabitem-text-color-hover)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:var(\n--spectrum-tabs-s-textonly-tabitem-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-s-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-textonly-tabitem-text-font-weight:var(\n--spectrum-tabs-s-textonly-tabitem-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tabs-textonly-tabitem-focus-ring-size:var(\n--spectrum-tabs-s-textonly-tabitem-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tabs-textonly-tabitem-focus-ring-height:var(\n--spectrum-tabs-s-textonly-tabitem-focus-ring-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-s-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-85)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-radius:var(\n--spectrum-tabs-s-textonly-tabitem-focus-ring-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-tabs-textonly-tabitem-margin-right:var(\n--spectrum-tabs-s-textonly-tabitem-margin-right,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-textonly-divider-border-radius:var(\n--spectrum-tabs-s-textonly-divider-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-tabs-vertical-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-s-vertical-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-s-vertical-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-vertical-textonly-divider-background-color:var(\n--spectrum-tabs-s-vertical-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-s-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-450)\n);--spectrum-tabs-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-s-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tabs-compact-textonly-divider-size:var(\n--spectrum-tabs-s-compact-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-compact-textonly-height:var(\n--spectrum-tabs-s-compact-textonly-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-s-compact-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-s-compact-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-85)\n)}:host([size=m]){--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-m-quiet-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-m-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-quiet-textonly-tabitem-icon-gap:var(\n--spectrum-tabs-m-quiet-textonly-tabitem-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-m-quiet-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-100)\n);--spectrum-tabs-quiet-textonly-tabitem-height:var(\n--spectrum-tabs-m-quiet-textonly-tabitem-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-tabs-quiet-textonly-divider-size:var(\n--spectrum-tabs-m-quiet-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:var(\n--spectrum-tabs-m-emphasized-texticon-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:var(\n--spectrum-tabs-m-emphasized-texticon-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-m-emphasized-texticon-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-selection-indicator-color-emphasized)\n);--spectrum-tabs-emphasized-textonly-divider-background-color:var(\n--spectrum-tabs-m-emphasized-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-texticon-tabitem-text-size:var(\n--spectrum-tabs-m-texticon-tabitem-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration:var(\n--spectrum-tabs-m-texticon-tabitem-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease:var(\n--spectrum-tabs-m-texticon-tabitem-selection-indicator-animation-ease,var(--spectrum-global-animation-ease-in-out)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected:var(\n--spectrum-tabs-m-textonly-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected:var(\n--spectrum-tabs-m-textonly-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-m-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:var(\n--spectrum-tabs-m-textonly-tabitem-icon-color-selected-key-focus,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:var(\n--spectrum-tabs-m-textonly-tabitem-text-color-selected-key-focus,var(--spectrum-alias-tabitem-text-color-selected-key-focus)\n);--spectrum-tabs-textonly-tabitem-icon-color-disabled:var(\n--spectrum-tabs-m-textonly-tabitem-icon-color-disabled,var(--spectrum-alias-tabitem-icon-color-disabled)\n);--spectrum-tabs-textonly-tabitem-text-color-disabled:var(\n--spectrum-tabs-m-textonly-tabitem-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);--spectrum-tabs-textonly-tabitem-icon-color:var(\n--spectrum-tabs-m-textonly-tabitem-icon-color,var(--spectrum-alias-tabitem-icon-color-default)\n);--spectrum-tabs-textonly-tabitem-text-color:var(\n--spectrum-tabs-m-textonly-tabitem-text-color,var(--spectrum-alias-tabitem-text-color-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-hover:var(\n--spectrum-tabs-m-textonly-tabitem-icon-color-hover,var(--spectrum-alias-tabitem-icon-color-hover)\n);--spectrum-tabs-textonly-tabitem-text-color-hover:var(\n--spectrum-tabs-m-textonly-tabitem-text-color-hover,var(--spectrum-alias-tabitem-text-color-hover)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:var(\n--spectrum-tabs-m-textonly-tabitem-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-m-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-textonly-tabitem-text-font-weight:var(\n--spectrum-tabs-m-textonly-tabitem-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tabs-textonly-tabitem-focus-ring-size:var(\n--spectrum-tabs-m-textonly-tabitem-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tabs-textonly-tabitem-focus-ring-height:var(\n--spectrum-tabs-m-textonly-tabitem-focus-ring-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-tabs-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-m-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-100)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-radius:var(\n--spectrum-tabs-m-textonly-tabitem-focus-ring-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-tabs-textonly-tabitem-margin-right:var(\n--spectrum-tabs-m-textonly-tabitem-margin-right,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-textonly-divider-border-radius:var(\n--spectrum-tabs-m-textonly-divider-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-tabs-vertical-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-m-vertical-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-m-vertical-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-vertical-textonly-divider-background-color:var(\n--spectrum-tabs-m-vertical-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-m-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-550)\n);--spectrum-tabs-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-m-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tabs-compact-textonly-divider-size:var(\n--spectrum-tabs-m-compact-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-compact-textonly-height:var(\n--spectrum-tabs-m-compact-textonly-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-m-compact-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-m-compact-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-100)\n)}:host([size=l]){--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-l-quiet-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-l-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-quiet-textonly-tabitem-icon-gap:var(\n--spectrum-tabs-l-quiet-textonly-tabitem-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-l-quiet-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-115)\n);--spectrum-tabs-quiet-textonly-tabitem-height:var(\n--spectrum-tabs-l-quiet-textonly-tabitem-height,var(--spectrum-global-dimension-size-700)\n);--spectrum-tabs-quiet-textonly-divider-size:var(\n--spectrum-tabs-l-quiet-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:var(\n--spectrum-tabs-l-emphasized-texticon-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:var(\n--spectrum-tabs-l-emphasized-texticon-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-l-emphasized-texticon-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-selection-indicator-color-emphasized)\n);--spectrum-tabs-emphasized-textonly-divider-background-color:var(\n--spectrum-tabs-l-emphasized-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-texticon-tabitem-text-size:var(\n--spectrum-tabs-l-texticon-tabitem-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration:var(\n--spectrum-tabs-l-texticon-tabitem-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease:var(\n--spectrum-tabs-l-texticon-tabitem-selection-indicator-animation-ease,var(--spectrum-global-animation-ease-in-out)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected:var(\n--spectrum-tabs-l-textonly-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected:var(\n--spectrum-tabs-l-textonly-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-l-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:var(\n--spectrum-tabs-l-textonly-tabitem-icon-color-selected-key-focus,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:var(\n--spectrum-tabs-l-textonly-tabitem-text-color-selected-key-focus,var(--spectrum-alias-tabitem-text-color-selected-key-focus)\n);--spectrum-tabs-textonly-tabitem-icon-color-disabled:var(\n--spectrum-tabs-l-textonly-tabitem-icon-color-disabled,var(--spectrum-alias-tabitem-icon-color-disabled)\n);--spectrum-tabs-textonly-tabitem-text-color-disabled:var(\n--spectrum-tabs-l-textonly-tabitem-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);--spectrum-tabs-textonly-tabitem-icon-color:var(\n--spectrum-tabs-l-textonly-tabitem-icon-color,var(--spectrum-alias-tabitem-icon-color-default)\n);--spectrum-tabs-textonly-tabitem-text-color:var(\n--spectrum-tabs-l-textonly-tabitem-text-color,var(--spectrum-alias-tabitem-text-color-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-hover:var(\n--spectrum-tabs-l-textonly-tabitem-icon-color-hover,var(--spectrum-alias-tabitem-icon-color-hover)\n);--spectrum-tabs-textonly-tabitem-text-color-hover:var(\n--spectrum-tabs-l-textonly-tabitem-text-color-hover,var(--spectrum-alias-tabitem-text-color-hover)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:var(\n--spectrum-tabs-l-textonly-tabitem-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-l-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-textonly-tabitem-text-font-weight:var(\n--spectrum-tabs-l-textonly-tabitem-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tabs-textonly-tabitem-focus-ring-size:var(\n--spectrum-tabs-l-textonly-tabitem-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tabs-textonly-tabitem-focus-ring-height:var(\n--spectrum-tabs-l-textonly-tabitem-focus-ring-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-tabs-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-l-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-115)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-radius:var(\n--spectrum-tabs-l-textonly-tabitem-focus-ring-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-tabs-textonly-tabitem-margin-right:var(\n--spectrum-tabs-l-textonly-tabitem-margin-right,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-textonly-divider-border-radius:var(\n--spectrum-tabs-l-textonly-divider-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-tabs-vertical-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-l-vertical-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-l-vertical-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-vertical-textonly-divider-background-color:var(\n--spectrum-tabs-l-vertical-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-l-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-650)\n);--spectrum-tabs-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-l-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tabs-compact-textonly-divider-size:var(\n--spectrum-tabs-l-compact-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-compact-textonly-height:var(\n--spectrum-tabs-l-compact-textonly-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-l-compact-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-l-compact-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-115)\n)}:host([size=xl]){--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-xl-quiet-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-xl-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-quiet-textonly-tabitem-icon-gap:var(\n--spectrum-tabs-xl-quiet-textonly-tabitem-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-xl-quiet-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-125)\n);--spectrum-tabs-quiet-textonly-tabitem-height:var(\n--spectrum-tabs-xl-quiet-textonly-tabitem-height,var(--spectrum-global-dimension-size-800)\n);--spectrum-tabs-quiet-textonly-divider-size:var(\n--spectrum-tabs-xl-quiet-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:var(\n--spectrum-tabs-xl-emphasized-texticon-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:var(\n--spectrum-tabs-xl-emphasized-texticon-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-emphasized-selected-default)\n);--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-xl-emphasized-texticon-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-selection-indicator-color-emphasized)\n);--spectrum-tabs-emphasized-textonly-divider-background-color:var(\n--spectrum-tabs-xl-emphasized-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-texticon-tabitem-text-size:var(\n--spectrum-tabs-xl-texticon-tabitem-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration:var(\n--spectrum-tabs-xl-texticon-tabitem-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease:var(\n--spectrum-tabs-xl-texticon-tabitem-selection-indicator-animation-ease,var(--spectrum-global-animation-ease-in-out)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected:var(\n--spectrum-tabs-xl-textonly-tabitem-icon-color-selected,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected:var(\n--spectrum-tabs-xl-textonly-tabitem-text-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-xl-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:var(\n--spectrum-tabs-xl-textonly-tabitem-icon-color-selected-key-focus,var(--spectrum-alias-tabitem-icon-color-selected)\n);--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:var(\n--spectrum-tabs-xl-textonly-tabitem-text-color-selected-key-focus,var(--spectrum-alias-tabitem-text-color-selected-key-focus)\n);--spectrum-tabs-textonly-tabitem-icon-color-disabled:var(\n--spectrum-tabs-xl-textonly-tabitem-icon-color-disabled,var(--spectrum-alias-tabitem-icon-color-disabled)\n);--spectrum-tabs-textonly-tabitem-text-color-disabled:var(\n--spectrum-tabs-xl-textonly-tabitem-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);--spectrum-tabs-textonly-tabitem-icon-color:var(\n--spectrum-tabs-xl-textonly-tabitem-icon-color,var(--spectrum-alias-tabitem-icon-color-default)\n);--spectrum-tabs-textonly-tabitem-text-color:var(\n--spectrum-tabs-xl-textonly-tabitem-text-color,var(--spectrum-alias-tabitem-text-color-default)\n);--spectrum-tabs-textonly-tabitem-icon-color-hover:var(\n--spectrum-tabs-xl-textonly-tabitem-icon-color-hover,var(--spectrum-alias-tabitem-icon-color-hover)\n);--spectrum-tabs-textonly-tabitem-text-color-hover:var(\n--spectrum-tabs-xl-textonly-tabitem-text-color-hover,var(--spectrum-alias-tabitem-text-color-hover)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:var(\n--spectrum-tabs-xl-textonly-tabitem-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-xl-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-textonly-tabitem-text-font-weight:var(\n--spectrum-tabs-xl-textonly-tabitem-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tabs-textonly-tabitem-focus-ring-size:var(\n--spectrum-tabs-xl-textonly-tabitem-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tabs-textonly-tabitem-focus-ring-height:var(\n--spectrum-tabs-xl-textonly-tabitem-focus-ring-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-tabs-textonly-tabitem-focus-ring-padding-x:var(\n--spectrum-tabs-xl-textonly-tabitem-focus-ring-padding-x,var(--spectrum-global-dimension-size-125)\n);--spectrum-tabs-textonly-tabitem-focus-ring-border-radius:var(\n--spectrum-tabs-xl-textonly-tabitem-focus-ring-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-tabs-textonly-tabitem-margin-right:var(\n--spectrum-tabs-xl-textonly-tabitem-margin-right,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-textonly-divider-border-radius:var(\n--spectrum-tabs-xl-textonly-divider-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-tabs-vertical-quiet-textonly-divider-background-color:var(\n--spectrum-tabs-xl-vertical-quiet-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-quiet)\n);--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:var(\n--spectrum-tabs-xl-vertical-textonly-tabitem-selection-indicator-background-color-selected,var(--spectrum-alias-tabitem-text-color-selected-default)\n);--spectrum-tabs-vertical-textonly-divider-background-color:var(\n--spectrum-tabs-xl-vertical-textonly-divider-background-color,var(--spectrum-alias-tabs-divider-background-color-default)\n);--spectrum-tabs-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-xl-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-750)\n);--spectrum-tabs-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-xl-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-tabs-compact-textonly-divider-size:var(\n--spectrum-tabs-xl-compact-textonly-divider-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-compact-textonly-height:var(\n--spectrum-tabs-xl-compact-textonly-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-height:var(\n--spectrum-tabs-xl-compact-vertical-textonly-tabitem-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-tabs-compact-vertical-textonly-tabitem-gap:var(\n--spectrum-tabs-xl-compact-vertical-textonly-tabitem-gap,var(--spectrum-global-dimension-size-125)\n)}:host{--spectrum-tabs-compact-item-height:calc(var(--spectrum-tabs-compact-textonly-height) - var(--spectrum-tabs-compact-textonly-divider-size))}#list{display:flex;margin:0;padding-bottom:0;padding-top:0;position:relative;vertical-align:top;z-index:0}:host([dir=ltr]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]) #selection-indicator{left:0}:host([dir=rtl]) #selection-indicator{right:0}#selection-indicator{border-radius:var(--spectrum-tabs-textonly-divider-border-radius);position:absolute;transform-origin:top left;transition:transform var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) var(--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease);z-index:0}:host([compact]) ::slotted(:not([slot])){height:var(\n--spectrum-tabs-compact-item-height\n);line-height:var(--spectrum-tabs-compact-item-height)}:host([direction^=horizontal]) #list{align-items:center;border-bottom:var(--spectrum-tabs-quiet-textonly-divider-size) solid}:host([direction^=horizontal]) ::slotted(:not([slot])){vertical-align:top}:host([dir=ltr][direction^=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-left:var(\n--spectrum-tabs-textonly-tabitem-margin-right\n)}:host([dir=rtl][direction^=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-right:var(\n--spectrum-tabs-textonly-tabitem-margin-right\n)}:host([direction^=horizontal]) #selection-indicator{bottom:0;bottom:calc(var(--spectrum-tabs-quiet-textonly-divider-size)*-1);height:var(--spectrum-tabs-quiet-textonly-divider-size);position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height)}:host([quiet]) #list{display:inline-flex}:host([dir=ltr][direction^=vertical]) #list{border-left:var(--spectrum-tabs-quiet-textonly-divider-size) solid}:host([dir=rtl][direction^=vertical]) #list{border-right:var(--spectrum-tabs-quiet-textonly-divider-size) solid}:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction^=vertical]) ::slotted(:not([slot])){margin-left:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([dir=rtl][direction^=vertical]) ::slotted(:not([slot])){margin-right:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([direction^=vertical]) ::slotted(:not([slot])){height:var(\n--spectrum-tabs-vertical-textonly-tabitem-height\n);line-height:var(--spectrum-tabs-vertical-textonly-tabitem-height);margin-bottom:var(--spectrum-tabs-vertical-textonly-tabitem-gap);padding-bottom:0;padding-left:var(\n--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x\n);padding-right:var(\n--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x\n);padding-top:0}:host([dir=ltr][direction^=vertical]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=rtl][direction^=vertical]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=ltr][direction^=vertical]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=rtl][direction^=vertical]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([direction^=vertical]) .spectrum-Icon{height:var(\n--spectrum-tabs-vertical-textonly-tabitem-height\n);line-height:var(--spectrum-tabs-vertical-textonly-tabitem-height)}:host([direction^=vertical][compact]) #list ::slotted(:not([slot])){height:var(\n--spectrum-tabs-compact-vertical-textonly-tabitem-height\n);line-height:var(--spectrum-tabs-compact-vertical-textonly-tabitem-height);margin-bottom:var(--spectrum-tabs-compact-vertical-textonly-tabitem-gap)}:host([dir=ltr][direction^=vertical]) #selection-indicator{left:0}:host([dir=rtl][direction^=vertical]) #selection-indicator{right:0}:host([dir=ltr][direction^=vertical]) #selection-indicator{left:calc(var(--spectrum-tabs-quiet-textonly-divider-size)*-1)}:host([dir=rtl][direction^=vertical]) #selection-indicator{right:calc(var(--spectrum-tabs-quiet-textonly-divider-size)*-1)}:host([direction^=vertical]) #selection-indicator{position:absolute;width:var(--spectrum-tabs-quiet-textonly-divider-size)}#list{border-bottom-color:var(\n--spectrum-tabs-textonly-divider-background-color\n)}:host([dir=ltr][direction^=vertical]) #list{border-left-color:var(\n--spectrum-tabs-vertical-textonly-divider-background-color\n)}:host([dir=rtl][direction^=vertical]) #list{border-right-color:var(\n--spectrum-tabs-vertical-textonly-divider-background-color\n)}#selection-indicator{background-color:var(\n--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([emphasized]) #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}:host([emphasized]) ::slotted([selected]:not([slot])){color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected\n)}:host([emphasized]) ::slotted([selected]:not([slot])) .spectrum-Icon{color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected\n)}:host([quiet]) #list{border-bottom-color:var(\n--spectrum-tabs-quiet-textonly-divider-background-color\n)}:host([quiet]) #selection-indicator{background-color:var(\n--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([quiet][emphasized]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}:host([dir=ltr][direction^=vertical][compact]) #list,:host([dir=ltr][direction^=vertical][quiet]) #list{border-left-color:var(\n--spectrum-tabs-vertical-quiet-textonly-divider-background-color\n)}:host([dir=rtl][direction^=vertical][compact]) #list,:host([dir=rtl][direction^=vertical][quiet]) #list{border-right-color:var(\n--spectrum-tabs-vertical-quiet-textonly-divider-background-color\n)}:host([direction^=vertical][compact]) #list #selection-indicator,:host([direction^=vertical][quiet]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([dir=ltr][direction^=vertical][emphasized]) #list{border-left-color:var(\n--spectrum-tabs-emphasized-textonly-divider-background-color\n)}:host([dir=rtl][direction^=vertical][emphasized]) #list{border-right-color:var(\n--spectrum-tabs-emphasized-textonly-divider-background-color\n)}:host([direction^=vertical][emphasized]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}@media (forced-colors:active){#list{--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:HighlightText;--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:HighlightText;--spectrum-tabs-emphasized-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-textonly-divider-background-color:transparent;--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-disabled:GrayText;--spectrum-tabs-textonly-tabitem-icon-color-hover:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-selected:HighlightText;--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-textonly-tabitem-text-color-disabled:GrayText;--spectrum-tabs-textonly-tabitem-text-color-hover:ButtonText;--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-text-color-selected:HighlightText;--spectrum-tabs-textonly-tabitem-text-color:ButtonText;--spectrum-tabs-vertical-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:Highlight;forced-color-adjust:none}::slotted(:not([slot])):before{background-color:ButtonFace}::slotted([selected]:not([slot])){color:HighlightText}::slotted([selected]:not([slot])):before{background-color:Highlight;color:HighlightText}:host([emphasized]) #list ::slotted(:not([slot])):before{background-color:ButtonFace}:host([emphasized]) #list ::slotted([selected]:not([slot])){color:HighlightText}:host([emphasized]) #list ::slotted([selected]:not([slot])):before{background-color:Highlight;color:HighlightText}}:host{display:grid;grid-template-columns:100%}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([direction=vertical]){gap:var(--spectrum-tabs-textonly-tabitem-focus-ring-size)}#selection-indicator{border-radius:0;z-index:1}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host(:not([direction^=vertical])) #selection-indicator{bottom:0}:host([dir=ltr][direction=vertical]) #selection-indicator,:host([dir=rtl][direction=vertical-right]) #selection-indicator{left:0}:host([dir=ltr][direction=vertical-right]) #selection-indicator,:host([dir=rtl][direction=vertical]) #selection-indicator{left:auto;right:0}:host([disabled]) #selection-indicator{background-color:var(\n--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted(sp-tab){color:var(\n--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}#list{--sp-tabs-list-background-direction:top;--sp-tabs-list-background-color:transparent;background:linear-gradient(to var(--sp-tabs-list-background-direction),var(--sp-tabs-list-background-color) 0,var(--sp-tabs-list-background-color) var(--spectrum-tabs-quiet-textonly-divider-size),transparent var(--spectrum-tabs-quiet-textonly-divider-size));border:none!important;justify-content:var(--swc-tabs-list-justify-content)}:host(:not([direction^=vertical])) #list{padding-bottom:var(--spectrum-tabs-quiet-textonly-divider-size)}:host(:not([quiet])) #list{--sp-tabs-list-background-color:var(\n--spectrum-tabs-textonly-divider-background-color\n)}:host([empasized]) #list{--sp-tabs-list-background-color:var(\n--spectrum-tabs-emphasized-textonly-divider-background-color\n)}:host([direction^=vertical]) #list{--sp-tabs-list-background-color:var(\n--spectrum-tabs-vertical-textonly-divider-background-color\n)}:host([dir=ltr][direction=vertical]) #list,:host([dir=rtl][direction=vertical-right]) #list{--sp-tabs-list-background-direction:right;padding-left:var(--spectrum-tabs-quiet-textonly-divider-size)}:host([dir=ltr][direction=vertical-right]) #list,:host([dir=rtl][direction=vertical]) #list{--sp-tabs-list-background-direction:left;padding-right:var(--spectrum-tabs-quiet-textonly-divider-size)}:host([disabled]) #list{pointer-events:none}:host([direction=vertical-right]) #selection-indicator,:host([direction=vertical]) #selection-indicator{height:1px;top:0}:host([compact]){--spectrum-tabs-height:var(--spectrum-tabs-quiet-compact-height)}:host([direction=horizontal]:not([quiet])) #list{border-bottom-color:var(\n--spectrum-tabs-rule-color,var(--spectrum-global-color-gray-200)\n)}:host([dir][direction=horizontal]) #selection-indicator{width:1px}:host([dir=ltr][direction=vertical-right]) #list{border-left:0;border-right:var(\n--spectrum-tabs-vertical-rule-width,var(--spectrum-alias-border-size-thick)\n) solid;border-right-color:var(\n--spectrum-tabs-vertical-rule-color,var(--spectrum-global-color-gray-200)\n)}:host([dir=rtl][direction=vertical-right]) #list{border-left:var(\n--spectrum-tabs-vertical-rule-width,var(--spectrum-alias-border-size-thick)\n) solid;border-left-color:var(\n--spectrum-tabs-vertical-rule-color,var(--spectrum-global-color-gray-200)\n);border-right:0}:host([dir=rtl][direction=vertical-right]) #selection-indicator{left:0;right:auto}#selection-indicator.first-position{transition:none}:host([dir=ltr][direction=vertical-right]) ::slotted(:not([slot])){margin-left:0;margin-right:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([dir=rtl][direction=vertical-right]) ::slotted(:not([slot])){margin-left:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2);margin-right:0}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyZf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,90 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";
|
|
3
|
-
import "@spectrum-web-components/icons-workflow/icons/sp-icon-close.js";
|
|
4
|
-
import "@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js";
|
|
5
|
-
import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
|
|
6
|
-
import "@spectrum-web-components/tabs/sp-tabs.js";
|
|
7
|
-
import "@spectrum-web-components/tabs/sp-tab.js";
|
|
8
|
-
import "@spectrum-web-components/tabs/sp-tab-panel.js";
|
|
9
|
-
import { html } from "@spectrum-web-components/base";
|
|
10
|
-
export default {
|
|
11
|
-
component: "sp-tabs",
|
|
12
|
-
title: "Tabs/Sizes/Horizontal",
|
|
13
|
-
argTypes: {
|
|
14
|
-
direction: {
|
|
15
|
-
name: "direction",
|
|
16
|
-
type: { name: "string", required: false },
|
|
17
|
-
description: "The direction of the Tabs element",
|
|
18
|
-
table: {
|
|
19
|
-
type: {
|
|
20
|
-
summary: '"vertical" | "vertical-right" | "horizontal"'
|
|
21
|
-
},
|
|
22
|
-
defaultValue: { summary: "horizontal" }
|
|
23
|
-
},
|
|
24
|
-
control: {
|
|
25
|
-
type: "text"
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
verticalTab: { control: "boolean" },
|
|
29
|
-
auto: { control: "boolean" },
|
|
30
|
-
size: {
|
|
31
|
-
name: "size",
|
|
32
|
-
type: { name: "string", required: false },
|
|
33
|
-
description: "The size at which to display the Tabs element",
|
|
34
|
-
table: {
|
|
35
|
-
type: { summary: '"s" | "m" | "l" | "xl"' },
|
|
36
|
-
defaultValue: { summary: "m" }
|
|
37
|
-
},
|
|
38
|
-
control: {
|
|
39
|
-
type: "text"
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
args: {
|
|
44
|
-
direction: "horizontal",
|
|
45
|
-
type: false,
|
|
46
|
-
verticalTab: false,
|
|
47
|
-
auto: false,
|
|
48
|
-
size: "m"
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
const panels = () => html`
|
|
1
|
+
import"@spectrum-web-components/icon/sp-icon.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-close.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";import"@spectrum-web-components/tabs/sp-tabs.js";import"@spectrum-web-components/tabs/sp-tab.js";import"@spectrum-web-components/tabs/sp-tab-panel.js";import{html as a}from"@spectrum-web-components/base";export default{component:"sp-tabs",title:"Tabs/Sizes/Horizontal",argTypes:{direction:{name:"direction",type:{name:"string",required:!1},description:"The direction of the Tabs element",table:{type:{summary:'"vertical" | "vertical-right" | "horizontal"'},defaultValue:{summary:"horizontal"}},control:{type:"text"}},verticalTab:{control:"boolean"},auto:{control:"boolean"},size:{name:"size",type:{name:"string",required:!1},description:"The size at which to display the Tabs element",table:{type:{summary:'"s" | "m" | "l" | "xl"'},defaultValue:{summary:"m"}},control:{type:"text"}}},args:{direction:"horizontal",type:!1,verticalTab:!1,auto:!1,size:"m"}};const o=()=>a`
|
|
52
2
|
<sp-tab-panel value="1">Content for "Really Long Name"</sp-tab-panel>
|
|
53
3
|
<sp-tab-panel value="2">Content for tab 2</sp-tab-panel>
|
|
54
4
|
<sp-tab-panel value="3">Content for tab 3</sp-tab-panel>
|
|
55
5
|
<sp-tab-panel value="4">Content for tab 4</sp-tab-panel>
|
|
56
|
-
|
|
57
|
-
const template = (args) => {
|
|
58
|
-
return html`
|
|
6
|
+
`,t=e=>a`
|
|
59
7
|
<sp-tabs
|
|
60
8
|
selected="1"
|
|
61
|
-
size=${
|
|
62
|
-
?auto=${
|
|
9
|
+
size=${e.size}
|
|
10
|
+
?auto=${e.auto}
|
|
63
11
|
label="Demo Tabs"
|
|
64
|
-
direction=${
|
|
12
|
+
direction=${e.direction}
|
|
65
13
|
>
|
|
66
14
|
<sp-tab label="Tab 1" value="1"></sp-tab>
|
|
67
15
|
<sp-tab label="Tab 2" value="2"></sp-tab>
|
|
68
16
|
<sp-tab label="Tab 3" value="3"></sp-tab>
|
|
69
17
|
<sp-tab label="Tab 4" value="4"></sp-tab>
|
|
70
|
-
${
|
|
18
|
+
${o()}
|
|
71
19
|
</sp-tabs>
|
|
72
|
-
`;
|
|
73
|
-
};
|
|
74
|
-
export const s = (args) => template(args);
|
|
75
|
-
s.args = {
|
|
76
|
-
size: "s"
|
|
77
|
-
};
|
|
78
|
-
export const m = (args) => template(args);
|
|
79
|
-
m.args = {
|
|
80
|
-
size: "m"
|
|
81
|
-
};
|
|
82
|
-
export const l = (args) => template(args);
|
|
83
|
-
l.args = {
|
|
84
|
-
size: "l"
|
|
85
|
-
};
|
|
86
|
-
export const XL = (args) => template(args);
|
|
87
|
-
XL.args = {
|
|
88
|
-
size: "XL"
|
|
89
|
-
};
|
|
20
|
+
`;export const s=e=>t(e);s.args={size:"s"};export const m=e=>t(e);m.args={size:"m"};export const l=e=>t(e);l.args={size:"l"};export const XL=e=>t(e);XL.args={size:"XL"};
|
|
90
21
|
//# sourceMappingURL=tabs-horizontal-sizes.stories.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tabs-horizontal-sizes.stories.ts"],
|
|
4
4
|
"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/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';\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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nexport default {\n component: 'sp-tabs',\n title: 'Tabs/Sizes/Horizontal',\n argTypes: {\n direction: {\n name: 'direction',\n type: { name: 'string', required: false },\n description: 'The direction of the Tabs element',\n table: {\n type: {\n summary: '\"vertical\" | \"vertical-right\" | \"horizontal\"',\n },\n defaultValue: { summary: 'horizontal' },\n },\n control: {\n type: 'text',\n },\n },\n verticalTab: { control: 'boolean' },\n auto: { control: 'boolean' },\n size: {\n name: 'size',\n type: { name: 'string', required: false },\n description: 'The size at which to display the Tabs element',\n table: {\n type: { summary: '\"s\" | \"m\" | \"l\" | \"xl\"' },\n defaultValue: { summary: 'm' },\n },\n control: {\n type: 'text',\n },\n },\n },\n args: {\n direction: 'horizontal',\n type: false,\n verticalTab: false,\n auto: false,\n size: 'm',\n },\n};\n\ninterface Properties {\n direction?: 'vertical' | 'vertical-right' | 'horizontal';\n verticalTab?: boolean;\n auto?: boolean;\n size?: 's' | 'm' | 'l' | 'xl';\n}\n\nconst panels = (): TemplateResult => html`\n <sp-tab-panel value=\"1\">Content for \"Really Long Name\"</sp-tab-panel>\n <sp-tab-panel value=\"2\">Content for tab 2</sp-tab-panel>\n <sp-tab-panel value=\"3\">Content for tab 3</sp-tab-panel>\n <sp-tab-panel value=\"4\">Content for tab 4</sp-tab-panel>\n`;\n\nconst template = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n size=${args.size}\n ?auto=${args.auto}\n label=\"Demo Tabs\"\n direction=${args.direction}\n >\n <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\n\nexport const s = (args: Properties): TemplateResult => template(args);\ns.args = {\n size: 's',\n};\n\nexport const m = (args: Properties): TemplateResult => template(args);\nm.args = {\n size: 'm',\n};\n\nexport const l = (args: Properties): TemplateResult => template(args);\nl.args = {\n size: 'l',\n};\n\nexport const XL = (args: Properties): TemplateResult => template(args);\nXL.args = {\n size: 'XL',\n};\n"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,iDACA,2EACA,uEACA,8EACA,sEACA,iDACA,gDACA,sDACA,qDAEA,cAAe,CACX,UAAW,UACX,MAAO,wBACP,SAAU,CACN,UAAW,CACP,KAAM,YACN,KAAM,CAAE,KAAM,SAAU,SAAU,EAAM,EACxC,YAAa,oCACb,MAAO,CACH,KAAM,CACF,QAAS,8CACb,EACA,aAAc,CAAE,QAAS,YAAa,CAC1C,EACA,QAAS,CACL,KAAM,MACV,CACJ,EACA,YAAa,CAAE,QAAS,SAAU,EAClC,KAAM,CAAE,QAAS,SAAU,EAC3B,KAAM,CACF,KAAM,OACN,KAAM,CAAE,KAAM,SAAU,SAAU,EAAM,EACxC,YAAa,gDACb,MAAO,CACH,KAAM,CAAE,QAAS,wBAAyB,EAC1C,aAAc,CAAE,QAAS,GAAI,CACjC,EACA,QAAS,CACL,KAAM,MACV,CACJ,CACJ,EACA,KAAM,CACF,UAAW,aACX,KAAM,GACN,YAAa,GACb,KAAM,GACN,KAAM,GACV,CACJ,EASA,KAAM,GAAS,IAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,EAO/B,EAAW,AAAC,GACP;AAAA;AAAA;AAAA,mBAGQ,EAAK;AAAA,oBACJ,EAAK;AAAA;AAAA,wBAED,EAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMf,EAAO;AAAA;AAAA,MAKd,YAAM,GAAI,AAAC,GAAqC,EAAS,CAAI,EACpE,EAAE,KAAO,CACL,KAAM,GACV,EAEO,YAAM,GAAI,AAAC,GAAqC,EAAS,CAAI,EACpE,EAAE,KAAO,CACL,KAAM,GACV,EAEO,YAAM,GAAI,AAAC,GAAqC,EAAS,CAAI,EACpE,EAAE,KAAO,CACL,KAAM,GACV,EAEO,YAAM,IAAK,AAAC,GAAqC,EAAS,CAAI,EACrE,GAAG,KAAO,CACN,KAAM,IACV",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|