@spectrum-web-components/tabs 0.8.9 → 0.8.12

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 (19) hide show
  1. package/custom-elements.json +19 -136
  2. package/package.json +6 -6
  3. package/src/Tab.js.map +1 -1
  4. package/src/TabPanel.js.map +1 -1
  5. package/src/Tabs.d.ts +1 -0
  6. package/src/Tabs.js +4 -0
  7. package/src/Tabs.js.map +1 -1
  8. package/src/spectrum-config.js +14 -7
  9. package/src/spectrum-tab.css.js +2 -2
  10. package/src/spectrum-tab.css.js.map +1 -1
  11. package/src/spectrum-tabs.css.js +10 -6
  12. package/src/spectrum-tabs.css.js.map +1 -1
  13. package/src/tab.css.js +8 -4
  14. package/src/tab.css.js.map +1 -1
  15. package/src/tabs.css.js +10 -6
  16. package/src/tabs.css.js.map +1 -1
  17. package/stories/tabs.stories.js +28 -0
  18. package/stories/tabs.stories.js.map +1 -1
  19. package/test/tabs.test.js.map +1 -1
package/custom-elements.json CHANGED
@@ -368,6 +368,17 @@
368
368
  "attribute": "direction",
369
369
  "reflects": true
370
370
  },
371
+ {
372
+ "kind": "field",
373
+ "name": "emphasized",
374
+ "type": {
375
+ "text": "boolean"
376
+ },
377
+ "privacy": "public",
378
+ "default": "false",
379
+ "attribute": "emphasized",
380
+ "reflects": true
381
+ },
371
382
  {
372
383
  "kind": "field",
373
384
  "name": "label",
@@ -605,6 +616,14 @@
605
616
  "default": "'horizontal'",
606
617
  "fieldName": "direction"
607
618
  },
619
+ {
620
+ "name": "emphasized",
621
+ "type": {
622
+ "text": "boolean"
623
+ },
624
+ "default": "false",
625
+ "fieldName": "emphasized"
626
+ },
608
627
  {
609
628
  "name": "label",
610
629
  "type": {
@@ -645,142 +664,6 @@
645
664
  }
646
665
  }
647
666
  ]
