npm - @spectrum-web-components/tabs - Versions diffs - 0.8.7 → 0.8.10 - Mend

@spectrum-web-components/tabs 0.8.7 → 0.8.10

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.

Files changed (32) hide show

package/custom-elements.json +23 -4
package/package.json +6 -6
package/src/Tabs.d.ts +1 -0
package/src/Tabs.js +4 -0
package/src/Tabs.js.map +1 -1
package/src/spectrum-config.js +14 -7
package/src/spectrum-tab.css.js +3 -3
package/src/spectrum-tab.css.js.map +1 -1
package/src/spectrum-tabs.css.js +11 -7
package/src/spectrum-tabs.css.js.map +1 -1
package/src/tab-panel.css.js +1 -1
package/src/tab-panel.css.js.map +1 -1
package/src/tab.css.js +9 -5
package/src/tab.css.js.map +1 -1
package/src/tabs.css.js +11 -7
package/src/tabs.css.js.map +1 -1
package/stories/tabs.stories.js +28 -0
package/stories/tabs.stories.js.map +1 -1
package/test/benchmark/basic-test.js +23 -0
package/test/benchmark/basic-test.js.map +1 -0
package/test/tab.test.js +43 -0
package/test/tab.test.js.map +1 -0
package/test/tabs-horizontal-sizes.test-vrt.js +15 -0
package/test/tabs-horizontal-sizes.test-vrt.js.map +1 -0
package/test/tabs-vertical-right-sizes.test-vrt.js +15 -0
package/test/tabs-vertical-right-sizes.test-vrt.js.map +1 -0
package/test/tabs-vertical-sizes.test-vrt.js +15 -0
package/test/tabs-vertical-sizes.test-vrt.js.map +1 -0
package/test/tabs.test-vrt.js +15 -0
package/test/tabs.test-vrt.js.map +1 -0
package/test/tabs.test.js +486 -0
package/test/tabs.test.js.map +1 -0

package/src/tabs.css.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Adobe. All rights reserved.
+Copyright 2022 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -373,13 +373,17 @@ const styles = css `
 --spectrum-tabs-vertical-textonly-divider-background-color
 )}#selection-indicator{background-color:var(
 --spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected
-)}.spectrum-Tabs--emphasized #selection-indicator{background-color:var(
+)}:host([emphasized]) #selection-indicator{background-color:var(
 --spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected
+)}:host([emphasized]) ::slotted([selected]:not([slot])){color:var(
+--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected
+)}:host([emphasized]) ::slotted([selected]:not([slot])) .spectrum-Icon{color:var(
+--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected
 )}:host([quiet]) #list{border-bottom-color:var(
 --spectrum-tabs-quiet-textonly-divider-background-color
 )}:host([quiet]) #selection-indicator{background-color:var(
 --spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected
-)}:host([quiet]) #list.spectrum-Tabs--emphasized #selection-indicator{background-color:var(
+)}:host([quiet][emphasized]) #list #selection-indicator{background-color:var(
 --spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected
 )}:host([dir=ltr][direction^=vertical][compact]) #list,:host([dir=ltr][direction^=vertical][quiet]) #list{border-left-color:var(
 --spectrum-tabs-vertical-quiet-textonly-divider-background-color
@@ -387,13 +391,13 @@ const styles = css `
 --spectrum-tabs-vertical-quiet-textonly-divider-background-color
 )}:host([direction^=vertical][compact]) #list #selection-indicator,:host([direction^=vertical][quiet]) #list #selection-indicator{background-color:var(
 --spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected
-)}:host([dir=ltr][direction^=vertical]) .spectrum-Tabs--emphasized{border-left-color:var(
+)}:host([dir=ltr][direction^=vertical][emphasized]) #list{border-left-color:var(
 --spectrum-tabs-emphasized-textonly-divider-background-color
-)}:host([dir=rtl][direction^=vertical]) .spectrum-Tabs--emphasized{border-right-color:var(
+)}:host([dir=rtl][direction^=vertical][emphasized]) #list{border-right-color:var(
 --spectrum-tabs-emphasized-textonly-divider-background-color
