@spectrum-web-components/tabs 1.8.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +5 -5
- package/package.json +8 -8
- 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-overflow.css.dev.js +1 -1
- package/src/tabs-overflow.css.dev.js.map +1 -1
- package/src/tabs-overflow.css.js +1 -1
- package/src/tabs-overflow.css.js.map +1 -1
package/custom-elements.json
CHANGED
|
@@ -335,7 +335,7 @@
|
|
|
335
335
|
"type": {
|
|
336
336
|
"text": "object"
|
|
337
337
|
},
|
|
338
|
-
"default": "{
|
|
338
|
+
"default": "{ baseSize: 100 as const, noSelectionStyle: 'transform: translateX(0px) scaleX(0) scaleY(0)', transformX(left: number, width: number): string { const scale = width / this.baseSize; return `transform: translateX(${left}px) scaleX(${scale});`; }, transformY(top: number, height: number): string { const scale = height / this.baseSize; return `transform: translateY(${top}px) scaleY(${scale});`; }, baseStyles(): CSSResult { return css` :host([direction='vertical-right']) #selection-indicator, :host([direction='vertical']) #selection-indicator { height: ${this.baseSize}px; } :host([dir][direction='horizontal']) #selection-indicator { width: ${this.baseSize}px; } `; }, }"
|
|
339
339
|
},
|
|
340
340
|
{
|
|
341
341
|
"kind": "function",
|
|
@@ -578,12 +578,12 @@
|
|
|
578
578
|
"kind": "field",
|
|
579
579
|
"name": "resizeController",
|
|
580
580
|
"privacy": "protected",
|
|
581
|
-
"default": "new ResizeController(this, {
|
|
581
|
+
"default": "new ResizeController(this, { callback: () => { this.updateSelectionIndicator(); }, })"
|
|
582
582
|
},
|
|
583
583
|
{
|
|
584
584
|
"kind": "field",
|
|
585
585
|
"name": "rovingTabindexController",
|
|
586
|
-
"default": "new RovingTabindexController<Tab>(this, {
|
|
586
|
+
"default": "new RovingTabindexController<Tab>(this, { focusInIndex: (elements) => { let focusInIndex = 0; const firstFocusableElement = elements.find((el, index) => { const focusInElement = this.selected ? el.value === this.selected : !el.disabled; focusInIndex = index; return focusInElement; }); return firstFocusableElement ? focusInIndex : -1; }, direction: () => 'both', elementEnterAction: (el) => { if (!this.auto) return; this.shouldAnimate = true; this.selectTarget(el); }, elements: () => this.tabs, isFocusableElement: (el) => !this.disabled && !el.disabled, listenerScope: () => this.tabList, })"
|
|
587
587
|
},
|
|
588
588
|
{
|
|
589
589
|
"kind": "field",
|
|
@@ -950,7 +950,7 @@
|
|
|
950
950
|
"text": "TabsOverflowState"
|
|
951
951
|
},
|
|
952
952
|
"privacy": "private",
|
|
953
|
-
"default": "{
|
|
953
|
+
"default": "{ canScrollLeft: false, canScrollRight: false, }"
|
|
954
954
|
},
|
|
955
955
|
{
|
|
956
956
|
"kind": "field",
|
|
@@ -974,7 +974,7 @@
|
|
|
974
974
|
"type": {
|
|
975
975
|
"text": "ResizeController"
|
|
976
976
|
},
|
|
977
|
-
"default": "new ResizeController(this, {
|
|
977
|
+
"default": "new ResizeController(this, { target: this, callback: (): void => { this._updateScrollState(); }, })"
|
|
978
978
|
},
|
|
979
979
|
{
|
|
980
980
|
"kind": "field",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tabs",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.9.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -93,13 +93,13 @@
|
|
|
93
93
|
"css"
|
|
94
94
|
],
|
|
95
95
|
"dependencies": {
|
|
96
|
-
"@lit-labs/observers": "
|
|
97
|
-
"@spectrum-web-components/action-button": "1.
|
|
98
|
-
"@spectrum-web-components/base": "1.
|
|
99
|
-
"@spectrum-web-components/icon": "1.
|
|
100
|
-
"@spectrum-web-components/icons-ui": "1.
|
|
101
|
-
"@spectrum-web-components/reactive-controllers": "1.
|
|
102
|
-
"@spectrum-web-components/shared": "1.
|
|
96
|
+
"@lit-labs/observers": "2.0.2",
|
|
97
|
+
"@spectrum-web-components/action-button": "1.9.0",
|
|
98
|
+
"@spectrum-web-components/base": "1.9.0",
|
|
99
|
+
"@spectrum-web-components/icon": "1.9.0",
|
|
100
|
+
"@spectrum-web-components/icons-ui": "1.9.0",
|
|
101
|
+
"@spectrum-web-components/reactive-controllers": "1.9.0",
|
|
102
|
+
"@spectrum-web-components/shared": "1.9.0"
|
|
103
103
|
},
|
|
104
104
|
"types": "./src/index.d.ts",
|
|
105
105
|
"customElements": "custom-elements.json",
|
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;-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:
|
|
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": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing 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:
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing 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;-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:
|
|
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": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing 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:
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing 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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
:host{
|
|
4
|
+
:host{--sp-tabs-overflow-next-button-right:calc(-1*var(--spectrum-component-edge-to-text-100));--sp-tabs-overflow-previous-button-left:calc(-1*var(--spectrum-component-edge-to-text-100));--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-medium) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-medium);--sp-tabs-overflow-icon-color:var(--spectrum-gray-800);--sp-tabs-overflow-shadow-color:var(--spectrum-gray-100);--sp-tabs-overflow-shadow-width:50px;--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-100);width:100%;inset:0}:host([size=s]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-small) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-small);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=l]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-large) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-large);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-extra-large) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-extra-large);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-300)}:host([compact]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-compact-height-medium) - var(--spectrum-border-width-200));--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50)}sp-action-button{width:var(--sp-tabs-overflow-button-size);height:var(--sp-tabs-overflow-button-height);z-index:2;text-align:center;box-shadow:none;color:var(--sp-tabs-overflow-icon-color);background:0 0;border:none;position:absolute}sp-action-button.left-scroll{visibility:hidden;left:var(--sp-tabs-overflow-previous-button-left)}sp-action-button.right-scroll{visibility:hidden;right:var(--sp-tabs-overflow-next-button-right)}sp-action-button.left-scroll.show,sp-action-button.right-scroll.show{visibility:visible}.tabs-overflow-container{position:relative}.tabs-overflow-container:before,.tabs-overflow-container:after{content:"";visibility:hidden;z-index:1;height:var(--sp-tabs-overflow-button-height);width:var(--sp-tabs-overflow-shadow-width);pointer-events:none;position:absolute;inset-block-start:0}.tabs-overflow-container:before{background:transparent linear-gradient(270deg,transparent,var(--sp-tabs-overflow-shadow-color))0 0 no-repeat padding-box;left:0}.tabs-overflow-container:after{background:transparent linear-gradient(90deg,transparent,var(--sp-tabs-overflow-shadow-color))0 0 no-repeat padding-box;right:0}.tabs-overflow-container.left-shadow:before,.tabs-overflow-container.right-shadow:after{visibility:visible}
|
|
5
5
|
`;
|
|
6
6
|
export default styles;
|
|
7
7
|
//# sourceMappingURL=tabs-overflow.css.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tabs-overflow.css.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--sp-tabs-overflow-next-button-right:calc(-1*var(--spectrum-component-edge-to-text-100));--sp-tabs-overflow-previous-button-left:calc(-1*var(--spectrum-component-edge-to-text-100));--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-medium) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-medium);--sp-tabs-overflow-icon-color:var(--spectrum-gray-800);--sp-tabs-overflow-shadow-color:var(--spectrum-gray-100);--sp-tabs-overflow-shadow-width:50px;--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-100);width:100%;inset:0}:host([size=s]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-small) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-small);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=l]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-large) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-large);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-extra-large) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-extra-large);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-300)}:host([compact]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-compact-height-medium) - var(--spectrum-border-width-200));--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50)}sp-action-button{width:var(--sp-tabs-overflow-button-size);height:var(--sp-tabs-overflow-button-height);z-index:2;text-align:center;box-shadow:none;color:var(--sp-tabs-overflow-icon-color);background:0 0;border:none;position:absolute}sp-action-button.left-scroll{visibility:hidden;left:var(--sp-tabs-overflow-previous-button-left)}sp-action-button.right-scroll{visibility:hidden;right:var(--sp-tabs-overflow-next-button-right)}sp-action-button.left-scroll.show,sp-action-button.right-scroll.show{visibility:visible}.tabs-overflow-container{position:relative}.tabs-overflow-container:before,.tabs-overflow-container:after{content:\"\";visibility:hidden;z-index:1;height:var(--sp-tabs-overflow-button-height);width:var(--sp-tabs-overflow-shadow-width);pointer-events:none;position:absolute;inset-block-start:0}.tabs-overflow-container:before{background:transparent linear-gradient(270deg,transparent,var(--sp-tabs-overflow-shadow-color))0 0 no-repeat padding-box;left:0}.tabs-overflow-container:after{background:transparent linear-gradient(90deg,transparent,var(--sp-tabs-overflow-shadow-color))0 0 no-repeat padding-box;right:0}.tabs-overflow-container.left-shadow:before,.tabs-overflow-container.right-shadow:after{visibility:visible}\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-overflow.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{
|
|
2
|
+
:host{--sp-tabs-overflow-next-button-right:calc(-1*var(--spectrum-component-edge-to-text-100));--sp-tabs-overflow-previous-button-left:calc(-1*var(--spectrum-component-edge-to-text-100));--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-medium) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-medium);--sp-tabs-overflow-icon-color:var(--spectrum-gray-800);--sp-tabs-overflow-shadow-color:var(--spectrum-gray-100);--sp-tabs-overflow-shadow-width:50px;--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-100);width:100%;inset:0}:host([size=s]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-small) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-small);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=l]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-large) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-large);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-extra-large) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-extra-large);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-300)}:host([compact]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-compact-height-medium) - var(--spectrum-border-width-200));--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50)}sp-action-button{width:var(--sp-tabs-overflow-button-size);height:var(--sp-tabs-overflow-button-height);z-index:2;text-align:center;box-shadow:none;color:var(--sp-tabs-overflow-icon-color);background:0 0;border:none;position:absolute}sp-action-button.left-scroll{visibility:hidden;left:var(--sp-tabs-overflow-previous-button-left)}sp-action-button.right-scroll{visibility:hidden;right:var(--sp-tabs-overflow-next-button-right)}sp-action-button.left-scroll.show,sp-action-button.right-scroll.show{visibility:visible}.tabs-overflow-container{position:relative}.tabs-overflow-container:before,.tabs-overflow-container:after{content:"";visibility:hidden;z-index:1;height:var(--sp-tabs-overflow-button-height);width:var(--sp-tabs-overflow-shadow-width);pointer-events:none;position:absolute;inset-block-start:0}.tabs-overflow-container:before{background:transparent linear-gradient(270deg,transparent,var(--sp-tabs-overflow-shadow-color))0 0 no-repeat padding-box;left:0}.tabs-overflow-container:after{background:transparent linear-gradient(90deg,transparent,var(--sp-tabs-overflow-shadow-color))0 0 no-repeat padding-box;right:0}.tabs-overflow-container.left-shadow:before,.tabs-overflow-container.right-shadow:after{visibility:visible}
|
|
3
3
|
`;export default o;
|
|
4
4
|
//# sourceMappingURL=tabs-overflow.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tabs-overflow.css.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--sp-tabs-overflow-next-button-right:calc(-1*var(--spectrum-component-edge-to-text-100));--sp-tabs-overflow-previous-button-left:calc(-1*var(--spectrum-component-edge-to-text-100));--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-medium) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-medium);--sp-tabs-overflow-icon-color:var(--spectrum-gray-800);--sp-tabs-overflow-shadow-color:var(--spectrum-gray-100);--sp-tabs-overflow-shadow-width:50px;--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-100);width:100%;inset:0}:host([size=s]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-small) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-small);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=l]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-large) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-large);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-height-extra-large) - var(--spectrum-border-width-200));--sp-tabs-overflow-button-size:var(--spectrum-tab-item-height-extra-large);--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-300)}:host([compact]){--sp-tabs-overflow-button-height:calc(var(--spectrum-tab-item-compact-height-medium) - var(--spectrum-border-width-200));--mod-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50)}sp-action-button{width:var(--sp-tabs-overflow-button-size);height:var(--sp-tabs-overflow-button-height);z-index:2;text-align:center;box-shadow:none;color:var(--sp-tabs-overflow-icon-color);background:0 0;border:none;position:absolute}sp-action-button.left-scroll{visibility:hidden;left:var(--sp-tabs-overflow-previous-button-left)}sp-action-button.right-scroll{visibility:hidden;right:var(--sp-tabs-overflow-next-button-right)}sp-action-button.left-scroll.show,sp-action-button.right-scroll.show{visibility:visible}.tabs-overflow-container{position:relative}.tabs-overflow-container:before,.tabs-overflow-container:after{content:\"\";visibility:hidden;z-index:1;height:var(--sp-tabs-overflow-button-height);width:var(--sp-tabs-overflow-shadow-width);pointer-events:none;position:absolute;inset-block-start:0}.tabs-overflow-container:before{background:transparent linear-gradient(270deg,transparent,var(--sp-tabs-overflow-shadow-color))0 0 no-repeat padding-box;left:0}.tabs-overflow-container:after{background:transparent linear-gradient(90deg,transparent,var(--sp-tabs-overflow-shadow-color))0 0 no-repeat padding-box;right:0}.tabs-overflow-container.left-shadow:before,.tabs-overflow-container.right-shadow:after{visibility:visible}\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
|
}
|