648
- },
649
- {
650
- "kind": "javascript-module",
651
- "path": "src/index.ts",
652
- "declarations": [],
653
- "exports": [
654
- {
655
- "kind": "js",
656
- "name": "*",
657
- "declaration": {
658
- "name": "*",
659
- "package": "./Tabs.js"
660
- }
661
- },
662
- {
663
- "kind": "js",
664
- "name": "*",
665
- "declaration": {
666
- "name": "*",
667
- "package": "./Tab.js"
668
- }
669
- },
670
- {
671
- "kind": "js",
672
- "name": "*",
673
- "declaration": {
674
- "name": "*",
675
- "package": "./TabPanel.js"
676
- }
677
- }
678
- ]
679
- },
680
- {
681
- "kind": "javascript-module",
682
- "path": "src/spectrum-tab.css.ts",
683
- "declarations": [
684
- {
685
- "kind": "variable",
686
- "name": "styles",
687
- "default": "css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}:host(:not([vertical])) ::slotted([slot=icon]){height:var(\n--spectrum-tabs-quiet-textonly-tabitem-height\n)}:host([dir=ltr]) slot[name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(\n--spectrum-tabs-textonly-tabitem-text-color\n)}:host(:not([vertical])) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color\n)}:host(:hover){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-hover\n)}:host(:hover) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-hover\n)}:host([selected]){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected\n)}:host([selected]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected\n)}:host(.focus-visible){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus\n)}:host(:focus-visible){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus\n)}:host(:focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus\n)}:host([disabled]){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-disabled\n)}:host([disabled]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-disabled\n)}\n`"
688
- }
689
- ],
690
- "exports": [
691
- {
692
- "kind": "js",
693
- "name": "default",
694
- "declaration": {
695
- "name": "styles",
696
- "module": "src/spectrum-tab.css.ts"
697
- }
698
- }
699
- ]
700
- },
701
- {
702
- "kind": "javascript-module",
703
- "path": "src/spectrum-tabs.css.ts",
704
- "declarations": [
705
- {
706
- "kind": "variable",
707
- "name": "styles",
708
- "default": "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}\n`"
709
- }
710
- ],
711
- "exports": [
712
- {
713
- "kind": "js",
714
- "name": "default",
715
- "declaration": {
716
- "name": "styles",
717
- "module": "src/spectrum-tabs.css.ts"
718
- }
719
- }
720
- ]
721
- },
722
- {
723
- "kind": "javascript-module",
724
- "path": "src/tab-panel.css.ts",
725
- "declarations": [
726
- {
727
- "kind": "variable",
728
- "name": "styles",
729
- "default": "css`\n:host{display:inline-flex}:host(:not([selected])){display:none}\n`"
730
- }
731
- ],
732
- "exports": [
733
- {
734
- "kind": "js",
735
- "name": "default",
736
- "declaration": {
737
- "name": "styles",
738
- "module": "src/tab-panel.css.ts"
739
- }
740
- }
741
- ]
742
- },
743
- {
744
- "kind": "javascript-module",
745
- "path": "src/tab.css.ts",
746
- "declarations": [
747
- {
748
- "kind": "variable",
749
- "name": "styles",
750
- "default": "css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}:host(:not([vertical])) ::slotted([slot=icon]){height:var(\n--spectrum-tabs-quiet-textonly-tabitem-height\n)}:host([dir=ltr]) slot[name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(\n--spectrum-tabs-textonly-tabitem-text-color\n)}:host(:not([vertical])) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color\n)}:host(:hover){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-hover\n)}:host(:hover) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-hover\n)}:host([selected]){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected\n)}:host([selected]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected\n)}:host(.focus-visible){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus\n)}:host(:focus-visible){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus\n)}:host(:focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus\n)}:host([disabled]){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-disabled\n)}:host([disabled]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-disabled\n)}:host([disabled]){pointer-events:none}:host([vertical]){--sp-tab-vertial-margin-y:calc((var(\n--spectrum-tabs-vertical-item-height,\nvar(--spectrum-global-dimension-size-550)\n) - var(\n--spectrum-tabs-focus-ring-height,\nvar(--spectrum-alias-single-line-height)\n))/2);align-items:center;display:flex;flex-direction:column;height:auto!important;justify-content:center}:host([vertical]):before{bottom:0;height:auto;left:calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))*-1);margin-top:0!important;right:calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))*-1);top:0}:host([vertical]) ::slotted([slot=icon]){flex-shrink:0;margin-top:var(--sp-tab-vertial-margin-y)}:host(:not([vertical])) ::slotted([slot=icon]){height:100%}:host([dir][vertical]) slot[name=icon]+#item-label{font-size:var(\n--spectrum-tabs-text-size,var(--spectrum-alias-font-size-default)\n);font-weight:var(\n--spectrum-tabs-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);line-height:1;margin:var(--sp-tab-vertial-margin-y) 0}#item-label[hidden]{display:none}@media (forced-colors:active){:host:before{background-color:ButtonFace}:host ::slotted([slot=icon]){position:relative;z-index:1}#item-label{position:relative;z-index:1}:host([selected]){color:HighlightText}:host([selected]) ::slotted([slot=icon]){color:HighlightText}:host([selected]):before{background-color:Highlight;color:HighlightText}:host([selected]) #item-label{color:HighlightText}}\n`"
751
- }
752
- ],
753
- "exports": [
754
- {
755
- "kind": "js",
756
- "name": "default",
757
- "declaration": {
758
- "name": "styles",
759
- "module": "src/tab.css.ts"
760
- }
761
- }
762
- ]
763
- },
764
- {
765
- "kind": "javascript-module",
766
- "path": "src/tabs.css.ts",
767
- "declarations": [
768
- {
769
- "kind": "variable",
770
- "name": "styles",
771
- "default": "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`"
772
- }
773
- ],
774
- "exports": [
775
- {
776
- "kind": "js",
777
- "name": "default",
778
- "declaration": {
779
- "name": "styles",
780
- "module": "src/tabs.css.ts"
781
- }
782
- }
783
- ]
784
667
  }
785
668
  ]
786
669
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tabs",
3
- "version": "0.8.9",
3
+ "version": "0.8.12",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -48,18 +48,18 @@
48
48
  "lit-html"
49
49
  ],
50
50
  "dependencies": {
51
- "@spectrum-web-components/base": "^0.5.5",
52
- "@spectrum-web-components/reactive-controllers": "^0.2.2",
53
- "@spectrum-web-components/shared": "^0.14.0",
51
+ "@spectrum-web-components/base": "^0.5.7",
52
+ "@spectrum-web-components/reactive-controllers": "^0.2.4",
53
+ "@spectrum-web-components/shared": "^0.14.2",
54
54
  "tslib": "^2.0.0"
55
55
  },
56
56
  "devDependencies": {
57
- "@spectrum-css/tabs": "^3.2.11"
57
+ "@spectrum-css/tabs": "^3.2.14"
58
58
  },
59
59
  "types": "./src/index.d.ts",
60
60
  "customElements": "custom-elements.json",
61
61
  "sideEffects": [
62
62
  "./sp-*.js"
63
63
  ],
64
- "gitHead": "bdff893e2b95aba7737c58d01c6ac68861cb8b2e"
64
+ "gitHead": "275ee61b152ac3eed0cd1603d8eab2aec90876a0"
65
65
  }