-)}:host([direction^=vertical]) #list.spectrum-Tabs--emphasized #selection-indicator{background-color:var(
+)}:host([direction^=vertical][emphasized]) #list #selection-indicator{background-color:var(
 --spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected
-)}@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}#list.spectrum-Tabs--emphasized ::slotted(:not([slot])):before{background-color:ButtonFace}#list.spectrum-Tabs--emphasized .is-selected,#list.spectrum-Tabs--emphasized .is-selected .spectrum-Icon{color:HighlightText}#list.spectrum-Tabs--emphasized .is-selected:before{background-color:Highlight;color:HighlightText}#list.spectrum-Tabs--emphasized .is-selected .spectrum-Tabs-itemLabel{color:HighlightText}}.is-selected,.is-selected .spectrum-Icon{color:HighlightText}.is-selected:before{background-color:Highlight;color:HighlightText}.is-selected .spectrum-Tabs-itemLabel{color:HighlightText}:host{--spectrum-tabs-emphasized-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-textonly-divider-background-color:transparent;display:grid}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([disabled]) #selection-indicator{background-color:var(
+)}@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{--spectrum-tabs-emphasized-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-textonly-divider-background-color:transparent;display:grid}: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}:host([disabled]) #selection-indicator{background-color:var(
 --spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)
 )}:host([disabled]) ::slotted(sp-tab){color:var(
 --spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)

package/src/tabs.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.css.js","sourceRoot":"","sources":["tabs.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8YjB,CAAC;AACF,eAAe,MAAM,CAAC","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 { 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)}.spectrum-Tabs--emphasized #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-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]) #list.spectrum-Tabs--emphasized #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]) .spectrum-Tabs--emphasized{border-left-color:var(\n--spectrum-tabs-emphasized-textonly-divider-background-color\n)}:host([dir=rtl][direction^=vertical]) .spectrum-Tabs--emphasized{border-right-color:var(\n--spectrum-tabs-emphasized-textonly-divider-background-color\n)}:host([direction^=vertical]) #list.spectrum-Tabs--emphasized #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}#list.spectrum-Tabs--emphasized ::slotted(:not([slot])):before{background-color:ButtonFace}#list.spectrum-Tabs--emphasized .is-selected,#list.spectrum-Tabs--emphasized .is-selected .spectrum-Icon{color:HighlightText}#list.spectrum-Tabs--emphasized .is-selected:before{background-color:Highlight;color:HighlightText}#list.spectrum-Tabs--emphasized .is-selected .spectrum-Tabs-itemLabel{color:HighlightText}}.is-selected,.is-selected .spectrum-Icon{color:HighlightText}.is-selected:before{background-color:Highlight;color:HighlightText}.is-selected .spectrum-Tabs-itemLabel{color:HighlightText}:host{--spectrum-tabs-emphasized-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-textonly-divider-background-color:transparent;display:grid}:host([direction^=vertical]){grid-template-columns:auto 1fr}: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{justify-content:var(--swc-tabs-list-justify-content)}: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=ltr][direction=vertical-right]) #selection-indicator{left:auto;right:calc(var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick))-1)}:host([dir=rtl][direction=vertical-right]) #selection-indicator{left:calc(var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick))*-1);right:auto}#selection-indicator.first-position{transition:none}\n`;\nexport default styles;"]}
1	+ {"version":3,"file":"tabs.css.js","sourceRoot":"","sources":["tabs.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkZjB,CAAC;AACF,eAAe,MAAM,CAAC","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{--spectrum-tabs-emphasized-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-vertical-textonly-divider-background-color:transparent;display:grid}: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}: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{justify-content:var(--swc-tabs-list-justify-content)}: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=ltr][direction=vertical-right]) #selection-indicator{left:auto;right:calc(var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick))-1)}:host([dir=rtl][direction=vertical-right]) #selection-indicator{left:calc(var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick))*-1);right:auto}#selection-indicator.first-position{transition:none}\n`;\nexport default styles;"]}

