@tet/tet-components 1.4.86-testing → 1.4.87-testing
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index-3242ff3f.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tet-components.cjs.js +1 -1
- package/dist/cjs/tet-snicker-card.cjs.entry.js +43 -8
- package/dist/cjs/tet-tab-header.cjs.entry.js +44 -14
- package/dist/collection/components/advanced/cards/tet-snicker-card/tet-snicker-card.css +27 -3
- package/dist/collection/components/advanced/cards/tet-snicker-card/tet-snicker-card.js +83 -7
- package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.css +23 -0
- package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.js +101 -13
- package/dist/components/{p-7836f80d.js → p-67c39d1c.js} +49 -15
- package/dist/components/tet-assembler.js +1 -1
- package/dist/components/tet-cloud-configurator.js +1 -1
- package/dist/components/tet-compare-cards-tab.js +1 -1
- package/dist/components/tet-snicker-card.js +68 -26
- package/dist/components/tet-tab-header.js +1 -1
- package/dist/esm/index-aac31bd2.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tet-components.js +1 -1
- package/dist/esm/tet-snicker-card.entry.js +43 -8
- package/dist/esm/tet-tab-header.entry.js +44 -14
- package/dist/tet-components/p-c00ec93c.entry.js +1 -0
- package/dist/tet-components/p-ed9d2b9b.entry.js +1 -0
- package/dist/tet-components/tet-components.esm.js +1 -1
- package/dist/types/components/advanced/cards/tet-snicker-card/tet-snicker-card.d.ts +14 -0
- package/dist/types/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.d.ts +13 -1
- package/dist/types/components.d.ts +51 -6
- package/package.json +1 -1
- package/dist/tet-components/p-2e5c8d0d.entry.js +0 -1
- package/dist/tet-components/p-d235f460.entry.js +0 -1
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { debounce } from "../../../../../services/utils/index";
|
|
3
3
|
/**
|
|
4
|
-
* **IMPORTANT:**
|
|
4
|
+
* **IMPORTANT:** In `tab-header` mode, the tet-tab-header and tet-tab-content components must share the same
|
|
5
5
|
* parent element (neither component can use a separate wrapper).
|
|
6
6
|
*
|
|
7
7
|
* The tabs organize content into separate views where only one view can be visible at a time.
|
|
8
8
|
* Each tab's label is shown in the tab header.
|
|
9
|
+
* In `switch` mode, the component represents mutually exclusive choices using radiogroup/radio semantics
|
|
10
|
+
* and does not require tab panels.
|
|
9
11
|
*/
|
|
10
12
|
export class TetTabHeader {
|
|
11
13
|
constructor() {
|
|
@@ -15,6 +17,9 @@ export class TetTabHeader {
|
|
|
15
17
|
this.sizing = 'web';
|
|
16
18
|
this.defaultTab = 0;
|
|
17
19
|
this.segmented = false;
|
|
20
|
+
this.disabled = false;
|
|
21
|
+
this.mode = 'tab-header';
|
|
22
|
+
this.accessibilityLabel = '';
|
|
18
23
|
this.hideHeaderUnderline = false;
|
|
19
24
|
this.hideActiveHeaderUnderline = false;
|
|
20
25
|
this.autoplayDelay = 0;
|
|
@@ -254,6 +259,12 @@ export class TetTabHeader {
|
|
|
254
259
|
get isScrollableType() {
|
|
255
260
|
return this.type === 'pill' || this.type === 'square-detached';
|
|
256
261
|
}
|
|
262
|
+
get isSwitchMode() {
|
|
263
|
+
return this.mode === 'switch';
|
|
264
|
+
}
|
|
265
|
+
get isSwitchDisabled() {
|
|
266
|
+
return this.isSwitchMode && this.disabled;
|
|
267
|
+
}
|
|
257
268
|
cleanupTabListeners() {
|
|
258
269
|
this.tabHeaders?.forEach((tab) => {
|
|
259
270
|
const listeners = this.tabListeners.get(tab);
|
|
@@ -355,6 +366,30 @@ export class TetTabHeader {
|
|
|
355
366
|
this.initAnimationObserver();
|
|
356
367
|
}
|
|
357
368
|
}
|
|
369
|
+
onDisabledChange() {
|
|
370
|
+
this.initTabHeaders();
|
|
371
|
+
}
|
|
372
|
+
setTabAccessibility(tab, index, active) {
|
|
373
|
+
const disabled = this.isSwitchMode && (this.isSwitchDisabled || tab.classList.contains('disabled'));
|
|
374
|
+
tab.setAttribute('tabIndex', `${active && !disabled ? '0' : '-1'}`);
|
|
375
|
+
if (this.isSwitchMode) {
|
|
376
|
+
tab.setAttribute('role', 'radio');
|
|
377
|
+
tab.setAttribute('aria-checked', `${active}`);
|
|
378
|
+
if (disabled) {
|
|
379
|
+
tab.setAttribute('aria-disabled', 'true');
|
|
380
|
+
}
|
|
381
|
+
else {
|
|
382
|
+
tab.removeAttribute('aria-disabled');
|
|
383
|
+
}
|
|
384
|
+
tab.removeAttribute('aria-selected');
|
|
385
|
+
tab.removeAttribute('aria-controls');
|
|
386
|
+
return;
|
|
387
|
+
}
|
|
388
|
+
tab.setAttribute('role', 'tab');
|
|
389
|
+
tab.setAttribute('aria-controls', `tabpanel-${index + 1}-${this.idSuffix}`);
|
|
390
|
+
tab.setAttribute('aria-selected', `${active}`);
|
|
391
|
+
tab.removeAttribute('aria-checked');
|
|
392
|
+
}
|
|
358
393
|
/**
|
|
359
394
|
* Initializes tab headers.
|
|
360
395
|
*/
|
|
@@ -363,13 +398,10 @@ export class TetTabHeader {
|
|
|
363
398
|
this.tabHeaders = Array.from(this.element.children);
|
|
364
399
|
this.tabHeadersNotDisabled = [];
|
|
365
400
|
this.tabHeaders.forEach((tab, index) => {
|
|
366
|
-
tab.setAttribute('role', 'tab');
|
|
367
401
|
tab.setAttribute('id', `tab-${index + 1}-${this.idSuffix}`);
|
|
368
|
-
tab.
|
|
369
|
-
const disabled = tab.classList.contains('disabled');
|
|
402
|
+
const disabled = this.isSwitchDisabled || tab.classList.contains('disabled');
|
|
370
403
|
const active = tab.classList.contains('active');
|
|
371
|
-
|
|
372
|
-
tab.setAttribute('aria-selected', `${active}`);
|
|
404
|
+
this.setTabAccessibility(tab, index, active);
|
|
373
405
|
if (!disabled && !this.tabListeners.has(tab)) {
|
|
374
406
|
this.tabHeadersNotDisabled.push(tab);
|
|
375
407
|
const clickHandler = () => {
|
|
@@ -525,10 +557,9 @@ export class TetTabHeader {
|
|
|
525
557
|
if (this.tabHeaders === undefined) {
|
|
526
558
|
return;
|
|
527
559
|
}
|
|
528
|
-
this.tabHeaders.forEach((tab) => {
|
|
560
|
+
this.tabHeaders.forEach((tab, index) => {
|
|
529
561
|
tab.classList.remove('active');
|
|
530
|
-
|
|
531
|
-
tab.setAttribute('tabIndex', '-1');
|
|
562
|
+
this.setTabAccessibility(tab, index, false);
|
|
532
563
|
const imageActive = tab.querySelector('img.tab-header-image.active');
|
|
533
564
|
if (imageActive) {
|
|
534
565
|
imageActive.style.display = 'none';
|
|
@@ -554,8 +585,7 @@ export class TetTabHeader {
|
|
|
554
585
|
});
|
|
555
586
|
}
|
|
556
587
|
selectedTab.classList.add('active');
|
|
557
|
-
selectedTab.
|
|
558
|
-
selectedTab.setAttribute('tabIndex', '0');
|
|
588
|
+
this.setTabAccessibility(selectedTab, this.tabHeaders.indexOf(selectedTab), true);
|
|
559
589
|
this.applyPillIconColor();
|
|
560
590
|
const imageActive = selectedTab.querySelector('img.tab-header-image.active');
|
|
561
591
|
if (imageActive) {
|
|
@@ -622,16 +652,17 @@ export class TetTabHeader {
|
|
|
622
652
|
}
|
|
623
653
|
render() {
|
|
624
654
|
const shouldRenderOverflowGradients = this.showOverflowGradients;
|
|
625
|
-
return (h(Host, { key: '
|
|
655
|
+
return (h(Host, { key: '066ac0cb29060dbf7e6b88e0170d2f3cd47c8b76', "data-id-suffix": this.idSuffix }, h("div", { key: '8e664aece15cbc58b9c39e2a879f504489e62e8e', class: {
|
|
626
656
|
'tabs': true,
|
|
627
657
|
'tabs--segmented': this.segmented,
|
|
658
|
+
'tabs--disabled': this.isSwitchDisabled,
|
|
628
659
|
'tabs--overflow-left': this.hasOverflowLeft,
|
|
629
660
|
'tabs--overflow-right': this.hasOverflowRight,
|
|
630
661
|
[this.effectivePosition]: true,
|
|
631
662
|
[this.theme]: true,
|
|
632
663
|
[this.sizing]: true,
|
|
633
664
|
[this.type]: !!this.type
|
|
634
|
-
}, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role:
|
|
665
|
+
}, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: this.isSwitchMode ? 'radiogroup' : 'tablist', "aria-label": this.isSwitchMode && this.accessibilityLabel ? this.accessibilityLabel : undefined, "aria-orientation": this.isSwitchMode ? 'horizontal' : undefined, "aria-disabled": this.isSwitchDisabled ? 'true' : undefined }, shouldRenderOverflowGradients && h("div", { key: '4c9ae2fbe2bf27d7cc91bbc8ce55c3e9d7469a3b', class: "tabs-gradient tabs-gradient-left", "aria-hidden": "true" }), h("slot", { key: '677d35c1979329dc6271f231ca554ca58ed4924f', onSlotchange: () => this.updatePositionClass(), ref: (slot) => (this.tabContainer = slot) }), shouldRenderOverflowGradients && h("div", { key: '5a265eba7ef003aa87fe6bdf55ea9f596cbccfa2', class: "tabs-gradient tabs-gradient-right", "aria-hidden": "true" })), h("div", { key: '76e09c8fc61c1a6adc5d00224caf73869af66d57', class: {
|
|
635
666
|
'tabs-line': !this.segmented,
|
|
636
667
|
'no-underline': this.hideHeaderUnderline || this.isScrollableType,
|
|
637
668
|
[this.theme]: true
|
|
@@ -757,6 +788,60 @@ export class TetTabHeader {
|
|
|
757
788
|
"reflect": false,
|
|
758
789
|
"defaultValue": "false"
|
|
759
790
|
},
|
|
791
|
+
"disabled": {
|
|
792
|
+
"type": "boolean",
|
|
793
|
+
"mutable": false,
|
|
794
|
+
"complexType": {
|
|
795
|
+
"original": "boolean",
|
|
796
|
+
"resolved": "boolean",
|
|
797
|
+
"references": {}
|
|
798
|
+
},
|
|
799
|
+
"required": false,
|
|
800
|
+
"optional": false,
|
|
801
|
+
"docs": {
|
|
802
|
+
"tags": [],
|
|
803
|
+
"text": "Disables interactions when used as a segment switch."
|
|
804
|
+
},
|
|
805
|
+
"attribute": "disabled",
|
|
806
|
+
"reflect": false,
|
|
807
|
+
"defaultValue": "false"
|
|
808
|
+
},
|
|
809
|
+
"mode": {
|
|
810
|
+
"type": "string",
|
|
811
|
+
"mutable": false,
|
|
812
|
+
"complexType": {
|
|
813
|
+
"original": "'tab-header' | 'switch'",
|
|
814
|
+
"resolved": "\"switch\" | \"tab-header\"",
|
|
815
|
+
"references": {}
|
|
816
|
+
},
|
|
817
|
+
"required": false,
|
|
818
|
+
"optional": false,
|
|
819
|
+
"docs": {
|
|
820
|
+
"tags": [],
|
|
821
|
+
"text": "Determines whether the component uses tab or segmented switch semantics."
|
|
822
|
+
},
|
|
823
|
+
"attribute": "mode",
|
|
824
|
+
"reflect": false,
|
|
825
|
+
"defaultValue": "'tab-header'"
|
|
826
|
+
},
|
|
827
|
+
"accessibilityLabel": {
|
|
828
|
+
"type": "string",
|
|
829
|
+
"mutable": false,
|
|
830
|
+
"complexType": {
|
|
831
|
+
"original": "string",
|
|
832
|
+
"resolved": "string",
|
|
833
|
+
"references": {}
|
|
834
|
+
},
|
|
835
|
+
"required": false,
|
|
836
|
+
"optional": false,
|
|
837
|
+
"docs": {
|
|
838
|
+
"tags": [],
|
|
839
|
+
"text": "Accessible name for the switch-mode radio group."
|
|
840
|
+
},
|
|
841
|
+
"attribute": "accessibility-label",
|
|
842
|
+
"reflect": false,
|
|
843
|
+
"defaultValue": "''"
|
|
844
|
+
},
|
|
760
845
|
"hideHeaderUnderline": {
|
|
761
846
|
"type": "boolean",
|
|
762
847
|
"mutable": false,
|
|
@@ -1035,6 +1120,9 @@ export class TetTabHeader {
|
|
|
1035
1120
|
}, {
|
|
1036
1121
|
"propName": "segmented",
|
|
1037
1122
|
"methodName": "onSegmentedChange"
|
|
1123
|
+
}, {
|
|
1124
|
+
"propName": "disabled",
|
|
1125
|
+
"methodName": "onDisabledChange"
|
|
1038
1126
|
}];
|
|
1039
1127
|
}
|
|
1040
1128
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-25b93e8f.js';
|
|
2
2
|
import { a as debounce } from './p-64ec8edd.js';
|
|
3
3
|
|
|
4
|
-
const tetTabHeaderCss = ":host{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}:host{--color-gray-light:#cdd2de;--color-ta070:#f5f6f8;--color-ta080:#e6e8ee;--color-ta100:#cdd2de;--color-ta200:#9ba5be;--color-ta300:#69789c;--color-ta500:#1e356a;--color-ta600:#051d59;--color-tc090:#d6e6fd;--color-tc100:#d1dffe;--color-tc300:#75a1fb;--color-tc500:#1a70f6;--color-tc600:#0060f5;--color-td500:#00F1F2;--color-td600:#01cbe0;--color-tf600:#f53b2a;--color-tg300:#2b3036;--color-tg400:#1d2128;--color-tg500:#12171e;--color-tg600:#01050c;--color-th500:#f5f5f5;--color-ti500:#869198;--color-ti600:#aeb7bc;--text-font:Gilroy, serif;--text-color-darker:var(--color-ta600);--text-color-dark:var(--color-ta500);--text-color-dark-theme:var(--color-th500);--icons-font:Tet Icons, serif}.icon.tet-search{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-search::before{content:\"\\e86e\"}.icon.tet-close-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close-circled::before{content:\"\\e85a\"}.icon.tet-close{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close::before{content:\"\\e85b\"}.icon.tet-check-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check-circled::before{content:\"\\e86c\"}.icon.tet-check{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check::before{content:\"\\e855\"}.icon.tet-chevron-up{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-up::before{content:\"\\e859\"}.icon.tet-chevron-down{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-down::before{content:\"\\e856\"}.icon.tet-clipboard{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-clipboard::before{content:\"\\e86a\"}.icon.tet-info{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-info::before{content:\"\\e81d\"}.icon.tet-done{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-done::before{content:\"\\e867\"}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{--tabs-container-border-color:var(--tc-border-quaternary);--tabs-container-flex-wrap:nowrap;--tabs-headers-text-color:var(--tc-text-primary);--tabs-headers-text-disabled-color:var(--tc-grey-50);--tabs-headers-active-border-color:var(--tc-icon-primary);--tabs-headers-hover-border-color:var(--tc-border-tertiary);--tabs-headers-focus-border-color:var(--tc-border-secondary);--tabs-headers-focus-outline-color:var(--tc-blue-40);--tabs-headers-segmended-item-font:500 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;--tabs-headers-segmented-border-color:var(--tc-border-quaternary);--tabs-headers-segmented-background-color:var(--tc-layer-tertiary);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary);--tabs-headers-segmented-active-box-shadow:var(--tc-elevation-two);--tabs-headers-item-padding:0.75rem 0.25rem;--tabs-headers-item-margin:0 0.25rem;--tabs-headers-segmented-item-padding:0.375rem 1.5rem;--tabs-headers-segmented-item-margin:0.25rem 0;--tabs-headers-square-base-rgb:255, 255, 255;--tabs-headers-pill-text-color:var(--tc-text-primary);--tabs-headers-pill-text-disabled-color:color-mix(in srgb, var(--tc-grey-80) 16%, transparent);--tabs-headers-pill-background-color:var(--tc-grey-20);--tabs-headers-pill-hover-background-color:var(--tc-grey-30);--tabs-headers-pill-pressed-background-color:color-mix(in srgb, var(--tc-grey-40) 80%, transparent);--tabs-headers-pill-active-background-color:var(--tc-yellow-40);--tabs-headers-pill-active-text-color:var(--tc-text-primary);--tabs-headers-pill-gradient-color:var(--tc-background-primary);--tabs-headers-pill-edge-padding:0rem;--tabs-headers-square-detached-background-color:var(--tc-grey-20);--tabs-headers-square-detached-hover-background-color:var(--tc-grey-30);--tabs-headers-square-detached-pressed-background-color:var(--tc-grey-40);--tabs-headers-square-detached-active-background-color:var(--tc-grey-110);--tabs-headers-square-detached-disabled-background-color:var(--tc-grey-20);--tabs-headers-square-detached-focus-outline-color:var(--tc-blue-40);--tabs-headers-square-detached-svg-filter:brightness(0) invert(0.298);--tabs-headers-square-detached-svg-hover-filter:brightness(0) invert(0.098);--tabs-headers-square-detached-svg-pressed-filter:brightness(0) invert(0.098);--tabs-headers-square-detached-svg-active-filter:brightness(0) invert(1);--tabs-headers-square-detached-svg-disabled-filter:brightness(0) invert(0.631);--tabs-headers-square-detached-gradient-color:var(--tc-background-primary);--tabs-headers-square-detached-button-max-width-default:7rem;max-width:100%}:host .dark{--tabs-container-border-color:var(--tc-border-quaternary-dark);--tabs-headers-text-color:var(--tc-text-primary-dark);--tabs-headers-text-disabled-color:var(--tc-grey-50-dark);--tabs-headers-active-border-color:var(--tc-icon-primary-dark);--tabs-headers-hover-border-color:var(--tc-border-tertiary-dark);--tabs-headers-focus-border-color:var(--tc-border-secondary-dark);--tabs-headers-focus-outline-color:var(--tc-blue-40-dark);--tabs-headers-segmented-border-color:var(--tc-border-quaternary-dark);--tabs-headers-segmented-background-color:var(--tc-layer-tertiary-dark);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary-dark);--tabs-headers-segmented-active-box-shadow:var(--tc-elevation-two-dark);--tabs-headers-pill-text-color:var(--tc-grey-100-dark);--tabs-headers-pill-text-disabled-color:color-mix(in srgb, var(--tc-grey-80-dark) 30%, transparent);--tabs-headers-pill-background-color:var(--tc-brown-80-dark);--tabs-headers-pill-hover-background-color:var(--tc-brown-70-dark);--tabs-headers-pill-pressed-background-color:color-mix(in srgb, var(--tc-brown-60-dark) 80%, transparent);--tabs-headers-pill-active-background-color:var(--tc-yellow-40-dark);--tabs-headers-pill-active-text-color:var(--tc-text-primary);--tabs-headers-pill-gradient-color:var(--tc-background-primary-dark);--tabs-headers-square-detached-background-color:var(--tc-brown-80-dark);--tabs-headers-square-detached-hover-background-color:var(--tc-brown-70-dark);--tabs-headers-square-detached-pressed-background-color:var(--tc-brown-60-dark);--tabs-headers-square-detached-active-background-color:var(--tc-yellow-40-dark);--tabs-headers-square-detached-disabled-background-color:var(--tc-brown-80-dark);--tabs-headers-square-detached-focus-outline-color:var(--tc-blue-40-dark);--tabs-headers-square-detached-svg-filter:brightness(0) invert(0.859);--tabs-headers-square-detached-svg-hover-filter:brightness(0) invert(0.969);--tabs-headers-square-detached-svg-pressed-filter:brightness(0) invert(0.969);--tabs-headers-square-detached-svg-active-filter:brightness(0) invert(0.051);--tabs-headers-square-detached-svg-disabled-filter:brightness(0) invert(0.631);--tabs-headers-square-detached-gradient-color:var(--tc-background-primary-dark)}.tabs{--active-width:auto;--active-x-pos:0;--active-transition:none;position:relative;display:flex;flex-wrap:var(--tabs-container-flex-wrap);align-items:center;max-width:100%;padding:0.125rem 0;overflow-x:scroll;scrollbar-width:none;-webkit-user-select:none;user-select:none}.tabs ::slotted(img){margin:0;padding:0;height:1.3125rem}.tabs-line{display:flex;position:relative;max-width:100%;height:0.0625rem;background-color:var(--tabs-container-border-color);border:none;margin-top:-0.125rem}.tabs-line.no-underline{display:none}.tabs *{box-sizing:border-box}.tabs::-webkit-scrollbar{display:none}.tabs.right:not(.tabs--segmented){justify-content:flex-end}.tabs.center:not(.tabs--segmented){justify-content:center}.tabs ::slotted(*){display:flex;justify-content:center;align-items:center;border-bottom:0.125rem solid transparent;color:var(--tabs-headers-text-color);cursor:pointer;padding:var(--tabs-headers-item-padding) !important;margin:var(--tabs-headers-item-margin);transition:border-bottom-color 0.2s ease;white-space:nowrap;background-color:transparent;border-color:transparent;border-radius:0.125rem}.tabs ::slotted(:first-child){margin-left:0}.tabs ::slotted(:last-child){margin-right:0}.tabs ::slotted(:hover){border-bottom-color:var(--tabs-headers-hover-border-color);background-color:transparent}.tabs ::slotted(:focus){border-bottom-color:var(--tabs-headers-focus-border-color)}.tabs ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:0rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-bottom-color:transparent;z-index:99}.tabs ::slotted(.disabled){border-bottom-color:transparent;color:var(--tabs-headers-text-disabled-color);outline:none;cursor:not-allowed}.tabs ::slotted(.active){border-bottom-color:var(--tabs-headers-active-border-color)}.tabs.pill .tabs-gradient,.tabs.square-detached .tabs-gradient{position:sticky;top:0.5rem;bottom:0.5rem;width:13.75rem;align-self:stretch;flex-shrink:0;opacity:0;z-index:20;pointer-events:none;transition:opacity 0.4s ease-out}.tabs.pill .tabs-gradient-left,.tabs.square-detached .tabs-gradient-left{left:-0.5rem;margin-right:-13.75rem;background:linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--tabs-gradient-color) 100%)}.tabs.pill .tabs-gradient-right,.tabs.square-detached .tabs-gradient-right{right:-0.5rem;margin-left:-13.75rem;background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--tabs-gradient-color) 100%)}.tabs.pill.tabs--overflow-left .tabs-gradient-left,.tabs.square-detached.tabs--overflow-left .tabs-gradient-left{opacity:1}.tabs.pill.tabs--overflow-right .tabs-gradient-right,.tabs.square-detached.tabs--overflow-right .tabs-gradient-right{opacity:1}.tabs.square-detached{--tabs-gradient-color:var(--tabs-headers-square-detached-gradient-color);padding-top:0.5rem;padding-bottom:0.5rem;margin-top:-0.5rem;margin-bottom:-0.5rem}.tabs.square-detached ::slotted(*){display:flex;flex:1;min-width:var(--tabs-headers-square-detached-button-max-width, var(--tabs-headers-square-detached-button-max-width-default));max-width:var(--tabs-headers-square-detached-button-max-width, var(--tabs-headers-square-detached-button-max-width-default));border:none;box-sizing:border-box;background-color:var(--tabs-headers-square-detached-background-color);justify-content:center;align-items:center;flex-shrink:0;transition:background-color 0.2s ease;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-filter)}.tabs.square-detached ::slotted(:hover){border-bottom-color:transparent;background-color:var(--tabs-headers-square-detached-hover-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-hover-filter)}.tabs.square-detached ::slotted(:active){background-color:var(--tabs-headers-square-detached-pressed-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-pressed-filter)}.tabs.square-detached ::slotted(:focus-visible){background-color:var(--tabs-headers-square-detached-active-background-color);border-bottom-color:transparent;outline:0.125rem solid var(--tc-blue-40);outline-offset:0.25rem;transition:outline 0s;outline-color:var(--tabs-headers-square-detached-focus-outline-color);z-index:99;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-active-filter)}.tabs.square-detached ::slotted(.active){border-bottom-color:transparent;background-color:var(--tabs-headers-square-detached-active-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-active-filter)}.tabs.square-detached ::slotted(.disabled){background-color:var(--tabs-headers-square-detached-disabled-background-color);border-bottom-color:transparent;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-disabled-filter);cursor:not-allowed}.tabs.square-detached ::slotted(:first-child){margin-left:unset}.tabs.square-detached ::slotted(:last-child){margin-right:unset}.tabs.square-detached.mobile{--tabs-headers-item-margin:0 0.5rem}.tabs.square-detached.mobile ::slotted(*){--square-detached-logo-max-w:3.9375rem;--square-detached-logo-max-h:2.8125rem;height:5.125rem;border-radius:0.568rem;padding:0.568rem 1.419rem}.tabs.square-detached.tablet{--tabs-headers-item-margin:0 0.75rem}.tabs.square-detached.tablet ::slotted(*){--square-detached-logo-max-w:5.1875rem;--square-detached-logo-max-h:3.75rem;--tabs-headers-square-detached-button-max-width-default:9.1875rem;height:6.75rem;border-radius:0.75rem;padding:0.75rem 1.875rem}.tabs.square-detached.web{--tabs-headers-item-margin:0 0.75rem}.tabs.square-detached.web ::slotted(*){--square-detached-logo-max-w:6.875rem;--square-detached-logo-max-h:5rem;--tabs-headers-square-detached-button-max-width-default:17.25rem;min-width:12.25rem !important;height:9rem;border-radius:1rem;padding:1rem 2.5rem}.tabs.blue ::slotted(:hover){--tabs-headers-hover-border-color:rgb(113, 172, 244)}.tabs.blue ::slotted(:focus){--tabs-headers-focus-border-color:rgb(113, 172, 244)}.tabs.blue ::slotted(.active){--tabs-headers-active-border-color:rgb(0, 96, 245)}.tabs.pill{--tabs-gradient-color:var(--tabs-headers-pill-gradient-color);--tabs-edge-padding:var(--tabs-headers-pill-edge-padding);padding-top:0.5rem;padding-bottom:0.5rem;margin-top:-0.5rem;margin-bottom:-0.5rem;padding-inline:calc(var(--tabs-headers-pill-edge-padding) + 0.5rem);margin-inline:-0.5rem}.tabs.pill ::slotted(*){--icon-size:1rem;gap:0.25rem;border-radius:5.5rem;border-bottom:none;transition:all 0.2s ease-in-out;align-items:center;background-color:var(--tabs-headers-pill-background-color);color:var(--tabs-headers-pill-text-color);box-sizing:border-box}.tabs.pill.web ::slotted(*){--tabs-headers-item-padding:0.375rem 1.5rem;font:500 1rem/1.5rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.00625rem;min-width:5.625rem;flex-shrink:0;height:2.25rem}.tabs.pill.web ::slotted(:has(tet-icon)){--tabs-headers-item-padding:0.375rem 1rem 0.375rem 0.875rem}.tabs.pill.mobile ::slotted(*){--tabs-headers-item-padding:0.375rem 1rem;font:500 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.003125rem;min-width:4.3125rem;flex-shrink:0;height:2rem}.tabs.pill.mobile ::slotted(:has(tet-icon)){--tabs-headers-item-padding:0.375rem 0.75rem 0.375rem 0.5rem}.tabs.pill ::slotted(:hover){border-bottom-color:transparent;background-color:var(--tabs-headers-pill-hover-background-color)}.tabs.pill ::slotted(:active){background-color:var(--tabs-headers-pill-pressed-background-color)}.tabs.pill ::slotted(:focus){border-bottom-color:transparent}.tabs.pill ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:0.25rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-bottom-color:transparent}.tabs.pill ::slotted(.active){border-bottom-color:transparent;background-color:var(--tabs-headers-pill-active-background-color);color:var(--tabs-headers-pill-active-text-color)}.tabs.pill ::slotted(.active:active){background-color:var(--tabs-headers-pill-pressed-background-color)}.tabs.pill ::slotted(.disabled){background-color:var(--tabs-headers-pill-background-color);color:var(--tabs-headers-pill-text-disabled-color);cursor:not-allowed}.tabs.pill ::slotted(:first-child){margin-left:0 !important}.tabs.pill ::slotted(:last-child){margin-right:0 !important}.tabs--segmented{display:flex;border:0.0625rem solid var(--tabs-headers-segmented-border-color);border-radius:1.5rem;background-color:var(--tabs-headers-segmented-background-color);padding:0 0.25rem;box-sizing:border-box;overflow-x:scroll}.tabs--segmented .web{padding:0.25rem}.tabs--segmented ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.125rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color)}.tabs--segmented.dark-gray{--tabs-headers-text-color:rgb(255, 255, 255);--tabs-headers-segmented-border-color:rgb(67, 75, 86);--tabs-headers-segmented-background-color:rgb(35, 40, 46);--tabs-headers-segmented-active-background-color:rgb(67, 75, 86);--tabs-headers-segmented-active-box-shadow:0 0 0.0625rem 0 rgba(10, 11, 13, 0.08),\n 0 0.1875rem 0.25rem 0 rgba(10, 11, 13, 0.12);--icon-color:rgb(255, 255, 255)}.tabs--segmented.dark-gray ::slotted(:hover),.tabs--segmented.dark-gray ::slotted(:focus),.tabs--segmented.dark-gray ::slotted(.active){color:rgb(255, 255, 255)}.tabs--segmented.dark-gray ::slotted(.disabled){color:var(--tabs-headers-text-disabled-color);cursor:not-allowed}.tabs--segmented::before{content:\"\";position:absolute;top:0.25rem;bottom:0.25rem;left:0;z-index:0;border-radius:1.563rem;width:var(--active-width);transform:translateX(var(--active-x-pos));transition:var(--active-transition);background:var(--tabs-headers-segmented-active-background-color);box-shadow:var(--tabs-headers-segmented-active-box-shadow)}.tabs--segmented ::slotted(*){font:var(--tabs-headers-segmended-item-font);line-height:1.5rem;z-index:1;position:relative;border:none;padding:var(--tabs-headers-segmented-item-padding) !important;margin:var(--tabs-headers-segmented-item-margin) !important;border-radius:1.563rem;display:flex;flex:1;justify-content:center}.tabs--segmented.mobile ::slotted(*){font:500 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.003125rem;font-weight:500;padding:0.25rem 1.5rem !important;margin:0.188rem 0 !important;line-height:1.25rem}.tabs--segmented.square{--tabs-headers-segmented-background-color:rgba(var(--tabs-headers-square-base-rgb), 0.16);--tabs-headers-segmented-border-color:transparent;height:4.75rem;border-radius:0.375rem;padding:0}.tabs--segmented.square::before{--tabs-headers-segmented-active-box-shadow:none;position:absolute;top:0;bottom:0;left:-0.0625rem;border-radius:0}.tabs--segmented.square ::slotted(*){--tabs-headers-segmented-item-padding:0;--tabs-headers-segmented-item-margin:0;border-radius:0;height:100%;align-items:center}.tabs--segmented.square ::slotted(*)::after{content:\"\";background-color:rgba(var(--tabs-headers-square-base-rgb), 0.2);position:absolute;top:0.375rem;bottom:0.375rem;right:0;width:0.0625rem}.tabs--segmented.square ::slotted(:hover){background-color:rgba(var(--tabs-headers-square-base-rgb), 0.24)}.tabs--segmented.square ::slotted(:first-child){border-radius:0.3125rem 0 0 0.3125rem}.tabs--segmented.square ::slotted(:last-child){border-radius:0 0.3125rem 0.3125rem 0}.tabs--segmented.square ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.125rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color)}.tabs--segmented.square ::slotted(:focus-visible)::after{display:none}.tabs--segmented.square ::slotted(.active)::after,.tabs--segmented.square ::slotted(:last-child)::after{display:none}.tabs--segmented.netflix{height:2.75rem;gap:0.5rem;overflow-y:hidden}.tabs--segmented.netflix ::slotted(*){flex-direction:row-reverse;align-items:center;justify-content:center;gap:0.5rem}.tabs--segmented.netflix ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.0625rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-radius:1.563rem}.tabs ::slotted(.no-underline){border-bottom:none}";
|
|
4
|
+
const tetTabHeaderCss = ":host{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}:host{--color-gray-light:#cdd2de;--color-ta070:#f5f6f8;--color-ta080:#e6e8ee;--color-ta100:#cdd2de;--color-ta200:#9ba5be;--color-ta300:#69789c;--color-ta500:#1e356a;--color-ta600:#051d59;--color-tc090:#d6e6fd;--color-tc100:#d1dffe;--color-tc300:#75a1fb;--color-tc500:#1a70f6;--color-tc600:#0060f5;--color-td500:#00F1F2;--color-td600:#01cbe0;--color-tf600:#f53b2a;--color-tg300:#2b3036;--color-tg400:#1d2128;--color-tg500:#12171e;--color-tg600:#01050c;--color-th500:#f5f5f5;--color-ti500:#869198;--color-ti600:#aeb7bc;--text-font:Gilroy, serif;--text-color-darker:var(--color-ta600);--text-color-dark:var(--color-ta500);--text-color-dark-theme:var(--color-th500);--icons-font:Tet Icons, serif}.icon.tet-search{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-search::before{content:\"\\e86e\"}.icon.tet-close-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close-circled::before{content:\"\\e85a\"}.icon.tet-close{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close::before{content:\"\\e85b\"}.icon.tet-check-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check-circled::before{content:\"\\e86c\"}.icon.tet-check{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check::before{content:\"\\e855\"}.icon.tet-chevron-up{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-up::before{content:\"\\e859\"}.icon.tet-chevron-down{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-down::before{content:\"\\e856\"}.icon.tet-clipboard{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-clipboard::before{content:\"\\e86a\"}.icon.tet-info{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-info::before{content:\"\\e81d\"}.icon.tet-done{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-done::before{content:\"\\e867\"}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{--tabs-container-border-color:var(--tc-border-quaternary);--tabs-container-flex-wrap:nowrap;--tabs-headers-text-color:var(--tc-text-primary);--tabs-headers-text-disabled-color:var(--tc-grey-50);--tabs-headers-active-border-color:var(--tc-icon-primary);--tabs-headers-hover-border-color:var(--tc-border-tertiary);--tabs-headers-focus-border-color:var(--tc-border-secondary);--tabs-headers-focus-outline-color:var(--tc-blue-40);--tabs-headers-segmended-item-font:500 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;--tabs-headers-segmented-border-color:var(--tc-border-quaternary);--tabs-headers-segmented-background-color:var(--tc-layer-tertiary);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary);--tabs-headers-segmented-active-box-shadow:var(--tc-elevation-two);--tabs-headers-item-padding:0.75rem 0.25rem;--tabs-headers-item-margin:0 0.25rem;--tabs-headers-segmented-item-padding:0.375rem 1.5rem;--tabs-headers-segmented-item-margin:0.25rem 0;--tabs-headers-square-base-rgb:255, 255, 255;--tabs-headers-pill-text-color:var(--tc-text-primary);--tabs-headers-pill-text-disabled-color:color-mix(in srgb, var(--tc-grey-80) 16%, transparent);--tabs-headers-pill-background-color:var(--tc-grey-20);--tabs-headers-pill-hover-background-color:var(--tc-grey-30);--tabs-headers-pill-pressed-background-color:color-mix(in srgb, var(--tc-grey-40) 80%, transparent);--tabs-headers-pill-active-background-color:var(--tc-yellow-40);--tabs-headers-pill-active-text-color:var(--tc-text-primary);--tabs-headers-pill-gradient-color:var(--tc-background-primary);--tabs-headers-pill-edge-padding:0rem;--tabs-headers-square-detached-background-color:var(--tc-grey-20);--tabs-headers-square-detached-hover-background-color:var(--tc-grey-30);--tabs-headers-square-detached-pressed-background-color:var(--tc-grey-40);--tabs-headers-square-detached-active-background-color:var(--tc-grey-110);--tabs-headers-square-detached-disabled-background-color:var(--tc-grey-20);--tabs-headers-square-detached-focus-outline-color:var(--tc-blue-40);--tabs-headers-square-detached-svg-filter:brightness(0) invert(0.298);--tabs-headers-square-detached-svg-hover-filter:brightness(0) invert(0.098);--tabs-headers-square-detached-svg-pressed-filter:brightness(0) invert(0.098);--tabs-headers-square-detached-svg-active-filter:brightness(0) invert(1);--tabs-headers-square-detached-svg-disabled-filter:brightness(0) invert(0.631);--tabs-headers-square-detached-gradient-color:var(--tc-background-primary);--tabs-headers-square-detached-button-max-width-default:7rem;max-width:100%}:host .dark{--tabs-container-border-color:var(--tc-border-quaternary-dark);--tabs-headers-text-color:var(--tc-text-primary-dark);--tabs-headers-text-disabled-color:var(--tc-grey-50-dark);--tabs-headers-active-border-color:var(--tc-icon-primary-dark);--tabs-headers-hover-border-color:var(--tc-border-tertiary-dark);--tabs-headers-focus-border-color:var(--tc-border-secondary-dark);--tabs-headers-focus-outline-color:var(--tc-blue-40-dark);--tabs-headers-segmented-border-color:var(--tc-border-quaternary-dark);--tabs-headers-segmented-background-color:var(--tc-layer-tertiary-dark);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary-dark);--tabs-headers-segmented-active-box-shadow:var(--tc-elevation-two-dark);--tabs-headers-pill-text-color:var(--tc-grey-100-dark);--tabs-headers-pill-text-disabled-color:color-mix(in srgb, var(--tc-grey-80-dark) 30%, transparent);--tabs-headers-pill-background-color:var(--tc-brown-80-dark);--tabs-headers-pill-hover-background-color:var(--tc-brown-70-dark);--tabs-headers-pill-pressed-background-color:color-mix(in srgb, var(--tc-brown-60-dark) 80%, transparent);--tabs-headers-pill-active-background-color:var(--tc-yellow-40-dark);--tabs-headers-pill-active-text-color:var(--tc-text-primary);--tabs-headers-pill-gradient-color:var(--tc-background-primary-dark);--tabs-headers-square-detached-background-color:var(--tc-brown-80-dark);--tabs-headers-square-detached-hover-background-color:var(--tc-brown-70-dark);--tabs-headers-square-detached-pressed-background-color:var(--tc-brown-60-dark);--tabs-headers-square-detached-active-background-color:var(--tc-yellow-40-dark);--tabs-headers-square-detached-disabled-background-color:var(--tc-brown-80-dark);--tabs-headers-square-detached-focus-outline-color:var(--tc-blue-40-dark);--tabs-headers-square-detached-svg-filter:brightness(0) invert(0.859);--tabs-headers-square-detached-svg-hover-filter:brightness(0) invert(0.969);--tabs-headers-square-detached-svg-pressed-filter:brightness(0) invert(0.969);--tabs-headers-square-detached-svg-active-filter:brightness(0) invert(0.051);--tabs-headers-square-detached-svg-disabled-filter:brightness(0) invert(0.631);--tabs-headers-square-detached-gradient-color:var(--tc-background-primary-dark)}.tabs{--active-width:auto;--active-x-pos:0;--active-transition:none;position:relative;display:flex;flex-wrap:var(--tabs-container-flex-wrap);align-items:center;max-width:100%;padding:0.125rem 0;overflow-x:scroll;scrollbar-width:none;-webkit-user-select:none;user-select:none}.tabs ::slotted(img){margin:0;padding:0;height:1.3125rem}.tabs-line{display:flex;position:relative;max-width:100%;height:0.0625rem;background-color:var(--tabs-container-border-color);border:none;margin-top:-0.125rem}.tabs-line.no-underline{display:none}.tabs *{box-sizing:border-box}.tabs::-webkit-scrollbar{display:none}.tabs.right:not(.tabs--segmented){justify-content:flex-end}.tabs.center:not(.tabs--segmented){justify-content:center}.tabs ::slotted(*){display:flex;justify-content:center;align-items:center;border-bottom:0.125rem solid transparent;color:var(--tabs-headers-text-color);cursor:pointer;padding:var(--tabs-headers-item-padding) !important;margin:var(--tabs-headers-item-margin);transition:border-bottom-color 0.2s ease;white-space:nowrap;background-color:transparent;border-color:transparent;border-radius:0.125rem}.tabs ::slotted(:first-child){margin-left:0}.tabs ::slotted(:last-child){margin-right:0}.tabs ::slotted(:hover){border-bottom-color:var(--tabs-headers-hover-border-color);background-color:transparent}.tabs ::slotted(:focus){border-bottom-color:var(--tabs-headers-focus-border-color)}.tabs ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:0rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-bottom-color:transparent;z-index:99}.tabs ::slotted(.disabled){border-bottom-color:transparent;color:var(--tabs-headers-text-disabled-color);outline:none;cursor:not-allowed}.tabs ::slotted(.active){border-bottom-color:var(--tabs-headers-active-border-color)}.tabs.pill .tabs-gradient,.tabs.square-detached .tabs-gradient{position:sticky;top:0.5rem;bottom:0.5rem;width:13.75rem;align-self:stretch;flex-shrink:0;opacity:0;z-index:20;pointer-events:none;transition:opacity 0.4s ease-out}.tabs.pill .tabs-gradient-left,.tabs.square-detached .tabs-gradient-left{left:-0.5rem;margin-right:-13.75rem;background:linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--tabs-gradient-color) 100%)}.tabs.pill .tabs-gradient-right,.tabs.square-detached .tabs-gradient-right{right:-0.5rem;margin-left:-13.75rem;background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--tabs-gradient-color) 100%)}.tabs.pill.tabs--overflow-left .tabs-gradient-left,.tabs.square-detached.tabs--overflow-left .tabs-gradient-left{opacity:1}.tabs.pill.tabs--overflow-right .tabs-gradient-right,.tabs.square-detached.tabs--overflow-right .tabs-gradient-right{opacity:1}.tabs.square-detached{--tabs-gradient-color:var(--tabs-headers-square-detached-gradient-color);padding-top:0.5rem;padding-bottom:0.5rem;margin-top:-0.5rem;margin-bottom:-0.5rem}.tabs.square-detached ::slotted(*){display:flex;flex:1;min-width:var(--tabs-headers-square-detached-button-max-width, var(--tabs-headers-square-detached-button-max-width-default));max-width:var(--tabs-headers-square-detached-button-max-width, var(--tabs-headers-square-detached-button-max-width-default));border:none;box-sizing:border-box;background-color:var(--tabs-headers-square-detached-background-color);justify-content:center;align-items:center;flex-shrink:0;transition:background-color 0.2s ease;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-filter)}.tabs.square-detached ::slotted(:hover){border-bottom-color:transparent;background-color:var(--tabs-headers-square-detached-hover-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-hover-filter)}.tabs.square-detached ::slotted(:active){background-color:var(--tabs-headers-square-detached-pressed-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-pressed-filter)}.tabs.square-detached ::slotted(:focus-visible){background-color:var(--tabs-headers-square-detached-active-background-color);border-bottom-color:transparent;outline:0.125rem solid var(--tc-blue-40);outline-offset:0.25rem;transition:outline 0s;outline-color:var(--tabs-headers-square-detached-focus-outline-color);z-index:99;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-active-filter)}.tabs.square-detached ::slotted(.active){border-bottom-color:transparent;background-color:var(--tabs-headers-square-detached-active-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-active-filter)}.tabs.square-detached ::slotted(.disabled){background-color:var(--tabs-headers-square-detached-disabled-background-color);border-bottom-color:transparent;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-disabled-filter);cursor:not-allowed}.tabs.square-detached ::slotted(:first-child){margin-left:unset}.tabs.square-detached ::slotted(:last-child){margin-right:unset}.tabs.square-detached.mobile{--tabs-headers-item-margin:0 0.5rem}.tabs.square-detached.mobile ::slotted(*){--square-detached-logo-max-w:3.9375rem;--square-detached-logo-max-h:2.8125rem;height:5.125rem;border-radius:0.568rem;padding:0.568rem 1.419rem}.tabs.square-detached.tablet{--tabs-headers-item-margin:0 0.75rem}.tabs.square-detached.tablet ::slotted(*){--square-detached-logo-max-w:5.1875rem;--square-detached-logo-max-h:3.75rem;--tabs-headers-square-detached-button-max-width-default:9.1875rem;height:6.75rem;border-radius:0.75rem;padding:0.75rem 1.875rem}.tabs.square-detached.web{--tabs-headers-item-margin:0 0.75rem}.tabs.square-detached.web ::slotted(*){--square-detached-logo-max-w:6.875rem;--square-detached-logo-max-h:5rem;--tabs-headers-square-detached-button-max-width-default:17.25rem;min-width:12.25rem !important;height:9rem;border-radius:1rem;padding:1rem 2.5rem}.tabs.blue ::slotted(:hover){--tabs-headers-hover-border-color:rgb(113, 172, 244)}.tabs.blue ::slotted(:focus){--tabs-headers-focus-border-color:rgb(113, 172, 244)}.tabs.blue ::slotted(.active){--tabs-headers-active-border-color:rgb(0, 96, 245)}.tabs.pill{--tabs-gradient-color:var(--tabs-headers-pill-gradient-color);--tabs-edge-padding:var(--tabs-headers-pill-edge-padding);padding-top:0.5rem;padding-bottom:0.5rem;margin-top:-0.5rem;margin-bottom:-0.5rem;padding-inline:calc(var(--tabs-headers-pill-edge-padding) + 0.5rem);margin-inline:-0.5rem}.tabs.pill ::slotted(*){--icon-size:1rem;gap:0.25rem;border-radius:5.5rem;border-bottom:none;transition:all 0.2s ease-in-out;align-items:center;background-color:var(--tabs-headers-pill-background-color);color:var(--tabs-headers-pill-text-color);box-sizing:border-box}.tabs.pill.web ::slotted(*){--tabs-headers-item-padding:0.375rem 1.5rem;font:500 1rem/1.5rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.00625rem;min-width:5.625rem;flex-shrink:0;height:2.25rem}.tabs.pill.web ::slotted(:has(tet-icon)){--tabs-headers-item-padding:0.375rem 1rem 0.375rem 0.875rem}.tabs.pill.mobile ::slotted(*){--tabs-headers-item-padding:0.375rem 1rem;font:500 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.003125rem;min-width:4.3125rem;flex-shrink:0;height:2rem}.tabs.pill.mobile ::slotted(:has(tet-icon)){--tabs-headers-item-padding:0.375rem 0.75rem 0.375rem 0.5rem}.tabs.pill ::slotted(:hover){border-bottom-color:transparent;background-color:var(--tabs-headers-pill-hover-background-color)}.tabs.pill ::slotted(:active){background-color:var(--tabs-headers-pill-pressed-background-color)}.tabs.pill ::slotted(:focus){border-bottom-color:transparent}.tabs.pill ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:0.25rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-bottom-color:transparent}.tabs.pill ::slotted(.active){border-bottom-color:transparent;background-color:var(--tabs-headers-pill-active-background-color);color:var(--tabs-headers-pill-active-text-color)}.tabs.pill ::slotted(.active:active){background-color:var(--tabs-headers-pill-pressed-background-color)}.tabs.pill ::slotted(.disabled){background-color:var(--tabs-headers-pill-background-color);color:var(--tabs-headers-pill-text-disabled-color);cursor:not-allowed}.tabs.pill ::slotted(:first-child){margin-left:0 !important}.tabs.pill ::slotted(:last-child){margin-right:0 !important}.tabs--segmented{display:flex;border:0.0625rem solid var(--tabs-headers-segmented-border-color);border-radius:1.5rem;background-color:var(--tabs-headers-segmented-background-color);padding:0 0.25rem;box-sizing:border-box;overflow-x:scroll}.tabs--segmented .web{padding:0.25rem}.tabs--segmented ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.125rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color)}.tabs--segmented.dark-gray{--tabs-headers-text-color:rgb(255, 255, 255);--tabs-headers-segmented-border-color:rgb(67, 75, 86);--tabs-headers-segmented-background-color:rgb(35, 40, 46);--tabs-headers-segmented-active-background-color:rgb(67, 75, 86);--tabs-headers-segmented-active-box-shadow:0 0 0.0625rem 0 rgba(10, 11, 13, 0.08),\n 0 0.1875rem 0.25rem 0 rgba(10, 11, 13, 0.12);--icon-color:rgb(255, 255, 255)}.tabs--segmented.dark-gray ::slotted(:hover),.tabs--segmented.dark-gray ::slotted(:focus),.tabs--segmented.dark-gray ::slotted(.active){color:rgb(255, 255, 255)}.tabs--segmented.dark-gray ::slotted(.disabled){color:var(--tabs-headers-text-disabled-color);cursor:not-allowed}.tabs--segmented.tabs--disabled{border:none;--tabs-headers-segmented-background-color:var(--tc-layer-secondary);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary);--tabs-headers-segmented-active-box-shadow:none}.tabs--segmented.tabs--disabled ::slotted(*){color:var(--tc-grey-40);cursor:not-allowed}.tabs--segmented.tabs--disabled ::slotted(.active){color:var(--tc-grey-50)}.tabs--segmented.tabs--disabled.dark,.tabs--segmented.tabs--disabled.dark-gray{--tabs-headers-segmented-background-color:var(--tc-layer-secondary-dark);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary-dark)}.tabs--segmented.tabs--disabled.dark ::slotted(*),.tabs--segmented.tabs--disabled.dark-gray ::slotted(*){color:var(--tc-grey-40-dark)}.tabs--segmented.tabs--disabled.dark ::slotted(.active),.tabs--segmented.tabs--disabled.dark-gray ::slotted(.active){color:var(--tc-grey-50-dark)}.tabs--segmented::before{content:\"\";position:absolute;top:0.25rem;bottom:0.25rem;left:0;z-index:0;border-radius:1.563rem;width:var(--active-width);transform:translateX(var(--active-x-pos));transition:var(--active-transition);background:var(--tabs-headers-segmented-active-background-color);box-shadow:var(--tabs-headers-segmented-active-box-shadow)}.tabs--segmented ::slotted(*){font:var(--tabs-headers-segmended-item-font);line-height:1.5rem;z-index:1;position:relative;border:none;padding:var(--tabs-headers-segmented-item-padding) !important;margin:var(--tabs-headers-segmented-item-margin) !important;border-radius:1.563rem;display:flex;flex:1;justify-content:center}.tabs--segmented.mobile ::slotted(*){font:500 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.003125rem;font-weight:500;padding:0.25rem 1.5rem !important;margin:0.188rem 0 !important;line-height:1.25rem}.tabs--segmented.square{--tabs-headers-segmented-background-color:rgba(var(--tabs-headers-square-base-rgb), 0.16);--tabs-headers-segmented-border-color:transparent;height:4.75rem;border-radius:0.375rem;padding:0}.tabs--segmented.square::before{--tabs-headers-segmented-active-box-shadow:none;position:absolute;top:0;bottom:0;left:-0.0625rem;border-radius:0}.tabs--segmented.square ::slotted(*){--tabs-headers-segmented-item-padding:0;--tabs-headers-segmented-item-margin:0;border-radius:0;height:100%;align-items:center}.tabs--segmented.square ::slotted(*)::after{content:\"\";background-color:rgba(var(--tabs-headers-square-base-rgb), 0.2);position:absolute;top:0.375rem;bottom:0.375rem;right:0;width:0.0625rem}.tabs--segmented.square ::slotted(:hover){background-color:rgba(var(--tabs-headers-square-base-rgb), 0.24)}.tabs--segmented.square ::slotted(:first-child){border-radius:0.3125rem 0 0 0.3125rem}.tabs--segmented.square ::slotted(:last-child){border-radius:0 0.3125rem 0.3125rem 0}.tabs--segmented.square ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.125rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color)}.tabs--segmented.square ::slotted(:focus-visible)::after{display:none}.tabs--segmented.square ::slotted(.active)::after,.tabs--segmented.square ::slotted(:last-child)::after{display:none}.tabs--segmented.netflix{height:2.75rem;gap:0.5rem;overflow-y:hidden}.tabs--segmented.netflix ::slotted(*){flex-direction:row-reverse;align-items:center;justify-content:center;gap:0.5rem}.tabs--segmented.netflix ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.0625rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-radius:1.563rem}.tabs ::slotted(.no-underline){border-bottom:none}";
|
|
5
5
|
const TetTabHeaderStyle0 = tetTabHeaderCss;
|
|
6
6
|
|
|
7
7
|
const TetTabHeader = /*@__PURE__*/ proxyCustomElement(class TetTabHeader extends H {
|
|
@@ -16,6 +16,9 @@ const TetTabHeader = /*@__PURE__*/ proxyCustomElement(class TetTabHeader extends
|
|
|
16
16
|
this.sizing = 'web';
|
|
17
17
|
this.defaultTab = 0;
|
|
18
18
|
this.segmented = false;
|
|
19
|
+
this.disabled = false;
|
|
20
|
+
this.mode = 'tab-header';
|
|
21
|
+
this.accessibilityLabel = '';
|
|
19
22
|
this.hideHeaderUnderline = false;
|
|
20
23
|
this.hideActiveHeaderUnderline = false;
|
|
21
24
|
this.autoplayDelay = 0;
|
|
@@ -255,6 +258,12 @@ const TetTabHeader = /*@__PURE__*/ proxyCustomElement(class TetTabHeader extends
|
|
|
255
258
|
get isScrollableType() {
|
|
256
259
|
return this.type === 'pill' || this.type === 'square-detached';
|
|
257
260
|
}
|
|
261
|
+
get isSwitchMode() {
|
|
262
|
+
return this.mode === 'switch';
|
|
263
|
+
}
|
|
264
|
+
get isSwitchDisabled() {
|
|
265
|
+
return this.isSwitchMode && this.disabled;
|
|
266
|
+
}
|
|
258
267
|
cleanupTabListeners() {
|
|
259
268
|
this.tabHeaders?.forEach((tab) => {
|
|
260
269
|
const listeners = this.tabListeners.get(tab);
|
|
@@ -356,6 +365,30 @@ const TetTabHeader = /*@__PURE__*/ proxyCustomElement(class TetTabHeader extends
|
|
|
356
365
|
this.initAnimationObserver();
|
|
357
366
|
}
|
|
358
367
|
}
|
|
368
|
+
onDisabledChange() {
|
|
369
|
+
this.initTabHeaders();
|
|
370
|
+
}
|
|
371
|
+
setTabAccessibility(tab, index, active) {
|
|
372
|
+
const disabled = this.isSwitchMode && (this.isSwitchDisabled || tab.classList.contains('disabled'));
|
|
373
|
+
tab.setAttribute('tabIndex', `${active && !disabled ? '0' : '-1'}`);
|
|
374
|
+
if (this.isSwitchMode) {
|
|
375
|
+
tab.setAttribute('role', 'radio');
|
|
376
|
+
tab.setAttribute('aria-checked', `${active}`);
|
|
377
|
+
if (disabled) {
|
|
378
|
+
tab.setAttribute('aria-disabled', 'true');
|
|
379
|
+
}
|
|
380
|
+
else {
|
|
381
|
+
tab.removeAttribute('aria-disabled');
|
|
382
|
+
}
|
|
383
|
+
tab.removeAttribute('aria-selected');
|
|
384
|
+
tab.removeAttribute('aria-controls');
|
|
385
|
+
return;
|
|
386
|
+
}
|
|
387
|
+
tab.setAttribute('role', 'tab');
|
|
388
|
+
tab.setAttribute('aria-controls', `tabpanel-${index + 1}-${this.idSuffix}`);
|
|
389
|
+
tab.setAttribute('aria-selected', `${active}`);
|
|
390
|
+
tab.removeAttribute('aria-checked');
|
|
391
|
+
}
|
|
359
392
|
/**
|
|
360
393
|
* Initializes tab headers.
|
|
361
394
|
*/
|
|
@@ -364,13 +397,10 @@ const TetTabHeader = /*@__PURE__*/ proxyCustomElement(class TetTabHeader extends
|
|
|
364
397
|
this.tabHeaders = Array.from(this.element.children);
|
|
365
398
|
this.tabHeadersNotDisabled = [];
|
|
366
399
|
this.tabHeaders.forEach((tab, index) => {
|
|
367
|
-
tab.setAttribute('role', 'tab');
|
|
368
400
|
tab.setAttribute('id', `tab-${index + 1}-${this.idSuffix}`);
|
|
369
|
-
tab.
|
|
370
|
-
const disabled = tab.classList.contains('disabled');
|
|
401
|
+
const disabled = this.isSwitchDisabled || tab.classList.contains('disabled');
|
|
371
402
|
const active = tab.classList.contains('active');
|
|
372
|
-
|
|
373
|
-
tab.setAttribute('aria-selected', `${active}`);
|
|
403
|
+
this.setTabAccessibility(tab, index, active);
|
|
374
404
|
if (!disabled && !this.tabListeners.has(tab)) {
|
|
375
405
|
this.tabHeadersNotDisabled.push(tab);
|
|
376
406
|
const clickHandler = () => {
|
|
@@ -526,10 +556,9 @@ const TetTabHeader = /*@__PURE__*/ proxyCustomElement(class TetTabHeader extends
|
|
|
526
556
|
if (this.tabHeaders === undefined) {
|
|
527
557
|
return;
|
|
528
558
|
}
|
|
529
|
-
this.tabHeaders.forEach((tab) => {
|
|
559
|
+
this.tabHeaders.forEach((tab, index) => {
|
|
530
560
|
tab.classList.remove('active');
|
|
531
|
-
|
|
532
|
-
tab.setAttribute('tabIndex', '-1');
|
|
561
|
+
this.setTabAccessibility(tab, index, false);
|
|
533
562
|
const imageActive = tab.querySelector('img.tab-header-image.active');
|
|
534
563
|
if (imageActive) {
|
|
535
564
|
imageActive.style.display = 'none';
|
|
@@ -555,8 +584,7 @@ const TetTabHeader = /*@__PURE__*/ proxyCustomElement(class TetTabHeader extends
|
|
|
555
584
|
});
|
|
556
585
|
}
|
|
557
586
|
selectedTab.classList.add('active');
|
|
558
|
-
selectedTab.
|
|
559
|
-
selectedTab.setAttribute('tabIndex', '0');
|
|
587
|
+
this.setTabAccessibility(selectedTab, this.tabHeaders.indexOf(selectedTab), true);
|
|
560
588
|
this.applyPillIconColor();
|
|
561
589
|
const imageActive = selectedTab.querySelector('img.tab-header-image.active');
|
|
562
590
|
if (imageActive) {
|
|
@@ -623,16 +651,17 @@ const TetTabHeader = /*@__PURE__*/ proxyCustomElement(class TetTabHeader extends
|
|
|
623
651
|
}
|
|
624
652
|
render() {
|
|
625
653
|
const shouldRenderOverflowGradients = this.showOverflowGradients;
|
|
626
|
-
return (h(Host, { key: '
|
|
654
|
+
return (h(Host, { key: '066ac0cb29060dbf7e6b88e0170d2f3cd47c8b76', "data-id-suffix": this.idSuffix }, h("div", { key: '8e664aece15cbc58b9c39e2a879f504489e62e8e', class: {
|
|
627
655
|
'tabs': true,
|
|
628
656
|
'tabs--segmented': this.segmented,
|
|
657
|
+
'tabs--disabled': this.isSwitchDisabled,
|
|
629
658
|
'tabs--overflow-left': this.hasOverflowLeft,
|
|
630
659
|
'tabs--overflow-right': this.hasOverflowRight,
|
|
631
660
|
[this.effectivePosition]: true,
|
|
632
661
|
[this.theme]: true,
|
|
633
662
|
[this.sizing]: true,
|
|
634
663
|
[this.type]: !!this.type
|
|
635
|
-
}, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role:
|
|
664
|
+
}, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: this.isSwitchMode ? 'radiogroup' : 'tablist', "aria-label": this.isSwitchMode && this.accessibilityLabel ? this.accessibilityLabel : undefined, "aria-orientation": this.isSwitchMode ? 'horizontal' : undefined, "aria-disabled": this.isSwitchDisabled ? 'true' : undefined }, shouldRenderOverflowGradients && h("div", { key: '4c9ae2fbe2bf27d7cc91bbc8ce55c3e9d7469a3b', class: "tabs-gradient tabs-gradient-left", "aria-hidden": "true" }), h("slot", { key: '677d35c1979329dc6271f231ca554ca58ed4924f', onSlotchange: () => this.updatePositionClass(), ref: (slot) => (this.tabContainer = slot) }), shouldRenderOverflowGradients && h("div", { key: '5a265eba7ef003aa87fe6bdf55ea9f596cbccfa2', class: "tabs-gradient tabs-gradient-right", "aria-hidden": "true" })), h("div", { key: '76e09c8fc61c1a6adc5d00224caf73869af66d57', class: {
|
|
636
665
|
'tabs-line': !this.segmented,
|
|
637
666
|
'no-underline': this.hideHeaderUnderline || this.isScrollableType,
|
|
638
667
|
[this.theme]: true
|
|
@@ -641,7 +670,8 @@ const TetTabHeader = /*@__PURE__*/ proxyCustomElement(class TetTabHeader extends
|
|
|
641
670
|
static get watchers() { return {
|
|
642
671
|
"hideActiveHeaderUnderline": ["showActiveHeaderUnderline"],
|
|
643
672
|
"autoplayDelay": ["onAutoplayDelayChange"],
|
|
644
|
-
"segmented": ["onSegmentedChange"]
|
|
673
|
+
"segmented": ["onSegmentedChange"],
|
|
674
|
+
"disabled": ["onDisabledChange"]
|
|
645
675
|
}; }
|
|
646
676
|
static get style() { return TetTabHeaderStyle0; }
|
|
647
677
|
}, [1, "tet-tab-header", {
|
|
@@ -651,6 +681,9 @@ const TetTabHeader = /*@__PURE__*/ proxyCustomElement(class TetTabHeader extends
|
|
|
651
681
|
"sizing": [1],
|
|
652
682
|
"defaultTab": [8, "default-tab"],
|
|
653
683
|
"segmented": [4],
|
|
684
|
+
"disabled": [4],
|
|
685
|
+
"mode": [1],
|
|
686
|
+
"accessibilityLabel": [1, "accessibility-label"],
|
|
654
687
|
"hideHeaderUnderline": [4, "hide-header-underline"],
|
|
655
688
|
"hideActiveHeaderUnderline": [4, "hide-active-header-underline"],
|
|
656
689
|
"autoplayDelay": [2, "autoplay-delay"],
|
|
@@ -673,7 +706,8 @@ const TetTabHeader = /*@__PURE__*/ proxyCustomElement(class TetTabHeader extends
|
|
|
673
706
|
}, undefined, {
|
|
674
707
|
"hideActiveHeaderUnderline": ["showActiveHeaderUnderline"],
|
|
675
708
|
"autoplayDelay": ["onAutoplayDelayChange"],
|
|
676
|
-
"segmented": ["onSegmentedChange"]
|
|
709
|
+
"segmented": ["onSegmentedChange"],
|
|
710
|
+
"disabled": ["onDisabledChange"]
|
|
677
711
|
}]);
|
|
678
712
|
function defineCustomElement() {
|
|
679
713
|
if (typeof customElements === "undefined") {
|
|
@@ -6,7 +6,7 @@ import { f as formatPrice } from './p-e1e74d01.js';
|
|
|
6
6
|
import { d as defineCustomElement$5 } from './p-5e83750b.js';
|
|
7
7
|
import { d as defineCustomElement$4 } from './p-eeb8a143.js';
|
|
8
8
|
import { d as defineCustomElement$3 } from './p-6417da88.js';
|
|
9
|
-
import { d as defineCustomElement$2 } from './p-
|
|
9
|
+
import { d as defineCustomElement$2 } from './p-67c39d1c.js';
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* Returns assembler scenario data.
|
|
@@ -9,7 +9,7 @@ import { d as defineCustomElement$6 } from './p-c7f0da7b.js';
|
|
|
9
9
|
import { d as defineCustomElement$5 } from './p-77c7e420.js';
|
|
10
10
|
import { d as defineCustomElement$4 } from './p-c2cc53bd.js';
|
|
11
11
|
import { d as defineCustomElement$3 } from './p-4031db37.js';
|
|
12
|
-
import { d as defineCustomElement$2 } from './p-
|
|
12
|
+
import { d as defineCustomElement$2 } from './p-67c39d1c.js';
|
|
13
13
|
|
|
14
14
|
var CloudTabName;
|
|
15
15
|
(function (CloudTabName) {
|
|
@@ -10,7 +10,7 @@ import { d as defineCustomElement$9 } from './p-7f0800e0.js';
|
|
|
10
10
|
import { d as defineCustomElement$8 } from './p-eeb8a143.js';
|
|
11
11
|
import { d as defineCustomElement$7 } from './p-77c7e420.js';
|
|
12
12
|
import { d as defineCustomElement$6 } from './p-3395f5dc.js';
|
|
13
|
-
import { d as defineCustomElement$5 } from './p-
|
|
13
|
+
import { d as defineCustomElement$5 } from './p-67c39d1c.js';
|
|
14
14
|
import { d as defineCustomElement$4 } from './p-dfc13613.js';
|
|
15
15
|
import { d as defineCustomElement$3 } from './p-1b7f4bd1.js';
|
|
16
16
|
import { d as defineCustomElement$2 } from './p-3f3ec66b.js';
|