package/src/Tab.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.js","sourceRoot":"","sources":["Tab.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*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n ObserveSlotText,\n} from '@spectrum-web-components/shared';\n\nimport tabItemStyles from './tab.css.js';\n\n/**\n * @element sp-tab\n *\n * @slot - text label of the Tab\n * @slot icon - The icon that appears on the left of the label\n */\nexport class Tab extends FocusVisiblePolyfillMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), '')\n) {\n public static get styles(): CSSResultArray {\n return [tabItemStyles];\n }\n\n /**\n * @private\n */\n static instanceCount = 0;\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected get hasLabel(): boolean {\n return !!this.label || this.slotHasContent;\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected handleContentChange(): void {\n /**\n * When the content in a tab has changed, JS powered layout related to that content may also need to be changed.\n */\n this.dispatchEvent(\n new Event('sp-tab-contentchange', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected render(): TemplateResult {\n return html`\n ${this.hasIcon\n ? html`\n <slot name=\"icon\"></slot>\n `\n : html``}\n <label id=\"item-label\" ?hidden=${!this.hasLabel}>\n ${this.slotHasContent ? html`` : this.label}\n <slot>${this.label}</slot>\n </label>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'tab');\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-${Tab.instanceCount++}`;\n }\n // @TODO - refactor this as a ResizeObserver up to `sp-tabs` so that it can be more\n // resiliant to Tab content changes, as well as other content slotted into the \"tablist\".\n this.shadowRoot.addEventListener(\n 'slotchange',\n this.handleContentChange\n );\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (\n changes.has('label') &&\n typeof changes.get('label') !== 'undefined'\n ) {\n this.handleContentChange();\n }\n if (changes.has('selected')) {\n this.setAttribute(\n 'aria-selected',\n this.selected ? 'true' : 'false'\n );\n this.setAttribute('tabindex', this.selected ? '0' : '-1');\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"]}
1
+ {"version":3,"file":"Tab.js","sourceRoot":"","sources":["Tab.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*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n ObserveSlotText,\n} from '@spectrum-web-components/shared';\n\nimport tabItemStyles from './tab.css.js';\n\n/**\n * @element sp-tab\n *\n * @slot - text label of the Tab\n * @slot icon - The icon that appears on the left of the label\n */\nexport class Tab extends FocusVisiblePolyfillMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), '')\n) {\n public static override get styles(): CSSResultArray {\n return [tabItemStyles];\n }\n\n /**\n * @private\n */\n static instanceCount = 0;\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected get hasLabel(): boolean {\n return !!this.label || this.slotHasContent;\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected handleContentChange(): void {\n /**\n * When the content in a tab has changed, JS powered layout related to that content may also need to be changed.\n */\n this.dispatchEvent(\n new Event('sp-tab-contentchange', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected override render(): TemplateResult {\n return html`\n ${this.hasIcon\n ? html`\n <slot name=\"icon\"></slot>\n `\n : html``}\n <label id=\"item-label\" ?hidden=${!this.hasLabel}>\n ${this.slotHasContent ? html`` : this.label}\n <slot>${this.label}</slot>\n </label>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'tab');\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-${Tab.instanceCount++}`;\n }\n // @TODO - refactor this as a ResizeObserver up to `sp-tabs` so that it can be more\n // resiliant to Tab content changes, as well as other content slotted into the \"tablist\".\n this.shadowRoot.addEventListener(\n 'slotchange',\n this.handleContentChange\n );\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (\n changes.has('label') &&\n typeof changes.get('label') !== 'undefined'\n ) {\n this.handleContentChange();\n }\n if (changes.has('selected')) {\n this.setAttribute(\n 'aria-selected',\n this.selected ? 'true' : 'false'\n );\n this.setAttribute('tabindex', this.selected ? '0' : '-1');\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"]}
package/src/TabPanel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["TabPanel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EACH,IAAI,EAEJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAE3E,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,OAAO,QAAS,SAAQ,eAAe;IAA7C;;QASW,aAAQ,GAAG,KAAK,CAAC;QAGjB,UAAK,GAAG,EAAE,CAAC;IA4BtB,CAAC;IA1Ba,MAAM;QACZ,OAAO,IAAI,CAAA;;SAEV,CAAC;IACN,CAAC;IAES,YAAY;QAClB,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,gBAAgB,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC;SACxD;IACL,CAAC;IAES,OAAO,CAAC,OAA6B;QAC3C,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACf,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;gBACpC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;aACrB;iBAAM;gBACH,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;gBACzC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;aACtB;SACJ;IACL,CAAC;;AAtCM,eAAM,GAAG,CAAC,WAAW,CAAC,CAAC;AAE9B;;GAEG;AACI,sBAAa,GAAG,CAAC,CAAC;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACxB","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport panelStyles from './tab-panel.css.js';\n\n/**\n * @element sp-tab-panel\n *\n * @slot - content of the Tab Panel\n */\nexport class TabPanel extends SpectrumElement {\n static styles = [panelStyles];\n\n /**\n * @private\n */\n static instanceCount = 0;\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected render(): TemplateResult {\n return html`\n <slot></slot>\n `;\n }\n\n protected firstUpdated(): void {\n this.slot = 'tab-panel';\n this.setAttribute('role', 'tabpanel');\n this.tabIndex = 0;\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-panel-${TabPanel.instanceCount++}`;\n }\n }\n\n protected updated(changes: PropertyValues<this>): void {\n if (changes.has('selected')) {\n if (this.selected) {\n this.removeAttribute('aria-hidden');\n this.tabIndex = 0;\n } else {\n this.setAttribute('aria-hidden', 'true');\n this.tabIndex = -1;\n }\n }\n }\n}\n"]}
1
+ {"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["TabPanel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EACH,IAAI,EAEJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAE3E,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,OAAO,QAAS,SAAQ,eAAe;IAA7C;;QASW,aAAQ,GAAG,KAAK,CAAC;QAGjB,UAAK,GAAG,EAAE,CAAC;IA4BtB,CAAC;IA1BsB,MAAM;QACrB,OAAO,IAAI,CAAA;;SAEV,CAAC;IACN,CAAC;IAEkB,YAAY;QAC3B,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,gBAAgB,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC;SACxD;IACL,CAAC;IAEkB,OAAO,CAAC,OAA6B;QACpD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACf,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;gBACpC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;aACrB;iBAAM;gBACH,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;gBACzC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;aACtB;SACJ;IACL,CAAC;;AAtCe,eAAM,GAAG,CAAC,WAAW,CAAC,CAAC;AAEvC;;GAEG;AACI,sBAAa,GAAG,CAAC,CAAC;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACxB","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport panelStyles from './tab-panel.css.js';\n\n/**\n * @element sp-tab-panel\n *\n * @slot - content of the Tab Panel\n */\nexport class TabPanel extends SpectrumElement {\n static override styles = [panelStyles];\n\n /**\n * @private\n */\n static instanceCount = 0;\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected override render(): TemplateResult {\n return html`\n <slot></slot>\n `;\n }\n\n protected override firstUpdated(): void {\n this.slot = 'tab-panel';\n this.setAttribute('role', 'tabpanel');\n this.tabIndex = 0;\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-panel-${TabPanel.instanceCount++}`;\n }\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n if (changes.has('selected')) {\n if (this.selected) {\n this.removeAttribute('aria-hidden');\n this.tabIndex = 0;\n } else {\n this.setAttribute('aria-hidden', 'true');\n this.tabIndex = -1;\n }\n }\n }\n}\n"]}
package/src/Tabs.d.ts CHANGED
@@ -28,6 +28,7 @@ export declare class Tabs extends Tabs_base {
28
28
  */
29
29
  auto: boolean;
30
30
  direction: 'vertical' | 'vertical-right' | 'horizontal';
31
+ emphasized: boolean;
31
32
  label: string;
32
33
  selectionIndicatorStyle: string;
33
34
  shouldAnimate: boolean;
package/src/Tabs.js CHANGED
@@ -40,6 +40,7 @@ export class Tabs extends SizedMixin(Focusable) {
40
40
  */
41
41
  this.auto = false;
42
42
  this.direction = 'horizontal';
43
+ this.emphasized = false;
43
44
  this.label = '';
44
45
  this.selectionIndicatorStyle = noSelectionStyle;
45
46
  this.shouldAnimate = false;
@@ -310,6 +311,9 @@ __decorate([
310
311
  __decorate([
311
312
  property({ reflect: true })
312
313
  ], Tabs.prototype, "direction", void 0);
314
+ __decorate([
315
+ property({ type: Boolean, reflect: true })
316
+ ], Tabs.prototype, "emphasized", void 0);
313
317
  __decorate([
314
318
  property()
315
319
  ], Tabs.prototype, "label", void 0);
package/src/Tabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["Tabs.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*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { Tab } from './Tab.js';\nimport { Focusable } from '@spectrum-web-components/shared';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport tabStyles from './tabs.css.js';\nimport { TabPanel } from './TabPanel.js';\n\nconst noSelectionStyle = 'transform: translateX(0px) scaleX(0) scaleY(0)';\n\n/**\n * @element sp-tabs\n *\n * @slot - Tab elements to manage as a group\n * @slot tab-panel - Tab Panel elements related to the listed Tab elements\n * @attr {Boolean} quiet - The tabs border is a lot smaller\n * @attr {Boolean} compact - The collection of tabs take up less space\n *\n * @fires change - The selected Tab child has changed.\n */\nexport class Tabs extends SizedMixin(Focusable) {\n public static get styles(): CSSResultArray {\n return [tabStyles];\n }\n\n /**\n * Whether to activate a tab on keyboard focus or not.\n *\n * By default a tab is activated via a \"click\" interaction. This is specifically intended for when\n * tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\n * To learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\n * https://w3c.github.io/aria-practices/#kbd_selection_follows_focus\n */\n @property({ type: Boolean })\n public auto = false;\n\n @property({ reflect: true })\n public direction: 'vertical' | 'vertical-right' | 'horizontal' =\n 'horizontal';\n\n @property()\n public label = '';\n\n @property({ attribute: false })\n public selectionIndicatorStyle = noSelectionStyle;\n\n @property({ attribute: false })\n public shouldAnimate = false;\n\n @query('#list')\n private tabList!: HTMLDivElement;\n\n @property({ reflect: true })\n public get selected(): string {\n return this._selected;\n }\n\n public set selected(value: string) {\n const oldValue = this.selected;\n\n if (value === oldValue) {\n return;\n }\n\n this._selected = value;\n this.shouldUpdateCheckedState();\n this.requestUpdate('selected', oldValue);\n }\n\n private _selected = '';\n\n private set tabs(tabs: Tab[]) {\n if (tabs === this.tabs) return;\n this._tabs = tabs;\n this.rovingTabindexController.clearElementCache();\n }\n\n private get tabs(): Tab[] {\n return this._tabs;\n }\n\n private _tabs: Tab[] = [];\n\n rovingTabindexController = new RovingTabindexController<Tab>(this, {\n focusInIndex: (elements) => {\n let focusInIndex = 0;\n const firstFocusableElement = elements.find((el, index) => {\n const focusInElement = this.selected\n ? !el.disabled && el.value === this.selected\n : !el.disabled;\n focusInIndex = index;\n return focusInElement;\n });\n return firstFocusableElement ? focusInIndex : -1;\n },\n direction: () =>\n this.direction === 'horizontal' ? 'horizontal' : 'vertical',\n elementEnterAction: (el) => {\n if (!this.auto) return;\n\n this.shouldAnimate = true;\n this.selectTarget(el);\n },\n elements: () => this.tabs,\n isFocusableElement: (el) => !el.disabled,\n listenerScope: () => this.tabList,\n });\n\n /**\n * @private\n */\n public get focusElement(): Tab | this {\n return this.rovingTabindexController.focusInElement || this;\n }\n\n protected manageAutoFocus(): void {\n const tabs = [...this.children] as Tab[];\n const tabUpdateCompletes = tabs.map((tab) => {\n if (typeof tab.updateComplete !== 'undefined') {\n return tab.updateComplete;\n }\n return Promise.resolve(true);\n });\n Promise.all(tabUpdateCompletes).then(() => super.manageAutoFocus());\n }\n\n protected managePanels({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n const panels = target.assignedElements() as TabPanel[];\n panels.map((panel) => {\n const { value, id } = panel;\n const tab = this.querySelector(`[role=\"tab\"][value=\"${value}\"]`);\n if (tab) {\n tab.setAttribute('aria-controls', id);\n panel.setAttribute('aria-labelledby', tab.id);\n }\n panel.selected = value === this.selected;\n });\n }\n\n protected render(): TemplateResult {\n return html`\n <div\n aria-label=${ifDefined(this.label ? this.label : undefined)}\n @click=${this.onClick}\n @keydown=${this.onKeyDown}\n @sp-tab-contentchange=${this.updateSelectionIndicator}\n id=\"list\"\n role=\"tablist\"\n >\n <slot @slotchange=${this.onSlotChange}></slot>\n <div\n id=\"selection-indicator\"\n class=${ifDefined(\n this.shouldAnimate ? undefined : 'first-position'\n )}\n style=${this.selectionIndicatorStyle}\n role=\"presentation\"\n ></div>\n </div>\n <slot name=\"tab-panel\" @slotchange=${this.managePanels}></slot>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n const selectedChild = this.querySelector(':scope > [selected]') as Tab;\n if (selectedChild) {\n this.selectTarget(selectedChild);\n }\n }\n\n protected updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (changes.has('selected')) {\n if (changes.get('selected')) {\n const previous = this.querySelector(\n `[role=\"tabpanel\"][value=\"${changes.get('selected')}\"]`\n ) as TabPanel;\n if (previous) previous.selected = false;\n }\n const next = this.querySelector(\n `[role=\"tabpanel\"][value=\"${this.selected}\"]`\n ) as TabPanel;\n if (next) next.selected = true;\n }\n if (changes.has('direction')) {\n if (this.direction === 'horizontal') {\n this.removeAttribute('aria-orientation');\n } else {\n this.setAttribute('aria-orientation', 'vertical');\n }\n }\n if (changes.has('dir')) {\n this.updateSelectionIndicator();\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n if (\n !this.shouldAnimate &&\n typeof changes.get('shouldAnimate') !== 'undefined'\n ) {\n this.shouldAnimate = true;\n }\n }\n\n private onClick = (event: Event): void => {\n if (this.disabled) {\n return;\n }\n const target = event\n .composedPath()\n .find((el) => (el as Tab).parentElement === this) as Tab;\n if (!target || target.disabled) {\n return;\n }\n this.shouldAnimate = true;\n this.selectTarget(target);\n };\n\n private onKeyDown = (event: KeyboardEvent): void => {\n if (event.code === 'Enter' || event.code === 'Space') {\n event.preventDefault();\n const target = event.target as HTMLElement;\n if (target) {\n this.selectTarget(target);\n }\n }\n };\n\n private selectTarget(target: HTMLElement): void {\n const value = target.getAttribute('value');\n if (value) {\n const selected = this.selected;\n this.selected = value;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.selected = selected;\n }\n }\n }\n\n private onSlotChange(): void {\n this.tabs = [...this.querySelectorAll('[role=\"tab\"]')] as Tab[];\n this.shouldUpdateCheckedState();\n }\n\n private shouldUpdateCheckedState(): void {\n this.tabChangeResolver();\n this.tabChangePromise = new Promise(\n (res) => (this.tabChangeResolver = res)\n );\n setTimeout(this.updateCheckedState);\n }\n\n private updateCheckedState = (): void => {\n if (!this.tabs.length) {\n this.tabs = [...this.querySelectorAll('[role=\"tab\"]')] as Tab[];\n }\n this.tabs.forEach((element) => {\n element.removeAttribute('selected');\n });\n\n if (this.selected) {\n const currentChecked = this.tabs.find(\n (el) => el.value === this.selected\n );\n\n if (currentChecked) {\n currentChecked.selected = true;\n } else {\n this.selected = '';\n }\n } else {\n const firstTab = this.tabs[0];\n if (firstTab) {\n firstTab.setAttribute('tabindex', '0');\n }\n }\n\n this.updateSelectionIndicator();\n this.tabChangeResolver();\n };\n\n private updateSelectionIndicator = async (): Promise<void> => {\n const selectedElement = this.tabs.find((el) => el.selected);\n if (!selectedElement) {\n this.selectionIndicatorStyle = noSelectionStyle;\n return;\n }\n await Promise.all([\n selectedElement.updateComplete,\n document.fonts ? document.fonts.ready : Promise.resolve(),\n ]);\n const tabBoundingClientRect = selectedElement.getBoundingClientRect();\n const parentBoundingClientRect = this.getBoundingClientRect();\n\n if (this.direction === 'horizontal') {\n const width = tabBoundingClientRect.width;\n const offset =\n this.dir === 'ltr'\n ? tabBoundingClientRect.left - parentBoundingClientRect.left\n : tabBoundingClientRect.right -\n parentBoundingClientRect.right;\n\n this.selectionIndicatorStyle = `transform: translateX(${offset}px) scaleX(${\n this.dir === 'ltr' ? width : -1 * width\n });`;\n } else {\n const height = tabBoundingClientRect.height;\n const offset =\n tabBoundingClientRect.top - parentBoundingClientRect.top;\n\n this.selectionIndicatorStyle = `transform: translateY(${offset}px) scaleY(${height});`;\n }\n };\n\n private tabChangePromise = Promise.resolve();\n private tabChangeResolver: () => void = function () {\n return;\n };\n\n protected async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.tabChangePromise;\n return complete;\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener('resize', this.updateSelectionIndicator);\n if ('fonts' in document) {\n (\n document as unknown as {\n fonts: {\n addEventListener: (\n name: string,\n callback: () => void\n ) => void;\n };\n }\n ).fonts.addEventListener(\n 'loadingdone',\n this.updateSelectionIndicator\n );\n }\n }\n\n public disconnectedCallback(): void {\n window.removeEventListener('resize', this.updateSelectionIndicator);\n if ('fonts' in document) {\n (\n document as unknown as {\n fonts: {\n removeEventListener: (\n name: string,\n callback: () => void\n ) => void;\n };\n }\n ).fonts.removeEventListener(\n 'loadingdone',\n this.updateSelectionIndicator\n );\n }\n super.disconnectedCallback();\n }\n}\n"]}
1
+ {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["Tabs.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*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { Tab } from './Tab.js';\nimport { Focusable } from '@spectrum-web-components/shared';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport tabStyles from './tabs.css.js';\nimport { TabPanel } from './TabPanel.js';\n\nconst noSelectionStyle = 'transform: translateX(0px) scaleX(0) scaleY(0)';\n\n/**\n * @element sp-tabs\n *\n * @slot - Tab elements to manage as a group\n * @slot tab-panel - Tab Panel elements related to the listed Tab elements\n * @attr {Boolean} quiet - The tabs border is a lot smaller\n * @attr {Boolean} compact - The collection of tabs take up less space\n *\n * @fires change - The selected Tab child has changed.\n */\nexport class Tabs extends SizedMixin(Focusable) {\n public static override get styles(): CSSResultArray {\n return [tabStyles];\n }\n\n /**\n * Whether to activate a tab on keyboard focus or not.\n *\n * By default a tab is activated via a \"click\" interaction. This is specifically intended for when\n * tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\n * To learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\n * https://w3c.github.io/aria-practices/#kbd_selection_follows_focus\n */\n @property({ type: Boolean })\n public auto = false;\n\n @property({ reflect: true })\n public direction: 'vertical' | 'vertical-right' | 'horizontal' =\n 'horizontal';\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property()\n public label = '';\n\n @property({ attribute: false })\n public selectionIndicatorStyle = noSelectionStyle;\n\n @property({ attribute: false })\n public shouldAnimate = false;\n\n @query('#list')\n private tabList!: HTMLDivElement;\n\n @property({ reflect: true })\n public get selected(): string {\n return this._selected;\n }\n\n public set selected(value: string) {\n const oldValue = this.selected;\n\n if (value === oldValue) {\n return;\n }\n\n this._selected = value;\n this.shouldUpdateCheckedState();\n this.requestUpdate('selected', oldValue);\n }\n\n private _selected = '';\n\n private set tabs(tabs: Tab[]) {\n if (tabs === this.tabs) return;\n this._tabs = tabs;\n this.rovingTabindexController.clearElementCache();\n }\n\n private get tabs(): Tab[] {\n return this._tabs;\n }\n\n private _tabs: Tab[] = [];\n\n rovingTabindexController = new RovingTabindexController<Tab>(this, {\n focusInIndex: (elements) => {\n let focusInIndex = 0;\n const firstFocusableElement = elements.find((el, index) => {\n const focusInElement = this.selected\n ? !el.disabled && el.value === this.selected\n : !el.disabled;\n focusInIndex = index;\n return focusInElement;\n });\n return firstFocusableElement ? focusInIndex : -1;\n },\n direction: () =>\n this.direction === 'horizontal' ? 'horizontal' : 'vertical',\n elementEnterAction: (el) => {\n if (!this.auto) return;\n\n this.shouldAnimate = true;\n this.selectTarget(el);\n },\n elements: () => this.tabs,\n isFocusableElement: (el) => !el.disabled,\n listenerScope: () => this.tabList,\n });\n\n /**\n * @private\n */\n public override get focusElement(): Tab | this {\n return this.rovingTabindexController.focusInElement || this;\n }\n\n protected override manageAutoFocus(): void {\n const tabs = [...this.children] as Tab[];\n const tabUpdateCompletes = tabs.map((tab) => {\n if (typeof tab.updateComplete !== 'undefined') {\n return tab.updateComplete;\n }\n return Promise.resolve(true);\n });\n Promise.all(tabUpdateCompletes).then(() => super.manageAutoFocus());\n }\n\n protected managePanels({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n const panels = target.assignedElements() as TabPanel[];\n panels.map((panel) => {\n const { value, id } = panel;\n const tab = this.querySelector(`[role=\"tab\"][value=\"${value}\"]`);\n if (tab) {\n tab.setAttribute('aria-controls', id);\n panel.setAttribute('aria-labelledby', tab.id);\n }\n panel.selected = value === this.selected;\n });\n }\n\n protected override render(): TemplateResult {\n return html`\n <div\n aria-label=${ifDefined(this.label ? this.label : undefined)}\n @click=${this.onClick}\n @keydown=${this.onKeyDown}\n @sp-tab-contentchange=${this.updateSelectionIndicator}\n id=\"list\"\n role=\"tablist\"\n >\n <slot @slotchange=${this.onSlotChange}></slot>\n <div\n id=\"selection-indicator\"\n class=${ifDefined(\n this.shouldAnimate ? undefined : 'first-position'\n )}\n style=${this.selectionIndicatorStyle}\n role=\"presentation\"\n ></div>\n </div>\n <slot name=\"tab-panel\" @slotchange=${this.managePanels}></slot>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n const selectedChild = this.querySelector(':scope > [selected]') as Tab;\n if (selectedChild) {\n this.selectTarget(selectedChild);\n }\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (changes.has('selected')) {\n if (changes.get('selected')) {\n const previous = this.querySelector(\n `[role=\"tabpanel\"][value=\"${changes.get('selected')}\"]`\n ) as TabPanel;\n if (previous) previous.selected = false;\n }\n const next = this.querySelector(\n `[role=\"tabpanel\"][value=\"${this.selected}\"]`\n ) as TabPanel;\n if (next) next.selected = true;\n }\n if (changes.has('direction')) {\n if (this.direction === 'horizontal') {\n this.removeAttribute('aria-orientation');\n } else {\n this.setAttribute('aria-orientation', 'vertical');\n }\n }\n if (changes.has('dir')) {\n this.updateSelectionIndicator();\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n if (\n !this.shouldAnimate &&\n typeof changes.get('shouldAnimate') !== 'undefined'\n ) {\n this.shouldAnimate = true;\n }\n }\n\n private onClick = (event: Event): void => {\n if (this.disabled) {\n return;\n }\n const target = event\n .composedPath()\n .find((el) => (el as Tab).parentElement === this) as Tab;\n if (!target || target.disabled) {\n return;\n }\n this.shouldAnimate = true;\n this.selectTarget(target);\n };\n\n private onKeyDown = (event: KeyboardEvent): void => {\n if (event.code === 'Enter' || event.code === 'Space') {\n event.preventDefault();\n const target = event.target as HTMLElement;\n if (target) {\n this.selectTarget(target);\n }\n }\n };\n\n private selectTarget(target: HTMLElement): void {\n const value = target.getAttribute('value');\n if (value) {\n const selected = this.selected;\n this.selected = value;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.selected = selected;\n }\n }\n }\n\n private onSlotChange(): void {\n this.tabs = [...this.querySelectorAll('[role=\"tab\"]')] as Tab[];\n this.shouldUpdateCheckedState();\n }\n\n private shouldUpdateCheckedState(): void {\n this.tabChangeResolver();\n this.tabChangePromise = new Promise(\n (res) => (this.tabChangeResolver = res)\n );\n setTimeout(this.updateCheckedState);\n }\n\n private updateCheckedState = (): void => {\n if (!this.tabs.length) {\n this.tabs = [...this.querySelectorAll('[role=\"tab\"]')] as Tab[];\n }\n this.tabs.forEach((element) => {\n element.removeAttribute('selected');\n });\n\n if (this.selected) {\n const currentChecked = this.tabs.find(\n (el) => el.value === this.selected\n );\n\n if (currentChecked) {\n currentChecked.selected = true;\n } else {\n this.selected = '';\n }\n } else {\n const firstTab = this.tabs[0];\n if (firstTab) {\n firstTab.setAttribute('tabindex', '0');\n }\n }\n\n this.updateSelectionIndicator();\n this.tabChangeResolver();\n };\n\n private updateSelectionIndicator = async (): Promise<void> => {\n const selectedElement = this.tabs.find((el) => el.selected);\n if (!selectedElement) {\n this.selectionIndicatorStyle = noSelectionStyle;\n return;\n }\n await Promise.all([\n selectedElement.updateComplete,\n document.fonts ? document.fonts.ready : Promise.resolve(),\n ]);\n const tabBoundingClientRect = selectedElement.getBoundingClientRect();\n const parentBoundingClientRect = this.getBoundingClientRect();\n\n if (this.direction === 'horizontal') {\n const width = tabBoundingClientRect.width;\n const offset =\n this.dir === 'ltr'\n ? tabBoundingClientRect.left - parentBoundingClientRect.left\n : tabBoundingClientRect.right -\n parentBoundingClientRect.right;\n\n this.selectionIndicatorStyle = `transform: translateX(${offset}px) scaleX(${\n this.dir === 'ltr' ? width : -1 * width\n });`;\n } else {\n const height = tabBoundingClientRect.height;\n const offset =\n tabBoundingClientRect.top - parentBoundingClientRect.top;\n\n this.selectionIndicatorStyle = `transform: translateY(${offset}px) scaleY(${height});`;\n }\n };\n\n private tabChangePromise = Promise.resolve();\n private tabChangeResolver: () => void = function () {\n return;\n };\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.tabChangePromise;\n return complete;\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener('resize', this.updateSelectionIndicator);\n if ('fonts' in document) {\n (\n document as unknown as {\n fonts: {\n addEventListener: (\n name: string,\n callback: () => void\n ) => void;\n };\n }\n ).fonts.addEventListener(\n 'loadingdone',\n this.updateSelectionIndicator\n );\n }\n }\n\n public override disconnectedCallback(): void {\n window.removeEventListener('resize', this.updateSelectionIndicator);\n if ('fonts' in document) {\n (\n document as unknown as {\n fonts: {\n removeEventListener: (\n name: string,\n callback: () => void\n ) => void;\n };\n }\n ).fonts.removeEventListener(\n 'loadingdone',\n this.updateSelectionIndicator\n );\n }\n super.disconnectedCallback();\n }\n}\n"]}