@spectrum-web-components/tabs 0.42.2 → 0.42.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +9 -9
- package/src/Tab.dev.js +1 -2
- package/src/Tab.dev.js.map +1 -1
- package/src/TabPanel.dev.js +1 -2
- package/src/TabPanel.dev.js.map +1 -1
- package/src/Tabs.dev.js +5 -10
- package/src/Tabs.dev.js.map +1 -1
- package/src/TabsOverflow.dev.js +1 -2
- package/src/TabsOverflow.dev.js.map +1 -1
- package/src/spectrum-config.js +59 -0
- package/src/spectrum-tab.css.dev.js +1 -1
- package/src/spectrum-tab.css.dev.js.map +1 -1
- package/src/spectrum-tab.css.js +1 -1
- package/src/spectrum-tab.css.js.map +1 -1
- package/src/spectrum-tabs.css.dev.js +1 -1
- package/src/spectrum-tabs.css.dev.js.map +1 -1
- package/src/spectrum-tabs.css.js +1 -1
- package/src/spectrum-tabs.css.js.map +1 -1
- package/src/tab.css.dev.js +1 -1
- package/src/tab.css.dev.js.map +1 -1
- package/src/tab.css.js +1 -1
- package/src/tab.css.js.map +1 -1
- package/src/tabs.css.dev.js +1 -1
- package/src/tabs.css.dev.js.map +1 -1
- package/src/tabs.css.js +1 -1
- package/src/tabs.css.js.map +1 -1
- package/test/tabs-memory.test.js +13 -0
- package/test/tabs-memory.test.js.map +7 -0
- package/test/tabs.test.js +8 -16
- package/test/tabs.test.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tabs",
|
|
3
|
-
"version": "0.42.
|
|
3
|
+
"version": "0.42.4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -85,15 +85,15 @@
|
|
|
85
85
|
"lit-html"
|
|
86
86
|
],
|
|
87
87
|
"dependencies": {
|
|
88
|
-
"@lit-labs/observers": "^2.0.
|
|
89
|
-
"@spectrum-web-components/base": "^0.42.
|
|
90
|
-
"@spectrum-web-components/icon": "^0.42.
|
|
91
|
-
"@spectrum-web-components/icons-ui": "^0.42.
|
|
92
|
-
"@spectrum-web-components/reactive-controllers": "^0.42.
|
|
93
|
-
"@spectrum-web-components/shared": "^0.42.
|
|
88
|
+
"@lit-labs/observers": "^2.0.2",
|
|
89
|
+
"@spectrum-web-components/base": "^0.42.4",
|
|
90
|
+
"@spectrum-web-components/icon": "^0.42.4",
|
|
91
|
+
"@spectrum-web-components/icons-ui": "^0.42.4",
|
|
92
|
+
"@spectrum-web-components/reactive-controllers": "^0.42.4",
|
|
93
|
+
"@spectrum-web-components/shared": "^0.42.4"
|
|
94
94
|
},
|
|
95
95
|
"devDependencies": {
|
|
96
|
-
"@spectrum-css/tabs": "^
|
|
96
|
+
"@spectrum-css/tabs": "^5.1.0"
|
|
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": "4924ffd06681ced537edaed873a9ce8b42cf155c"
|
|
105
105
|
}
|
package/src/Tab.dev.js
CHANGED
|
@@ -6,8 +6,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
6
6
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
7
|
if (decorator = decorators[i])
|
|
8
8
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
-
if (kind && result)
|
|
10
|
-
__defProp(target, key, result);
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
11
10
|
return result;
|
|
12
11
|
};
|
|
13
12
|
import {
|
package/src/Tab.dev.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tab.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport tabItemStyles from './tab.css.js';\n\n/**\n * @element sp-tab\n *\n * @slot - text label of the Tab\n * @slot icon - The icon that appears on the left of the label\n */\nexport class Tab extends FocusVisiblePolyfillMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), '')\n) {\n public static override get styles(): CSSResultArray {\n return [tabItemStyles];\n }\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected get hasLabel(): boolean {\n return !!this.label || this.slotHasContent;\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected override render(): TemplateResult {\n return html`\n ${this.hasIcon\n ? html`\n <slot name=\"icon\"></slot>\n `\n : nothing}\n <label id=\"item-label\" ?hidden=${!this.hasLabel}>\n ${this.slotHasContent ? nothing : this.label}\n <slot>${this.label}</slot>\n </label>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'tab');\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-${randomID()}`;\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selected')) {\n this.setAttribute(\n 'aria-selected',\n this.selected ? 'true' : 'false'\n );\n this.setAttribute('tabindex', this.selected ? '0' : '-1');\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAEzB,OAAO,mBAAmB;AAQnB,aAAM,YAAY;AAAA,EACrB,gBAAgB,oBAAoB,iBAAiB,eAAe,GAAG,EAAE;AAC7E,EAAE;AAAA,EAFK;AAAA;AAgBH,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAGf,SAAO,WAAW;AAGlB,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAAA;AAAA,EAzBf,WAA2B,SAAyB;AAChD,WAAO,CAAC,aAAa;AAAA,EACzB;AAAA,EAEA,IAAc,UAAmB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAc,WAAoB;AAC9B,WAAO,CAAC,CAAC,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAiBmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,UACD;AAAA;AAAA,sBAGA,OAAO;AAAA,6CACoB,CAAC,KAAK,QAAQ;AAAA,kBACzC,KAAK,iBAAiB,UAAU,KAAK,KAAK;AAAA,wBACpC,KAAK,KAAK;AAAA;AAAA;AAAA,EAG9B;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,SAAK,aAAa,QAAQ,KAAK;AAC/B,QAAI,CAAC,KAAK,aAAa,IAAI,GAAG;AAC1B,WAAK,KAAK,UAAU,SAAS,CAAC;AAAA,IAClC;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,WAAK;AAAA,QACD;AAAA,QACA,KAAK,WAAW,SAAS;AAAA,MAC7B;AACA,WAAK,aAAa,YAAY,KAAK,WAAW,MAAM,IAAI;AAAA,IAC5D;AACA,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,UAAI,KAAK,UAAU;AACf,aAAK,aAAa,iBAAiB,MAAM;AAAA,MAC7C,OAAO;AACH,aAAK,gBAAgB,eAAe;AAAA,MACxC;AAAA,IACJ;AAAA,EACJ;AACJ;AArDW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfjC,IAgBF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAlBlB,IAmBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArBjC,IAsBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAxBjC,IAyBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3BhC,IA4BF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/TabPanel.dev.js
CHANGED
|
@@ -6,8 +6,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
6
6
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
7
|
if (decorator = decorators[i])
|
|
8
8
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
-
if (kind && result)
|
|
10
|
-
__defProp(target, key, result);
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
11
10
|
return result;
|
|
12
11
|
};
|
|
13
12
|
import {
|
package/src/TabPanel.dev.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TabPanel.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport panelStyles from './tab-panel.css.js';\n\n/**\n * @element sp-tab-panel\n *\n * @slot - content of the Tab Panel\n */\nexport class TabPanel extends SpectrumElement {\n static override styles = [panelStyles];\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected handleFocusin(): void {\n this.removeAttribute('tabindex');\n }\n\n protected handleFocusout(): void {\n this.tabIndex = this.selected ? 0 : -1;\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ></slot>\n `;\n }\n\n protected override firstUpdated(): void {\n this.slot = 'tab-panel';\n this.setAttribute('role', 'tabpanel');\n this.tabIndex = 0;\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-panel-${randomID()}`;\n }\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n if (changes.has('selected')) {\n if (this.selected) {\n this.removeAttribute('aria-hidden');\n this.tabIndex = 0;\n } else {\n this.setAttribute('aria-hidden', 'true');\n this.tabIndex = -1;\n }\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;AAYA;AAAA,EACI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAEzB,OAAO,iBAAiB;AAOjB,aAAM,iBAAiB,gBAAgB;AAAA,EAAvC;AAAA;AAIH,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAAA;AAAA,EAEL,gBAAsB;AAC5B,SAAK,gBAAgB,UAAU;AAAA,EACnC;AAAA,EAEU,iBAAuB;AAC7B,SAAK,WAAW,KAAK,WAAW,IAAI;AAAA,EACxC;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA,2BAEY,KAAK,aAAa;AAAA,4BACjB,KAAK,cAAc;AAAA;AAAA;AAAA,EAG3C;AAAA,EAEmB,eAAqB;AACpC,SAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,UAAU;AACpC,SAAK,WAAW;AAChB,QAAI,CAAC,KAAK,aAAa,IAAI,GAAG;AAC1B,WAAK,KAAK,gBAAgB,SAAS,CAAC;AAAA,IACxC;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAAqC;AAC5D,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,UAAI,KAAK,UAAU;AACf,aAAK,gBAAgB,aAAa;AAClC,aAAK,WAAW;AAAA,MACpB,OAAO;AACH,aAAK,aAAa,eAAe,MAAM;AACvC,aAAK,WAAW;AAAA,MACpB;AAAA,IACJ;AAAA,EACJ;AACJ;AA9Ca,SACO,SAAS,CAAC,WAAW;AAG9B;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHjC,SAIF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANhC,SAOF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Tabs.dev.js
CHANGED
|
@@ -6,8 +6,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
6
6
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
7
|
if (decorator = decorators[i])
|
|
8
8
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
-
if (kind && result)
|
|
10
|
-
__defProp(target, key, result);
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
11
10
|
return result;
|
|
12
11
|
};
|
|
13
12
|
import {
|
|
@@ -83,8 +82,7 @@ export class Tabs extends SizedMixin(Focusable, { noDefaultSize: true }) {
|
|
|
83
82
|
},
|
|
84
83
|
direction: () => "both",
|
|
85
84
|
elementEnterAction: (el) => {
|
|
86
|
-
if (!this.auto)
|
|
87
|
-
return;
|
|
85
|
+
if (!this.auto) return;
|
|
88
86
|
this.shouldAnimate = true;
|
|
89
87
|
this.selectTarget(el);
|
|
90
88
|
},
|
|
@@ -169,8 +167,7 @@ export class Tabs extends SizedMixin(Focusable, { noDefaultSize: true }) {
|
|
|
169
167
|
return [tabSizes, tabStyles, ScaledIndicator.baseStyles()];
|
|
170
168
|
}
|
|
171
169
|
set tabs(tabs) {
|
|
172
|
-
if (tabs === this.tabs)
|
|
173
|
-
return;
|
|
170
|
+
if (tabs === this.tabs) return;
|
|
174
171
|
this._tabs.forEach((tab) => {
|
|
175
172
|
this.resizeController.unobserve(tab);
|
|
176
173
|
});
|
|
@@ -294,14 +291,12 @@ export class Tabs extends SizedMixin(Focusable, { noDefaultSize: true }) {
|
|
|
294
291
|
const previous = this.querySelector(
|
|
295
292
|
`[role="tabpanel"][value="${changes.get("selected")}"]`
|
|
296
293
|
);
|
|
297
|
-
if (previous)
|
|
298
|
-
previous.selected = false;
|
|
294
|
+
if (previous) previous.selected = false;
|
|
299
295
|
}
|
|
300
296
|
const next = this.querySelector(
|
|
301
297
|
`[role="tabpanel"][value="${this.selected}"]`
|
|
302
298
|
);
|
|
303
|
-
if (next)
|
|
304
|
-
next.selected = true;
|
|
299
|
+
if (next) next.selected = true;
|
|
305
300
|
}
|
|
306
301
|
if (changes.has("direction")) {
|
|
307
302
|
if (this.direction === "horizontal") {
|
package/src/Tabs.dev.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tabs.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n css,\n CSSResult,\n CSSResultArray,\n html,\n PropertyValueMap,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport {\n classMap,\n ifDefined,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { IntersectionController } from '@lit-labs/observers/intersection-controller.js';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport { Tab } from './Tab.dev.js'\nimport { Focusable } from '@spectrum-web-components/shared';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport tabStyles from './tabs.css.js';\nimport tabSizes from './tabs-sizes.css.js';\nimport { TabPanel } from './TabPanel.dev.js'\n\n// Encapsulated for use both here and in TopNav\nexport const ScaledIndicator = {\n baseSize: 100 as const,\n noSelectionStyle: 'transform: translateX(0px) scaleX(0) scaleY(0)',\n\n transformX(left: number, width: number): string {\n const scale = width / this.baseSize;\n return `transform: translateX(${left}px) scaleX(${scale});`;\n },\n\n transformY(top: number, height: number): string {\n const scale = height / this.baseSize;\n return `transform: translateY(${top}px) scaleY(${scale});`;\n },\n\n baseStyles(): CSSResult {\n return css`\n :host([direction='vertical-right']) #selection-indicator,\n :host([direction='vertical']) #selection-indicator {\n height: ${this.baseSize}px;\n }\n :host([dir][direction='horizontal']) #selection-indicator {\n width: ${this.baseSize}px;\n }\n `;\n },\n};\n\n/**\n * @element sp-tabs\n *\n * @slot - Tab elements to manage as a group\n * @slot tab-panel - Tab Panel elements related to the listed Tab elements\n * @csspart tablist - Container element for the slotted sp-tab elements\n *\n * @fires change - The selected Tab child has changed.\n */\nexport class Tabs extends SizedMixin(Focusable, { noDefaultSize: true }) {\n public static override get styles(): CSSResultArray {\n return [tabSizes, tabStyles, ScaledIndicator.baseStyles()];\n }\n\n /**\n * Whether to activate a tab on keyboard focus or not.\n *\n * By default a tab is activated via a \"click\" interaction. This is specifically intended for when\n * tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\n * To learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\n * https://w3c.github.io/aria-practices/#kbd_selection_follows_focus\n */\n @property({ type: Boolean })\n public auto = false;\n\n /**\n * The tab items are displayed closer together.\n */\n @property({ type: Boolean, reflect: true })\n public compact = false;\n\n @property({ reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @property({ reflect: true })\n public direction: 'vertical' | 'vertical-right' | 'horizontal' =\n 'horizontal';\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property()\n public label = '';\n\n @property({ type: Boolean })\n public enableTabsScroll = false;\n\n /**\n * The tab list is displayed without a border.\n */\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ attribute: false })\n public selectionIndicatorStyle = ScaledIndicator.noSelectionStyle;\n\n @property({ attribute: false })\n public shouldAnimate = false;\n\n @query('slot')\n private slotEl!: HTMLSlotElement;\n\n @query('#list')\n private tabList!: HTMLDivElement;\n\n @property({ reflect: true })\n selected = '';\n\n private set tabs(tabs: Tab[]) {\n if (tabs === this.tabs) return;\n this._tabs.forEach((tab) => {\n this.resizeController.unobserve(tab);\n });\n tabs.forEach((tab) => {\n this.resizeController.observe(tab);\n });\n this._tabs = tabs;\n this.rovingTabindexController.clearElementCache();\n }\n\n private get tabs(): Tab[] {\n return this._tabs;\n }\n\n private _tabs: Tab[] = [];\n\n constructor() {\n super();\n new IntersectionController(this, {\n config: {\n root: null,\n rootMargin: '0px',\n threshold: [0, 1],\n },\n callback: () => {\n this.updateSelectionIndicator();\n },\n });\n }\n\n protected resizeController = new ResizeController(this, {\n callback: () => {\n this.updateSelectionIndicator();\n },\n });\n\n rovingTabindexController = new RovingTabindexController<Tab>(this, {\n focusInIndex: (elements) => {\n let focusInIndex = 0;\n const firstFocusableElement = elements.find((el, index) => {\n const focusInElement = this.selected\n ? !el.disabled && el.value === this.selected\n : !el.disabled;\n focusInIndex = index;\n return focusInElement;\n });\n return firstFocusableElement ? focusInIndex : -1;\n },\n direction: () => 'both',\n elementEnterAction: (el) => {\n if (!this.auto) return;\n\n this.shouldAnimate = true;\n this.selectTarget(el);\n },\n elements: () => this.tabs,\n isFocusableElement: (el) => !el.disabled,\n listenerScope: () => this.tabList,\n });\n\n /**\n * @private\n */\n public override get focusElement(): Tab | this {\n return this.rovingTabindexController.focusInElement || this;\n }\n\n public scrollTabs(\n delta: number,\n behavior: ScrollBehavior = 'smooth'\n ): void {\n this.tabList?.scrollBy({\n left: delta,\n top: 0,\n behavior,\n });\n }\n\n public get scrollState(): Record<string, boolean> {\n if (this.tabList) {\n const { scrollLeft, clientWidth, scrollWidth } = this.tabList;\n const canScrollLeft = Math.abs(scrollLeft) > 0;\n const canScrollRight =\n Math.ceil(Math.abs(scrollLeft)) < scrollWidth - clientWidth;\n return {\n canScrollLeft:\n this.dir === 'ltr' ? canScrollLeft : canScrollRight,\n canScrollRight:\n this.dir === 'ltr' ? canScrollRight : canScrollLeft,\n };\n }\n return {};\n }\n\n override async getUpdateComplete(): Promise<boolean> {\n const complete = await super.getUpdateComplete();\n\n const tabs = [...this.children] as Tab[];\n const tabUpdateCompletes = tabs.map((tab) => {\n if (typeof tab.updateComplete !== 'undefined') {\n return tab.updateComplete;\n }\n return Promise.resolve(true);\n });\n\n await Promise.all(tabUpdateCompletes);\n return complete;\n }\n\n public async scrollToSelection(): Promise<void> {\n if (!this.enableTabsScroll || !this.selected) {\n return;\n }\n\n await this.updateComplete;\n const selectedTab = this.tabs.find(\n (tab) => tab.value === this.selected\n );\n selectedTab?.scrollIntoView();\n }\n\n protected override updated(\n changedProperties: PropertyValueMap<this>\n ): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('selected')) {\n this.scrollToSelection();\n }\n }\n\n protected managePanels({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n const panels = target.assignedElements() as TabPanel[];\n panels.map((panel) => {\n const { value, id } = panel;\n const tab = this.querySelector(`[role=\"tab\"][value=\"${value}\"]`);\n if (tab) {\n tab.setAttribute('aria-controls', id);\n panel.setAttribute('aria-labelledby', tab.id);\n }\n panel.selected = value === this.selected;\n });\n }\n\n protected override render(): TemplateResult {\n return html`\n <div\n class=${classMap({ scroll: this.enableTabsScroll })}\n aria-label=${ifDefined(this.label ? this.label : undefined)}\n @click=${this.onClick}\n @keydown=${this.onKeyDown}\n @scroll=${this.onTabsScroll}\n id=\"list\"\n role=\"tablist\"\n part=\"tablist\"\n >\n <slot @slotchange=${this.onSlotChange}></slot>\n <div\n id=\"selection-indicator\"\n class=${ifDefined(\n this.shouldAnimate ? undefined : 'first-position'\n )}\n style=${this.selectionIndicatorStyle}\n role=\"presentation\"\n ></div>\n </div>\n <slot name=\"tab-panel\" @slotchange=${this.managePanels}></slot>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues): void {\n if (!this.hasUpdated) {\n const selectedChild = this.querySelector(\n ':scope > [selected]'\n ) as Tab;\n if (selectedChild) {\n this.selectTarget(selectedChild);\n }\n }\n\n super.willUpdate(changes);\n if (changes.has('selected')) {\n if (this.tabs.length) {\n this.updateCheckedState();\n }\n if (changes.get('selected')) {\n const previous = this.querySelector(\n `[role=\"tabpanel\"][value=\"${changes.get('selected')}\"]`\n ) as TabPanel;\n if (previous) previous.selected = false;\n }\n const next = this.querySelector(\n `[role=\"tabpanel\"][value=\"${this.selected}\"]`\n ) as TabPanel;\n if (next) next.selected = true;\n }\n if (changes.has('direction')) {\n if (this.direction === 'horizontal') {\n this.removeAttribute('aria-orientation');\n } else {\n this.setAttribute('aria-orientation', 'vertical');\n }\n }\n if (changes.has('dir')) {\n this.updateSelectionIndicator();\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n if (\n !this.shouldAnimate &&\n typeof changes.get('shouldAnimate') !== 'undefined'\n ) {\n this.shouldAnimate = true;\n }\n }\n\n private onTabsScroll = (): void => {\n this.dispatchEvent(\n new Event('sp-tabs-scroll', {\n bubbles: true,\n composed: true,\n })\n );\n };\n\n private onClick = (event: Event): void => {\n if (this.disabled) {\n return;\n }\n const target = event\n .composedPath()\n .find((el) => (el as Tab).parentElement === this) as Tab;\n if (!target || target.disabled) {\n return;\n }\n this.shouldAnimate = true;\n this.selectTarget(target);\n };\n\n private onKeyDown = (event: KeyboardEvent): void => {\n if (event.code === 'Enter' || event.code === 'Space') {\n event.preventDefault();\n const target = event.target as HTMLElement;\n if (target) {\n this.selectTarget(target);\n }\n }\n };\n\n private selectTarget(target: HTMLElement): void {\n const value = target.getAttribute('value');\n if (value) {\n const selected = this.selected;\n this.selected = value;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.selected = selected;\n }\n }\n }\n\n private onSlotChange(): void {\n this.tabs = this.slotEl\n .assignedElements()\n .filter((el) => el.getAttribute('role') === 'tab') as Tab[];\n this.updateCheckedState();\n }\n\n private updateCheckedState = (): void => {\n this.tabs.forEach((element) => {\n element.removeAttribute('selected');\n });\n\n if (this.selected) {\n const currentChecked = this.tabs.find(\n (el) => el.value === this.selected\n );\n\n if (currentChecked) {\n currentChecked.selected = true;\n } else {\n this.selected = '';\n }\n } else {\n const firstTab = this.tabs[0];\n if (firstTab) {\n firstTab.setAttribute('tabindex', '0');\n }\n }\n\n this.updateSelectionIndicator();\n };\n\n private updateSelectionIndicator = async (): Promise<void> => {\n const selectedElement = this.tabs.find((el) => el.selected);\n if (!selectedElement) {\n this.selectionIndicatorStyle = ScaledIndicator.noSelectionStyle;\n return;\n }\n await Promise.all([\n selectedElement.updateComplete,\n document.fonts ? document.fonts.ready : Promise.resolve(),\n ]);\n const { width, height } = selectedElement.getBoundingClientRect();\n\n this.selectionIndicatorStyle =\n this.direction === 'horizontal'\n ? ScaledIndicator.transformX(selectedElement.offsetLeft, width)\n : ScaledIndicator.transformY(selectedElement.offsetTop, height);\n };\n\n public override connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener('resize', this.updateSelectionIndicator);\n if ('fonts' in document) {\n (\n document as unknown as {\n fonts: {\n addEventListener: (\n name: string,\n callback: () => void\n ) => void;\n };\n }\n ).fonts.addEventListener(\n 'loadingdone',\n this.updateSelectionIndicator\n );\n }\n }\n\n public override disconnectedCallback(): void {\n window.removeEventListener('resize', this.updateSelectionIndicator);\n if ('fonts' in document) {\n (\n document as unknown as {\n fonts: {\n removeEventListener: (\n name: string,\n callback: () => void\n ) => void;\n };\n }\n ).fonts.removeEventListener(\n 'loadingdone',\n this.updateSelectionIndicator\n );\n }\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/TabsOverflow.dev.js
CHANGED
|
@@ -6,8 +6,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
6
6
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
7
|
if (decorator = decorators[i])
|
|
8
8
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
-
if (kind && result)
|
|
10
|
-
__defProp(target, key, result);
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
11
10
|
return result;
|
|
12
11
|
};
|
|
13
12
|
import {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TabsOverflow.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\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": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/spectrum-config.js
CHANGED
|
@@ -28,6 +28,65 @@ const config = {
|
|
|
28
28
|
outPackage: 'tabs',
|
|
29
29
|
fileName: 'tabs',
|
|
30
30
|
components: [
|
|
31
|
+
{
|
|
32
|
+
// .spectrum-Tabs--horizontal .spectrum-Tabs-item + :not(.spectrum-Tabs-selectionIndicator)
|
|
33
|
+
find: [
|
|
34
|
+
builder.class('spectrum-Tabs--horizontal'),
|
|
35
|
+
builder.combinator(' '),
|
|
36
|
+
builder.class('spectrum-Tabs-item'),
|
|
37
|
+
builder.combinator('+'),
|
|
38
|
+
{
|
|
39
|
+
type: 'pseudo-class',
|
|
40
|
+
kind: 'not',
|
|
41
|
+
selectors: [
|
|
42
|
+
[
|
|
43
|
+
builder.class(
|
|
44
|
+
'spectrum-Tabs-selectionIndicator'
|
|
45
|
+
),
|
|
46
|
+
],
|
|
47
|
+
],
|
|
48
|
+
},
|
|
49
|
+
],
|
|
50
|
+
replace: [
|
|
51
|
+
//:host([direction^='horizontal']) ::slotted(:not([slot])):not(.spectrum-Tabs-selectionIndicator)
|
|
52
|
+
{
|
|
53
|
+
replace: {
|
|
54
|
+
type: 'pseudo-class',
|
|
55
|
+
kind: 'host',
|
|
56
|
+
selectors: [
|
|
57
|
+
builder.attribute(
|
|
58
|
+
'direction',
|
|
59
|
+
'horizontal',
|
|
60
|
+
'prefix'
|
|
61
|
+
),
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
replace: builder.combinator(' '),
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
replace: {
|
|
70
|
+
type: 'pseudo-element',
|
|
71
|
+
kind: 'slotted',
|
|
72
|
+
selector: [
|
|
73
|
+
{
|
|
74
|
+
type: 'pseudo-class',
|
|
75
|
+
kind: 'not',
|
|
76
|
+
selectors: [
|
|
77
|
+
[
|
|
78
|
+
builder.pseudoClass(
|
|
79
|
+
'first-child'
|
|
80
|
+
),
|
|
81
|
+
],
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
],
|
|
88
|
+
collapseSelector: true,
|
|
89
|
+
},
|
|
31
90
|
{
|
|
32
91
|
exactSelector: true,
|
|
33
92
|
find: [builder.class('spectrum-Tabs--quiet')],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
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-
|
|
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;-webkit-text-decoration: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-size,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));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}
|
|
5
5
|
`;
|
|
6
6
|
export default styles;
|
|
7
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{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-
|
|
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;-webkit-text-decoration: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-size,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));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}\n`;\nexport default styles;"],
|
|
5
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,4 +1,4 @@
|
|
|
1
1
|
"use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
|
|
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-
|
|
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;-webkit-text-decoration: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-size,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));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}
|
|
3
3
|
`;export default o;
|
|
4
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{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-
|
|
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;-webkit-text-decoration: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-size,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));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal])
|
|
4
|
+
#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([direction^=vertical]) #list:dir(rtl),:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([direction^=vertical-right]) #list:dir(rtl),:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) ::slotted(:not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:initial;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}
|
|
5
5
|
`;
|
|
6
6
|
export default styles;
|
|
7
7
|
//# sourceMappingURL=spectrum-tabs.css.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tabs.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 #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal])
|
|
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 #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([direction^=vertical]) #list:dir(rtl),:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([direction^=vertical-right]) #list:dir(rtl),:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) ::slotted(:not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:initial;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/spectrum-tabs.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
|
|
2
|
-
#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal])
|
|
2
|
+
#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([direction^=vertical]) #list:dir(rtl),:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([direction^=vertical-right]) #list:dir(rtl),:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) ::slotted(:not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:initial;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}
|
|
3
3
|
`;export default o;
|
|
4
4
|
//# sourceMappingURL=spectrum-tabs.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tabs.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 #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal])
|
|
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 #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([direction^=vertical]) #list:dir(rtl),:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([direction^=vertical-right]) #list:dir(rtl),:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) ::slotted(:not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:initial;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/tab.css.dev.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
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-
|
|
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;-webkit-text-decoration: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-size,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));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}:host{scroll-margin-inline:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([disabled]){pointer-events:none}#item-label[hidden]{display:none}@media (forced-colors:active){:host:before{background-color:buttonface}:host ::slotted([slot=icon]){z-index:1;color:inherit;position:relative}#item-label{z-index:1;position:relative}:host([selected]),:host([selected]) ::slotted([slot=icon]),:host([selected]) #item-label{color:highlighttext}}:host([vertical]){flex-direction:column;justify-content:center;align-items:center;height:auto;display:flex}:host([dir][vertical]) slot[name=icon]+#item-label{margin-inline-start:0;margin-block:calc(var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text))/2)calc(var(--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text))/2)}:host([vertical]) ::slotted([slot=icon]){margin-block-start:calc(var(--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon))/2)}
|
|
5
5
|
`;
|
|
6
6
|
export default styles;
|
|
7
7
|
//# sourceMappingURL=tab.css.dev.js.map
|
package/src/tab.css.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["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{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-
|
|
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;-webkit-text-decoration: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-size,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));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}:host{scroll-margin-inline:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([disabled]){pointer-events:none}#item-label[hidden]{display:none}@media (forced-colors:active){:host:before{background-color:buttonface}:host ::slotted([slot=icon]){z-index:1;color:inherit;position:relative}#item-label{z-index:1;position:relative}:host([selected]),:host([selected]) ::slotted([slot=icon]),:host([selected]) #item-label{color:highlighttext}}:host([vertical]){flex-direction:column;justify-content:center;align-items:center;height:auto;display:flex}:host([dir][vertical]) slot[name=icon]+#item-label{margin-inline-start:0;margin-block:calc(var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text))/2)calc(var(--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text))/2)}:host([vertical]) ::slotted([slot=icon]){margin-block-start:calc(var(--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon))/2)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/tab.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
|
|
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-
|
|
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;-webkit-text-decoration: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-size,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));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}:host{scroll-margin-inline:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([disabled]){pointer-events:none}#item-label[hidden]{display:none}@media (forced-colors:active){:host:before{background-color:buttonface}:host ::slotted([slot=icon]){z-index:1;color:inherit;position:relative}#item-label{z-index:1;position:relative}:host([selected]),:host([selected]) ::slotted([slot=icon]),:host([selected]) #item-label{color:highlighttext}}:host([vertical]){flex-direction:column;justify-content:center;align-items:center;height:auto;display:flex}:host([dir][vertical]) slot[name=icon]+#item-label{margin-inline-start:0;margin-block:calc(var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text))/2)calc(var(--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text))/2)}:host([vertical]) ::slotted([slot=icon]){margin-block-start:calc(var(--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon))/2)}
|
|
3
3
|
`;export default o;
|
|
4
4
|
//# sourceMappingURL=tab.css.js.map
|
package/src/tab.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["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{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-
|
|
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;-webkit-text-decoration: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-size,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));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}:host{scroll-margin-inline:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([disabled]){pointer-events:none}#item-label[hidden]{display:none}@media (forced-colors:active){:host:before{background-color:buttonface}:host ::slotted([slot=icon]){z-index:1;color:inherit;position:relative}#item-label{z-index:1;position:relative}:host([selected]),:host([selected]) ::slotted([slot=icon]),:host([selected]) #item-label{color:highlighttext}}:host([vertical]){flex-direction:column;justify-content:center;align-items:center;height:auto;display:flex}:host([dir][vertical]) slot[name=icon]+#item-label{margin-inline-start:0;margin-block:calc(var(--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text))/2)calc(var(--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text))/2)}:host([vertical]) ::slotted([slot=icon]){margin-block-start:calc(var(--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon))/2)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/tabs.css.dev.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal])
|
|
4
|
+
#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([direction^=vertical]) #list:dir(rtl),:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([direction^=vertical-right]) #list:dir(rtl),:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) ::slotted(:not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:initial;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{grid-template-columns:100%;display:grid;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}
|
|
5
5
|
`;
|
|
6
6
|
export default styles;
|
|
7
7
|
//# sourceMappingURL=tabs.css.dev.js.map
|
package/src/tabs.css.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tabs.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 #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:content-box;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical][quiet]) #list,:host([direction^=vertical-right][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{grid-template-columns:100%;display:grid;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}\n`;\nexport default styles;"],
|
|
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 #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([direction^=vertical]) #list:dir(rtl),:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([direction^=vertical-right]) #list:dir(rtl),:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) ::slotted(:not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:initial;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{grid-template-columns:100%;display:grid;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/tabs.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
|
|
2
|
-
#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal])
|
|
2
|
+
#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([direction^=vertical]) #list:dir(rtl),:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([direction^=vertical-right]) #list:dir(rtl),:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) ::slotted(:not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:initial;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{grid-template-columns:100%;display:grid;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}
|
|
3
3
|
`;export default o;
|
|
4
4
|
//# sourceMappingURL=tabs.css.js.map
|
package/src/tabs.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tabs.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 #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:content-box;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical][quiet]) #list,:host([direction^=vertical-right][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{grid-template-columns:100%;display:grid;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}\n`;\nexport default styles;"],
|
|
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 #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([direction^=vertical]) #list:dir(rtl),:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([direction^=vertical-right]) #list:dir(rtl),:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) ::slotted(:not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:initial;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{grid-template-columns:100%;display:grid;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { html } from "@open-wc/testing";
|
|
3
|
+
import "@spectrum-web-components/tabs/sp-tabs.js";
|
|
4
|
+
import "@spectrum-web-components/tabs/sp-tab.js";
|
|
5
|
+
import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
|
|
6
|
+
testForMemoryLeaks(html`
|
|
7
|
+
<sp-tabs selected="first">
|
|
8
|
+
<sp-tab label="Tab 1" value="first"></sp-tab>
|
|
9
|
+
<sp-tab label="Tab 2" value="second"></sp-tab>
|
|
10
|
+
<sp-tab label="Tab 3" value="third"></sp-tab>
|
|
11
|
+
</sp-tabs>
|
|
12
|
+
`);
|
|
13
|
+
//# sourceMappingURL=tabs-memory.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["tabs-memory.test.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html } from '@open-wc/testing';\nimport '@spectrum-web-components/tabs/sp-tabs.js';\nimport '@spectrum-web-components/tabs/sp-tab.js';\nimport { testForMemoryLeaks } from '../../../test/testing-helpers.js';\n\ntestForMemoryLeaks(html`\n <sp-tabs selected=\"first\">\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n </sp-tabs>\n`);\n"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,YAAY;AACrB,OAAO;AACP,OAAO;AACP,SAAS,0BAA0B;AAEnC,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAMlB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/test/tabs.test.js
CHANGED
|
@@ -178,10 +178,8 @@ describe("Tabs", () => {
|
|
|
178
178
|
const tabs = await createTabs();
|
|
179
179
|
const tab1 = tabs.querySelector("sp-tab[value=first]");
|
|
180
180
|
const tab2 = tabs.querySelector("sp-tab[value=second]");
|
|
181
|
-
if (!(tab1 instanceof Tab))
|
|
182
|
-
|
|
183
|
-
if (!(tab2 instanceof Tab))
|
|
184
|
-
throw new Error("tab2 not of type Tab");
|
|
181
|
+
if (!(tab1 instanceof Tab)) throw new Error("tab1 not of type Tab");
|
|
182
|
+
if (!(tab2 instanceof Tab)) throw new Error("tab2 not of type Tab");
|
|
185
183
|
expect(tabs.selected).to.equal("first");
|
|
186
184
|
expect(tab1.selected).to.be.true;
|
|
187
185
|
expect(tab2.selected).to.be.false;
|
|
@@ -191,12 +189,9 @@ describe("Tabs", () => {
|
|
|
191
189
|
const tab1 = tabs.querySelector("sp-tab[value=first]");
|
|
192
190
|
const tab2 = tabs.querySelector("sp-tab[value=second]");
|
|
193
191
|
const tab3 = tabs.querySelector("sp-tab[value=third]");
|
|
194
|
-
if (!(tab1 instanceof Tab))
|
|
195
|
-
|
|
196
|
-
if (!(
|
|
197
|
-
throw new Error("tab2 not of type Tab");
|
|
198
|
-
if (!(tab3 instanceof Tab))
|
|
199
|
-
throw new Error("tab3 not of type Tab");
|
|
192
|
+
if (!(tab1 instanceof Tab)) throw new Error("tab1 not of type Tab");
|
|
193
|
+
if (!(tab2 instanceof Tab)) throw new Error("tab2 not of type Tab");
|
|
194
|
+
if (!(tab3 instanceof Tab)) throw new Error("tab3 not of type Tab");
|
|
200
195
|
expect(tabs.selected).to.equal("first");
|
|
201
196
|
expect(tab1.selected, "first: 1, selected").to.be.true;
|
|
202
197
|
expect(tab2.selected, "second: 1, not selected").to.be.false;
|
|
@@ -219,12 +214,9 @@ describe("Tabs", () => {
|
|
|
219
214
|
const tab1 = tabs.querySelector("sp-tab[value=first]");
|
|
220
215
|
const tab2 = tabs.querySelector("sp-tab[value=second]");
|
|
221
216
|
const tab3 = tabs.querySelector("sp-tab[value=third]");
|
|
222
|
-
if (!(tab1 instanceof Tab))
|
|
223
|
-
|
|
224
|
-
if (!(
|
|
225
|
-
throw new Error("tab2 not of type Tab");
|
|
226
|
-
if (!(tab3 instanceof Tab))
|
|
227
|
-
throw new Error("tab3 not of type Tab");
|
|
217
|
+
if (!(tab1 instanceof Tab)) throw new Error("tab1 not of type Tab");
|
|
218
|
+
if (!(tab2 instanceof Tab)) throw new Error("tab2 not of type Tab");
|
|
219
|
+
if (!(tab3 instanceof Tab)) throw new Error("tab3 not of type Tab");
|
|
228
220
|
tab2.click();
|
|
229
221
|
await elementUpdated(tabs);
|
|
230
222
|
expect(tabs.selected).to.equal("second");
|
package/test/tabs.test.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tabs.test.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/tabs/sp-tabs.js';\nimport '@spectrum-web-components/tabs/sp-tab.js';\nimport '@spectrum-web-components/tabs/sp-tab-panel.js';\nimport { Tab, TabPanel, Tabs } from '@spectrum-web-components/tabs';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport {\n elementUpdated,\n expect,\n fixture,\n nextFrame,\n waitUntil,\n} from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\nimport { LitElement, TemplateResult } from '@spectrum-web-components/base';\nimport {\n arrowDownEvent,\n arrowLeftEvent,\n arrowRightEvent,\n arrowUpEvent,\n enterEvent,\n spaceEvent,\n} from '../../../test/testing-helpers.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nconst createTabs = async (): Promise<Tabs> => {\n const tabs = await fixture<Tabs>(\n html`\n <sp-tabs selected=\"first\">\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n <sp-tab-panel value=\"first\">First tab content</sp-tab-panel>\n <sp-tab-panel value=\"second\">Second tab content</sp-tab-panel>\n <sp-tab-panel value=\"third\">Third tab content</sp-tab-panel>\n </sp-tabs>\n `\n );\n await elementUpdated(tabs);\n return tabs;\n};\n\ndescribe('Tabs', () => {\n it('loads accessibly', async () => {\n const tabs = await createTabs();\n\n const tabList = tabs.querySelectorAll('sp-tab');\n\n expect(tabList).to.exist;\n expect(tabList.length).to.equal(3);\n\n await expect(tabs).to.be.accessible();\n });\n\n it('loads accessibly w/o panels', async () => {\n const tabs = await fixture<Tabs>(\n html`\n <sp-tabs selected=\"first\">\n <sp-tab value=\"first\">Tab 1</sp-tab>\n <sp-tab value=\"second\">Tab 2</sp-tab>\n <sp-tab value=\"third\">Tab 3</sp-tab>\n </sp-tabs>\n `\n );\n\n const tabList = tabs.querySelectorAll('sp-tab');\n\n expect(tabList).to.exist;\n expect(tabList.length).to.equal(3);\n\n await expect(tabs).to.be.accessible();\n });\n\n it('can be disabled', async () => {\n const tabs = await createTabs();\n const tab = tabs.querySelector('[label=\"Tab 3\"]') as Tab;\n tabs.disabled = true;\n await elementUpdated(tabs);\n expect(tabs.selected).to.equal('first');\n tab.click();\n await elementUpdated(tabs);\n expect(tabs.selected).to.equal('first');\n });\n\n it('can have disabled sp-tab children', async () => {\n const tabs = await createTabs();\n const tab2 = tabs.querySelector('[label=\"Tab 2\"]') as Tab;\n const tab3 = tabs.querySelector('[label=\"Tab 3\"]') as Tab;\n tab3.disabled = true;\n await elementUpdated(tab3);\n expect(tabs.selected).to.equal('first');\n tab3.click();\n await elementUpdated(tabs);\n expect(tabs.selected).to.equal('first');\n tab2.click();\n await elementUpdated(tabs);\n expect(tabs.selected).to.equal('second');\n });\n\n it('reflects selected tab with selected property', async () => {\n const tabs = await createTabs();\n\n const firstTab = tabs.querySelector('sp-tab[value=first]') as Tab;\n const secondTab = tabs.querySelector('sp-tab[value=second]') as Tab;\n const thirdTab = tabs.querySelector('sp-tab[value=third]') as Tab;\n const firstPanel = tabs.querySelector(\n 'sp-tab-panel[value=first]'\n ) as TabPanel;\n const secondPanel = tabs.querySelector(\n 'sp-tab-panel[value=second]'\n ) as TabPanel;\n const thirdPanel = tabs.querySelector(\n 'sp-tab-panel[value=third]'\n ) as TabPanel;\n\n expect(firstTab.selected, 'first: 1, selected').to.be.true;\n expect(firstPanel.selected, 'first panel: 1, selected').to.be.true;\n expect(secondTab.selected, 'second: 1, not selected').to.be.false;\n expect(secondPanel.selected, 'second panel: 1, not selected').to.be\n .false;\n expect(thirdTab.selected, 'third: 1, not selected').to.be.false;\n expect(thirdPanel.selected, 'third panel: 1, not selected').to.be.false;\n expect(tabs.selected).to.equal(firstTab.value);\n\n secondTab.click();\n await elementUpdated(tabs);\n\n expect(firstTab.selected, 'first: 2, not selected').to.be.false;\n expect(firstPanel.selected, 'first panel: 2, not selected').to.be.false;\n expect(secondTab.selected, 'second: 2, selected').to.be.true;\n expect(secondTab.selected, 'first panel: 2, selected').to.be.true;\n expect(thirdTab.selected, 'third: 2, not selected').to.be.false;\n expect(thirdTab.selected, 'first panel: 2, not selected').to.be.false;\n expect(tabs.selected).to.equal(secondTab.value);\n\n thirdTab.click();\n await elementUpdated(tabs);\n\n expect(firstTab.selected, 'first: 3, not selected').to.be.false;\n expect(firstPanel.selected, 'first panel: 3, not selected').to.be.false;\n expect(secondTab.selected, 'second: 3, not selected').to.be.false;\n expect(secondPanel.selected, 'second panel: 3, not selected').to.be\n .false;\n expect(thirdTab.selected, 'third: 3, selected').to.be.true;\n expect(thirdTab.selected, 'first panel: 3, selected').to.be.true;\n expect(tabs.selected).to.equal(thirdTab.value);\n });\n\n it('autofocuses', async () => {\n const tabs = await fixture<Tabs>(\n html`\n <sp-tabs selected=\"second\" autofocus>\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n </sp-tabs>\n `\n );\n\n await elementUpdated(tabs);\n\n const autoElement = tabs.querySelector('[label=\"Tab 2\"]') as Tab;\n\n await waitUntil(\n () => document.activeElement === autoElement,\n 'Autofocused'\n );\n });\n\n it('auto', async () => {\n const el = await fixture<Tabs>(\n html`\n <sp-tabs selected=\"second\" auto>\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n </sp-tabs>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.selected).to.equal('second');\n el.focus();\n await sendKeys({\n press: 'ArrowLeft',\n });\n expect(el.selected).to.equal('first');\n await sendKeys({\n press: 'ArrowLeft',\n });\n expect(el.selected).to.equal('third');\n await sendKeys({\n press: 'ArrowRight',\n });\n expect(el.selected).to.equal('first');\n });\n\n it('forces only one tab to be selected', async () => {\n const tabs = await createTabs();\n\n const selectedTabs = tabs.querySelectorAll('sp-tab[selected]');\n\n expect(tabs.selected).to.equal('first');\n expect(selectedTabs.length).to.equal(1);\n });\n\n it('de-selects all but first selected tab if multiple selected', async () => {\n const tabs = await createTabs();\n\n const tab1 = tabs.querySelector('sp-tab[value=first]') as Tab;\n const tab2 = tabs.querySelector('sp-tab[value=second]') as Tab;\n if (!(tab1 instanceof Tab)) throw new Error('tab1 not of type Tab');\n if (!(tab2 instanceof Tab)) throw new Error('tab2 not of type Tab');\n\n expect(tabs.selected).to.equal('first');\n expect(tab1.selected).to.be.true;\n expect(tab2.selected).to.be.false;\n });\n\n it('ensures setting selection updates selected tab', async () => {\n const tabs = await createTabs();\n\n const tab1 = tabs.querySelector('sp-tab[value=first]') as Tab;\n const tab2 = tabs.querySelector('sp-tab[value=second]') as Tab;\n const tab3 = tabs.querySelector('sp-tab[value=third]') as Tab;\n\n if (!(tab1 instanceof Tab)) throw new Error('tab1 not of type Tab');\n if (!(tab2 instanceof Tab)) throw new Error('tab2 not of type Tab');\n if (!(tab3 instanceof Tab)) throw new Error('tab3 not of type Tab');\n\n expect(tabs.selected).to.equal('first');\n expect(tab1.selected, 'first: 1, selected').to.be.true;\n expect(tab2.selected, 'second: 1, not selected').to.be.false;\n expect(tab3.selected, 'thurd: 1, not selected').to.be.false;\n\n tabs.selected = 'second';\n await elementUpdated(tabs);\n\n expect(tabs.selected).to.equal('second');\n expect(tab1.selected, 'first: 2, not selected').to.be.false;\n expect(tab2.selected, 'second: 2, selected').to.be.true;\n expect(tab3.selected, 'third: 2, not selected').to.be.false;\n\n tabs.selected = 'third';\n await elementUpdated(tabs);\n\n expect(tabs.selected).to.equal('third');\n expect(tab1.selected, 'first: 3, not selected').to.be.false;\n expect(tab2.selected, 'second: 3, not selected').to.be.false;\n expect(tab3.selected, 'third: 3, selected').to.be.true;\n });\n\n it('ensures setting selected and clicking on tab both work together', async () => {\n const tabs = await createTabs();\n\n const tab1 = tabs.querySelector('sp-tab[value=first]') as Tab;\n const tab2 = tabs.querySelector('sp-tab[value=second]') as Tab;\n const tab3 = tabs.querySelector('sp-tab[value=third]') as Tab;\n\n if (!(tab1 instanceof Tab)) throw new Error('tab1 not of type Tab');\n if (!(tab2 instanceof Tab)) throw new Error('tab2 not of type Tab');\n if (!(tab3 instanceof Tab)) throw new Error('tab3 not of type Tab');\n\n tab2.click();\n await elementUpdated(tabs);\n\n expect(tabs.selected).to.equal('second');\n expect(tab1.selected).to.be.false;\n expect(tab2.selected).to.be.true;\n expect(tab3.selected).to.be.false;\n\n tabs.selected = 'first';\n await elementUpdated(tabs);\n\n expect(tabs.selected).to.equal('first');\n expect(tab1.selected).to.be.true;\n expect(tab2.selected).to.be.false;\n expect(tab3.selected).to.be.false;\n });\n it('displays `vertical`', async () => {\n const el = await fixture<Tabs>(html`\n <sp-tabs selected=\"first\" direction=\"vertical\">\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n </sp-tabs>\n `);\n\n await elementUpdated(el);\n expect(el.selected).to.be.equal('first');\n\n el.selected = 'first';\n await elementUpdated(el);\n expect(el.selected).to.be.equal('first');\n });\n it('displays with nothing `selected`', async () => {\n const el = await fixture<Tabs>(html`\n <sp-tabs>\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n </sp-tabs>\n `);\n\n await elementUpdated(el);\n expect(el.selected).to.be.equal('');\n\n el.selected = 'first';\n await elementUpdated(el);\n expect(el.selected).to.be.equal('first');\n });\n it('ignores children with no `value`', async () => {\n const el = await fixture<Tabs>(html`\n <sp-tabs selected=\"first\">\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n <div id=\"other\">Other thing</div>\n </sp-tabs>\n `);\n\n await elementUpdated(el);\n expect(el.selected).to.be.equal('first');\n\n const otherThing = el.querySelector('#other') as HTMLDivElement;\n otherThing.click();\n await elementUpdated(el);\n expect(el.selected).to.be.equal('first');\n });\n it('allows selection to be cancellable', async () => {\n const cancelSelection = (event: Event): void => event.preventDefault();\n const el = await fixture<Tabs>(html`\n <sp-tabs selected=\"first\" @change=${cancelSelection}>\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n </sp-tabs>\n `);\n\n await elementUpdated(el);\n expect(el.selected).to.be.equal('first');\n\n const secondTab = el.querySelector('[value=\"second\"]') as Tab;\n secondTab.click();\n await elementUpdated(el);\n expect(el.selected).to.be.equal('first');\n });\n it('prevents [tabindex=0] while `focusin`', async () => {\n const el = await fixture<Tabs>(html`\n <sp-tabs>\n <sp-tab label=\"Tab 1\" value=\"first\" selected>\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\">\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n </sp-tabs>\n `);\n\n const selected = el.querySelector('[value=\"first\"]') as Tab;\n const toBeSelected = el.querySelector('[value=\"second\"]') as Tab;\n\n await elementUpdated(el);\n await waitUntil(() => el.selected === 'first', 'wait for selection');\n\n expect(el.selected).to.equal('first');\n expect(selected.tabIndex).to.equal(0);\n\n toBeSelected.dispatchEvent(new Event('focusin', { bubbles: true }));\n\n await elementUpdated(el);\n\n expect(el.selected).to.equal('first');\n expect(selected.tabIndex).to.equal(-1);\n\n toBeSelected.dispatchEvent(new Event('focusout', { bubbles: true }));\n\n await elementUpdated(el);\n\n expect(el.selected).to.equal('first');\n expect(selected.tabIndex).to.equal(0);\n\n toBeSelected.click();\n\n await elementUpdated(el);\n\n expect(el.selected).to.equal('second');\n expect(toBeSelected.tabIndex).to.equal(0);\n });\n it('accepts keyboard based selection', async () => {\n const el = await fixture<Tabs>(html`\n <sp-tabs selected=\"Unknown\">\n <sp-tab label=\"Tab 1\" value=\"first\">\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\">\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n </sp-tabs>\n `);\n await elementUpdated(el);\n expect(el.selected).to.be.equal('');\n\n const firstTab = el.querySelector('[value=\"first\"]') as Tab;\n const secondTab = el.querySelector('[value=\"second\"]') as Tab;\n firstTab.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));\n firstTab.focus();\n\n await elementUpdated(el);\n expect(document.activeElement === firstTab, 'Focus first tab').to.be\n .true;\n\n firstTab.dispatchEvent(arrowLeftEvent());\n\n await elementUpdated(el);\n expect(document.activeElement === secondTab, 'Focus second tab').to.be\n .true;\n\n secondTab.dispatchEvent(enterEvent());\n\n await elementUpdated(el);\n expect(el.selected).to.be.equal('second');\n\n secondTab.dispatchEvent(arrowRightEvent());\n\n await elementUpdated(el);\n expect(document.activeElement === firstTab, 'Focus first tab').to.be\n .true;\n\n firstTab.dispatchEvent(spaceEvent());\n\n await elementUpdated(el);\n expect(el.selected).to.be.equal('first');\n\n firstTab.dispatchEvent(arrowUpEvent());\n\n await elementUpdated(el);\n expect(document.activeElement === secondTab, 'Focus second tab').to.be\n .true;\n\n secondTab.dispatchEvent(arrowDownEvent());\n\n await elementUpdated(el);\n expect(document.activeElement === firstTab, 'Focus first tab').to.be\n .true;\n });\n\n it('accepts keyboard based selection through shadow DOM', async () => {\n class TabTestEl extends LitElement {\n protected override render(): TemplateResult {\n return html`\n <sp-tabs selected=\"Unknown\">\n <sp-tab label=\"Tab 1\" value=\"first\">\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\">\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n </sp-tabs>\n `;\n }\n }\n customElements.define('tab-test-el', TabTestEl);\n const el = await fixture<TabTestEl>(\n html`\n <tab-test-el></tab-test-el>\n `\n );\n\n await elementUpdated(el);\n const rootNode = el.shadowRoot as ShadowRoot;\n const tabsEl = rootNode.querySelector('sp-tabs') as Tabs;\n\n await elementUpdated(tabsEl);\n expect(tabsEl.selected).to.be.equal('');\n\n const firstTab = tabsEl.querySelector('[value=\"first\"]') as Tab;\n const secondTab = tabsEl.querySelector('[value=\"second\"]') as Tab;\n firstTab.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));\n firstTab.focus();\n\n await elementUpdated(el);\n let activeElement = rootNode.activeElement as Tab;\n expect(activeElement === firstTab, 'Focus first tab').to.be.true;\n\n firstTab.dispatchEvent(arrowLeftEvent());\n\n await elementUpdated(el);\n activeElement = rootNode.activeElement as Tab;\n expect(activeElement === secondTab, 'Focus second tab').to.be.true;\n\n secondTab.dispatchEvent(enterEvent());\n\n await elementUpdated(el);\n expect(tabsEl.selected).to.be.equal('second');\n\n secondTab.dispatchEvent(arrowRightEvent());\n\n await elementUpdated(el);\n activeElement = rootNode.activeElement as Tab;\n expect(activeElement === firstTab, 'Focus first tab').to.be.true;\n\n firstTab.dispatchEvent(spaceEvent());\n\n await elementUpdated(el);\n expect(tabsEl.selected).to.be.equal('first');\n });\n it('accepts keyboard based selection - [direction=\"vertical\"]', async () => {\n const el = await fixture<Tabs>(html`\n <sp-tabs selected=\"Unknown\" direction=\"vertical\">\n <sp-tab label=\"Tab 1\" value=\"first\">\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\">\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n </sp-tab>\n </sp-tabs>\n `);\n\n await elementUpdated(el);\n expect(el.selected).to.be.equal('');\n\n const firstTab = el.querySelector('[value=\"first\"]') as Tab;\n const secondTab = el.querySelector('[value=\"second\"]') as Tab;\n firstTab.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));\n firstTab.focus();\n\n await elementUpdated(el);\n expect(document.activeElement === firstTab, 'Focus first tab').to.be\n .true;\n\n firstTab.dispatchEvent(arrowLeftEvent());\n\n await elementUpdated(el);\n expect(document.activeElement === secondTab, 'Focus second tab').to.be\n .true;\n\n secondTab.dispatchEvent(enterEvent());\n\n await elementUpdated(el);\n expect(el.selected).to.be.equal('second');\n\n secondTab.dispatchEvent(arrowDownEvent());\n\n await elementUpdated(el);\n expect(document.activeElement === firstTab, 'Focus first tab').to.be\n .true;\n\n firstTab.dispatchEvent(spaceEvent());\n\n await elementUpdated(el);\n expect(el.selected).to.be.equal('first');\n\n firstTab.dispatchEvent(arrowRightEvent());\n\n await elementUpdated(el);\n expect(document.activeElement === secondTab, 'Focus second tab').to.be\n .true;\n\n secondTab.dispatchEvent(arrowLeftEvent());\n expect(document.activeElement === firstTab, 'Focus first tab').to.be\n .true;\n });\n it('selects through slotted DOM', async () => {\n const el = await fixture<Tabs>(\n html`\n <sp-tabs selected=\"first\">\n <sp-tab value=\"first\">Tab 1</sp-tab>\n <sp-tab value=\"second\"><span>Tab 2</span></sp-tab>\n </sp-tabs>\n `\n );\n const span = el.querySelector('span') as HTMLSpanElement;\n await elementUpdated(el);\n\n expect(el.selected).to.equal('first');\n\n span.click();\n await elementUpdated(el);\n\n expect(el.selected).to.equal('second');\n });\n it('updates selection indicator in response to tab updates', async () => {\n const el = await fixture<Tabs>(\n html`\n <sp-tabs selected=\"first\">\n <sp-tab value=\"first\">Tab 1</sp-tab>\n <sp-tab value=\"second\">Tab 2</sp-tab>\n </sp-tabs>\n `\n );\n const selected = el.querySelector('[value=\"first\"]') as Tab;\n await elementUpdated(el);\n\n const extractScaleX = /scaleX\\((.+)\\)/;\n const initialExec = extractScaleX.exec(\n el.selectionIndicatorStyle\n ) as unknown as [string, string];\n const initialWidth = parseFloat(initialExec[1]);\n selected.textContent = 'WWWWWWWWWWWWWWWWWWWWWWWWW';\n await nextFrame();\n await nextFrame();\n\n const longerExec = extractScaleX.exec(\n el.selectionIndicatorStyle\n ) as unknown as [string, string];\n const longerWidth = parseFloat(longerExec[1]);\n expect(initialWidth).to.be.lessThan(longerWidth);\n selected.textContent = 'W';\n await nextFrame();\n\n const shorterExec = extractScaleX.exec(\n el.selectionIndicatorStyle\n ) as unknown as [string, string];\n const shorterWidth = parseFloat(shorterExec[1]);\n expect(initialWidth).to.be.greaterThan(shorterWidth);\n expect(longerWidth).to.be.greaterThan(shorterWidth);\n });\n it('clicks on #list do not throw', async () => {\n const tabs = await createTabs();\n const tabList = (tabs.shadowRoot as ShadowRoot).querySelector(\n '#list'\n ) as HTMLDivElement;\n // exceptions thrown in event listeners do not propagate to caller\n // we must catch them with window.onerror\n let hasError = false;\n const oldOnerror = window.onerror;\n window.onerror = () => {\n hasError = true;\n };\n tabList.dispatchEvent(new MouseEvent('click'));\n expect(hasError, 'it should not error').to.be.false;\n window.onerror = oldOnerror;\n });\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|