package/stories/tabs.stories.js CHANGED Viewed

@@ -150,6 +150,34 @@ export const disabledTab = (args) => {
         </sp-tabs>
     `;
 };
+export const emphasized = (args) => {
+    return html `
+        <sp-tabs selected="1" emphasized ?auto=${args.auto} label="Demo Tabs">
+            <sp-tab label="Tab 1" value="1"></sp-tab>
+            <sp-tab label="Tab 2" value="2"></sp-tab>
+            <sp-tab label="Tab 3" value="3"></sp-tab>
+            <sp-tab label="Tab 4" value="4"></sp-tab>
+            ${panels()}
+        </sp-tabs>
+    `;
+};
+export const emphasizedQuiet = (args) => {
+    return html `
+        <sp-tabs
+            selected="1"
+            emphasized
+            quiet
+            ?auto=${args.auto}
+            label="Demo Tabs"
+        >
+            <sp-tab label="Tab 1" value="1"></sp-tab>
+            <sp-tab label="Tab 2" value="2"></sp-tab>
+            <sp-tab label="Tab 3" value="3"></sp-tab>
+            <sp-tab label="Tab 4" value="4"></sp-tab>
+            ${panels()}
+        </sp-tabs>
+    `;
+};
 export const Vertical = (args) => {
     return html `
         <sp-tabs

package/stories/tabs.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["tabs.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n/\nimport '@spectrum-web-components/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 '../sp-tabs.js';\nimport '../sp-tab.js';\nimport '../sp-tab-panel.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nexport default {\n component: 'sp-tabs',\n title: 'Tabs',\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 },\n args: {\n direction: 'horizontal',\n type: false,\n verticalTab: false,\n auto: false,\n },\n};\n\ninterface Properties {\n direction?: 'vertical' \| 'vertical-right' \| 'horizontal';\n verticalTabs?: boolean;\n verticalTab?: boolean;\n auto?: boolean;\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\nexport const Default = (args: Properties): TemplateResult => {\n return html`\n <style>\n sp-tabs {\n display: grid;\n grid-template-columns: 100%;\n }\n sp-tab-panel {\n grid-area: 2/1/2/1;\n transition: opacity\n var(--spectrum-global-animation-duration-300)\n ease-in-out,\n transform var(--spectrum-global-animation-duration-300)\n ease-in-out;\n }\n sp-tab-panel:not([selected]) {\n display: unset;\n opacity: 0;\n height: 0;\n pointer-events: none;\n transform: translateY(\n var(\n --spectrum-dropdown-flyout-menu-offset-y,\n var(--spectrum-global-dimension-size-75)\n )\n );\n transition: opacity\n var(--spectrum-global-animation-duration-300)\n ease-in-out,\n transform var(--spectrum-global-animation-duration-300)\n ease-in-out,\n height 0s ease var(--spectrum-global-animation-duration-300);\n }\n </style>\n <sp-tabs\n selected=\"1\"\n ?auto=${args.auto}\n label=\"Demo Tabs\"\n direction=${args.direction}\n >\n <sp-tab value=\"2\">Tab 2</sp-tab>\n <sp-tab value=\"3\">Tab 3</sp-tab>\n <sp-tab value=\"4\">Tab 4</sp-tab>\n <sp-tab value=\"1\" selected>Really Long Name</sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\n\nexport const Autofocus = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n autofocus\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 disabledTabs = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n disabled\n ?auto=${args.auto}\n label=\"Disabled 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 disabledTab = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n ?auto=${args.auto}\n label=\"Disabled Tab\"\n direction=${args.direction}\n >\n <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"2\" disabled></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"3\" disabled></sp-tab>\n <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\n\nexport const Vertical = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n direction=${args.direction}\n ?auto=${args.auto}\n label=\"Demo Tabs\"\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};\nVertical.args = {\n direction: 'vertical',\n};\n\nexport const VerticalSized = (args: Properties): TemplateResult => {\n return html`\n <style>\n sp-tabs {\n height: 75vh;\n --swc-tabs-list-justify-content: center;\n }\n </style>\n <sp-tabs\n selected=\"1\"\n direction=${args.direction}\n ?auto=${args.auto}\n label=\"Demo Tabs\"\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};\nVerticalSized.args = {\n direction: 'vertical',\n};\n\nexport const VerticalRight = (args: Properties): TemplateResult => {\n return html`\n <style>\n sp-tabs {\n height: 75vh;\n --swc-tabs-list-justify-content: center;\n }\n </style>\n <sp-tabs\n selected=\"1\"\n direction=${args.direction}\n ?auto=${args.auto}\n label=\"Demo Tabs\"\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};\nVerticalRight.args = {\n direction: 'vertical-right',\n};\n\nexport const Icons = ({\n direction,\n verticalTab,\n auto,\n}: Properties): TemplateResult => {\n return html`\n <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n <sp-tab label=\"Tab 1\" value=\"1\" ?vertical=${verticalTab}>\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab label=\"Tab 2\" value=\"2\" ?vertical=${verticalTab}>\n <sp-icon-close slot=\"icon\"></sp-icon-close>\n </sp-tab>\n <sp-tab label=\"Tab 3\" value=\"3\" ?vertical=${verticalTab}>\n <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n </sp-tab>\n <sp-tab label=\"Tab 4\" value=\"4\" ?vertical=${verticalTab}>\n <sp-icon-help slot=\"icon\"></sp-icon-help>\n </sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\n\nexport const IconsWithSlottedLabel = ({\n direction,\n verticalTab,\n auto,\n}: Properties): TemplateResult => {\n return html`\n <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n <sp-tab value=\"1\" ?vertical=${verticalTab}>\n Tab 1\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab value=\"2\" ?vertical=${verticalTab}>\n Tab 2\n <sp-icon-close slot=\"icon\"></sp-icon-close>\n </sp-tab>\n <sp-tab value=\"3\" ?vertical=${verticalTab}>\n Tab 3\n <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n </sp-tab>\n <sp-tab value=\"4\" ?vertical=${verticalTab}>\n Tab 4\n <sp-icon-help slot=\"icon\"></sp-icon-help>\n </sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\n\nexport const IconsOnly = ({\n direction,\n verticalTab,\n auto,\n}: Properties): TemplateResult => {\n return html`\n <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n <sp-tab aria-label=\"Tab 1\" value=\"1\" ?vertical=${verticalTab}>\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab aria-label=\"Tab 2\" value=\"2\" ?vertical=${verticalTab}>\n <sp-icon-close slot=\"icon\"></sp-icon-close>\n </sp-tab>\n <sp-tab aria-label=\"Tab 3\" value=\"3\" ?vertical=${verticalTab}>\n <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n </sp-tab>\n <sp-tab aria-label=\"Tab 4\" value=\"4\" ?vertical=${verticalTab}>\n <sp-icon-help slot=\"icon\"></sp-icon-help>\n </sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\n\nexport const iconsIi = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n direction=${args.direction}\n ?auto=${args.auto}\n label=\"Demo Tabs\"\n >\n <sp-tab label=\"Tab 1\" value=\"1\" vertical>\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab label=\"Tab 2\" value=\"2\" vertical>\n <sp-icon-close slot=\"icon\"></sp-icon-close>\n </sp-tab>\n <sp-tab label=\"Tab 3\" value=\"3\" vertical>\n <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n </sp-tab>\n <sp-tab label=\"Tab 4\" value=\"4\" vertical>\n <sp-icon-help slot=\"icon\"></sp-icon-help>\n </sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\niconsIi.args = {\n direction: 'vertical',\n};\niconsIi.story = {\n name: 'Icons II',\n};\n\nexport const iconsIii = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n direction=${args.direction}\n ?auto=${args.auto}\n label=\"Demo Tabs\"\n >\n <sp-tab label=\"Tab 1\" value=\"1\">\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab label=\"Tab 2\" value=\"2\">\n <sp-icon-close slot=\"icon\"></sp-icon-close>\n </sp-tab>\n <sp-tab label=\"Tab 3\" value=\"3\">\n <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n </sp-tab>\n <sp-tab label=\"Tab 4\" value=\"4\">\n <sp-icon-help slot=\"icon\"></sp-icon-help>\n </sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\niconsIii.args = {\n direction: 'vertical',\n};\niconsIii.story = {\n name: 'Icons III',\n};\n\nexport const Quiet = ({ direction, auto }: Properties): TemplateResult => {\n return html`\n <sp-tabs selected=\"1\" quiet direction=${direction} ?auto=${auto}>\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 Compact = ({ direction, auto }: Properties): TemplateResult => {\n return html`\n <sp-tabs selected=\"1\" compact direction=${direction} ?auto=${auto}>\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 quietCompact = ({\n direction,\n auto,\n}: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n quiet\n compact\n direction=${direction}\n ?auto=${auto}\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\nquietCompact.story = {\n name: 'Quiet Compact',\n};\n"]}
1	+ {"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["tabs.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n/\nimport '@spectrum-web-components/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 '../sp-tabs.js';\nimport '../sp-tab.js';\nimport '../sp-tab-panel.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nexport default {\n component: 'sp-tabs',\n title: 'Tabs',\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 },\n args: {\n direction: 'horizontal',\n type: false,\n verticalTab: false,\n auto: false,\n },\n};\n\ninterface Properties {\n direction?: 'vertical' \| 'vertical-right' \| 'horizontal';\n verticalTabs?: boolean;\n verticalTab?: boolean;\n auto?: boolean;\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\nexport const Default = (args: Properties): TemplateResult => {\n return html`\n <style>\n sp-tabs {\n display: grid;\n grid-template-columns: 100%;\n }\n sp-tab-panel {\n grid-area: 2/1/2/1;\n transition: opacity\n var(--spectrum-global-animation-duration-300)\n ease-in-out,\n transform var(--spectrum-global-animation-duration-300)\n ease-in-out;\n }\n sp-tab-panel:not([selected]) {\n display: unset;\n opacity: 0;\n height: 0;\n pointer-events: none;\n transform: translateY(\n var(\n --spectrum-dropdown-flyout-menu-offset-y,\n var(--spectrum-global-dimension-size-75)\n )\n );\n transition: opacity\n var(--spectrum-global-animation-duration-300)\n ease-in-out,\n transform var(--spectrum-global-animation-duration-300)\n ease-in-out,\n height 0s ease var(--spectrum-global-animation-duration-300);\n }\n </style>\n <sp-tabs\n selected=\"1\"\n ?auto=${args.auto}\n label=\"Demo Tabs\"\n direction=${args.direction}\n >\n <sp-tab value=\"2\">Tab 2</sp-tab>\n <sp-tab value=\"3\">Tab 3</sp-tab>\n <sp-tab value=\"4\">Tab 4</sp-tab>\n <sp-tab value=\"1\" selected>Really Long Name</sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\n\nexport const Autofocus = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n autofocus\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 disabledTabs = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n disabled\n ?auto=${args.auto}\n label=\"Disabled 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 disabledTab = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n ?auto=${args.auto}\n label=\"Disabled Tab\"\n direction=${args.direction}\n >\n <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"2\" disabled></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"3\" disabled></sp-tab>\n <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\n\nexport const emphasized = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs selected=\"1\" emphasized ?auto=${args.auto} label=\"Demo Tabs\">\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 emphasizedQuiet = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n emphasized\n quiet\n ?auto=${args.auto}\n label=\"Demo Tabs\"\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 Vertical = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n direction=${args.direction}\n ?auto=${args.auto}\n label=\"Demo Tabs\"\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};\nVertical.args = {\n direction: 'vertical',\n};\n\nexport const VerticalSized = (args: Properties): TemplateResult => {\n return html`\n <style>\n sp-tabs {\n height: 75vh;\n --swc-tabs-list-justify-content: center;\n }\n </style>\n <sp-tabs\n selected=\"1\"\n direction=${args.direction}\n ?auto=${args.auto}\n label=\"Demo Tabs\"\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};\nVerticalSized.args = {\n direction: 'vertical',\n};\n\nexport const VerticalRight = (args: Properties): TemplateResult => {\n return html`\n <style>\n sp-tabs {\n height: 75vh;\n --swc-tabs-list-justify-content: center;\n }\n </style>\n <sp-tabs\n selected=\"1\"\n direction=${args.direction}\n ?auto=${args.auto}\n label=\"Demo Tabs\"\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};\nVerticalRight.args = {\n direction: 'vertical-right',\n};\n\nexport const Icons = ({\n direction,\n verticalTab,\n auto,\n}: Properties): TemplateResult => {\n return html`\n <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n <sp-tab label=\"Tab 1\" value=\"1\" ?vertical=${verticalTab}>\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab label=\"Tab 2\" value=\"2\" ?vertical=${verticalTab}>\n <sp-icon-close slot=\"icon\"></sp-icon-close>\n </sp-tab>\n <sp-tab label=\"Tab 3\" value=\"3\" ?vertical=${verticalTab}>\n <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n </sp-tab>\n <sp-tab label=\"Tab 4\" value=\"4\" ?vertical=${verticalTab}>\n <sp-icon-help slot=\"icon\"></sp-icon-help>\n </sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\n\nexport const IconsWithSlottedLabel = ({\n direction,\n verticalTab,\n auto,\n}: Properties): TemplateResult => {\n return html`\n <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n <sp-tab value=\"1\" ?vertical=${verticalTab}>\n Tab 1\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab value=\"2\" ?vertical=${verticalTab}>\n Tab 2\n <sp-icon-close slot=\"icon\"></sp-icon-close>\n </sp-tab>\n <sp-tab value=\"3\" ?vertical=${verticalTab}>\n Tab 3\n <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n </sp-tab>\n <sp-tab value=\"4\" ?vertical=${verticalTab}>\n Tab 4\n <sp-icon-help slot=\"icon\"></sp-icon-help>\n </sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\n\nexport const IconsOnly = ({\n direction,\n verticalTab,\n auto,\n}: Properties): TemplateResult => {\n return html`\n <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n <sp-tab aria-label=\"Tab 1\" value=\"1\" ?vertical=${verticalTab}>\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab aria-label=\"Tab 2\" value=\"2\" ?vertical=${verticalTab}>\n <sp-icon-close slot=\"icon\"></sp-icon-close>\n </sp-tab>\n <sp-tab aria-label=\"Tab 3\" value=\"3\" ?vertical=${verticalTab}>\n <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n </sp-tab>\n <sp-tab aria-label=\"Tab 4\" value=\"4\" ?vertical=${verticalTab}>\n <sp-icon-help slot=\"icon\"></sp-icon-help>\n </sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\n\nexport const iconsIi = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n direction=${args.direction}\n ?auto=${args.auto}\n label=\"Demo Tabs\"\n >\n <sp-tab label=\"Tab 1\" value=\"1\" vertical>\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab label=\"Tab 2\" value=\"2\" vertical>\n <sp-icon-close slot=\"icon\"></sp-icon-close>\n </sp-tab>\n <sp-tab label=\"Tab 3\" value=\"3\" vertical>\n <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n </sp-tab>\n <sp-tab label=\"Tab 4\" value=\"4\" vertical>\n <sp-icon-help slot=\"icon\"></sp-icon-help>\n </sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\niconsIi.args = {\n direction: 'vertical',\n};\niconsIi.story = {\n name: 'Icons II',\n};\n\nexport const iconsIii = (args: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n direction=${args.direction}\n ?auto=${args.auto}\n label=\"Demo Tabs\"\n >\n <sp-tab label=\"Tab 1\" value=\"1\">\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab label=\"Tab 2\" value=\"2\">\n <sp-icon-close slot=\"icon\"></sp-icon-close>\n </sp-tab>\n <sp-tab label=\"Tab 3\" value=\"3\">\n <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n </sp-tab>\n <sp-tab label=\"Tab 4\" value=\"4\">\n <sp-icon-help slot=\"icon\"></sp-icon-help>\n </sp-tab>\n ${panels()}\n </sp-tabs>\n `;\n};\niconsIii.args = {\n direction: 'vertical',\n};\niconsIii.story = {\n name: 'Icons III',\n};\n\nexport const Quiet = ({ direction, auto }: Properties): TemplateResult => {\n return html`\n <sp-tabs selected=\"1\" quiet direction=${direction} ?auto=${auto}>\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 Compact = ({ direction, auto }: Properties): TemplateResult => {\n return html`\n <sp-tabs selected=\"1\" compact direction=${direction} ?auto=${auto}>\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 quietCompact = ({\n direction,\n auto,\n}: Properties): TemplateResult => {\n return html`\n <sp-tabs\n selected=\"1\"\n quiet\n compact\n direction=${direction}\n ?auto=${auto}\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\nquietCompact.story = {\n name: 'Quiet Compact',\n};\n"]}

