@spectrum-web-components/tabs 0.41.1 → 0.42.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +37 -0
- package/package.json +8 -8
- package/src/TabsOverflow.d.ts +2 -0
- package/src/TabsOverflow.dev.js +14 -0
- package/src/TabsOverflow.dev.js.map +2 -2
- package/src/TabsOverflow.js +9 -5
- package/src/TabsOverflow.js.map +3 -3
- package/src/spectrum-config.js +38 -0
- package/src/spectrum-tab.css.dev.js +1 -44
- package/src/spectrum-tab.css.dev.js.map +2 -2
- package/src/spectrum-tab.css.js +1 -44
- package/src/spectrum-tab.css.js.map +2 -2
- package/src/spectrum-tabs-sizes.css.dev.js +1 -59
- package/src/spectrum-tabs-sizes.css.dev.js.map +2 -2
- package/src/spectrum-tabs-sizes.css.js +1 -59
- package/src/spectrum-tabs-sizes.css.js.map +2 -2
- package/src/spectrum-tabs.css.dev.js +1 -106
- package/src/spectrum-tabs.css.dev.js.map +2 -2
- package/src/spectrum-tabs.css.js +1 -106
- package/src/spectrum-tabs.css.js.map +2 -2
- package/src/tab-panel.css.dev.js +1 -1
- package/src/tab-panel.css.dev.js.map +1 -1
- package/src/tab-panel.css.js +1 -1
- package/src/tab-panel.css.js.map +1 -1
- package/src/tab.css.dev.js +1 -46
- package/src/tab.css.dev.js.map +2 -2
- package/src/tab.css.js +1 -46
- package/src/tab.css.js.map +2 -2
- package/src/tabs-overflow.css.dev.js +1 -1
- package/src/tabs-overflow.css.dev.js.map +1 -1
- package/src/tabs-overflow.css.js +1 -1
- package/src/tabs-overflow.css.js.map +1 -1
- package/src/tabs-sizes.css.dev.js +1 -59
- package/src/tabs-sizes.css.dev.js.map +2 -2
- package/src/tabs-sizes.css.js +1 -59
- package/src/tabs-sizes.css.js.map +2 -2
- package/src/tabs.css.dev.js +1 -108
- package/src/tabs.css.dev.js.map +2 -2
- package/src/tabs.css.js +1 -108
- package/src/tabs.css.js.map +2 -2
- package/stories/tabs.stories.js +6 -15
- package/stories/tabs.stories.js.map +2 -2
- package/test/tabs-overflow.test.js +74 -0
- package/test/tabs-overflow.test.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -800,10 +800,31 @@
|
|
|
800
800
|
"type": {
|
|
801
801
|
"text": "boolean"
|
|
802
802
|
},
|
|
803
|
+
"privacy": "public",
|
|
803
804
|
"default": "false",
|
|
804
805
|
"attribute": "compact",
|
|
805
806
|
"reflects": true
|
|
806
807
|
},
|
|
808
|
+
{
|
|
809
|
+
"kind": "field",
|
|
810
|
+
"name": "labelPrevious",
|
|
811
|
+
"type": {
|
|
812
|
+
"text": "string"
|
|
813
|
+
},
|
|
814
|
+
"privacy": "public",
|
|
815
|
+
"default": "'Scroll to previous tabs'",
|
|
816
|
+
"attribute": "label-previous"
|
|
817
|
+
},
|
|
818
|
+
{
|
|
819
|
+
"kind": "field",
|
|
820
|
+
"name": "labelNext",
|
|
821
|
+
"type": {
|
|
822
|
+
"text": "string"
|
|
823
|
+
},
|
|
824
|
+
"privacy": "public",
|
|
825
|
+
"default": "'Scroll to next tabs'",
|
|
826
|
+
"attribute": "label-next"
|
|
827
|
+
},
|
|
807
828
|
{
|
|
808
829
|
"kind": "field",
|
|
809
830
|
"name": "dir",
|
|
@@ -895,6 +916,22 @@
|
|
|
895
916
|
"default": "false",
|
|
896
917
|
"fieldName": "compact"
|
|
897
918
|
},
|
|
919
|
+
{
|
|
920
|
+
"name": "label-previous",
|
|
921
|
+
"type": {
|
|
922
|
+
"text": "string"
|
|
923
|
+
},
|
|
924
|
+
"default": "'Scroll to previous tabs'",
|
|
925
|
+
"fieldName": "labelPrevious"
|
|
926
|
+
},
|
|
927
|
+
{
|
|
928
|
+
"name": "label-next",
|
|
929
|
+
"type": {
|
|
930
|
+
"text": "string"
|
|
931
|
+
},
|
|
932
|
+
"default": "'Scroll to next tabs'",
|
|
933
|
+
"fieldName": "labelNext"
|
|
934
|
+
},
|
|
898
935
|
{
|
|
899
936
|
"name": "dir",
|
|
900
937
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tabs",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.42.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -86,14 +86,14 @@
|
|
|
86
86
|
],
|
|
87
87
|
"dependencies": {
|
|
88
88
|
"@lit-labs/observers": "^2.0.0",
|
|
89
|
-
"@spectrum-web-components/base": "^0.
|
|
90
|
-
"@spectrum-web-components/icon": "^0.
|
|
91
|
-
"@spectrum-web-components/icons-ui": "^0.
|
|
92
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
93
|
-
"@spectrum-web-components/shared": "^0.
|
|
89
|
+
"@spectrum-web-components/base": "^0.42.0",
|
|
90
|
+
"@spectrum-web-components/icon": "^0.42.0",
|
|
91
|
+
"@spectrum-web-components/icons-ui": "^0.42.0",
|
|
92
|
+
"@spectrum-web-components/reactive-controllers": "^0.42.0",
|
|
93
|
+
"@spectrum-web-components/shared": "^0.42.0"
|
|
94
94
|
},
|
|
95
95
|
"devDependencies": {
|
|
96
|
-
"@spectrum-css/tabs": "^4.1.
|
|
96
|
+
"@spectrum-css/tabs": "^4.1.3"
|
|
97
97
|
},
|
|
98
98
|
"types": "./src/index.d.ts",
|
|
99
99
|
"customElements": "custom-elements.json",
|
|
@@ -101,5 +101,5 @@
|
|
|
101
101
|
"./sp-*.js",
|
|
102
102
|
"./**/*.dev.js"
|
|
103
103
|
],
|
|
104
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "9b3bd55ff8e8f9438817255976e77fd456b19d72"
|
|
105
105
|
}
|
package/src/TabsOverflow.d.ts
CHANGED
|
@@ -12,6 +12,8 @@ declare const TabsOverflow_base: typeof SpectrumElement & {
|
|
|
12
12
|
export declare class TabsOverflow extends TabsOverflow_base {
|
|
13
13
|
static get styles(): CSSResultArray;
|
|
14
14
|
compact: boolean;
|
|
15
|
+
labelPrevious: string;
|
|
16
|
+
labelNext: string;
|
|
15
17
|
dir: 'ltr' | 'rtl';
|
|
16
18
|
private overflowState;
|
|
17
19
|
private scrollContent;
|
package/src/TabsOverflow.dev.js
CHANGED
|
@@ -32,6 +32,8 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) {
|
|
|
32
32
|
constructor() {
|
|
33
33
|
super();
|
|
34
34
|
this.compact = false;
|
|
35
|
+
this.labelPrevious = "Scroll to previous tabs";
|
|
36
|
+
this.labelNext = "Scroll to next tabs";
|
|
35
37
|
this.overflowState = {
|
|
36
38
|
canScrollLeft: false,
|
|
37
39
|
canScrollRight: false
|
|
@@ -89,6 +91,8 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) {
|
|
|
89
91
|
}
|
|
90
92
|
render() {
|
|
91
93
|
const { canScrollRight, canScrollLeft } = this.overflowState;
|
|
94
|
+
const ariaLabelPrevious = this.labelPrevious;
|
|
95
|
+
const ariaLabelNext = this.labelNext;
|
|
92
96
|
return html`
|
|
93
97
|
<div
|
|
94
98
|
class=${classMap({
|
|
@@ -102,8 +106,10 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) {
|
|
|
102
106
|
"left-scroll": true,
|
|
103
107
|
show: canScrollLeft
|
|
104
108
|
})}
|
|
109
|
+
aria-label=${ariaLabelPrevious}
|
|
105
110
|
quiet
|
|
106
111
|
dir="rtl"
|
|
112
|
+
tabindex="-1"
|
|
107
113
|
@click=${this._handleScrollClick}
|
|
108
114
|
>
|
|
109
115
|
<sp-icon-chevron100
|
|
@@ -116,7 +122,9 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) {
|
|
|
116
122
|
"right-scroll": true,
|
|
117
123
|
show: canScrollRight
|
|
118
124
|
})}
|
|
125
|
+
aria-label=${ariaLabelNext}
|
|
119
126
|
quiet
|
|
127
|
+
tabindex="-1"
|
|
120
128
|
@click=${this._handleScrollClick}
|
|
121
129
|
>
|
|
122
130
|
<sp-icon-chevron100
|
|
@@ -135,6 +143,12 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) {
|
|
|
135
143
|
__decorateClass([
|
|
136
144
|
property({ type: Boolean, reflect: true })
|
|
137
145
|
], TabsOverflow.prototype, "compact", 2);
|
|
146
|
+
__decorateClass([
|
|
147
|
+
property({ type: String, attribute: "label-previous" })
|
|
148
|
+
], TabsOverflow.prototype, "labelPrevious", 2);
|
|
149
|
+
__decorateClass([
|
|
150
|
+
property({ type: String, attribute: "label-next" })
|
|
151
|
+
], TabsOverflow.prototype, "labelNext", 2);
|
|
138
152
|
__decorateClass([
|
|
139
153
|
property({ reflect: true })
|
|
140
154
|
], TabsOverflow.prototype, "dir", 2);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TabsOverflow.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n PropertyValueMap,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport { Tabs } from './Tabs.dev.js'\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport tabSizes from './tabs-sizes.css.js';\nimport styles from './tabs-overflow.css.js';\n\ninterface TabsOverflowState {\n canScrollLeft: boolean;\n canScrollRight: boolean;\n}\n/**\n * @element sp-tabs-overflow\n */\nexport class TabsOverflow extends SizedMixin(SpectrumElement) {\n public static override get styles(): CSSResultArray {\n return [chevronIconStyles, styles, tabSizes];\n }\n\n @property({ type: Boolean, reflect: true })\n compact = false;\n\n @property({ reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @state()\n private overflowState: TabsOverflowState = {\n canScrollLeft: false,\n canScrollRight: false,\n };\n\n @queryAssignedElements({ selector: 'sp-tabs', flatten: true })\n private scrollContent!: Tabs[];\n\n @query('.tabs-overflow-container')\n private overflowContainer!: HTMLDivElement;\n\n resizeController!: ResizeController;\n\n public constructor() {\n super();\n this.resizeController = new ResizeController(this, {\n target: this,\n callback: (): void => {\n this._updateScrollState();\n },\n });\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n // enable scroll event\n const [tabs] = this.scrollContent;\n if (tabs) {\n tabs.enableTabsScroll = true;\n }\n this.resizeController.observe(this.overflowContainer);\n }\n\n private async _handleSlotChange(): Promise<void> {\n const [tabsElement] = this.scrollContent;\n await tabsElement?.updateComplete;\n this._updateScrollState();\n }\n\n private _updateScrollState(): void {\n const { scrollContent, overflowState } = this;\n\n if (scrollContent) {\n const [tabsElement] = this.scrollContent;\n const { canScrollLeft, canScrollRight } =\n tabsElement?.scrollState || {\n canScrollLeft: false,\n canScrollRight: false,\n };\n\n this.overflowState = {\n ...overflowState,\n canScrollLeft,\n canScrollRight,\n };\n }\n }\n\n private _handleScrollClick(event: MouseEvent): void {\n const currentTarget = event.currentTarget as HTMLElement;\n const [tabsElement] = this.scrollContent;\n\n const dist = tabsElement.clientWidth * 0.5;\n const left = currentTarget.classList.contains('left-scroll')\n ? -dist\n : dist;\n tabsElement.scrollTabs(left, 'smooth');\n }\n\n protected override updated(\n changedProperties: PropertyValueMap<this>\n ): void {\n super.updated(changedProperties);\n if (changedProperties.has('dir')) {\n this._updateScrollState();\n }\n }\n\n protected override render(): TemplateResult {\n const { canScrollRight, canScrollLeft } = this.overflowState;\n return html`\n <div\n class=${classMap({\n 'tabs-overflow-container': true,\n 'left-shadow': canScrollLeft,\n 'right-shadow': canScrollRight,\n })}\n >\n <sp-action-button\n class=${classMap({\n 'left-scroll': true,\n show: canScrollLeft,\n })}\n quiet\n dir=\"rtl\"\n @click=${this._handleScrollClick}\n >\n <sp-icon-chevron100\n slot=\"icon\"\n class=\"spectrum-UIIcon-ChevronLeft300\"\n ></sp-icon-chevron100>\n </sp-action-button>\n <sp-action-button\n class=${classMap({\n 'right-scroll': true,\n show: canScrollRight,\n })}\n quiet\n @click=${this._handleScrollClick}\n >\n <sp-icon-chevron100\n slot=\"icon\"\n class=\"spectrum-UIIcon-ChevronRight300\"\n ></sp-icon-chevron100>\n </sp-action-button>\n <slot\n @slotchange=${this._handleSlotChange}\n @sp-tabs-scroll=${this._updateScrollState}\n ></slot>\n </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EAGA;AAAA,EACA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAEjC,OAAO;AACP,OAAO;AACP,OAAO,uBAAuB;AAC9B,OAAO,cAAc;AACrB,OAAO,YAAY;AASZ,aAAM,qBAAqB,WAAW,eAAe,EAAE;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n PropertyValueMap,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport { Tabs } from './Tabs.dev.js'\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport tabSizes from './tabs-sizes.css.js';\nimport styles from './tabs-overflow.css.js';\n\ninterface TabsOverflowState {\n canScrollLeft: boolean;\n canScrollRight: boolean;\n}\n/**\n * @element sp-tabs-overflow\n */\nexport class TabsOverflow extends SizedMixin(SpectrumElement) {\n public static override get styles(): CSSResultArray {\n return [chevronIconStyles, styles, tabSizes];\n }\n\n @property({ type: Boolean, reflect: true })\n public compact = false;\n\n @property({ type: String, attribute: 'label-previous' })\n public labelPrevious = 'Scroll to previous tabs';\n\n @property({ type: String, attribute: 'label-next' })\n public labelNext = 'Scroll to next tabs';\n\n @property({ reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @state()\n private overflowState: TabsOverflowState = {\n canScrollLeft: false,\n canScrollRight: false,\n };\n\n @queryAssignedElements({ selector: 'sp-tabs', flatten: true })\n private scrollContent!: Tabs[];\n\n @query('.tabs-overflow-container')\n private overflowContainer!: HTMLDivElement;\n\n resizeController!: ResizeController;\n\n public constructor() {\n super();\n this.resizeController = new ResizeController(this, {\n target: this,\n callback: (): void => {\n this._updateScrollState();\n },\n });\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n // enable scroll event\n const [tabs] = this.scrollContent;\n if (tabs) {\n tabs.enableTabsScroll = true;\n }\n this.resizeController.observe(this.overflowContainer);\n }\n\n private async _handleSlotChange(): Promise<void> {\n const [tabsElement] = this.scrollContent;\n await tabsElement?.updateComplete;\n this._updateScrollState();\n }\n\n private _updateScrollState(): void {\n const { scrollContent, overflowState } = this;\n\n if (scrollContent) {\n const [tabsElement] = this.scrollContent;\n const { canScrollLeft, canScrollRight } =\n tabsElement?.scrollState || {\n canScrollLeft: false,\n canScrollRight: false,\n };\n\n this.overflowState = {\n ...overflowState,\n canScrollLeft,\n canScrollRight,\n };\n }\n }\n\n private _handleScrollClick(event: MouseEvent): void {\n const currentTarget = event.currentTarget as HTMLElement;\n const [tabsElement] = this.scrollContent;\n\n const dist = tabsElement.clientWidth * 0.5;\n const left = currentTarget.classList.contains('left-scroll')\n ? -dist\n : dist;\n tabsElement.scrollTabs(left, 'smooth');\n }\n\n protected override updated(\n changedProperties: PropertyValueMap<this>\n ): void {\n super.updated(changedProperties);\n if (changedProperties.has('dir')) {\n this._updateScrollState();\n }\n }\n\n protected override render(): TemplateResult {\n const { canScrollRight, canScrollLeft } = this.overflowState;\n const ariaLabelPrevious = this.labelPrevious;\n const ariaLabelNext = this.labelNext;\n return html`\n <div\n class=${classMap({\n 'tabs-overflow-container': true,\n 'left-shadow': canScrollLeft,\n 'right-shadow': canScrollRight,\n })}\n >\n <sp-action-button\n class=${classMap({\n 'left-scroll': true,\n show: canScrollLeft,\n })}\n aria-label=${ariaLabelPrevious}\n quiet\n dir=\"rtl\"\n tabindex=\"-1\"\n @click=${this._handleScrollClick}\n >\n <sp-icon-chevron100\n slot=\"icon\"\n class=\"spectrum-UIIcon-ChevronLeft300\"\n ></sp-icon-chevron100>\n </sp-action-button>\n <sp-action-button\n class=${classMap({\n 'right-scroll': true,\n show: canScrollRight,\n })}\n aria-label=${ariaLabelNext}\n quiet\n tabindex=\"-1\"\n @click=${this._handleScrollClick}\n >\n <sp-icon-chevron100\n slot=\"icon\"\n class=\"spectrum-UIIcon-ChevronRight300\"\n ></sp-icon-chevron100>\n </sp-action-button>\n <slot\n @slotchange=${this._handleSlotChange}\n @sp-tabs-scroll=${this._updateScrollState}\n ></slot>\n </div>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/TabsOverflow.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
"use strict";var p=Object.defineProperty;var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(c,a,t,o)=>{for(var e=o>1?void 0:o?u(a,t):a,l=c.length-1,s;l>=0;l--)(s=c[l])&&(e=(o?s(a,t,e):s(e))||e);return o&&e&&p(a,t,e),e};import{html as h,SizedMixin as d,SpectrumElement as S}from"@spectrum-web-components/base";import{property as i,query as v,queryAssignedElements as b,state as f}from"@spectrum-web-components/base/src/decorators.js";import{classMap as n}from"@spectrum-web-components/base/src/directives.js";import{ResizeController as m}from"@lit-labs/observers/resize-controller.js";import"@spectrum-web-components/action-button/sp-action-button.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import C from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import g from"./tabs-sizes.css.js";import y from"./tabs-overflow.css.js";export class TabsOverflow extends d(S){constructor(){super();this.compact=!1;this.labelPrevious="Scroll to previous tabs";this.labelNext="Scroll to next tabs";this.overflowState={canScrollLeft:!1,canScrollRight:!1};this.resizeController=new m(this,{target:this,callback:()=>{this._updateScrollState()}})}static get styles(){return[C,y,g]}firstUpdated(t){super.firstUpdated(t);const[o]=this.scrollContent;o&&(o.enableTabsScroll=!0),this.resizeController.observe(this.overflowContainer)}async _handleSlotChange(){const[t]=this.scrollContent;await(t==null?void 0:t.updateComplete),this._updateScrollState()}_updateScrollState(){const{scrollContent:t,overflowState:o}=this;if(t){const[e]=this.scrollContent,{canScrollLeft:l,canScrollRight:s}=(e==null?void 0:e.scrollState)||{canScrollLeft:!1,canScrollRight:!1};this.overflowState={...o,canScrollLeft:l,canScrollRight:s}}}_handleScrollClick(t){const o=t.currentTarget,[e]=this.scrollContent,l=e.clientWidth*.5,s=o.classList.contains("left-scroll")?-l:l;e.scrollTabs(s,"smooth")}updated(t){super.updated(t),t.has("dir")&&this._updateScrollState()}render(){const{canScrollRight:t,canScrollLeft:o}=this.overflowState,e=this.labelPrevious,l=this.labelNext;return h`
|
|
2
2
|
<div
|
|
3
|
-
class=${
|
|
3
|
+
class=${n({"tabs-overflow-container":!0,"left-shadow":o,"right-shadow":t})}
|
|
4
4
|
>
|
|
5
5
|
<sp-action-button
|
|
6
|
-
class=${
|
|
6
|
+
class=${n({"left-scroll":!0,show:o})}
|
|
7
|
+
aria-label=${e}
|
|
7
8
|
quiet
|
|
8
9
|
dir="rtl"
|
|
10
|
+
tabindex="-1"
|
|
9
11
|
@click=${this._handleScrollClick}
|
|
10
12
|
>
|
|
11
13
|
<sp-icon-chevron100
|
|
@@ -14,8 +16,10 @@
|
|
|
14
16
|
></sp-icon-chevron100>
|
|
15
17
|
</sp-action-button>
|
|
16
18
|
<sp-action-button
|
|
17
|
-
class=${
|
|
19
|
+
class=${n({"right-scroll":!0,show:t})}
|
|
20
|
+
aria-label=${l}
|
|
18
21
|
quiet
|
|
22
|
+
tabindex="-1"
|
|
19
23
|
@click=${this._handleScrollClick}
|
|
20
24
|
>
|
|
21
25
|
<sp-icon-chevron100
|
|
@@ -28,5 +32,5 @@
|
|
|
28
32
|
@sp-tabs-scroll=${this._updateScrollState}
|
|
29
33
|
></slot>
|
|
30
34
|
</div>
|
|
31
|
-
`}}
|
|
35
|
+
`}}r([i({type:Boolean,reflect:!0})],TabsOverflow.prototype,"compact",2),r([i({type:String,attribute:"label-previous"})],TabsOverflow.prototype,"labelPrevious",2),r([i({type:String,attribute:"label-next"})],TabsOverflow.prototype,"labelNext",2),r([i({reflect:!0})],TabsOverflow.prototype,"dir",2),r([f()],TabsOverflow.prototype,"overflowState",2),r([b({selector:"sp-tabs",flatten:!0})],TabsOverflow.prototype,"scrollContent",2),r([v(".tabs-overflow-container")],TabsOverflow.prototype,"overflowContainer",2);
|
|
32
36
|
//# sourceMappingURL=TabsOverflow.js.map
|
package/src/TabsOverflow.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TabsOverflow.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n PropertyValueMap,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport { Tabs } from './Tabs.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport tabSizes from './tabs-sizes.css.js';\nimport styles from './tabs-overflow.css.js';\n\ninterface TabsOverflowState {\n canScrollLeft: boolean;\n canScrollRight: boolean;\n}\n/**\n * @element sp-tabs-overflow\n */\nexport class TabsOverflow extends SizedMixin(SpectrumElement) {\n public static override get styles(): CSSResultArray {\n return [chevronIconStyles, styles, tabSizes];\n }\n\n @property({ type: Boolean, reflect: true })\n compact = false;\n\n @property({ reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @state()\n private overflowState: TabsOverflowState = {\n canScrollLeft: false,\n canScrollRight: false,\n };\n\n @queryAssignedElements({ selector: 'sp-tabs', flatten: true })\n private scrollContent!: Tabs[];\n\n @query('.tabs-overflow-container')\n private overflowContainer!: HTMLDivElement;\n\n resizeController!: ResizeController;\n\n public constructor() {\n super();\n this.resizeController = new ResizeController(this, {\n target: this,\n callback: (): void => {\n this._updateScrollState();\n },\n });\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n // enable scroll event\n const [tabs] = this.scrollContent;\n if (tabs) {\n tabs.enableTabsScroll = true;\n }\n this.resizeController.observe(this.overflowContainer);\n }\n\n private async _handleSlotChange(): Promise<void> {\n const [tabsElement] = this.scrollContent;\n await tabsElement?.updateComplete;\n this._updateScrollState();\n }\n\n private _updateScrollState(): void {\n const { scrollContent, overflowState } = this;\n\n if (scrollContent) {\n const [tabsElement] = this.scrollContent;\n const { canScrollLeft, canScrollRight } =\n tabsElement?.scrollState || {\n canScrollLeft: false,\n canScrollRight: false,\n };\n\n this.overflowState = {\n ...overflowState,\n canScrollLeft,\n canScrollRight,\n };\n }\n }\n\n private _handleScrollClick(event: MouseEvent): void {\n const currentTarget = event.currentTarget as HTMLElement;\n const [tabsElement] = this.scrollContent;\n\n const dist = tabsElement.clientWidth * 0.5;\n const left = currentTarget.classList.contains('left-scroll')\n ? -dist\n : dist;\n tabsElement.scrollTabs(left, 'smooth');\n }\n\n protected override updated(\n changedProperties: PropertyValueMap<this>\n ): void {\n super.updated(changedProperties);\n if (changedProperties.has('dir')) {\n this._updateScrollState();\n }\n }\n\n protected override render(): TemplateResult {\n const { canScrollRight, canScrollLeft } = this.overflowState;\n return html`\n <div\n class=${classMap({\n 'tabs-overflow-container': true,\n 'left-shadow': canScrollLeft,\n 'right-shadow': canScrollRight,\n })}\n >\n <sp-action-button\n class=${classMap({\n 'left-scroll': true,\n show: canScrollLeft,\n })}\n quiet\n dir=\"rtl\"\n @click=${this._handleScrollClick}\n >\n <sp-icon-chevron100\n slot=\"icon\"\n class=\"spectrum-UIIcon-ChevronLeft300\"\n ></sp-icon-chevron100>\n </sp-action-button>\n <sp-action-button\n class=${classMap({\n 'right-scroll': true,\n show: canScrollRight,\n })}\n quiet\n @click=${this._handleScrollClick}\n >\n <sp-icon-chevron100\n slot=\"icon\"\n class=\"spectrum-UIIcon-ChevronRight300\"\n ></sp-icon-chevron100>\n </sp-action-button>\n <slot\n @slotchange=${this._handleSlotChange}\n @sp-tabs-scroll=${this._updateScrollState}\n ></slot>\n </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "qNAWA,OAEI,QAAAA,EAGA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,EACA,yBAAAC,EACA,SAAAC,MACG,kDACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,oBAAAC,MAAwB,2CAEjC,MAAO,6DACP,MAAO,gEACP,OAAOC,MAAuB,iEAC9B,OAAOC,MAAc,sBACrB,OAAOC,MAAY,yBASZ,aAAM,qBAAqBV,EAAWC,CAAe,CAAE,
|
|
6
|
-
"names": ["html", "SizedMixin", "SpectrumElement", "property", "query", "queryAssignedElements", "state", "classMap", "ResizeController", "chevronIconStyles", "tabSizes", "styles", "changes", "tabs", "tabsElement", "scrollContent", "overflowState", "canScrollLeft", "canScrollRight", "event", "currentTarget", "dist", "left", "changedProperties", "__decorateClass"]
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n PropertyValueMap,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport { Tabs } from './Tabs.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport tabSizes from './tabs-sizes.css.js';\nimport styles from './tabs-overflow.css.js';\n\ninterface TabsOverflowState {\n canScrollLeft: boolean;\n canScrollRight: boolean;\n}\n/**\n * @element sp-tabs-overflow\n */\nexport class TabsOverflow extends SizedMixin(SpectrumElement) {\n public static override get styles(): CSSResultArray {\n return [chevronIconStyles, styles, tabSizes];\n }\n\n @property({ type: Boolean, reflect: true })\n public compact = false;\n\n @property({ type: String, attribute: 'label-previous' })\n public labelPrevious = 'Scroll to previous tabs';\n\n @property({ type: String, attribute: 'label-next' })\n public labelNext = 'Scroll to next tabs';\n\n @property({ reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @state()\n private overflowState: TabsOverflowState = {\n canScrollLeft: false,\n canScrollRight: false,\n };\n\n @queryAssignedElements({ selector: 'sp-tabs', flatten: true })\n private scrollContent!: Tabs[];\n\n @query('.tabs-overflow-container')\n private overflowContainer!: HTMLDivElement;\n\n resizeController!: ResizeController;\n\n public constructor() {\n super();\n this.resizeController = new ResizeController(this, {\n target: this,\n callback: (): void => {\n this._updateScrollState();\n },\n });\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n // enable scroll event\n const [tabs] = this.scrollContent;\n if (tabs) {\n tabs.enableTabsScroll = true;\n }\n this.resizeController.observe(this.overflowContainer);\n }\n\n private async _handleSlotChange(): Promise<void> {\n const [tabsElement] = this.scrollContent;\n await tabsElement?.updateComplete;\n this._updateScrollState();\n }\n\n private _updateScrollState(): void {\n const { scrollContent, overflowState } = this;\n\n if (scrollContent) {\n const [tabsElement] = this.scrollContent;\n const { canScrollLeft, canScrollRight } =\n tabsElement?.scrollState || {\n canScrollLeft: false,\n canScrollRight: false,\n };\n\n this.overflowState = {\n ...overflowState,\n canScrollLeft,\n canScrollRight,\n };\n }\n }\n\n private _handleScrollClick(event: MouseEvent): void {\n const currentTarget = event.currentTarget as HTMLElement;\n const [tabsElement] = this.scrollContent;\n\n const dist = tabsElement.clientWidth * 0.5;\n const left = currentTarget.classList.contains('left-scroll')\n ? -dist\n : dist;\n tabsElement.scrollTabs(left, 'smooth');\n }\n\n protected override updated(\n changedProperties: PropertyValueMap<this>\n ): void {\n super.updated(changedProperties);\n if (changedProperties.has('dir')) {\n this._updateScrollState();\n }\n }\n\n protected override render(): TemplateResult {\n const { canScrollRight, canScrollLeft } = this.overflowState;\n const ariaLabelPrevious = this.labelPrevious;\n const ariaLabelNext = this.labelNext;\n return html`\n <div\n class=${classMap({\n 'tabs-overflow-container': true,\n 'left-shadow': canScrollLeft,\n 'right-shadow': canScrollRight,\n })}\n >\n <sp-action-button\n class=${classMap({\n 'left-scroll': true,\n show: canScrollLeft,\n })}\n aria-label=${ariaLabelPrevious}\n quiet\n dir=\"rtl\"\n tabindex=\"-1\"\n @click=${this._handleScrollClick}\n >\n <sp-icon-chevron100\n slot=\"icon\"\n class=\"spectrum-UIIcon-ChevronLeft300\"\n ></sp-icon-chevron100>\n </sp-action-button>\n <sp-action-button\n class=${classMap({\n 'right-scroll': true,\n show: canScrollRight,\n })}\n aria-label=${ariaLabelNext}\n quiet\n tabindex=\"-1\"\n @click=${this._handleScrollClick}\n >\n <sp-icon-chevron100\n slot=\"icon\"\n class=\"spectrum-UIIcon-ChevronRight300\"\n ></sp-icon-chevron100>\n </sp-action-button>\n <slot\n @slotchange=${this._handleSlotChange}\n @sp-tabs-scroll=${this._updateScrollState}\n ></slot>\n </div>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["html", "SizedMixin", "SpectrumElement", "property", "query", "queryAssignedElements", "state", "classMap", "ResizeController", "chevronIconStyles", "tabSizes", "styles", "changes", "tabs", "tabsElement", "scrollContent", "overflowState", "canScrollLeft", "canScrollRight", "event", "currentTarget", "dist", "left", "changedProperties", "ariaLabelPrevious", "ariaLabelNext", "__decorateClass"]
|
|
7
7
|
}
|
package/src/spectrum-config.js
CHANGED
|
@@ -207,6 +207,21 @@ const config = {
|
|
|
207
207
|
],
|
|
208
208
|
},
|
|
209
209
|
},
|
|
210
|
+
{
|
|
211
|
+
find: builder.class('is-disabled'),
|
|
212
|
+
replace: {
|
|
213
|
+
type: 'pseudo-element',
|
|
214
|
+
kind: 'slotted',
|
|
215
|
+
selector: [
|
|
216
|
+
builder.attribute('disabled'),
|
|
217
|
+
{
|
|
218
|
+
type: 'pseudo-class',
|
|
219
|
+
kind: 'not',
|
|
220
|
+
selectors: [[builder.attribute('slot')]],
|
|
221
|
+
},
|
|
222
|
+
],
|
|
223
|
+
},
|
|
224
|
+
},
|
|
210
225
|
],
|
|
211
226
|
excludeByComponents: [
|
|
212
227
|
builder.class('spectrum-Tabs-itemLabel'),
|
|
@@ -229,6 +244,29 @@ const config = {
|
|
|
229
244
|
builder.class('focus-ring'),
|
|
230
245
|
builder.pseudoElement('before'),
|
|
231
246
|
],
|
|
247
|
+
[
|
|
248
|
+
builder.class('spectrum-Tabs-item'),
|
|
249
|
+
builder.pseudoClass('focus-visible'),
|
|
250
|
+
],
|
|
251
|
+
[
|
|
252
|
+
builder.class('spectrum-Tabs-item'),
|
|
253
|
+
builder.pseudoClass('focus-visible'),
|
|
254
|
+
builder.pseudoElement('before'),
|
|
255
|
+
],
|
|
256
|
+
[
|
|
257
|
+
// .spectrum-Tabs .is-selected:focus
|
|
258
|
+
builder.class('spectrum-Tabs'),
|
|
259
|
+
builder.combinator(' '),
|
|
260
|
+
builder.class('is-selected'),
|
|
261
|
+
builder.pseudoClass('focus'),
|
|
262
|
+
],
|
|
263
|
+
[
|
|
264
|
+
// .spectrum-Tabs .is-selected:focus-visible
|
|
265
|
+
builder.class('spectrum-Tabs'),
|
|
266
|
+
builder.combinator(' '),
|
|
267
|
+
builder.class('is-selected'),
|
|
268
|
+
builder.pseudoClass('focus-visible'),
|
|
269
|
+
],
|
|
232
270
|
],
|
|
233
271
|
},
|
|
234
272
|
{
|
|
@@ -1,50 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
:host{block-size:calc(var(--mod-tabs-item-height,
|
|
5
|
-
--highcontrast-tabs-color,var(--mod-tabs-color,var(--spectrum-tabs-color))
|
|
6
|
-
);cursor:pointer;outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(
|
|
7
|
-
--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)
|
|
8
|
-
) ease-out;white-space:nowrap;z-index:1}::slotted([slot=icon]){block-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));inline-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));margin-block-start:var(
|
|
9
|
-
--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon)
|
|
10
|
-
)}[name=icon]+#item-label{margin-inline-start:var(
|
|
11
|
-
--mod-tabs-icon-to-text,var(--spectrum-tabs-icon-to-text)
|
|
12
|
-
)}:host:before{block-size:calc(100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)));border:var(
|
|
13
|
-
--mod-tabs-focus-indicator-width,var(--spectrum-tabs-focus-indicator-width)
|
|
14
|
-
) solid transparent;border-radius:var(
|
|
15
|
-
--mod-tabs-focus-indicator-border-radius,var(--spectrum-tabs-focus-indicator-border-radius)
|
|
16
|
-
);box-sizing:border-box;content:"";inline-size:calc(100% + var(
|
|
17
|
-
--mod-tabs-focus-indicator-gap,
|
|
18
|
-
var(--spectrum-tabs-focus-indicator-gap)
|
|
19
|
-
)*2);inset-block-start:calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text))/2);inset-inline-end:calc(var(
|
|
20
|
-
--mod-tabs-focus-indicator-gap,
|
|
21
|
-
var(--spectrum-tabs-focus-indicator-gap)
|
|
22
|
-
)*-1);inset-inline-start:calc(var(
|
|
23
|
-
--mod-tabs-focus-indicator-gap,
|
|
24
|
-
var(--spectrum-tabs-focus-indicator-gap)
|
|
25
|
-
)*-1);pointer-events:none;position:absolute}@media (hover:hover){:host(:hover){color:var(
|
|
26
|
-
--highcontrast-tabs-color-hover,var(--mod-tabs-color-hover,var(--spectrum-tabs-color-hover))
|
|
27
|
-
)}}:host([selected]){color:var(
|
|
28
|
-
--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))
|
|
29
|
-
)}:host([disabled]){color:var(
|
|
30
|
-
--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))
|
|
31
|
-
);cursor:default}:host([disabled]) #item-label{cursor:default}:host(.focus-visible){color:var(
|
|
32
|
-
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
33
|
-
)}:host(:focus-visible){color:var(
|
|
34
|
-
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
35
|
-
)}:host(.focus-visible):before{border-color:var(
|
|
36
|
-
--highcontrast-tabs-focus-indicator-color,var(
|
|
37
|
-
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
38
|
-
)
|
|
39
|
-
)}:host(:focus-visible):before{border-color:var(
|
|
40
|
-
--highcontrast-tabs-focus-indicator-color,var(
|
|
41
|
-
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
42
|
-
)
|
|
43
|
-
)}#item-label{cursor:pointer;display:inline-block;font-family:var(--mod-tabs-font-family,var(--spectrum-tabs-font-family));font-size:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-size));font-style:var(--mod-tabs-font-style,var(--spectrum-tabs-font-style));font-weight:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-weight));line-height:var(--mod-tabs-line-height,var(--spectrum-tabs-line-height));margin-block-end:var(
|
|
44
|
-
--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text)
|
|
45
|
-
);margin-block-start:var(
|
|
46
|
-
--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text)
|
|
47
|
-
);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}
|
|
4
|
+
:host{box-sizing:border-box;block-size:calc(var(--mod-tabs-item-height,var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));z-index:1;white-space:nowrap;color:var(--highcontrast-tabs-color,var(--mod-tabs-color,var(--spectrum-tabs-color)));transition:color var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))ease-out;cursor:pointer;outline:none;text-decoration:none;position:relative}::slotted([slot=icon]){block-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));inline-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));margin-block-start:var(--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon))}[name=icon]+#item-label{margin-inline-start:var(--mod-tabs-icon-to-text,var(--spectrum-tabs-icon-to-text))}:host:before{content:"";box-sizing:border-box;block-size:calc(100% - var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text)));inline-size:calc(100% + var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*2);border:var(--mod-tabs-focus-indicator-width,var(--spectrum-tabs-focus-indicator-width))solid transparent;border-radius:var(--mod-tabs-focus-indicator-border-radius,var(--spectrum-tabs-focus-indicator-border-radius));pointer-events:none;position:absolute;inset-block-start:calc(var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text))/2);inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1);inset-inline-end:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}@media (hover:hover){:host(:hover){color:var(--highcontrast-tabs-color-hover,var(--mod-tabs-color-hover,var(--spectrum-tabs-color-hover)))}}:host([selected]){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}:host([disabled]){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}:host([disabled]) #item-label{cursor:default}:host(:focus-visible){color:var(--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus)))}:host(:focus-visible):before{border-color:var(--highcontrast-tabs-focus-indicator-color,var(--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)))}#item-label{cursor:pointer;vertical-align:top;font-family:var(--mod-tabs-font-family,var(--spectrum-tabs-font-family));font-style:var(--mod-tabs-font-style,var(--spectrum-tabs-font-style));font-size:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-size));font-weight:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-weight));line-height:var(--mod-tabs-line-height,var(--spectrum-tabs-line-height));margin-block-start:var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text));margin-block-end:var(--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text));text-decoration:none;display:inline-block}#item-label:empty{display:none}
|
|
48
5
|
`;
|
|
49
6
|
export default styles;
|
|
50
7
|
//# sourceMappingURL=spectrum-tab.css.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tab.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{block-size:calc(var(--mod-tabs-item-height,
|
|
5
|
-
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{box-sizing:border-box;block-size:calc(var(--mod-tabs-item-height,var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));z-index:1;white-space:nowrap;color:var(--highcontrast-tabs-color,var(--mod-tabs-color,var(--spectrum-tabs-color)));transition:color var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))ease-out;cursor:pointer;outline:none;text-decoration:none;position:relative}::slotted([slot=icon]){block-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));inline-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));margin-block-start:var(--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon))}[name=icon]+#item-label{margin-inline-start:var(--mod-tabs-icon-to-text,var(--spectrum-tabs-icon-to-text))}:host:before{content:\"\";box-sizing:border-box;block-size:calc(100% - var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text)));inline-size:calc(100% + var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*2);border:var(--mod-tabs-focus-indicator-width,var(--spectrum-tabs-focus-indicator-width))solid transparent;border-radius:var(--mod-tabs-focus-indicator-border-radius,var(--spectrum-tabs-focus-indicator-border-radius));pointer-events:none;position:absolute;inset-block-start:calc(var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text))/2);inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1);inset-inline-end:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}@media (hover:hover){:host(:hover){color:var(--highcontrast-tabs-color-hover,var(--mod-tabs-color-hover,var(--spectrum-tabs-color-hover)))}}:host([selected]){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}:host([disabled]){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}:host([disabled]) #item-label{cursor:default}:host(:focus-visible){color:var(--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus)))}:host(:focus-visible):before{border-color:var(--highcontrast-tabs-focus-indicator-color,var(--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)))}#item-label{cursor:pointer;vertical-align:top;font-family:var(--mod-tabs-font-family,var(--spectrum-tabs-font-family));font-style:var(--mod-tabs-font-style,var(--spectrum-tabs-font-style));font-size:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-size));font-weight:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-weight));line-height:var(--mod-tabs-line-height,var(--spectrum-tabs-line-height));margin-block-start:var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text));margin-block-end:var(--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text));text-decoration:none;display:inline-block}#item-label:empty{display:none}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/spectrum-tab.css.js
CHANGED
|
@@ -1,47 +1,4 @@
|
|
|
1
1
|
"use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
|
|
2
|
-
:host{block-size:calc(var(--mod-tabs-item-height,
|
|
3
|
-
--highcontrast-tabs-color,var(--mod-tabs-color,var(--spectrum-tabs-color))
|
|
4
|
-
);cursor:pointer;outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(
|
|
5
|
-
--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)
|
|
6
|
-
) ease-out;white-space:nowrap;z-index:1}::slotted([slot=icon]){block-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));inline-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));margin-block-start:var(
|
|
7
|
-
--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon)
|
|
8
|
-
)}[name=icon]+#item-label{margin-inline-start:var(
|
|
9
|
-
--mod-tabs-icon-to-text,var(--spectrum-tabs-icon-to-text)
|
|
10
|
-
)}:host:before{block-size:calc(100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)));border:var(
|
|
11
|
-
--mod-tabs-focus-indicator-width,var(--spectrum-tabs-focus-indicator-width)
|
|
12
|
-
) solid transparent;border-radius:var(
|
|
13
|
-
--mod-tabs-focus-indicator-border-radius,var(--spectrum-tabs-focus-indicator-border-radius)
|
|
14
|
-
);box-sizing:border-box;content:"";inline-size:calc(100% + var(
|
|
15
|
-
--mod-tabs-focus-indicator-gap,
|
|
16
|
-
var(--spectrum-tabs-focus-indicator-gap)
|
|
17
|
-
)*2);inset-block-start:calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text))/2);inset-inline-end:calc(var(
|
|
18
|
-
--mod-tabs-focus-indicator-gap,
|
|
19
|
-
var(--spectrum-tabs-focus-indicator-gap)
|
|
20
|
-
)*-1);inset-inline-start:calc(var(
|
|
21
|
-
--mod-tabs-focus-indicator-gap,
|
|
22
|
-
var(--spectrum-tabs-focus-indicator-gap)
|
|
23
|
-
)*-1);pointer-events:none;position:absolute}@media (hover:hover){:host(:hover){color:var(
|
|
24
|
-
--highcontrast-tabs-color-hover,var(--mod-tabs-color-hover,var(--spectrum-tabs-color-hover))
|
|
25
|
-
)}}:host([selected]){color:var(
|
|
26
|
-
--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))
|
|
27
|
-
)}:host([disabled]){color:var(
|
|
28
|
-
--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))
|
|
29
|
-
);cursor:default}:host([disabled]) #item-label{cursor:default}:host(.focus-visible){color:var(
|
|
30
|
-
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
31
|
-
)}:host(:focus-visible){color:var(
|
|
32
|
-
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
33
|
-
)}:host(.focus-visible):before{border-color:var(
|
|
34
|
-
--highcontrast-tabs-focus-indicator-color,var(
|
|
35
|
-
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
36
|
-
)
|
|
37
|
-
)}:host(:focus-visible):before{border-color:var(
|
|
38
|
-
--highcontrast-tabs-focus-indicator-color,var(
|
|
39
|
-
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
40
|
-
)
|
|
41
|
-
)}#item-label{cursor:pointer;display:inline-block;font-family:var(--mod-tabs-font-family,var(--spectrum-tabs-font-family));font-size:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-size));font-style:var(--mod-tabs-font-style,var(--spectrum-tabs-font-style));font-weight:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-weight));line-height:var(--mod-tabs-line-height,var(--spectrum-tabs-line-height));margin-block-end:var(
|
|
42
|
-
--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text)
|
|
43
|
-
);margin-block-start:var(
|
|
44
|
-
--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text)
|
|
45
|
-
);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}
|
|
2
|
+
:host{box-sizing:border-box;block-size:calc(var(--mod-tabs-item-height,var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));z-index:1;white-space:nowrap;color:var(--highcontrast-tabs-color,var(--mod-tabs-color,var(--spectrum-tabs-color)));transition:color var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))ease-out;cursor:pointer;outline:none;text-decoration:none;position:relative}::slotted([slot=icon]){block-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));inline-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));margin-block-start:var(--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon))}[name=icon]+#item-label{margin-inline-start:var(--mod-tabs-icon-to-text,var(--spectrum-tabs-icon-to-text))}:host:before{content:"";box-sizing:border-box;block-size:calc(100% - var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text)));inline-size:calc(100% + var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*2);border:var(--mod-tabs-focus-indicator-width,var(--spectrum-tabs-focus-indicator-width))solid transparent;border-radius:var(--mod-tabs-focus-indicator-border-radius,var(--spectrum-tabs-focus-indicator-border-radius));pointer-events:none;position:absolute;inset-block-start:calc(var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text))/2);inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1);inset-inline-end:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}@media (hover:hover){:host(:hover){color:var(--highcontrast-tabs-color-hover,var(--mod-tabs-color-hover,var(--spectrum-tabs-color-hover)))}}:host([selected]){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}:host([disabled]){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}:host([disabled]) #item-label{cursor:default}:host(:focus-visible){color:var(--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus)))}:host(:focus-visible):before{border-color:var(--highcontrast-tabs-focus-indicator-color,var(--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)))}#item-label{cursor:pointer;vertical-align:top;font-family:var(--mod-tabs-font-family,var(--spectrum-tabs-font-family));font-style:var(--mod-tabs-font-style,var(--spectrum-tabs-font-style));font-size:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-size));font-weight:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-weight));line-height:var(--mod-tabs-line-height,var(--spectrum-tabs-line-height));margin-block-start:var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text));margin-block-end:var(--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text));text-decoration:none;display:inline-block}#item-label:empty{display:none}
|
|
46
3
|
`;export default o;
|
|
47
4
|
//# sourceMappingURL=spectrum-tab.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tab.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{block-size:calc(var(--mod-tabs-item-height,
|
|
5
|
-
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{box-sizing:border-box;block-size:calc(var(--mod-tabs-item-height,var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));z-index:1;white-space:nowrap;color:var(--highcontrast-tabs-color,var(--mod-tabs-color,var(--spectrum-tabs-color)));transition:color var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))ease-out;cursor:pointer;outline:none;text-decoration:none;position:relative}::slotted([slot=icon]){block-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));inline-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));margin-block-start:var(--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon))}[name=icon]+#item-label{margin-inline-start:var(--mod-tabs-icon-to-text,var(--spectrum-tabs-icon-to-text))}:host:before{content:\"\";box-sizing:border-box;block-size:calc(100% - var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text)));inline-size:calc(100% + var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*2);border:var(--mod-tabs-focus-indicator-width,var(--spectrum-tabs-focus-indicator-width))solid transparent;border-radius:var(--mod-tabs-focus-indicator-border-radius,var(--spectrum-tabs-focus-indicator-border-radius));pointer-events:none;position:absolute;inset-block-start:calc(var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text))/2);inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1);inset-inline-end:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}@media (hover:hover){:host(:hover){color:var(--highcontrast-tabs-color-hover,var(--mod-tabs-color-hover,var(--spectrum-tabs-color-hover)))}}:host([selected]){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}:host([disabled]){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}:host([disabled]) #item-label{cursor:default}:host(:focus-visible){color:var(--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus)))}:host(:focus-visible):before{border-color:var(--highcontrast-tabs-focus-indicator-color,var(--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)))}#item-label{cursor:pointer;vertical-align:top;font-family:var(--mod-tabs-font-family,var(--spectrum-tabs-font-family));font-style:var(--mod-tabs-font-style,var(--spectrum-tabs-font-style));font-size:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-size));font-weight:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-weight));line-height:var(--mod-tabs-line-height,var(--spectrum-tabs-line-height));margin-block-start:var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text));margin-block-end:var(--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text));text-decoration:none;display:inline-block}#item-label:empty{display:none}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,65 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
:host([size=s]) #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-small);--spectrum-tabs-item-horizontal-spacing:var(
|
|
5
|
-
--spectrum-tab-item-to-tab-item-horizontal-small
|
|
6
|
-
);--spectrum-tabs-item-vertical-spacing:var(
|
|
7
|
-
--spectrum-tab-item-to-tab-item-vertical-small
|
|
8
|
-
);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-small);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-small);--spectrum-tabs-bottom-to-text:var(
|
|
9
|
-
--spectrum-tab-item-bottom-to-text-small
|
|
10
|
-
);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-75);--spectrum-tabs-top-to-icon:var(
|
|
11
|
-
--spectrum-tab-item-top-to-workflow-icon-small
|
|
12
|
-
);--spectrum-tabs-focus-indicator-gap:var(
|
|
13
|
-
--spectrum-tab-item-focus-indicator-gap-small
|
|
14
|
-
);--spectrum-tabs-font-size:var(--spectrum-font-size-75)}:host([size=l]) #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-large);--spectrum-tabs-item-horizontal-spacing:var(
|
|
15
|
-
--spectrum-tab-item-to-tab-item-horizontal-large
|
|
16
|
-
);--spectrum-tabs-item-vertical-spacing:var(
|
|
17
|
-
--spectrum-tab-item-to-tab-item-vertical-large
|
|
18
|
-
);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-large);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-large);--spectrum-tabs-bottom-to-text:var(
|
|
19
|
-
--spectrum-tab-item-bottom-to-text-large
|
|
20
|
-
);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-200);--spectrum-tabs-top-to-icon:var(
|
|
21
|
-
--spectrum-tab-item-top-to-workflow-icon-large
|
|
22
|
-
);--spectrum-tabs-focus-indicator-gap:var(
|
|
23
|
-
--spectrum-tab-item-focus-indicator-gap-large
|
|
24
|
-
);--spectrum-tabs-font-size:var(--spectrum-font-size-200)}:host([size=xl]) #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-extra-large);--spectrum-tabs-item-horizontal-spacing:var(
|
|
25
|
-
--spectrum-tab-item-to-tab-item-horizontal-extra-large
|
|
26
|
-
);--spectrum-tabs-item-vertical-spacing:var(
|
|
27
|
-
--spectrum-tab-item-to-tab-item-vertical-extra-large
|
|
28
|
-
);--spectrum-tabs-start-to-edge:var(
|
|
29
|
-
--spectrum-tab-item-start-to-edge-extra-large
|
|
30
|
-
);--spectrum-tabs-top-to-text:var(
|
|
31
|
-
--spectrum-tab-item-top-to-text-extra-large
|
|
32
|
-
);--spectrum-tabs-bottom-to-text:var(
|
|
33
|
-
--spectrum-tab-item-bottom-to-text-extra-large
|
|
34
|
-
);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-300);--spectrum-tabs-top-to-icon:var(
|
|
35
|
-
--spectrum-tab-item-top-to-workflow-icon-extra-large
|
|
36
|
-
);--spectrum-tabs-focus-indicator-gap:var(
|
|
37
|
-
--spectrum-tab-item-focus-indicator-gap-extra-large
|
|
38
|
-
);--spectrum-tabs-font-size:var(--spectrum-font-size-300)}:host([size=s]) #list.spectrum-Tabs--compact{--mod-tabs-item-height:var(
|
|
39
|
-
--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-small)
|
|
40
|
-
);--mod-tabs-top-to-text:var(
|
|
41
|
-
--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-small)
|
|
42
|
-
);--mod-tabs-bottom-to-text:var(
|
|
43
|
-
--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-small)
|
|
44
|
-
);--mod-tabs-top-to-icon:var(
|
|
45
|
-
--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-small)
|
|
46
|
-
)}:host([size=l]) #list.spectrum-Tabs--compact{--mod-tabs-item-height:var(
|
|
47
|
-
--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-large)
|
|
48
|
-
);--mod-tabs-top-to-text:var(
|
|
49
|
-
--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-large)
|
|
50
|
-
);--mod-tabs-bottom-to-text:var(
|
|
51
|
-
--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-large)
|
|
52
|
-
);--mod-tabs-top-to-icon:var(
|
|
53
|
-
--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-large)
|
|
54
|
-
)}:host([size=xl]) #list.spectrum-Tabs--compact{--mod-tabs-item-height:var(
|
|
55
|
-
--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-extra-large)
|
|
56
|
-
);--mod-tabs-top-to-text:var(
|
|
57
|
-
--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-extra-large)
|
|
58
|
-
);--mod-tabs-bottom-to-text:var(
|
|
59
|
-
--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-extra-large)
|
|
60
|
-
);--mod-tabs-top-to-icon:var(
|
|
61
|
-
--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large)
|
|
62
|
-
)}
|
|
4
|
+
:host([size=s]) #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-small);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-small);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-small);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-small);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-small);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-small);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-75);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-small);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-small);--spectrum-tabs-font-size:var(--spectrum-font-size-75)}:host([size=l]) #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-large);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-large);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-large);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-large);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-large);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-large);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-200);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-large);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-large);--spectrum-tabs-font-size:var(--spectrum-font-size-200)}:host([size=xl]) #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-extra-large);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-extra-large);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-extra-large);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-extra-large);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-extra-large);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-extra-large);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-300);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-extra-large);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-extra-large);--spectrum-tabs-font-size:var(--spectrum-font-size-300)}:host([size=s]) #list.spectrum-Tabs--compact{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-small));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-small));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-small));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-small))}:host([size=l]) #list.spectrum-Tabs--compact{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-large));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-large));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-large));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-large))}:host([size=xl]) #list.spectrum-Tabs--compact{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-extra-large));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-extra-large));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-extra-large));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large))}
|
|
63
5
|
`;
|
|
64
6
|
export default styles;
|
|
65
7
|
//# sourceMappingURL=spectrum-tabs-sizes.css.dev.js.map
|