@spectrum-web-components/tabs 0.33.3-overlay.66 → 0.34.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 +13 -13
- package/package.json +8 -8
- package/src/spectrum-config.js +24 -0
- package/src/spectrum-tab.css.dev.js +44 -11
- package/src/spectrum-tab.css.dev.js.map +2 -2
- package/src/spectrum-tab.css.js +46 -13
- package/src/spectrum-tab.css.js.map +2 -2
- package/src/spectrum-tabs-sizes.css.dev.js +58 -320
- package/src/spectrum-tabs-sizes.css.dev.js.map +2 -2
- package/src/spectrum-tabs-sizes.css.js +60 -322
- package/src/spectrum-tabs-sizes.css.js.map +2 -2
- package/src/spectrum-tabs.css.dev.js +109 -24
- package/src/spectrum-tabs.css.dev.js.map +2 -2
- package/src/spectrum-tabs.css.js +111 -26
- package/src/spectrum-tabs.css.js.map +2 -2
- package/src/tab.css.dev.js +43 -24
- package/src/tab.css.dev.js.map +2 -2
- package/src/tab.css.js +45 -26
- package/src/tab.css.js.map +2 -2
- package/src/tabs-overflow.css.dev.js +5 -5
- package/src/tabs-overflow.css.dev.js.map +1 -1
- package/src/tabs-overflow.css.js +7 -7
- package/src/tabs-overflow.css.js.map +1 -1
- package/src/tabs-sizes.css.dev.js +58 -320
- package/src/tabs-sizes.css.dev.js.map +2 -2
- package/src/tabs-sizes.css.js +60 -322
- package/src/tabs-sizes.css.js.map +2 -2
- package/src/tabs.css.dev.js +111 -32
- package/src/tabs.css.dev.js.map +2 -2
- package/src/tabs.css.js +113 -34
- package/src/tabs.css.js.map +2 -2
- package/stories/tabs.stories.js +19 -0
- package/stories/tabs.stories.js.map +2 -2
package/src/tabs.css.dev.js
CHANGED
|
@@ -1,39 +1,118 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
#list{--spectrum-tabs-
|
|
5
|
-
--spectrum-
|
|
6
|
-
)
|
|
7
|
-
--spectrum-
|
|
8
|
-
)
|
|
9
|
-
--spectrum-
|
|
10
|
-
)
|
|
11
|
-
--spectrum-
|
|
12
|
-
)
|
|
13
|
-
--spectrum-
|
|
4
|
+
#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(
|
|
5
|
+
--spectrum-tab-item-to-tab-item-horizontal-medium
|
|
6
|
+
);--spectrum-tabs-item-vertical-spacing:var(
|
|
7
|
+
--spectrum-tab-item-to-tab-item-vertical-medium
|
|
8
|
+
);--spectrum-tabs-start-to-edge:var(
|
|
9
|
+
--spectrum-tab-item-start-to-edge-medium
|
|
10
|
+
);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(
|
|
11
|
+
--spectrum-tab-item-bottom-to-text-medium
|
|
12
|
+
);--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(
|
|
13
|
+
--spectrum-tab-item-top-to-workflow-icon-medium
|
|
14
|
+
);--spectrum-tabs-color:var(
|
|
15
|
+
--spectrum-neutral-subdued-content-color-default
|
|
16
|
+
);--spectrum-tabs-color-selected:var(
|
|
17
|
+
--spectrum-neutral-subdued-content-color-down
|
|
18
|
+
);--spectrum-tabs-color-hover:var(
|
|
19
|
+
--spectrum-neutral-subdued-content-color-hover
|
|
20
|
+
);--spectrum-tabs-color-key-focus:var(
|
|
21
|
+
--spectrum-neutral-subdued-content-color-key-focus
|
|
22
|
+
);--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(
|
|
23
|
+
--spectrum-focus-indicator-thickness
|
|
24
|
+
);--spectrum-tabs-focus-indicator-border-radius:var(
|
|
25
|
+
--spectrum-corner-radius-100
|
|
26
|
+
);--spectrum-tabs-focus-indicator-gap:var(
|
|
27
|
+
--spectrum-tab-item-focus-indicator-gap-medium
|
|
28
|
+
);--spectrum-tabs-focus-indicator-color:var(
|
|
29
|
+
--spectrum-focus-indicator-color
|
|
30
|
+
);--spectrum-tabs-selection-indicator-color:var(
|
|
31
|
+
--spectrum-neutral-subdued-content-color-down
|
|
32
|
+
);--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(
|
|
33
|
+
--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default)
|
|
34
|
+
);--mod-tabs-color-hover:var(
|
|
35
|
+
--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover)
|
|
36
|
+
);--mod-tabs-color-key-focus:var(
|
|
37
|
+
--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus)
|
|
38
|
+
);--mod-tabs-selection-indicator-color:var(
|
|
39
|
+
--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default)
|
|
40
|
+
)}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(
|
|
41
|
+
--mod-tabs-list-background-direction-vertical,right
|
|
42
|
+
)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(
|
|
43
|
+
--mod-tabs-list-background-direction-vertical-right,left
|
|
44
|
+
)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(
|
|
45
|
+
--mod-tabs-list-background-direction-vertical,left
|
|
46
|
+
)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(
|
|
47
|
+
--mod-tabs-list-background-direction-vertical,right
|
|
48
|
+
)}:host([compact]) #list{--mod-tabs-item-height:var(
|
|
49
|
+
--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium)
|
|
50
|
+
);--mod-tabs-top-to-text:var(
|
|
51
|
+
--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)
|
|
52
|
+
);--mod-tabs-bottom-to-text:var(
|
|
53
|
+
--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)
|
|
54
|
+
);--mod-tabs-top-to-icon:var(
|
|
55
|
+
--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)
|
|
56
|
+
)}#list{background:linear-gradient(to var(
|
|
57
|
+
--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)
|
|
58
|
+
),var(
|
|
59
|
+
--highcontrast-tabs-divider-background-color,var(
|
|
60
|
+
--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)
|
|
61
|
+
)
|
|
62
|
+
) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));display:flex;margin:0;padding-block:0;position:relative;vertical-align:top;z-index:0}::slotted([selected]:not([slot])){color:var(
|
|
63
|
+
--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))
|
|
64
|
+
)}::slotted(:not([slot])).is-disabled{color:var(
|
|
65
|
+
--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))
|
|
66
|
+
);cursor:default}::slotted(:not([slot])).focus-visible,::slotted(:not([slot])):focus{color:var(
|
|
67
|
+
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
68
|
+
)}::slotted(:not([slot])):focus,::slotted(:not([slot])):focus-visible{color:var(
|
|
69
|
+
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
70
|
+
)}::slotted(:not([slot])).focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(
|
|
71
|
+
--highcontrast-tabs-focus-indicator-color,var(
|
|
72
|
+
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
73
|
+
)
|
|
74
|
+
)}::slotted(:not([slot])).focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(
|
|
75
|
+
--highcontrast-tabs-focus-indicator-color,var(
|
|
76
|
+
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
77
|
+
)
|
|
78
|
+
)}::slotted(:not([slot])):focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(
|
|
79
|
+
--highcontrast-tabs-focus-indicator-color,var(
|
|
80
|
+
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
81
|
+
)
|
|
14
82
|
)}#selection-indicator{background-color:var(
|
|
15
|
-
--
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
)
|
|
19
|
-
--
|
|
20
|
-
)
|
|
21
|
-
--
|
|
22
|
-
)}:host([
|
|
23
|
-
--
|
|
24
|
-
)}:host([direction^=
|
|
25
|
-
--
|
|
26
|
-
)}:host([direction^=vertical][
|
|
27
|
-
--
|
|
28
|
-
)
|
|
29
|
-
--
|
|
30
|
-
)
|
|
31
|
-
--
|
|
32
|
-
)
|
|
33
|
-
--
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
)
|
|
83
|
+
--highcontrast-tabs-selection-indicator-color,var(
|
|
84
|
+
--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)
|
|
85
|
+
)
|
|
86
|
+
);border-radius:var(
|
|
87
|
+
--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius)
|
|
88
|
+
);inset-inline-start:0;position:absolute;transform-origin:0 0;transition:transform var(
|
|
89
|
+
--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)
|
|
90
|
+
) var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));z-index: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(
|
|
91
|
+
--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing)
|
|
92
|
+
)}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));inset-block-end:0;position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box}:host([quiet]) #list{background:none;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(
|
|
93
|
+
--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet)
|
|
94
|
+
)}:host([direction^=vertical-right]) #list,:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical-right]) #list ::slotted(:not([slot])),:host([direction^=vertical]) #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(
|
|
95
|
+
--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing)
|
|
96
|
+
);margin-inline-end:var(
|
|
97
|
+
--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)
|
|
98
|
+
);margin-inline-start:var(
|
|
99
|
+
--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)
|
|
100
|
+
);padding-block:0}:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before,:host([direction^=vertical]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(
|
|
101
|
+
--mod-tabs-focus-indicator-gap,
|
|
102
|
+
var(--spectrum-tabs-focus-indicator-gap)
|
|
103
|
+
)*-1)}:host([direction^=vertical-right]) #list #selection-indicator,:host([direction^=vertical]) #list #selection-indicator{inline-size:var(
|
|
104
|
+
--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)
|
|
105
|
+
);inset-block-start:0;inset-inline-start:0;position:absolute}: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(
|
|
106
|
+
--highcontrast-tabs-focus-indicator-background-color
|
|
107
|
+
)}#list ::slotted([selected]:not([slot])).focus-visible,#list ::slotted([selected]:not([slot])):focus{color:var(--highcontrast-tabs-color-selected)}#list ::slotted([selected]:not([slot])):focus,#list ::slotted([selected]:not([slot])):focus-visible{color:var(--highcontrast-tabs-color-selected)}: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(
|
|
108
|
+
--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)
|
|
109
|
+
),var(
|
|
110
|
+
--highcontrast-tabs-divider-background-color,var(
|
|
111
|
+
--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)
|
|
112
|
+
)
|
|
113
|
+
) 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{display:grid;grid-template-columns:100%;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-end:0;inset-inline-start:auto}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list #selection-indicator{background-color:var(
|
|
114
|
+
--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)
|
|
115
|
+
)}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) #list{pointer-events:none}: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{overflow-x:auto;scrollbar-width:none}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}
|
|
37
116
|
`;
|
|
38
117
|
export default styles;
|
|
39
118
|
//# 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 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\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-compact-item-height:calc(var(--spectrum-tabs-compact-textonly-height) - var(--spectrum-tabs-compact-textonly-divider-size));display:flex;margin:0;padding-bottom:0;padding-top:0;position:relative;vertical-align:top;z-index:0}::slotted(:not([slot])).is-disabled{cursor:default}:host([dir=ltr]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]) #selection-indicator{left:0}:host([dir=rtl]) #selection-indicator{right:0}#selection-indicator{border-radius:var(--spectrum-tabs-textonly-divider-border-radius);position:absolute;transform-origin:0 0;transition:transform var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) var(--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease);z-index:0}:host([compact]) ::slotted(:not([slot])){height:var(--spectrum-tabs-compact-item-height);line-height:var(--spectrum-tabs-compact-item-height)}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([dir=ltr][direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-left:var(--spectrum-tabs-textonly-tabitem-margin-right)}:host([dir=rtl][direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-right:var(--spectrum-tabs-textonly-tabitem-margin-right)}:host([direction^=horizontal]) #list #selection-indicator{bottom:0;height:var(--spectrum-tabs-quiet-textonly-divider-size);position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height)}:host([quiet]) #list{display:inline-flex}:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction^=vertical]) #list ::slotted(:not([slot])){margin-left:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([dir=rtl][direction^=vertical]) #list ::slotted(:not([slot])){margin-right:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([direction^=vertical]) #list ::slotted(:not([slot])){height:var(--spectrum-tabs-vertical-textonly-tabitem-height);line-height:var(--spectrum-tabs-vertical-textonly-tabitem-height);margin-bottom:var(--spectrum-tabs-vertical-textonly-tabitem-gap);padding-bottom:0;padding-left:var(\n--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x\n);padding-right:var(\n--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x\n);padding-top:0}:host([dir=ltr][direction^=vertical]) #list ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=rtl][direction^=vertical]) #list ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=ltr][direction^=vertical]) #list ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=rtl][direction^=vertical]) #list ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([direction^=vertical][compact]) #list ::slotted(:not([slot])){height:var(--spectrum-tabs-compact-vertical-textonly-tabitem-height);line-height:var(--spectrum-tabs-compact-vertical-textonly-tabitem-height);margin-bottom:var(--spectrum-tabs-compact-vertical-textonly-tabitem-gap)}:host([dir=ltr][direction^=vertical]) #list #selection-indicator{left:0}:host([dir=rtl][direction^=vertical]) #list #selection-indicator{right:0}:host([direction^=vertical]) #list #selection-indicator{position:absolute;width:var(--spectrum-tabs-quiet-textonly-divider-size)}#list{--spectrum-tabs-list-background-direction:top;background:linear-gradient(to var(--spectrum-tabs-list-background-direction),var(--spectrum-tabs-textonly-divider-background-color) 0 var(--spectrum-tabs-quiet-textonly-divider-size),transparent var(--spectrum-tabs-quiet-textonly-divider-size))}:host([direction^=vertical]) #list{--spectrum-tabs-list-background-direction:right}:host([direction^=vertical][compact]) #list,:host([quiet]) #list,:host([quiet][compact]){--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-quiet-textonly-divider-background-color\n)}:host([direction^=vertical][emphasized]) #list{--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-emphasized-textonly-divider-background-color\n)}#selection-indicator{background-color:var(\n--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([emphasized]) #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}::slotted([selected]:not([slot])){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host(.focus-visible)::slotted(:not([slot])){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible)::slotted(:not([slot])){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible)::slotted(:not([slot])){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}::slotted(:not([slot])).is-disabled{color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([emphasized]) ::slotted([selected]:not([slot])){color:var(--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected)}:host([quiet]) #list{border-bottom-color:var(\n--spectrum-tabs-quiet-textonly-divider-background-color\n)}:host([quiet]) #selection-indicator{background-color:var(\n--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([quiet][emphasized]) #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}:host([direction^=vertical][compact]) #list #selection-indicator,:host([direction^=vertical][quiet]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([direction^=vertical][emphasized]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}@media (forced-colors:active){#list{--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:HighlightText;--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:HighlightText;--spectrum-tabs-emphasized-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-textonly-divider-background-color:transparent;--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-disabled:GrayText;--spectrum-tabs-textonly-tabitem-icon-color-hover:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-selected:HighlightText;--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-textonly-tabitem-text-color-disabled:GrayText;--spectrum-tabs-textonly-tabitem-text-color-hover:ButtonText;--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-text-color-selected:HighlightText;--spectrum-tabs-textonly-tabitem-text-color:ButtonText;--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:Highlight;forced-color-adjust:none}#list ::slotted(:not([slot])):before{background-color:ButtonFace}#list ::slotted([selected]:not([slot])){color:HighlightText}#list ::slotted([selected]:not([slot])):before{background-color:Highlight;color:HighlightText}:host([emphasized]) #list ::slotted(:not([slot])):before{background-color:ButtonFace}:host([emphasized]) #list ::slotted([selected]:not([slot])){color:HighlightText}:host([emphasized]) #list ::slotted([selected]:not([slot])):before{background-color:Highlight;color:HighlightText}}:host{display:grid;grid-template-columns:100%;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([direction=vertical]){gap:var(--spectrum-tabs-textonly-tabitem-focus-ring-size)}#selection-indicator{border-radius:0;z-index:1}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host(:not([direction^=vertical])) #selection-indicator{bottom:0}:host([dir=ltr][direction=vertical]) #list #selection-indicator,:host([dir=rtl][direction=vertical-right]) #list #selection-indicator{left:0}:host([dir=ltr][direction=vertical-right]) #list #selection-indicator,:host([dir=rtl][direction=vertical]) #list #selection-indicator{left:auto;right:0}:host([disabled]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted(sp-tab){color:var(\n--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}#list{justify-content:var(--swc-tabs-list-justify-content)}:host(:not([direction^=vertical])) #list{padding-bottom:var(--spectrum-tabs-quiet-textonly-divider-size)}:host([dir=ltr][direction=vertical]) #list,:host([dir=rtl][direction=vertical-right]) #list{--spectrum-tabs-list-background-direction:right;padding-left:var(--spectrum-tabs-quiet-textonly-divider-size)}:host([dir=ltr][direction=vertical-right]) #list,:host([dir=rtl][direction=vertical]) #list{--spectrum-tabs-list-background-direction:left;padding-right:var(--spectrum-tabs-quiet-textonly-divider-size)}:host([disabled]) #list{pointer-events:none}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{top:0}:host([compact]){--spectrum-tabs-height:var(--spectrum-tabs-quiet-compact-height)}@media (forced-colors:none){:host([compact]:not([quiet])) #list{--spectrum-tabs-textonly-divider-background-color:unset!important}}@media (forced-colors:active){:host{--spectrum-tabs-textonly-divider-background-color:unset!important}}:host([direction=horizontal]:not([quiet])) #list{border-bottom-color:var(\n--spectrum-tabs-rule-color,var(--spectrum-global-color-gray-200)\n)}:host([dir=rtl][direction=vertical-right]) #list #selection-indicator{left:0;right:auto}#selection-indicator.first-position{transition:none}:host([dir=ltr][direction=vertical-right]) #list ::slotted(:not([slot])){margin-left:0;margin-right:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([dir=rtl][direction=vertical-right]) #list ::slotted(:not([slot])){margin-left:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2);margin-right:0}:host([dir][direction=horizontal]) #list.scroll{overflow-x:auto;scrollbar-width:none}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}:host([quiet][emphasized][direction]) #list{--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-quiet-textonly-divider-background-color\n)}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
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\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(\n--spectrum-tab-item-to-tab-item-horizontal-medium\n);--spectrum-tabs-item-vertical-spacing:var(\n--spectrum-tab-item-to-tab-item-vertical-medium\n);--spectrum-tabs-start-to-edge:var(\n--spectrum-tab-item-start-to-edge-medium\n);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(\n--spectrum-tab-item-bottom-to-text-medium\n);--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(\n--spectrum-tab-item-top-to-workflow-icon-medium\n);--spectrum-tabs-color:var(\n--spectrum-neutral-subdued-content-color-default\n);--spectrum-tabs-color-selected:var(\n--spectrum-neutral-subdued-content-color-down\n);--spectrum-tabs-color-hover:var(\n--spectrum-neutral-subdued-content-color-hover\n);--spectrum-tabs-color-key-focus:var(\n--spectrum-neutral-subdued-content-color-key-focus\n);--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(\n--spectrum-focus-indicator-thickness\n);--spectrum-tabs-focus-indicator-border-radius:var(\n--spectrum-corner-radius-100\n);--spectrum-tabs-focus-indicator-gap:var(\n--spectrum-tab-item-focus-indicator-gap-medium\n);--spectrum-tabs-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-tabs-selection-indicator-color:var(\n--spectrum-neutral-subdued-content-color-down\n);--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(\n--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default)\n);--mod-tabs-color-hover:var(\n--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover)\n);--mod-tabs-color-key-focus:var(\n--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus)\n);--mod-tabs-selection-indicator-color:var(\n--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default)\n)}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,right\n)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical-right,left\n)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,left\n)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,right\n)}:host([compact]) #list{--mod-tabs-item-height:var(\n--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium)\n);--mod-tabs-top-to-text:var(\n--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)\n);--mod-tabs-bottom-to-text:var(\n--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)\n);--mod-tabs-top-to-icon:var(\n--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)\n)}#list{background:linear-gradient(to var(\n--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)\n),var(\n--highcontrast-tabs-divider-background-color,var(\n--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)\n)\n) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));display:flex;margin:0;padding-block:0;position:relative;vertical-align:top;z-index:0}::slotted([selected]:not([slot])){color:var(\n--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))\n)}::slotted(:not([slot])).is-disabled{color:var(\n--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))\n);cursor:default}::slotted(:not([slot])).focus-visible,::slotted(:not([slot])):focus{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}::slotted(:not([slot])):focus,::slotted(:not([slot])):focus-visible{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}::slotted(:not([slot])).focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(\n--highcontrast-tabs-focus-indicator-color,var(\n--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)\n)\n)}::slotted(:not([slot])).focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(\n--highcontrast-tabs-focus-indicator-color,var(\n--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)\n)\n)}::slotted(:not([slot])):focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(\n--highcontrast-tabs-focus-indicator-color,var(\n--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)\n)\n)}#selection-indicator{background-color:var(\n--highcontrast-tabs-selection-indicator-color,var(\n--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)\n)\n);border-radius:var(\n--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius)\n);inset-inline-start:0;position:absolute;transform-origin:0 0;transition:transform var(\n--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)\n) var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));z-index: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(\n--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing)\n)}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));inset-block-end:0;position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box}:host([quiet]) #list{background:none;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(\n--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet)\n)}:host([direction^=vertical-right]) #list,:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical-right]) #list ::slotted(:not([slot])),:host([direction^=vertical]) #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(\n--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing)\n);margin-inline-end:var(\n--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)\n);margin-inline-start:var(\n--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)\n);padding-block:0}:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before,:host([direction^=vertical]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(\n--mod-tabs-focus-indicator-gap,\nvar(--spectrum-tabs-focus-indicator-gap)\n)*-1)}:host([direction^=vertical-right]) #list #selection-indicator,:host([direction^=vertical]) #list #selection-indicator{inline-size:var(\n--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)\n);inset-block-start:0;inset-inline-start:0;position:absolute}: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(\n--highcontrast-tabs-focus-indicator-background-color\n)}#list ::slotted([selected]:not([slot])).focus-visible,#list ::slotted([selected]:not([slot])):focus{color:var(--highcontrast-tabs-color-selected)}#list ::slotted([selected]:not([slot])):focus,#list ::slotted([selected]:not([slot])):focus-visible{color:var(--highcontrast-tabs-color-selected)}: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(\n--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)\n),var(\n--highcontrast-tabs-divider-background-color,var(\n--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)\n)\n) 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{display:grid;grid-template-columns:100%;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-end:0;inset-inline-start:auto}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list #selection-indicator{background-color:var(\n--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)\n)}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) #list{pointer-events:none}: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{overflow-x:auto;scrollbar-width:none}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkHf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/tabs.css.js
CHANGED
|
@@ -1,36 +1,115 @@
|
|
|
1
|
-
"use strict";import{css as t}from"@spectrum-web-components/base";const
|
|
2
|
-
#list{--spectrum-tabs-
|
|
3
|
-
--spectrum-
|
|
4
|
-
)
|
|
5
|
-
--spectrum-
|
|
6
|
-
)
|
|
7
|
-
--spectrum-
|
|
8
|
-
)
|
|
9
|
-
--spectrum-
|
|
10
|
-
)
|
|
11
|
-
--spectrum-
|
|
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(
|
|
3
|
+
--spectrum-tab-item-to-tab-item-horizontal-medium
|
|
4
|
+
);--spectrum-tabs-item-vertical-spacing:var(
|
|
5
|
+
--spectrum-tab-item-to-tab-item-vertical-medium
|
|
6
|
+
);--spectrum-tabs-start-to-edge:var(
|
|
7
|
+
--spectrum-tab-item-start-to-edge-medium
|
|
8
|
+
);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(
|
|
9
|
+
--spectrum-tab-item-bottom-to-text-medium
|
|
10
|
+
);--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(
|
|
11
|
+
--spectrum-tab-item-top-to-workflow-icon-medium
|
|
12
|
+
);--spectrum-tabs-color:var(
|
|
13
|
+
--spectrum-neutral-subdued-content-color-default
|
|
14
|
+
);--spectrum-tabs-color-selected:var(
|
|
15
|
+
--spectrum-neutral-subdued-content-color-down
|
|
16
|
+
);--spectrum-tabs-color-hover:var(
|
|
17
|
+
--spectrum-neutral-subdued-content-color-hover
|
|
18
|
+
);--spectrum-tabs-color-key-focus:var(
|
|
19
|
+
--spectrum-neutral-subdued-content-color-key-focus
|
|
20
|
+
);--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(
|
|
21
|
+
--spectrum-focus-indicator-thickness
|
|
22
|
+
);--spectrum-tabs-focus-indicator-border-radius:var(
|
|
23
|
+
--spectrum-corner-radius-100
|
|
24
|
+
);--spectrum-tabs-focus-indicator-gap:var(
|
|
25
|
+
--spectrum-tab-item-focus-indicator-gap-medium
|
|
26
|
+
);--spectrum-tabs-focus-indicator-color:var(
|
|
27
|
+
--spectrum-focus-indicator-color
|
|
28
|
+
);--spectrum-tabs-selection-indicator-color:var(
|
|
29
|
+
--spectrum-neutral-subdued-content-color-down
|
|
30
|
+
);--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(
|
|
31
|
+
--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default)
|
|
32
|
+
);--mod-tabs-color-hover:var(
|
|
33
|
+
--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover)
|
|
34
|
+
);--mod-tabs-color-key-focus:var(
|
|
35
|
+
--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus)
|
|
36
|
+
);--mod-tabs-selection-indicator-color:var(
|
|
37
|
+
--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default)
|
|
38
|
+
)}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(
|
|
39
|
+
--mod-tabs-list-background-direction-vertical,right
|
|
40
|
+
)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(
|
|
41
|
+
--mod-tabs-list-background-direction-vertical-right,left
|
|
42
|
+
)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(
|
|
43
|
+
--mod-tabs-list-background-direction-vertical,left
|
|
44
|
+
)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(
|
|
45
|
+
--mod-tabs-list-background-direction-vertical,right
|
|
46
|
+
)}:host([compact]) #list{--mod-tabs-item-height:var(
|
|
47
|
+
--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium)
|
|
48
|
+
);--mod-tabs-top-to-text:var(
|
|
49
|
+
--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)
|
|
50
|
+
);--mod-tabs-bottom-to-text:var(
|
|
51
|
+
--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)
|
|
52
|
+
);--mod-tabs-top-to-icon:var(
|
|
53
|
+
--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)
|
|
54
|
+
)}#list{background:linear-gradient(to var(
|
|
55
|
+
--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)
|
|
56
|
+
),var(
|
|
57
|
+
--highcontrast-tabs-divider-background-color,var(
|
|
58
|
+
--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)
|
|
59
|
+
)
|
|
60
|
+
) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));display:flex;margin:0;padding-block:0;position:relative;vertical-align:top;z-index:0}::slotted([selected]:not([slot])){color:var(
|
|
61
|
+
--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))
|
|
62
|
+
)}::slotted(:not([slot])).is-disabled{color:var(
|
|
63
|
+
--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))
|
|
64
|
+
);cursor:default}::slotted(:not([slot])).focus-visible,::slotted(:not([slot])):focus{color:var(
|
|
65
|
+
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
66
|
+
)}::slotted(:not([slot])):focus,::slotted(:not([slot])):focus-visible{color:var(
|
|
67
|
+
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
68
|
+
)}::slotted(:not([slot])).focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(
|
|
69
|
+
--highcontrast-tabs-focus-indicator-color,var(
|
|
70
|
+
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
71
|
+
)
|
|
72
|
+
)}::slotted(:not([slot])).focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(
|
|
73
|
+
--highcontrast-tabs-focus-indicator-color,var(
|
|
74
|
+
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
75
|
+
)
|
|
76
|
+
)}::slotted(:not([slot])):focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(
|
|
77
|
+
--highcontrast-tabs-focus-indicator-color,var(
|
|
78
|
+
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
79
|
+
)
|
|
12
80
|
)}#selection-indicator{background-color:var(
|
|
13
|
-
--
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
)
|
|
17
|
-
--
|
|
18
|
-
)
|
|
19
|
-
--
|
|
20
|
-
)}:host([
|
|
21
|
-
--
|
|
22
|
-
)}:host([direction^=
|
|
23
|
-
--
|
|
24
|
-
)}:host([direction^=vertical][
|
|
25
|
-
--
|
|
26
|
-
)
|
|
27
|
-
--
|
|
28
|
-
)
|
|
29
|
-
--
|
|
30
|
-
)
|
|
31
|
-
--
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
)
|
|
35
|
-
|
|
81
|
+
--highcontrast-tabs-selection-indicator-color,var(
|
|
82
|
+
--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)
|
|
83
|
+
)
|
|
84
|
+
);border-radius:var(
|
|
85
|
+
--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius)
|
|
86
|
+
);inset-inline-start:0;position:absolute;transform-origin:0 0;transition:transform var(
|
|
87
|
+
--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)
|
|
88
|
+
) var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));z-index: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(
|
|
89
|
+
--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing)
|
|
90
|
+
)}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));inset-block-end:0;position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box}:host([quiet]) #list{background:none;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(
|
|
91
|
+
--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet)
|
|
92
|
+
)}:host([direction^=vertical-right]) #list,:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical-right]) #list ::slotted(:not([slot])),:host([direction^=vertical]) #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(
|
|
93
|
+
--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing)
|
|
94
|
+
);margin-inline-end:var(
|
|
95
|
+
--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)
|
|
96
|
+
);margin-inline-start:var(
|
|
97
|
+
--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)
|
|
98
|
+
);padding-block:0}:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before,:host([direction^=vertical]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(
|
|
99
|
+
--mod-tabs-focus-indicator-gap,
|
|
100
|
+
var(--spectrum-tabs-focus-indicator-gap)
|
|
101
|
+
)*-1)}:host([direction^=vertical-right]) #list #selection-indicator,:host([direction^=vertical]) #list #selection-indicator{inline-size:var(
|
|
102
|
+
--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)
|
|
103
|
+
);inset-block-start:0;inset-inline-start:0;position:absolute}: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(
|
|
104
|
+
--highcontrast-tabs-focus-indicator-background-color
|
|
105
|
+
)}#list ::slotted([selected]:not([slot])).focus-visible,#list ::slotted([selected]:not([slot])):focus{color:var(--highcontrast-tabs-color-selected)}#list ::slotted([selected]:not([slot])):focus,#list ::slotted([selected]:not([slot])):focus-visible{color:var(--highcontrast-tabs-color-selected)}: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(
|
|
106
|
+
--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)
|
|
107
|
+
),var(
|
|
108
|
+
--highcontrast-tabs-divider-background-color,var(
|
|
109
|
+
--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)
|
|
110
|
+
)
|
|
111
|
+
) 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{display:grid;grid-template-columns:100%;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-end:0;inset-inline-start:auto}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list #selection-indicator{background-color:var(
|
|
112
|
+
--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)
|
|
113
|
+
)}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) #list{pointer-events:none}: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{overflow-x:auto;scrollbar-width:none}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}
|
|
114
|
+
`;export default o;
|
|
36
115
|
//# 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 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\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-compact-item-height:calc(var(--spectrum-tabs-compact-textonly-height) - var(--spectrum-tabs-compact-textonly-divider-size));display:flex;margin:0;padding-bottom:0;padding-top:0;position:relative;vertical-align:top;z-index:0}::slotted(:not([slot])).is-disabled{cursor:default}:host([dir=ltr]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]) ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]) ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]) #selection-indicator{left:0}:host([dir=rtl]) #selection-indicator{right:0}#selection-indicator{border-radius:var(--spectrum-tabs-textonly-divider-border-radius);position:absolute;transform-origin:0 0;transition:transform var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) var(--spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease);z-index:0}:host([compact]) ::slotted(:not([slot])){height:var(--spectrum-tabs-compact-item-height);line-height:var(--spectrum-tabs-compact-item-height)}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([dir=ltr][direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-left:var(--spectrum-tabs-textonly-tabitem-margin-right)}:host([dir=rtl][direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-right:var(--spectrum-tabs-textonly-tabitem-margin-right)}:host([direction^=horizontal]) #list #selection-indicator{bottom:0;height:var(--spectrum-tabs-quiet-textonly-divider-size);position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height)}:host([quiet]) #list{display:inline-flex}:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction^=vertical]) #list ::slotted(:not([slot])){margin-left:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([dir=rtl][direction^=vertical]) #list ::slotted(:not([slot])){margin-right:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([direction^=vertical]) #list ::slotted(:not([slot])){height:var(--spectrum-tabs-vertical-textonly-tabitem-height);line-height:var(--spectrum-tabs-vertical-textonly-tabitem-height);margin-bottom:var(--spectrum-tabs-vertical-textonly-tabitem-gap);padding-bottom:0;padding-left:var(\n--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x\n);padding-right:var(\n--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x\n);padding-top:0}:host([dir=ltr][direction^=vertical]) #list ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=rtl][direction^=vertical]) #list ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=ltr][direction^=vertical]) #list ::slotted(:not([slot])):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([dir=rtl][direction^=vertical]) #list ::slotted(:not([slot])):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-size)*-1)}:host([direction^=vertical][compact]) #list ::slotted(:not([slot])){height:var(--spectrum-tabs-compact-vertical-textonly-tabitem-height);line-height:var(--spectrum-tabs-compact-vertical-textonly-tabitem-height);margin-bottom:var(--spectrum-tabs-compact-vertical-textonly-tabitem-gap)}:host([dir=ltr][direction^=vertical]) #list #selection-indicator{left:0}:host([dir=rtl][direction^=vertical]) #list #selection-indicator{right:0}:host([direction^=vertical]) #list #selection-indicator{position:absolute;width:var(--spectrum-tabs-quiet-textonly-divider-size)}#list{--spectrum-tabs-list-background-direction:top;background:linear-gradient(to var(--spectrum-tabs-list-background-direction),var(--spectrum-tabs-textonly-divider-background-color) 0 var(--spectrum-tabs-quiet-textonly-divider-size),transparent var(--spectrum-tabs-quiet-textonly-divider-size))}:host([direction^=vertical]) #list{--spectrum-tabs-list-background-direction:right}:host([direction^=vertical][compact]) #list,:host([quiet]) #list,:host([quiet][compact]){--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-quiet-textonly-divider-background-color\n)}:host([direction^=vertical][emphasized]) #list{--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-emphasized-textonly-divider-background-color\n)}#selection-indicator{background-color:var(\n--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([emphasized]) #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}::slotted([selected]:not([slot])){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host(.focus-visible)::slotted(:not([slot])){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible)::slotted(:not([slot])){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible)::slotted(:not([slot])){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}::slotted(:not([slot])).is-disabled{color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([emphasized]) ::slotted([selected]:not([slot])){color:var(--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected)}:host([quiet]) #list{border-bottom-color:var(\n--spectrum-tabs-quiet-textonly-divider-background-color\n)}:host([quiet]) #selection-indicator{background-color:var(\n--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([quiet][emphasized]) #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}:host([direction^=vertical][compact]) #list #selection-indicator,:host([direction^=vertical][quiet]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected\n)}:host([direction^=vertical][emphasized]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected\n)}@media (forced-colors:active){#list{--spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected:HighlightText;--spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-emphasized-texticon-tabitem-text-color-selected:HighlightText;--spectrum-tabs-emphasized-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-divider-background-color:transparent;--spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-textonly-divider-background-color:transparent;--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-disabled:GrayText;--spectrum-tabs-textonly-tabitem-icon-color-hover:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-icon-color-selected:HighlightText;--spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected:Highlight;--spectrum-tabs-textonly-tabitem-text-color-disabled:GrayText;--spectrum-tabs-textonly-tabitem-text-color-hover:ButtonText;--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus:ButtonText;--spectrum-tabs-textonly-tabitem-text-color-selected:HighlightText;--spectrum-tabs-textonly-tabitem-text-color:ButtonText;--spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected:Highlight;forced-color-adjust:none}#list ::slotted(:not([slot])):before{background-color:ButtonFace}#list ::slotted([selected]:not([slot])){color:HighlightText}#list ::slotted([selected]:not([slot])):before{background-color:Highlight;color:HighlightText}:host([emphasized]) #list ::slotted(:not([slot])):before{background-color:ButtonFace}:host([emphasized]) #list ::slotted([selected]:not([slot])){color:HighlightText}:host([emphasized]) #list ::slotted([selected]:not([slot])):before{background-color:Highlight;color:HighlightText}}:host{display:grid;grid-template-columns:100%;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([direction=vertical]){gap:var(--spectrum-tabs-textonly-tabitem-focus-ring-size)}#selection-indicator{border-radius:0;z-index:1}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host(:not([direction^=vertical])) #selection-indicator{bottom:0}:host([dir=ltr][direction=vertical]) #list #selection-indicator,:host([dir=rtl][direction=vertical-right]) #list #selection-indicator{left:0}:host([dir=ltr][direction=vertical-right]) #list #selection-indicator,:host([dir=rtl][direction=vertical]) #list #selection-indicator{left:auto;right:0}:host([disabled]) #list #selection-indicator{background-color:var(\n--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted(sp-tab){color:var(\n--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}#list{justify-content:var(--swc-tabs-list-justify-content)}:host(:not([direction^=vertical])) #list{padding-bottom:var(--spectrum-tabs-quiet-textonly-divider-size)}:host([dir=ltr][direction=vertical]) #list,:host([dir=rtl][direction=vertical-right]) #list{--spectrum-tabs-list-background-direction:right;padding-left:var(--spectrum-tabs-quiet-textonly-divider-size)}:host([dir=ltr][direction=vertical-right]) #list,:host([dir=rtl][direction=vertical]) #list{--spectrum-tabs-list-background-direction:left;padding-right:var(--spectrum-tabs-quiet-textonly-divider-size)}:host([disabled]) #list{pointer-events:none}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{top:0}:host([compact]){--spectrum-tabs-height:var(--spectrum-tabs-quiet-compact-height)}@media (forced-colors:none){:host([compact]:not([quiet])) #list{--spectrum-tabs-textonly-divider-background-color:unset!important}}@media (forced-colors:active){:host{--spectrum-tabs-textonly-divider-background-color:unset!important}}:host([direction=horizontal]:not([quiet])) #list{border-bottom-color:var(\n--spectrum-tabs-rule-color,var(--spectrum-global-color-gray-200)\n)}:host([dir=rtl][direction=vertical-right]) #list #selection-indicator{left:0;right:auto}#selection-indicator.first-position{transition:none}:host([dir=ltr][direction=vertical-right]) #list ::slotted(:not([slot])){margin-left:0;margin-right:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2)}:host([dir=rtl][direction=vertical-right]) #list ::slotted(:not([slot])){margin-left:calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap)/2);margin-right:0}:host([dir][direction=horizontal]) #list.scroll{overflow-x:auto;scrollbar-width:none}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}:host([quiet][emphasized][direction]) #list{--spectrum-tabs-textonly-divider-background-color:var(\n--spectrum-tabs-quiet-textonly-divider-background-color\n)}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
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\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(\n--spectrum-tab-item-to-tab-item-horizontal-medium\n);--spectrum-tabs-item-vertical-spacing:var(\n--spectrum-tab-item-to-tab-item-vertical-medium\n);--spectrum-tabs-start-to-edge:var(\n--spectrum-tab-item-start-to-edge-medium\n);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(\n--spectrum-tab-item-bottom-to-text-medium\n);--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(\n--spectrum-tab-item-top-to-workflow-icon-medium\n);--spectrum-tabs-color:var(\n--spectrum-neutral-subdued-content-color-default\n);--spectrum-tabs-color-selected:var(\n--spectrum-neutral-subdued-content-color-down\n);--spectrum-tabs-color-hover:var(\n--spectrum-neutral-subdued-content-color-hover\n);--spectrum-tabs-color-key-focus:var(\n--spectrum-neutral-subdued-content-color-key-focus\n);--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(\n--spectrum-focus-indicator-thickness\n);--spectrum-tabs-focus-indicator-border-radius:var(\n--spectrum-corner-radius-100\n);--spectrum-tabs-focus-indicator-gap:var(\n--spectrum-tab-item-focus-indicator-gap-medium\n);--spectrum-tabs-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-tabs-selection-indicator-color:var(\n--spectrum-neutral-subdued-content-color-down\n);--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(\n--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default)\n);--mod-tabs-color-hover:var(\n--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover)\n);--mod-tabs-color-key-focus:var(\n--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus)\n);--mod-tabs-selection-indicator-color:var(\n--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default)\n)}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,right\n)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical-right,left\n)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,left\n)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,right\n)}:host([compact]) #list{--mod-tabs-item-height:var(\n--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium)\n);--mod-tabs-top-to-text:var(\n--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)\n);--mod-tabs-bottom-to-text:var(\n--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)\n);--mod-tabs-top-to-icon:var(\n--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)\n)}#list{background:linear-gradient(to var(\n--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)\n),var(\n--highcontrast-tabs-divider-background-color,var(\n--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)\n)\n) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));display:flex;margin:0;padding-block:0;position:relative;vertical-align:top;z-index:0}::slotted([selected]:not([slot])){color:var(\n--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))\n)}::slotted(:not([slot])).is-disabled{color:var(\n--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))\n);cursor:default}::slotted(:not([slot])).focus-visible,::slotted(:not([slot])):focus{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}::slotted(:not([slot])):focus,::slotted(:not([slot])):focus-visible{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}::slotted(:not([slot])).focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(\n--highcontrast-tabs-focus-indicator-color,var(\n--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)\n)\n)}::slotted(:not([slot])).focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(\n--highcontrast-tabs-focus-indicator-color,var(\n--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)\n)\n)}::slotted(:not([slot])):focus-visible:before,::slotted(:not([slot])):focus:before{border-color:var(\n--highcontrast-tabs-focus-indicator-color,var(\n--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)\n)\n)}#selection-indicator{background-color:var(\n--highcontrast-tabs-selection-indicator-color,var(\n--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)\n)\n);border-radius:var(\n--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius)\n);inset-inline-start:0;position:absolute;transform-origin:0 0;transition:transform var(\n--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)\n) var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));z-index: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(\n--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing)\n)}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));inset-block-end:0;position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box}:host([quiet]) #list{background:none;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(\n--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet)\n)}:host([direction^=vertical-right]) #list,:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical-right]) #list ::slotted(:not([slot])),:host([direction^=vertical]) #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(\n--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing)\n);margin-inline-end:var(\n--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)\n);margin-inline-start:var(\n--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)\n);padding-block:0}:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before,:host([direction^=vertical]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(\n--mod-tabs-focus-indicator-gap,\nvar(--spectrum-tabs-focus-indicator-gap)\n)*-1)}:host([direction^=vertical-right]) #list #selection-indicator,:host([direction^=vertical]) #list #selection-indicator{inline-size:var(\n--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)\n);inset-block-start:0;inset-inline-start:0;position:absolute}: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(\n--highcontrast-tabs-focus-indicator-background-color\n)}#list ::slotted([selected]:not([slot])).focus-visible,#list ::slotted([selected]:not([slot])):focus{color:var(--highcontrast-tabs-color-selected)}#list ::slotted([selected]:not([slot])):focus,#list ::slotted([selected]:not([slot])):focus-visible{color:var(--highcontrast-tabs-color-selected)}: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(\n--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)\n),var(\n--highcontrast-tabs-divider-background-color,var(\n--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)\n)\n) 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{display:grid;grid-template-columns:100%;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-end:0;inset-inline-start:auto}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list #selection-indicator{background-color:var(\n--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)\n)}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) #list{pointer-events:none}: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{overflow-x:auto;scrollbar-width:none}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkHf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/stories/tabs.stories.js
CHANGED
|
@@ -153,6 +153,12 @@ export const emphasized = (args) => {
|
|
|
153
153
|
};
|
|
154
154
|
export const emphasizedQuiet = (args) => {
|
|
155
155
|
return html`
|
|
156
|
+
<style>
|
|
157
|
+
sp-tabs {
|
|
158
|
+
display: grid;
|
|
159
|
+
grid-template-columns: 100%;
|
|
160
|
+
}
|
|
161
|
+
</style>
|
|
156
162
|
<sp-tabs
|
|
157
163
|
selected="1"
|
|
158
164
|
emphasized
|
|
@@ -273,6 +279,7 @@ export const VerticalSized = (args) => {
|
|
|
273
279
|
return html`
|
|
274
280
|
<style>
|
|
275
281
|
sp-tabs {
|
|
282
|
+
display: grid;
|
|
276
283
|
height: 75vh;
|
|
277
284
|
--swc-tabs-list-justify-content: center;
|
|
278
285
|
}
|
|
@@ -450,6 +457,12 @@ iconsIii.args = {
|
|
|
450
457
|
iconsIii.storyName = "Icons III";
|
|
451
458
|
export const Quiet = ({ direction, auto }) => {
|
|
452
459
|
return html`
|
|
460
|
+
<style>
|
|
461
|
+
sp-tabs {
|
|
462
|
+
display: grid;
|
|
463
|
+
grid-template-columns: 100%;
|
|
464
|
+
}
|
|
465
|
+
</style>
|
|
453
466
|
<sp-tabs selected="1" quiet direction=${direction} ?auto=${auto}>
|
|
454
467
|
<sp-tab label="Tab 1" value="1"></sp-tab>
|
|
455
468
|
<sp-tab label="Tab 2" value="2"></sp-tab>
|
|
@@ -475,6 +488,12 @@ export const quietCompact = ({
|
|
|
475
488
|
auto
|
|
476
489
|
}) => {
|
|
477
490
|
return html`
|
|
491
|
+
<style>
|
|
492
|
+
sp-tabs {
|
|
493
|
+
display: grid;
|
|
494
|
+
grid-template-columns: 100%;
|
|
495
|
+
}
|
|
496
|
+
</style>
|
|
478
497
|
<sp-tabs
|
|
479
498
|
selected="1"
|
|
480
499
|
quiet
|