package/test/benchmark/basic-test.js ADDED Viewed

@@ -0,0 +1,23 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import '@spectrum-web-components/tabs/sp-tabs.js';
+import '@spectrum-web-components/tabs/sp-tab.js';
+import { html } from 'lit';
+import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+measureFixtureCreation(html `
+    <sp-tabs selected="first">
+        <sp-tab label="Tab 1" value="first" tabindex="1"></sp-tab>
+        <sp-tab label="Tab 2" value="second" tabindex="2"></sp-tab>
+        <sp-tab label="Tab 3" value="third" tabindex="3"></sp-tab>
+    </sp-tabs>
+`);
+//# sourceMappingURL=basic-test.js.map

package/test/benchmark/basic-test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"basic-test.js","sourceRoot":"","sources":["basic-test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,0CAA0C,CAAC;AAClD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAE/E,sBAAsB,CAAC,IAAI,CAAA;;;;;;CAM1B,CAAC,CAAC","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 '@spectrum-web-components/tabs/sp-tabs.js';\nimport '@spectrum-web-components/tabs/sp-tab.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-tabs selected=\"first\">\n <sp-tab label=\"Tab 1\" value=\"first\" tabindex=\"1\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\" tabindex=\"2\"></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"third\" tabindex=\"3\"></sp-tab>\n </sp-tabs>\n`);\n"]}

