@spectrum-web-components/tabs 0.33.3-overlay.65 → 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/custom-elements.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-tab-panel.
|
|
7
|
+
"path": "sp-tab-panel.js",
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": [
|
|
10
10
|
{
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"kind": "javascript-module",
|
|
22
|
-
"path": "sp-tab.
|
|
22
|
+
"path": "sp-tab.js",
|
|
23
23
|
"declarations": [],
|
|
24
24
|
"exports": [
|
|
25
25
|
{
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"kind": "javascript-module",
|
|
37
|
-
"path": "sp-tabs-overflow.
|
|
37
|
+
"path": "sp-tabs-overflow.js",
|
|
38
38
|
"declarations": [],
|
|
39
39
|
"exports": [
|
|
40
40
|
{
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"kind": "javascript-module",
|
|
52
|
-
"path": "sp-tabs.
|
|
52
|
+
"path": "sp-tabs.js",
|
|
53
53
|
"declarations": [],
|
|
54
54
|
"exports": [
|
|
55
55
|
{
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
66
|
"kind": "javascript-module",
|
|
67
|
-
"path": "src/Tab.
|
|
67
|
+
"path": "src/Tab.js",
|
|
68
68
|
"declarations": [
|
|
69
69
|
{
|
|
70
70
|
"kind": "class",
|
|
@@ -235,14 +235,14 @@
|
|
|
235
235
|
"name": "Tab",
|
|
236
236
|
"declaration": {
|
|
237
237
|
"name": "Tab",
|
|
238
|
-
"module": "src/Tab.
|
|
238
|
+
"module": "src/Tab.js"
|
|
239
239
|
}
|
|
240
240
|
}
|
|
241
241
|
]
|
|
242
242
|
},
|
|
243
243
|
{
|
|
244
244
|
"kind": "javascript-module",
|
|
245
|
-
"path": "src/TabPanel.
|
|
245
|
+
"path": "src/TabPanel.js",
|
|
246
246
|
"declarations": [
|
|
247
247
|
{
|
|
248
248
|
"kind": "class",
|
|
@@ -320,14 +320,14 @@
|
|
|
320
320
|
"name": "TabPanel",
|
|
321
321
|
"declaration": {
|
|
322
322
|
"name": "TabPanel",
|
|
323
|
-
"module": "src/TabPanel.
|
|
323
|
+
"module": "src/TabPanel.js"
|
|
324
324
|
}
|
|
325
325
|
}
|
|
326
326
|
]
|
|
327
327
|
},
|
|
328
328
|
{
|
|
329
329
|
"kind": "javascript-module",
|
|
330
|
-
"path": "src/Tabs.
|
|
330
|
+
"path": "src/Tabs.js",
|
|
331
331
|
"declarations": [
|
|
332
332
|
{
|
|
333
333
|
"kind": "variable",
|
|
@@ -743,7 +743,7 @@
|
|
|
743
743
|
"name": "ScaledIndicator",
|
|
744
744
|
"declaration": {
|
|
745
745
|
"name": "ScaledIndicator",
|
|
746
|
-
"module": "src/Tabs.
|
|
746
|
+
"module": "src/Tabs.js"
|
|
747
747
|
}
|
|
748
748
|
},
|
|
749
749
|
{
|
|
@@ -751,14 +751,14 @@
|
|
|
751
751
|
"name": "Tabs",
|
|
752
752
|
"declaration": {
|
|
753
753
|
"name": "Tabs",
|
|
754
|
-
"module": "src/Tabs.
|
|
754
|
+
"module": "src/Tabs.js"
|
|
755
755
|
}
|
|
756
756
|
}
|
|
757
757
|
]
|
|
758
758
|
},
|
|
759
759
|
{
|
|
760
760
|
"kind": "javascript-module",
|
|
761
|
-
"path": "src/TabsOverflow.
|
|
761
|
+
"path": "src/TabsOverflow.js",
|
|
762
762
|
"declarations": [
|
|
763
763
|
{
|
|
764
764
|
"kind": "class",
|
|
@@ -894,7 +894,7 @@
|
|
|
894
894
|
"name": "TabsOverflow",
|
|
895
895
|
"declaration": {
|
|
896
896
|
"name": "TabsOverflow",
|
|
897
|
-
"module": "src/TabsOverflow.
|
|
897
|
+
"module": "src/TabsOverflow.js"
|
|
898
898
|
}
|
|
899
899
|
}
|
|
900
900
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tabs",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.34.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -86,14 +86,14 @@
|
|
|
86
86
|
],
|
|
87
87
|
"dependencies": {
|
|
88
88
|
"@lit-labs/observers": "^2.0.0",
|
|
89
|
-
"@spectrum-web-components/base": "^0.
|
|
90
|
-
"@spectrum-web-components/icon": "^0.
|
|
91
|
-
"@spectrum-web-components/icons-ui": "^0.
|
|
92
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
93
|
-
"@spectrum-web-components/shared": "^0.
|
|
89
|
+
"@spectrum-web-components/base": "^0.34.0",
|
|
90
|
+
"@spectrum-web-components/icon": "^0.34.0",
|
|
91
|
+
"@spectrum-web-components/icons-ui": "^0.34.0",
|
|
92
|
+
"@spectrum-web-components/reactive-controllers": "^0.34.0",
|
|
93
|
+
"@spectrum-web-components/shared": "^0.34.0"
|
|
94
94
|
},
|
|
95
95
|
"devDependencies": {
|
|
96
|
-
"@spectrum-css/tabs": "^
|
|
96
|
+
"@spectrum-css/tabs": "^4.0.0"
|
|
97
97
|
},
|
|
98
98
|
"types": "./src/index.d.ts",
|
|
99
99
|
"customElements": "custom-elements.json",
|
|
@@ -101,5 +101,5 @@
|
|
|
101
101
|
"./sp-*.js",
|
|
102
102
|
"./**/*.dev.js"
|
|
103
103
|
],
|
|
104
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "f9b3294d67cdd52b2c36897cdc1c20ceaeb019cf"
|
|
105
105
|
}
|
package/src/spectrum-config.js
CHANGED
|
@@ -90,6 +90,29 @@ const config = {
|
|
|
90
90
|
},
|
|
91
91
|
],
|
|
92
92
|
},
|
|
93
|
+
{
|
|
94
|
+
expandSelector: true,
|
|
95
|
+
find: [builder.class('spectrum-Tabs--vertical-right')],
|
|
96
|
+
replace: [
|
|
97
|
+
{
|
|
98
|
+
replace: builder.attribute(
|
|
99
|
+
'direction',
|
|
100
|
+
'vertical-right',
|
|
101
|
+
'prefix'
|
|
102
|
+
),
|
|
103
|
+
hoist: true,
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
replace: builder.combinator(' '),
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
replace: builder.id('list'),
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
replace: builder.combinator(' '),
|
|
113
|
+
},
|
|
114
|
+
],
|
|
115
|
+
},
|
|
93
116
|
{
|
|
94
117
|
collapseSelector: true,
|
|
95
118
|
find: [
|
|
@@ -258,6 +281,7 @@ const config = {
|
|
|
258
281
|
],
|
|
259
282
|
'size'
|
|
260
283
|
),
|
|
284
|
+
converter.classToId('spectrum-Tabs', 'list'),
|
|
261
285
|
],
|
|
262
286
|
requireComponentPresence: [
|
|
263
287
|
{
|
|
@@ -1,17 +1,50 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
:host{
|
|
5
|
-
--
|
|
6
|
-
)
|
|
7
|
-
--
|
|
8
|
-
)
|
|
9
|
-
--
|
|
10
|
-
)}
|
|
11
|
-
--
|
|
12
|
-
)}:host
|
|
13
|
-
--
|
|
14
|
-
)
|
|
4
|
+
:host{block-size:calc(var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));box-sizing:border-box;color:var(
|
|
5
|
+
--highcontrast-tabs-color,var(--mod-tabs-color,var(--spectrum-tabs-color))
|
|
6
|
+
);cursor:pointer;outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(
|
|
7
|
+
--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)
|
|
8
|
+
) ease-out;white-space:nowrap;z-index:1}::slotted([slot=icon]){block-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));inline-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));margin-block-start:var(
|
|
9
|
+
--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon)
|
|
10
|
+
)}[name=icon]+#item-label{margin-inline-start:var(
|
|
11
|
+
--mod-tabs-icon-to-text,var(--spectrum-tabs-icon-to-text)
|
|
12
|
+
)}:host:before{block-size:calc(100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)));border:var(
|
|
13
|
+
--mod-tabs-focus-indicator-width,var(--spectrum-tabs-focus-indicator-width)
|
|
14
|
+
) solid transparent;border-radius:var(
|
|
15
|
+
--mod-tabs-focus-indicator-border-radius,var(--spectrum-tabs-focus-indicator-border-radius)
|
|
16
|
+
);box-sizing:border-box;content:"";inline-size:calc(100% + var(
|
|
17
|
+
--mod-tabs-focus-indicator-gap,
|
|
18
|
+
var(--spectrum-tabs-focus-indicator-gap)
|
|
19
|
+
)*2);inset-block-start:calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text))/2);inset-inline-end:calc(var(
|
|
20
|
+
--mod-tabs-focus-indicator-gap,
|
|
21
|
+
var(--spectrum-tabs-focus-indicator-gap)
|
|
22
|
+
)*-1);inset-inline-start:calc(var(
|
|
23
|
+
--mod-tabs-focus-indicator-gap,
|
|
24
|
+
var(--spectrum-tabs-focus-indicator-gap)
|
|
25
|
+
)*-1);pointer-events:none;position:absolute}:host(:hover){color:var(
|
|
26
|
+
--highcontrast-tabs-color-hover,var(--mod-tabs-color-hover,var(--spectrum-tabs-color-hover))
|
|
27
|
+
)}:host([selected]){color:var(
|
|
28
|
+
--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))
|
|
29
|
+
)}:host([disabled]){color:var(
|
|
30
|
+
--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))
|
|
31
|
+
);cursor:default}:host([disabled]) #item-label{cursor:default}:host(:focus),:host.focus-visible{color:var(
|
|
32
|
+
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
33
|
+
)}:host(:focus),:host:focus-visible{color:var(
|
|
34
|
+
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
35
|
+
)}:host(:focus):before,:host.focus-visible:before{border-color:var(
|
|
36
|
+
--highcontrast-tabs-focus-indicator-color,var(
|
|
37
|
+
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
38
|
+
)
|
|
39
|
+
)}:host(:focus):before,:host:focus-visible:before{border-color:var(
|
|
40
|
+
--highcontrast-tabs-focus-indicator-color,var(
|
|
41
|
+
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
42
|
+
)
|
|
43
|
+
)}#item-label{cursor:pointer;display:inline-block;font-family:var(--mod-tabs-font-family,var(--spectrum-tabs-font-family));font-size:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-size));font-style:var(--mod-tabs-font-style,var(--spectrum-tabs-font-style));font-weight:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-weight));line-height:var(--mod-tabs-line-height,var(--spectrum-tabs-line-height));margin-block-end:var(
|
|
44
|
+
--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text)
|
|
45
|
+
);margin-block-start:var(
|
|
46
|
+
--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text)
|
|
47
|
+
);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}
|
|
15
48
|
`;
|
|
16
49
|
export default styles;
|
|
17
50
|
//# sourceMappingURL=spectrum-tab.css.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tab.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 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:host{
|
|
5
|
-
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;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:host{block-size:calc(var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));box-sizing:border-box;color:var(\n--highcontrast-tabs-color,var(--mod-tabs-color,var(--spectrum-tabs-color))\n);cursor:pointer;outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(\n--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)\n) ease-out;white-space:nowrap;z-index:1}::slotted([slot=icon]){block-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));inline-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));margin-block-start:var(\n--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon)\n)}[name=icon]+#item-label{margin-inline-start:var(\n--mod-tabs-icon-to-text,var(--spectrum-tabs-icon-to-text)\n)}:host:before{block-size:calc(100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)));border:var(\n--mod-tabs-focus-indicator-width,var(--spectrum-tabs-focus-indicator-width)\n) solid transparent;border-radius:var(\n--mod-tabs-focus-indicator-border-radius,var(--spectrum-tabs-focus-indicator-border-radius)\n);box-sizing:border-box;content:\"\";inline-size:calc(100% + var(\n--mod-tabs-focus-indicator-gap,\nvar(--spectrum-tabs-focus-indicator-gap)\n)*2);inset-block-start:calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text))/2);inset-inline-end:calc(var(\n--mod-tabs-focus-indicator-gap,\nvar(--spectrum-tabs-focus-indicator-gap)\n)*-1);inset-inline-start:calc(var(\n--mod-tabs-focus-indicator-gap,\nvar(--spectrum-tabs-focus-indicator-gap)\n)*-1);pointer-events:none;position:absolute}:host(:hover){color:var(\n--highcontrast-tabs-color-hover,var(--mod-tabs-color-hover,var(--spectrum-tabs-color-hover))\n)}:host([selected]){color:var(\n--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))\n)}:host([disabled]){color:var(\n--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))\n);cursor:default}:host([disabled]) #item-label{cursor:default}:host(:focus),:host.focus-visible{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}:host(:focus),:host:focus-visible{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}:host(:focus):before,:host.focus-visible: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)}:host(:focus):before,:host:focus-visible: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)}#item-label{cursor:pointer;display:inline-block;font-family:var(--mod-tabs-font-family,var(--spectrum-tabs-font-family));font-size:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-size));font-style:var(--mod-tabs-font-style,var(--spectrum-tabs-font-style));font-weight:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-weight));line-height:var(--mod-tabs-line-height,var(--spectrum-tabs-line-height));margin-block-end:var(\n--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text)\n);margin-block-start:var(\n--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text)\n);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{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;AA8Cf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/spectrum-tab.css.js
CHANGED
|
@@ -1,14 +1,47 @@
|
|
|
1
|
-
"use strict";import{css as
|
|
2
|
-
:host{
|
|
3
|
-
--
|
|
4
|
-
)
|
|
5
|
-
--
|
|
6
|
-
)
|
|
7
|
-
--
|
|
8
|
-
)}
|
|
9
|
-
--
|
|
10
|
-
)}:host
|
|
11
|
-
--
|
|
12
|
-
)
|
|
13
|
-
|
|
1
|
+
"use strict";import{css as o}from"@spectrum-web-components/base";const t=o`
|
|
2
|
+
:host{block-size:calc(var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));box-sizing:border-box;color:var(
|
|
3
|
+
--highcontrast-tabs-color,var(--mod-tabs-color,var(--spectrum-tabs-color))
|
|
4
|
+
);cursor:pointer;outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(
|
|
5
|
+
--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)
|
|
6
|
+
) ease-out;white-space:nowrap;z-index:1}::slotted([slot=icon]){block-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));inline-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));margin-block-start:var(
|
|
7
|
+
--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon)
|
|
8
|
+
)}[name=icon]+#item-label{margin-inline-start:var(
|
|
9
|
+
--mod-tabs-icon-to-text,var(--spectrum-tabs-icon-to-text)
|
|
10
|
+
)}:host:before{block-size:calc(100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)));border:var(
|
|
11
|
+
--mod-tabs-focus-indicator-width,var(--spectrum-tabs-focus-indicator-width)
|
|
12
|
+
) solid transparent;border-radius:var(
|
|
13
|
+
--mod-tabs-focus-indicator-border-radius,var(--spectrum-tabs-focus-indicator-border-radius)
|
|
14
|
+
);box-sizing:border-box;content:"";inline-size:calc(100% + var(
|
|
15
|
+
--mod-tabs-focus-indicator-gap,
|
|
16
|
+
var(--spectrum-tabs-focus-indicator-gap)
|
|
17
|
+
)*2);inset-block-start:calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text))/2);inset-inline-end:calc(var(
|
|
18
|
+
--mod-tabs-focus-indicator-gap,
|
|
19
|
+
var(--spectrum-tabs-focus-indicator-gap)
|
|
20
|
+
)*-1);inset-inline-start:calc(var(
|
|
21
|
+
--mod-tabs-focus-indicator-gap,
|
|
22
|
+
var(--spectrum-tabs-focus-indicator-gap)
|
|
23
|
+
)*-1);pointer-events:none;position:absolute}:host(:hover){color:var(
|
|
24
|
+
--highcontrast-tabs-color-hover,var(--mod-tabs-color-hover,var(--spectrum-tabs-color-hover))
|
|
25
|
+
)}:host([selected]){color:var(
|
|
26
|
+
--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))
|
|
27
|
+
)}:host([disabled]){color:var(
|
|
28
|
+
--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))
|
|
29
|
+
);cursor:default}:host([disabled]) #item-label{cursor:default}:host(:focus),:host.focus-visible{color:var(
|
|
30
|
+
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
31
|
+
)}:host(:focus),:host:focus-visible{color:var(
|
|
32
|
+
--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
|
|
33
|
+
)}:host(:focus):before,:host.focus-visible:before{border-color:var(
|
|
34
|
+
--highcontrast-tabs-focus-indicator-color,var(
|
|
35
|
+
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
36
|
+
)
|
|
37
|
+
)}:host(:focus):before,:host:focus-visible:before{border-color:var(
|
|
38
|
+
--highcontrast-tabs-focus-indicator-color,var(
|
|
39
|
+
--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
|
|
40
|
+
)
|
|
41
|
+
)}#item-label{cursor:pointer;display:inline-block;font-family:var(--mod-tabs-font-family,var(--spectrum-tabs-font-family));font-size:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-size));font-style:var(--mod-tabs-font-style,var(--spectrum-tabs-font-style));font-weight:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-weight));line-height:var(--mod-tabs-line-height,var(--spectrum-tabs-line-height));margin-block-end:var(
|
|
42
|
+
--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text)
|
|
43
|
+
);margin-block-start:var(
|
|
44
|
+
--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text)
|
|
45
|
+
);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{display:none}
|
|
46
|
+
`;export default t;
|
|
14
47
|
//# sourceMappingURL=spectrum-tab.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tab.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 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:host{
|
|
5
|
-
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;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:host{block-size:calc(var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));box-sizing:border-box;color:var(\n--highcontrast-tabs-color,var(--mod-tabs-color,var(--spectrum-tabs-color))\n);cursor:pointer;outline:none;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color var(\n--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)\n) ease-out;white-space:nowrap;z-index:1}::slotted([slot=icon]){block-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));inline-size:var(--mod-tabs-icon-size,var(--spectrum-tabs-icon-size));margin-block-start:var(\n--mod-tabs-top-to-icon,var(--spectrum-tabs-top-to-icon)\n)}[name=icon]+#item-label{margin-inline-start:var(\n--mod-tabs-icon-to-text,var(--spectrum-tabs-icon-to-text)\n)}:host:before{block-size:calc(100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)));border:var(\n--mod-tabs-focus-indicator-width,var(--spectrum-tabs-focus-indicator-width)\n) solid transparent;border-radius:var(\n--mod-tabs-focus-indicator-border-radius,var(--spectrum-tabs-focus-indicator-border-radius)\n);box-sizing:border-box;content:\"\";inline-size:calc(100% + var(\n--mod-tabs-focus-indicator-gap,\nvar(--spectrum-tabs-focus-indicator-gap)\n)*2);inset-block-start:calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text))/2);inset-inline-end:calc(var(\n--mod-tabs-focus-indicator-gap,\nvar(--spectrum-tabs-focus-indicator-gap)\n)*-1);inset-inline-start:calc(var(\n--mod-tabs-focus-indicator-gap,\nvar(--spectrum-tabs-focus-indicator-gap)\n)*-1);pointer-events:none;position:absolute}:host(:hover){color:var(\n--highcontrast-tabs-color-hover,var(--mod-tabs-color-hover,var(--spectrum-tabs-color-hover))\n)}:host([selected]){color:var(\n--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))\n)}:host([disabled]){color:var(\n--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))\n);cursor:default}:host([disabled]) #item-label{cursor:default}:host(:focus),:host.focus-visible{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}:host(:focus),:host:focus-visible{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}:host(:focus):before,:host.focus-visible: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)}:host(:focus):before,:host:focus-visible: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)}#item-label{cursor:pointer;display:inline-block;font-family:var(--mod-tabs-font-family,var(--spectrum-tabs-font-family));font-size:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-size));font-style:var(--mod-tabs-font-style,var(--spectrum-tabs-font-style));font-weight:var(--mod-tabs-font-weight,var(--spectrum-tabs-font-weight));line-height:var(--mod-tabs-line-height,var(--spectrum-tabs-line-height));margin-block-end:var(\n--mod-tabs-bottom-to-text,var(--spectrum-tabs-bottom-to-text)\n);margin-block-start:var(\n--mod-tabs-top-to-text,var(--spectrum-tabs-top-to-text)\n);-webkit-text-decoration:none;text-decoration:none;vertical-align:top}#item-label:empty{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,EA8Cf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|