@spectrum-web-components/tabs 1.7.0 → 1.8.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/README.md +61 -53
- package/package.json +7 -7
- package/sp-tab-panel.d.ts +11 -0
- package/sp-tab-panel.dev.js.map +1 -1
- package/sp-tab-panel.js.map +1 -1
- package/sp-tab.d.ts +11 -0
- package/sp-tab.dev.js.map +1 -1
- package/sp-tab.js.map +1 -1
- package/sp-tabs-overflow.d.ts +11 -0
- package/sp-tabs-overflow.dev.js.map +1 -1
- package/sp-tabs-overflow.js.map +1 -1
- package/sp-tabs.d.ts +11 -0
- package/sp-tabs.dev.js.map +1 -1
- package/sp-tabs.js.map +1 -1
- package/src/Tab.d.ts +11 -0
- package/src/Tab.dev.js.map +1 -1
- package/src/Tab.js.map +1 -1
- package/src/TabPanel.d.ts +11 -0
- package/src/TabPanel.dev.js.map +1 -1
- package/src/TabPanel.js.map +1 -1
- package/src/Tabs.d.ts +11 -0
- package/src/Tabs.dev.js.map +1 -1
- package/src/Tabs.js.map +1 -1
- package/src/TabsOverflow.d.ts +11 -0
- package/src/TabsOverflow.dev.js.map +1 -1
- package/src/TabsOverflow.js.map +1 -1
- package/src/index.d.ts +11 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-tab.css.dev.js.map +1 -1
- package/src/spectrum-tab.css.js.map +1 -1
- package/src/spectrum-tabs-sizes.css.dev.js.map +1 -1
- package/src/spectrum-tabs-sizes.css.js.map +1 -1
- package/src/spectrum-tabs.css.dev.js.map +1 -1
- package/src/spectrum-tabs.css.js.map +1 -1
- package/src/tab-overrides.css.dev.js.map +1 -1
- package/src/tab-overrides.css.js.map +1 -1
- package/src/tab-panel.css.dev.js.map +1 -1
- package/src/tab-panel.css.js.map +1 -1
- package/src/tab.css.dev.js.map +1 -1
- package/src/tab.css.js.map +1 -1
- package/src/tabs-overflow.css.dev.js.map +1 -1
- package/src/tabs-overflow.css.js.map +1 -1
- package/src/tabs-overrides.css.dev.js.map +1 -1
- package/src/tabs-overrides.css.js.map +1 -1
- package/src/tabs-sizes-overrides.css.dev.js.map +1 -1
- package/src/tabs-sizes-overrides.css.js.map +1 -1
- package/src/tabs-sizes.css.dev.js.map +1 -1
- package/src/tabs-sizes.css.js.map +1 -1
- package/src/tabs.css.dev.js.map +1 -1
- package/src/tabs.css.js.map +1 -1
package/README.md
CHANGED
|
@@ -1,20 +1,22 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Overview
|
|
2
2
|
|
|
3
3
|
The `<sp-tabs>` displays a list of `<sp-tab>` element children as `role="tablist"`. An `<sp-tab>` element is associated with a sibling `<sp-tab-panel>` element via their `value` attribute. When an `<sp-tab>` element is `selected`, the associated `<sp-tab-panel>` will also be selected, showing that panel and hiding the others.
|
|
4
4
|
|
|
5
|
+
[View the design documentation for this component.](https://spectrum.adobe.com/page/tabs/)
|
|
6
|
+
|
|
5
7
|
### Usage
|
|
6
8
|
|
|
7
9
|
[](https://www.npmjs.com/package/@spectrum-web-components/tabs)
|
|
8
10
|
[](https://bundlephobia.com/result?p=@spectrum-web-components/tabs)
|
|
9
11
|
[](https://stackblitz.com/edit/vitejs-vite-3smxuwr2)
|
|
10
12
|
|
|
11
|
-
```
|
|
13
|
+
```zsh
|
|
12
14
|
yarn add @spectrum-web-components/tabs
|
|
13
15
|
```
|
|
14
16
|
|
|
15
17
|
Import the side effectful registration of `<sp-tabs>`, `<sp-tab>` or `<sp-tab-panel>` via:
|
|
16
18
|
|
|
17
|
-
```
|
|
19
|
+
```ts
|
|
18
20
|
import '@spectrum-web-components/tabs/sp-tabs.js';
|
|
19
21
|
import '@spectrum-web-components/tabs/sp-tab.js';
|
|
20
22
|
import '@spectrum-web-components/tabs/sp-tab-panel.js';
|
|
@@ -22,15 +24,36 @@ import '@spectrum-web-components/tabs/sp-tab-panel.js';
|
|
|
22
24
|
|
|
23
25
|
When looking to leverage the `Tabs`, `Tab`, or `TabPanel` base class as a type and/or for extension purposes, do so via:
|
|
24
26
|
|
|
27
|
+
```ts
|
|
28
|
+
import { Tabs, Tab, TabPanel } from '@spectrum-web-components/tabs';
|
|
25
29
|
```
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
|
|
31
|
+
### Anatomy
|
|
32
|
+
|
|
33
|
+
Tabs are created from the following parts:
|
|
34
|
+
|
|
35
|
+
- **Tabs:** The container component (`<sp-tabs>`) that manages the tab list and handles selection logic.
|
|
36
|
+
- **Tab item:** An individual tab (`<sp-tab>`) that users can select to view different content panels.
|
|
37
|
+
- **Tab view:** The content panel (`<sp-tab-panel>`) associated with a tab, shown when its corresponding tab is selected.
|
|
38
|
+
- **Divider:** A visual separator between tab items, used in some variants for clarity.
|
|
39
|
+
- **Selection indicator:** A visual highlight (such as an underline or bar) that shows which tab is currently selected.
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<sp-tabs selected="1" size="m">
|
|
43
|
+
<sp-tab label="Tab 1" value="1"></sp-tab>
|
|
44
|
+
<sp-tab label="Tab 2" value="2"></sp-tab>
|
|
45
|
+
<sp-tab label="Tab 3" value="3"></sp-tab>
|
|
46
|
+
<sp-tab label="Tab 4" value="4"></sp-tab>
|
|
47
|
+
<sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
|
|
48
|
+
<sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
|
|
49
|
+
<sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
|
|
50
|
+
<sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
|
|
51
|
+
</sp-tabs>
|
|
31
52
|
```
|
|
32
53
|
|
|
33
|
-
|
|
54
|
+
### Options
|
|
55
|
+
|
|
56
|
+
#### Sizes
|
|
34
57
|
|
|
35
58
|
<sp-tabs selected="m" auto label="Size Attribute Options">
|
|
36
59
|
<sp-tab value="s">Small</sp-tab>
|
|
@@ -103,9 +126,9 @@ import {
|
|
|
103
126
|
</sp-tab-panel>
|
|
104
127
|
</sp-tabs>
|
|
105
128
|
|
|
106
|
-
|
|
129
|
+
#### Variants
|
|
107
130
|
|
|
108
|
-
An `<sp-tabs>` element will display horizontally by default. It can be modified with
|
|
131
|
+
An `<sp-tabs>` element will display horizontally by default. It can be modified with attributes like `compact`, and `quiet`, or with content like icons, etc.
|
|
109
132
|
|
|
110
133
|
<sp-tabs selected="compact" auto label="Horizontal Tabs variants">
|
|
111
134
|
<sp-tab value="compact">Compact</sp-tab>
|
|
@@ -126,25 +149,6 @@ Compact tabs should never be used without the quiet variation. Please use Quiet
|
|
|
126
149
|
</sp-tabs>
|
|
127
150
|
```
|
|
128
151
|
|
|
129
|
-
</sp-tab-panel>
|
|
130
|
-
<sp-tab value="disabled">Disabled</sp-tab>
|
|
131
|
-
<sp-tab-panel value="disabled">
|
|
132
|
-
|
|
133
|
-
When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` children will be disabled as well, preventing a visitor from changing the selected tab. By default, `<sp-tab-panel>` children will not be addressed and the available content of the currently selected tab will be fully visible.
|
|
134
|
-
|
|
135
|
-
```html demo
|
|
136
|
-
<sp-tabs selected="2" disabled>
|
|
137
|
-
<sp-tab label="Tab 1" value="1"></sp-tab>
|
|
138
|
-
<sp-tab label="Tab 2" value="2"></sp-tab>
|
|
139
|
-
<sp-tab label="Tab 3" value="3"></sp-tab>
|
|
140
|
-
<sp-tab label="Tab 4" value="4"></sp-tab>
|
|
141
|
-
<sp-tab-panel value="1">Content for Tab 1 is not selectable</sp-tab-panel>
|
|
142
|
-
<sp-tab-panel value="2">Content for Tab 2 is selected</sp-tab-panel>
|
|
143
|
-
<sp-tab-panel value="3">Content for Tab 3 is not selectable</sp-tab-panel>
|
|
144
|
-
<sp-tab-panel value="4">Content for Tab 4 is not selectable</sp-tab-panel>
|
|
145
|
-
</sp-tabs>
|
|
146
|
-
```
|
|
147
|
-
|
|
148
152
|
</sp-tab-panel>
|
|
149
153
|
<sp-tab value="icons">Icons</sp-tab>
|
|
150
154
|
<sp-tab-panel value="icons">
|
|
@@ -207,9 +211,7 @@ When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` chi
|
|
|
207
211
|
</sp-tab-panel>
|
|
208
212
|
</sp-tabs>
|
|
209
213
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
An `<sp-tabs>` element will display horizontally by default. It can be modified with states like `compact`, `disabled`, and `quiet`, or with content like icons, etc.
|
|
214
|
+
An `<sp-tabs>` element will display horizontally by default. It can be modified with states like `compact`, `disabled`, and `quiet`, or with content like icons, etc. Vertical tabs should be used when horizontal space is more generous and when the list of sections is greater than can be presented to the user in a horizontal format. Vertical tabs are enabled by setting the `direction` attribute to `vertical` on `sp-tabs`.
|
|
213
215
|
|
|
214
216
|
<sp-tabs selected="compact" auto label="Horizontal Tabs variants">
|
|
215
217
|
<sp-tab value="compact">Compact</sp-tab>
|
|
@@ -230,25 +232,6 @@ Compact tabs should never be used without the quiet variation. Please use Quiet
|
|
|
230
232
|
</sp-tabs>
|
|
231
233
|
```
|
|
232
234
|
|
|
233
|
-
</sp-tab-panel>
|
|
234
|
-
<sp-tab value="disabled">Disabled</sp-tab>
|
|
235
|
-
<sp-tab-panel value="disabled">
|
|
236
|
-
|
|
237
|
-
When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` children will be disabled as well, preventing a visitor from changing the selected tab. By default, `<sp-tab-panel>` children will not be addressed and the available content of the currently selected tab will be fully visible.
|
|
238
|
-
|
|
239
|
-
```html demo
|
|
240
|
-
<sp-tabs selected="2" disabled direction="vertical">
|
|
241
|
-
<sp-tab label="Tab 1" value="1"></sp-tab>
|
|
242
|
-
<sp-tab label="Tab 2" value="2"></sp-tab>
|
|
243
|
-
<sp-tab label="Tab 3" value="3"></sp-tab>
|
|
244
|
-
<sp-tab label="Tab 4" value="4"></sp-tab>
|
|
245
|
-
<sp-tab-panel value="1">Content for Tab 1 is not selectable</sp-tab-panel>
|
|
246
|
-
<sp-tab-panel value="2">Content for Tab 2 is selected</sp-tab-panel>
|
|
247
|
-
<sp-tab-panel value="3">Content for Tab 3 is not selectable</sp-tab-panel>
|
|
248
|
-
<sp-tab-panel value="4">Content for Tab 4 is not selectable</sp-tab-panel>
|
|
249
|
-
</sp-tabs>
|
|
250
|
-
```
|
|
251
|
-
|
|
252
235
|
</sp-tab-panel>
|
|
253
236
|
<sp-tab value="icons">Icons</sp-tab>
|
|
254
237
|
<sp-tab-panel value="icons">
|
|
@@ -311,6 +294,31 @@ When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` chi
|
|
|
311
294
|
</sp-tab-panel>
|
|
312
295
|
</sp-tabs>
|
|
313
296
|
|
|
314
|
-
|
|
297
|
+
### States
|
|
298
|
+
|
|
299
|
+
When an `<sp-tabs>` element is given the `disabled` attribute, its `<sp-tab>` children will be disabled as well, preventing a visitor from changing the selected tab. By default, `<sp-tab-panel>` children will not be addressed and the available content of the currently selected tab will be fully visible.
|
|
300
|
+
|
|
301
|
+
```html demo
|
|
302
|
+
<sp-tabs selected="2" disabled>
|
|
303
|
+
<sp-tab label="Tab 1" value="1"></sp-tab>
|
|
304
|
+
<sp-tab label="Tab 2" value="2"></sp-tab>
|
|
305
|
+
<sp-tab label="Tab 3" value="3"></sp-tab>
|
|
306
|
+
<sp-tab label="Tab 4" value="4"></sp-tab>
|
|
307
|
+
<sp-tab-panel value="1">Content for Tab 1 is not selectable</sp-tab-panel>
|
|
308
|
+
<sp-tab-panel value="2">Content for Tab 2 is selected</sp-tab-panel>
|
|
309
|
+
<sp-tab-panel value="3">Content for Tab 3 is not selectable</sp-tab-panel>
|
|
310
|
+
<sp-tab-panel value="4">Content for Tab 4 is not selectable</sp-tab-panel>
|
|
311
|
+
</sp-tabs>
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
### Accessibility
|
|
315
315
|
|
|
316
316
|
When an `<sp-tabs>` has a `selected` value, the `<sp-tab>` child of that `value` will be given `[tabindex="0"]` and will receive initial focus when tabbing into the `<sp-tabs>` element. When no `selected` value is present, the first `<sp-tab>` child will be treated in this way. When focus is currently within the `<sp-tabs>` element, the left and right arrows will move that focus back and forth through the available `<sp-tab>` children.
|
|
317
|
+
|
|
318
|
+
#### Include a label
|
|
319
|
+
|
|
320
|
+
Tab items should have a label for accessibility. If a label isn’t present, it must include an icon and becomes an icon-only tab item.
|
|
321
|
+
|
|
322
|
+
#### Use icons only when necessary
|
|
323
|
+
|
|
324
|
+
Icons should only be used in a tab item when absolutely necessary: when adding essential value and having a strong association with the label. If the tab item does not have a visible label, it must still have a tooltip to disclose the label.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tabs",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -94,12 +94,12 @@
|
|
|
94
94
|
],
|
|
95
95
|
"dependencies": {
|
|
96
96
|
"@lit-labs/observers": "^2.0.2",
|
|
97
|
-
"@spectrum-web-components/action-button": "1.
|
|
98
|
-
"@spectrum-web-components/base": "1.
|
|
99
|
-
"@spectrum-web-components/icon": "1.
|
|
100
|
-
"@spectrum-web-components/icons-ui": "1.
|
|
101
|
-
"@spectrum-web-components/reactive-controllers": "1.
|
|
102
|
-
"@spectrum-web-components/shared": "1.
|
|
97
|
+
"@spectrum-web-components/action-button": "1.8.0",
|
|
98
|
+
"@spectrum-web-components/base": "1.8.0",
|
|
99
|
+
"@spectrum-web-components/icon": "1.8.0",
|
|
100
|
+
"@spectrum-web-components/icons-ui": "1.8.0",
|
|
101
|
+
"@spectrum-web-components/reactive-controllers": "1.8.0",
|
|
102
|
+
"@spectrum-web-components/shared": "1.8.0"
|
|
103
103
|
},
|
|
104
104
|
"types": "./src/index.d.ts",
|
|
105
105
|
"customElements": "custom-elements.json",
|
package/sp-tab-panel.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { TabPanel } from './src/TabPanel.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
package/sp-tab-panel.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tab-panel.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { TabPanel } from './src/TabPanel.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tab-panel', TabPanel);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tab-panel': TabPanel;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAYA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAE9B,cAAc,gBAAgB,QAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-tab-panel.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tab-panel.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { TabPanel } from './src/TabPanel.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tab-panel', TabPanel);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tab-panel': TabPanel;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAYA,OAAS,YAAAA,MAAgB,oBACzB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,eAAgBD,CAAQ",
|
|
6
6
|
"names": ["TabPanel", "defineElement"]
|
|
7
7
|
}
|
package/sp-tab.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { Tab } from './src/Tab.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
package/sp-tab.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tab.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Tab } from './src/Tab.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tab', Tab);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tab': Tab;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAYA,SAAS,WAAW;AACpB,SAAS,qBAAqB;AAE9B,cAAc,UAAU,GAAG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-tab.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tab.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Tab } from './src/Tab.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tab', Tab);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tab': Tab;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAYA,OAAS,OAAAA,MAAW,eACpB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,SAAUD,CAAG",
|
|
6
6
|
"names": ["Tab", "defineElement"]
|
|
7
7
|
}
|
package/sp-tabs-overflow.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { TabsOverflow } from './src/TabsOverflow.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tabs-overflow.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { TabsOverflow } from './src/TabsOverflow.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tabs-overflow', TabsOverflow);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tabs-overflow': TabsOverflow;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAE9B,cAAc,oBAAoB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-tabs-overflow.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tabs-overflow.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { TabsOverflow } from './src/TabsOverflow.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tabs-overflow', TabsOverflow);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tabs-overflow': TabsOverflow;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAWA,OAAS,gBAAAA,MAAoB,wBAC7B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,mBAAoBD,CAAY",
|
|
6
6
|
"names": ["TabsOverflow", "defineElement"]
|
|
7
7
|
}
|
package/sp-tabs.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { Tabs } from './src/Tabs.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
package/sp-tabs.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tabs.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Tabs } from './src/Tabs.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tabs', Tabs);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tabs': Tabs;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAYA,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,cAAc,WAAW,IAAI;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-tabs.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tabs.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Tabs } from './src/Tabs.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tabs', Tabs);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tabs': Tabs;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAYA,OAAS,QAAAA,MAAY,gBACrB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,UAAWD,CAAI",
|
|
6
6
|
"names": ["Tabs", "defineElement"]
|
|
7
7
|
}
|
package/src/Tab.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
declare const Tab_base: typeof SpectrumElement & {
|
|
3
14
|
new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
|
package/src/Tab.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tab.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport tabItemStyles from './tab.css.js';\n\n/**\n * @element sp-tab\n *\n * @slot - text label of the Tab\n * @slot icon - The icon that appears on the left of the label\n */\nexport class Tab extends FocusVisiblePolyfillMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), '')\n) {\n public static override get styles(): CSSResultArray {\n return [tabItemStyles];\n }\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected get hasLabel(): boolean {\n return !!this.label || this.slotHasContent;\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected override render(): TemplateResult {\n return html`\n ${this.hasIcon\n ? html`\n <slot name=\"icon\"></slot>\n `\n : nothing}\n <label id=\"item-label\" ?hidden=${!this.hasLabel}>\n ${this.slotHasContent ? nothing : this.label}\n <slot>${this.label}</slot>\n </label>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'tab');\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-${randomID()}`;\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selected')) {\n this.setAttribute(\n 'aria-selected',\n this.selected ? 'true' : 'false'\n );\n this.setAttribute('tabindex', this.selected ? '0' : '-1');\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAEzB,OAAO,mBAAmB;AAQnB,aAAM,YAAY;AAAA,EACrB,gBAAgB,oBAAoB,iBAAiB,eAAe,GAAG,EAAE;AAC7E,EAAE;AAAA,EAFK;AAAA;AAgBH,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAGf,SAAO,WAAW;AAGlB,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAAA;AAAA,EAzBf,WAA2B,SAAyB;AAChD,WAAO,CAAC,aAAa;AAAA,EACzB;AAAA,EAEA,IAAc,UAAmB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAc,WAAoB;AAC9B,WAAO,CAAC,CAAC,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAiBmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,UACD;AAAA;AAAA,sBAGA,OAAO;AAAA,6CACoB,CAAC,KAAK,QAAQ;AAAA,kBACzC,KAAK,iBAAiB,UAAU,KAAK,KAAK;AAAA,wBACpC,KAAK,KAAK;AAAA;AAAA;AAAA,EAG9B;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,SAAK,aAAa,QAAQ,KAAK;AAC/B,QAAI,CAAC,KAAK,aAAa,IAAI,GAAG;AAC1B,WAAK,KAAK,UAAU,SAAS,CAAC;AAAA,IAClC;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,WAAK;AAAA,QACD;AAAA,QACA,KAAK,WAAW,SAAS;AAAA,MAC7B;AACA,WAAK,aAAa,YAAY,KAAK,WAAW,MAAM,IAAI;AAAA,IAC5D;AACA,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,UAAI,KAAK,UAAU;AACf,aAAK,aAAa,iBAAiB,MAAM;AAAA,MAC7C,OAAO;AACH,aAAK,gBAAgB,eAAe;AAAA,MACxC;AAAA,IACJ;AAAA,EACJ;AACJ;AArDW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfjC,IAgBF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAlBlB,IAmBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArBjC,IAsBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAxBjC,IAyBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3BhC,IA4BF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Tab.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tab.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport tabItemStyles from './tab.css.js';\n\n/**\n * @element sp-tab\n *\n * @slot - text label of the Tab\n * @slot icon - The icon that appears on the left of the label\n */\nexport class Tab extends FocusVisiblePolyfillMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), '')\n) {\n public static override get styles(): CSSResultArray {\n return [tabItemStyles];\n }\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected get hasLabel(): boolean {\n return !!this.label || this.slotHasContent;\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected override render(): TemplateResult {\n return html`\n ${this.hasIcon\n ? html`\n <slot name=\"icon\"></slot>\n `\n : nothing}\n <label id=\"item-label\" ?hidden=${!this.hasLabel}>\n ${this.slotHasContent ? nothing : this.label}\n <slot>${this.label}</slot>\n </label>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'tab');\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-${randomID()}`;\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selected')) {\n this.setAttribute(\n 'aria-selected',\n this.selected ? 'true' : 'false'\n );\n this.setAttribute('tabindex', this.selected ? '0' : '-1');\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"],
|
|
5
5
|
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,6BAAAC,MAAiC,uDAC1C,OAAS,uBAAAC,MAA2B,+DACpC,OAAS,mBAAAC,MAAuB,2DAChC,OAAS,YAAAC,MAAgB,mDAEzB,OAAOC,MAAmB,eAQnB,aAAM,YAAYJ,EACrBE,EAAgBD,EAAoBH,EAAiB,eAAe,EAAG,EAAE,CAC7E,CAAE,CAFK,kCAgBH,KAAO,SAAW,GAGlB,KAAO,MAAQ,GAGf,KAAO,SAAW,GAGlB,KAAO,SAAW,GAGlB,KAAO,MAAQ,GAzBf,WAA2B,QAAyB,CAChD,MAAO,CAACM,CAAa,CACzB,CAEA,IAAc,SAAmB,CAC7B,OAAO,KAAK,oBAChB,CAEA,IAAc,UAAoB,CAC9B,MAAO,CAAC,CAAC,KAAK,OAAS,KAAK,cAChC,CAiBmB,QAAyB,CACxC,OAAOR;AAAA,cACD,KAAK,QACDA;AAAA;AAAA,oBAGAC,CAAO;AAAA,6CACoB,CAAC,KAAK,QAAQ;AAAA,kBACzC,KAAK,eAAiBA,EAAU,KAAK,KAAK;AAAA,wBACpC,KAAK,KAAK;AAAA;AAAA,SAG9B,CAEmB,aAAaQ,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,aAAa,OAAQ,KAAK,EAC1B,KAAK,aAAa,IAAI,IACvB,KAAK,GAAK,UAAUF,EAAS,CAAC,GAEtC,CAEmB,QAAQE,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjBA,EAAQ,IAAI,UAAU,IACtB,KAAK,aACD,gBACA,KAAK,SAAW,OAAS,OAC7B,EACA,KAAK,aAAa,WAAY,KAAK,SAAW,IAAM,IAAI,GAExDA,EAAQ,IAAI,UAAU,IAClB,KAAK,SACL,KAAK,aAAa,gBAAiB,MAAM,EAEzC,KAAK,gBAAgB,eAAe,EAGhD,CACJ,CArDWC,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAfjC,IAgBF,wBAGAO,EAAA,CADNP,EAAS,CAAE,QAAS,EAAK,CAAC,GAlBlB,IAmBF,qBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GArBjC,IAsBF,wBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAxBjC,IAyBF,wBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA3BhC,IA4BF",
|
|
6
6
|
"names": ["html", "nothing", "SpectrumElement", "property", "FocusVisiblePolyfillMixin", "ObserveSlotPresence", "ObserveSlotText", "randomID", "tabItemStyles", "changes", "__decorateClass"]
|
|
7
7
|
}
|
package/src/TabPanel.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
/**
|
|
3
14
|
* @element sp-tab-panel
|
package/src/TabPanel.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TabPanel.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport panelStyles from './tab-panel.css.js';\n\n/**\n * @element sp-tab-panel\n *\n * @slot - content of the Tab Panel\n */\nexport class TabPanel extends SpectrumElement {\n static override styles = [panelStyles];\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected handleFocusin(): void {\n this.removeAttribute('tabindex');\n }\n\n protected handleFocusout(): void {\n this.tabIndex = this.selected ? 0 : -1;\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ></slot>\n `;\n }\n\n protected override firstUpdated(): void {\n this.slot = 'tab-panel';\n this.setAttribute('role', 'tabpanel');\n this.tabIndex = 0;\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-panel-${randomID()}`;\n }\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n if (changes.has('selected')) {\n if (this.selected) {\n this.removeAttribute('aria-hidden');\n this.tabIndex = 0;\n } else {\n this.setAttribute('aria-hidden', 'true');\n this.tabIndex = -1;\n }\n }\n }\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;AAYA;AAAA,EACI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAEzB,OAAO,iBAAiB;AAOjB,aAAM,iBAAiB,gBAAgB;AAAA,EAAvC;AAAA;AAIH,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAAA;AAAA,EAEL,gBAAsB;AAC5B,SAAK,gBAAgB,UAAU;AAAA,EACnC;AAAA,EAEU,iBAAuB;AAC7B,SAAK,WAAW,KAAK,WAAW,IAAI;AAAA,EACxC;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA,2BAEY,KAAK,aAAa;AAAA,4BACjB,KAAK,cAAc;AAAA;AAAA;AAAA,EAG3C;AAAA,EAEmB,eAAqB;AACpC,SAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,UAAU;AACpC,SAAK,WAAW;AAChB,QAAI,CAAC,KAAK,aAAa,IAAI,GAAG;AAC1B,WAAK,KAAK,gBAAgB,SAAS,CAAC;AAAA,IACxC;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAAqC;AAC5D,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,UAAI,KAAK,UAAU;AACf,aAAK,gBAAgB,aAAa;AAClC,aAAK,WAAW;AAAA,MACpB,OAAO;AACH,aAAK,aAAa,eAAe,MAAM;AACvC,aAAK,WAAW;AAAA,MACpB;AAAA,IACJ;AAAA,EACJ;AACJ;AA9Ca,SACO,SAAS,CAAC,WAAW;AAG9B;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHjC,SAIF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANhC,SAOF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/TabPanel.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TabPanel.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport panelStyles from './tab-panel.css.js';\n\n/**\n * @element sp-tab-panel\n *\n * @slot - content of the Tab Panel\n */\nexport class TabPanel extends SpectrumElement {\n static override styles = [panelStyles];\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected handleFocusin(): void {\n this.removeAttribute('tabindex');\n }\n\n protected handleFocusout(): void {\n this.tabIndex = this.selected ? 0 : -1;\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ></slot>\n `;\n }\n\n protected override firstUpdated(): void {\n this.slot = 'tab-panel';\n this.setAttribute('role', 'tabpanel');\n this.tabIndex = 0;\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-panel-${randomID()}`;\n }\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n if (changes.has('selected')) {\n if (this.selected) {\n this.removeAttribute('aria-hidden');\n this.tabIndex = 0;\n } else {\n this.setAttribute('aria-hidden', 'true');\n this.tabIndex = -1;\n }\n }\n }\n}\n"],
|
|
5
5
|
"mappings": "qNAYA,OACI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,YAAAC,MAAgB,mDAEzB,OAAOC,MAAiB,qBAOjB,aAAM,iBAAiBH,CAAgB,CAAvC,kCAIH,KAAO,SAAW,GAGlB,KAAO,MAAQ,GAEL,eAAsB,CAC5B,KAAK,gBAAgB,UAAU,CACnC,CAEU,gBAAuB,CAC7B,KAAK,SAAW,KAAK,SAAW,EAAI,EACxC,CAEmB,QAAyB,CACxC,OAAOD;AAAA;AAAA,2BAEY,KAAK,aAAa;AAAA,4BACjB,KAAK,cAAc;AAAA;AAAA,SAG3C,CAEmB,cAAqB,CACpC,KAAK,KAAO,YACZ,KAAK,aAAa,OAAQ,UAAU,EACpC,KAAK,SAAW,EACX,KAAK,aAAa,IAAI,IACvB,KAAK,GAAK,gBAAgBG,EAAS,CAAC,GAE5C,CAEmB,QAAQE,EAAqC,CACxDA,EAAQ,IAAI,UAAU,IAClB,KAAK,UACL,KAAK,gBAAgB,aAAa,EAClC,KAAK,SAAW,IAEhB,KAAK,aAAa,cAAe,MAAM,EACvC,KAAK,SAAW,IAG5B,CACJ,CA9Ca,SACO,OAAS,CAACD,CAAW,EAG9BE,EAAA,CADNJ,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAHjC,SAIF,wBAGAI,EAAA,CADNJ,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GANhC,SAOF",
|
|
6
6
|
"names": ["html", "SpectrumElement", "property", "randomID", "panelStyles", "changes", "__decorateClass"]
|
|
7
7
|
}
|
package/src/Tabs.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { CSSResult, CSSResultArray, PropertyValueMap, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
import { ResizeController } from '@lit-labs/observers/resize-controller.js';
|
|
3
14
|
import { Tab } from './Tab.js';
|