package/test/tab.test.js ADDED Viewed

@@ -0,0 +1,43 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import '../sp-tabs.js';
+import '../sp-tab.js';
+import { elementUpdated, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+describe('Tab', () => {
+    it('loads default tab accessibly', async () => {
+        const el = await fixture(html `
+                <sp-tabs>
+                    <sp-tab label="Tab 1" value="first"></sp-tab>
+                </sp-tabs>
+            `);
+        await elementUpdated(el);
+        await expect(el).to.be.accessible();
+    });
+    it('Updates label', async () => {
+        const el = await fixture(html `
+                <sp-tabs>
+                    <sp-tab label="Tab 1" value="first"></sp-tab>
+                </sp-tabs>
+            `);
+        await elementUpdated(el);
+        const firstTab = el.querySelector('sp-tab');
+        const label = firstTab.shadowRoot
+            ? firstTab.shadowRoot.querySelector('#item-label')
+            : firstTab.querySelector('#itemLabel');
+        expect(label.textContent).to.include('Tab 1');
+        firstTab.label = 'Other Tab';
+        await elementUpdated(firstTab);
+        expect(label.textContent).to.include('Other Tab');
+    });
+});
+//# sourceMappingURL=tab.test.js.map

package/test/tab.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tab.test.js","sourceRoot":"","sources":["tab.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE;IACjB,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;;;aAIH,CACJ,CAAC;QAEF,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC3B,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;;;aAIH,CACJ,CAAC;QAEF,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,QAAQ,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAQ,CAAC;QACnD,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU;YAC7B,CAAC,CAAE,QAAQ,CAAC,UAAU,CAAC,aAAa,CAC9B,aAAa,CACK;YACxB,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAsB,CAAC;QACjE,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAE9C,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC;QAE7B,MAAM,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC/B,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","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 '../sp-tabs.js';\nimport '../sp-tab.js';\nimport { Tab, Tabs } from '../';\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\n\ndescribe('Tab', () => {\n it('loads default tab accessibly', async () => {\n const el = await fixture<Tabs>(\n html`\n <sp-tabs>\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n </sp-tabs>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('Updates label', async () => {\n const el = await fixture<Tabs>(\n html`\n <sp-tabs>\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n </sp-tabs>\n `\n );\n\n await elementUpdated(el);\n const firstTab = el.querySelector('sp-tab') as Tab;\n const label = firstTab.shadowRoot\n ? (firstTab.shadowRoot.querySelector(\n '#item-label'\n ) as HTMLLabelElement)\n : (firstTab.querySelector('#itemLabel') as HTMLLabelElement);\n expect(label.textContent).to.include('Tab 1');\n\n firstTab.label = 'Other Tab';\n\n await elementUpdated(firstTab);\n expect(label.textContent).to.include('Other Tab');\n });\n});\n"]}

package/test/tabs-horizontal-sizes.test-vrt.js ADDED Viewed

@@ -0,0 +1,15 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import * as stories from '../stories/tabs-horizontal-sizes.stories.js';
+import { regressVisuals } from '../../../test/visual/test.js';
+regressVisuals('TabsHorizontalSizesStories', stories);
+//# sourceMappingURL=tabs-horizontal-sizes.test-vrt.js.map

package/test/tabs-horizontal-sizes.test-vrt.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tabs-horizontal-sizes.test-vrt.js","sourceRoot":"","sources":["tabs-horizontal-sizes.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,6CAA6C,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC","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 * as stories from '../stories/tabs-horizontal-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TabsHorizontalSizesStories', stories);\n"]}

package/test/tabs-vertical-right-sizes.test-vrt.js ADDED Viewed

@@ -0,0 +1,15 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import * as stories from '../stories/tabs-vertical-right-sizes.stories.js';
+import { regressVisuals } from '../../../test/visual/test.js';
+regressVisuals('TabsVerticalRightSizesStories', stories);
+//# sourceMappingURL=tabs-vertical-right-sizes.test-vrt.js.map

package/test/tabs-vertical-right-sizes.test-vrt.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tabs-vertical-right-sizes.test-vrt.js","sourceRoot":"","sources":["tabs-vertical-right-sizes.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,iDAAiD,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,+BAA+B,EAAE,OAAO,CAAC,CAAC","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 * as stories from '../stories/tabs-vertical-right-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TabsVerticalRightSizesStories', stories);\n"]}

package/test/tabs-vertical-sizes.test-vrt.js ADDED Viewed

@@ -0,0 +1,15 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import * as stories from '../stories/tabs-vertical-sizes.stories.js';
+import { regressVisuals } from '../../../test/visual/test.js';
+regressVisuals('TabsVerticalSizesStories', stories);
+//# sourceMappingURL=tabs-vertical-sizes.test-vrt.js.map

package/test/tabs-vertical-sizes.test-vrt.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tabs-vertical-sizes.test-vrt.js","sourceRoot":"","sources":["tabs-vertical-sizes.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,2CAA2C,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,0BAA0B,EAAE,OAAO,CAAC,CAAC","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 * as stories from '../stories/tabs-vertical-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TabsVerticalSizesStories', stories);\n"]}

package/test/tabs.test-vrt.js ADDED Viewed

@@ -0,0 +1,15 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import * as stories from '../stories/tabs.stories.js';
+import { regressVisuals } from '../../../test/visual/test.js';
+regressVisuals('TabsStories', stories);
+//# sourceMappingURL=tabs.test-vrt.js.map

package/test/tabs.test-vrt.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tabs.test-vrt.js","sourceRoot":"","sources":["tabs.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC","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 * as stories from '../stories/tabs.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TabsStories', stories);\n"]}