@spectrum-web-components/tabs 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,316 @@
+## Description
+
+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.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/tabs?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/tabs)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/tabs?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/tabs)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/2JFFTBPXfCZpePD0wk58/src/index.ts)
+
+```
+yarn add @spectrum-web-components/tabs
+```
+
+Import the side effectful registration of `<sp-tabs>`, `<sp-tab>` or `<sp-tab-panel>` via:
+
+```
+import '@spectrum-web-components/tabs/sp-tabs.js';
+import '@spectrum-web-components/tabs/sp-tab.js';
+import '@spectrum-web-components/tabs/sp-tab-panel.js';
+```
+
+When looking to leverage the `Tabs`, `Tab`, or `TabPanel` base class as a type and/or for extension purposes, do so via:
+
+```
+import {
+    Tabs,
+    Tab,
+    TabPanel
+} from '@spectrum-web-components/tabs';
+```
+
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html demo
+<sp-tabs selected="1" size="s">
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html demo
+<sp-tabs selected="1" size="m">
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html demo
+<sp-tabs selected="1" size="l">
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html demo
+<sp-tabs selected="1" size="xl">
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Horizontal Tabs
+
+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.
+
+<sp-tabs selected="compact" auto label="Horizontal Tabs variants">
+<sp-tab value="compact">Compact</sp-tab>
+<sp-tab-panel value="compact">
+
+Compact tabs should never be used without the quiet variation. Please use Quiet + Compact Tabs instead.
+
+```html demo
+<sp-tabs selected="1" compact>
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+<sp-tab value="disabled">Disabled</sp-tab>
+<sp-tab-panel value="disabled">
+
+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.
+
+```html demo
+<sp-tabs selected="2" disabled>
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1 is not selectable</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2 is selected</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3 is not selectable</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4 is not selectable</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+<sp-tab value="icons">Icons</sp-tab>
+<sp-tab-panel value="icons">
+
+```html demo
+<sp-tabs selected="1">
+    <sp-tab label="Tab 1" value="1">
+        <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
+    </sp-tab>
+    <sp-tab label="Tab 2" value="2">
+        <sp-icon-close slot="icon"></sp-icon-close>
+    </sp-tab>
+    <sp-tab label="Tab 3" value="3">
+        <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
+    </sp-tab>
+    <sp-tab label="Tab 4" value="4">
+        <sp-icon-help slot="icon"></sp-icon-help>
+    </sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+<sp-tab value="quiet">Quiet</sp-tab>
+<sp-tab-panel value="quiet">
+
+```html demo
+<sp-tabs selected="1" quiet>
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+<sp-tab value="quiet+compact">Quiet + Compact</sp-tab>
+<sp-tab-panel value="quiet+compact">
+
+```html demo
+<sp-tabs selected="1" quiet compact>
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Vertical Tabs
+
+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.
+
+<sp-tabs selected="compact" auto label="Horizontal Tabs variants">
+<sp-tab value="compact">Compact</sp-tab>
+<sp-tab-panel value="compact">
+
+Compact tabs should never be used without the quiet variation. Please use Quiet + Compact Tabs instead.
+
+```html demo
+<sp-tabs selected="1" compact direction="vertical">
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+<sp-tab value="disabled">Disabled</sp-tab>
+<sp-tab-panel value="disabled">
+
+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.
+
+```html demo
+<sp-tabs selected="2" disabled direction="vertical">
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1 is not selectable</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2 is selected</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3 is not selectable</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4 is not selectable</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+<sp-tab value="icons">Icons</sp-tab>
+<sp-tab-panel value="icons">
+
+```html demo
+<sp-tabs selected="1" direction="vertical">
+    <sp-tab label="Tab 1" value="1">
+        <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
+    </sp-tab>
+    <sp-tab label="Tab 2" value="2">
+        <sp-icon-close slot="icon"></sp-icon-close>
+    </sp-tab>
+    <sp-tab label="Tab 3" value="3">
+        <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
+    </sp-tab>
+    <sp-tab label="Tab 4" value="4">
+        <sp-icon-help slot="icon"></sp-icon-help>
+    </sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+<sp-tab value="quiet">Quiet</sp-tab>
+<sp-tab-panel value="quiet">
+
+```html demo
+<sp-tabs selected="1" quiet direction="vertical">
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+<sp-tab value="quiet+compact">Quiet + Compact</sp-tab>
+<sp-tab-panel value="quiet+compact">
+
+```html demo
+<sp-tabs selected="1" quiet compact direction="vertical">
+    <sp-tab label="Tab 1" value="1"></sp-tab>
+    <sp-tab label="Tab 2" value="2"></sp-tab>
+    <sp-tab label="Tab 3" value="3"></sp-tab>
+    <sp-tab label="Tab 4" value="4"></sp-tab>
+    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+</sp-tabs>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Accessibility
+
+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.

package/package.json

@@ -0,0 +1,106 @@
+{
+    "name": "@spectrum-web-components/tabs",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/tabs"
+    },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/components/tabs",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "./src/index.js",
+    "module": "./src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/Tab.js": {
+            "development": "./src/Tab.dev.js",
+            "default": "./src/Tab.js"
+        },
+        "./src/TabPanel.js": {
+            "development": "./src/TabPanel.dev.js",
+            "default": "./src/TabPanel.js"
+        },
+        "./src/Tabs.js": {
+            "development": "./src/Tabs.dev.js",
+            "default": "./src/Tabs.js"
+        },
+        "./src/TabsOverflow.js": {
+            "development": "./src/TabsOverflow.dev.js",
+            "default": "./src/TabsOverflow.js"
+        },
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./src/tab-panel.css.js": "./src/tab-panel.css.js",
+        "./src/tab.css.js": "./src/tab.css.js",
+        "./src/tabs-overflow.css.js": "./src/tabs-overflow.css.js",
+        "./src/tabs-overrides.css.js": "./src/tabs-overrides.css.js",
+        "./src/tabs-sizes-overrides.css.js": "./src/tabs-sizes-overrides.css.js",
+        "./src/tabs-sizes.css.js": "./src/tabs-sizes.css.js",
+        "./src/tabs.css.js": "./src/tabs.css.js",
+        "./sp-tabs.js": {
+            "development": "./sp-tabs.dev.js",
+            "default": "./sp-tabs.js"
+        },
+        "./sp-tab.js": {
+            "development": "./sp-tab.dev.js",
+            "default": "./sp-tab.js"
+        },
+        "./sp-tab-panel.js": {
+            "development": "./sp-tab-panel.dev.js",
+            "default": "./sp-tab-panel.js"
+        },
+        "./sp-tabs-overflow.js": {
+            "development": "./sp-tabs-overflow.dev.js",
+            "default": "./sp-tabs-overflow.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@lit-labs/observers": "^2.0.2",
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "@spectrum-web-components/icon": "0.0.0-20241209155954",
+        "@spectrum-web-components/icons-ui": "0.0.0-20241209155954",
+        "@spectrum-web-components/reactive-controllers": "0.0.0-20241209155954",
+        "@spectrum-web-components/shared": "0.0.0-20241209155954"
+    },
+    "devDependencies": {
+        "@spectrum-css/tabs": "^6.0.0-s2-foundations.16"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

package/sp-tab-panel.d.ts

@@ -0,0 +1,6 @@
+import { TabPanel } from './src/TabPanel.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-tab-panel': TabPanel;
+    }
+}

package/sp-tab-panel.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { TabPanel } from "./src/TabPanel.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-tab-panel", TabPanel);
+//# sourceMappingURL=sp-tab-panel.dev.js.map

package/sp-tab-panel.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-tab-panel.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { 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"],
+  "mappings": ";AAYA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAE9B,cAAc,gBAAgB,QAAQ;",
+  "names": []
+}

package/sp-tab-panel.js

@@ -0,0 +1,2 @@
+"use strict";import{TabPanel as e}from"./src/TabPanel.js";import{defineElement as a}from"@spectrum-web-components/base/src/define-element.js";a("sp-tab-panel",e);
+//# sourceMappingURL=sp-tab-panel.js.map

package/sp-tab-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-tab-panel.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { 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"],
+  "mappings": "aAYA,OAAS,YAAAA,MAAgB,oBACzB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,eAAgBD,CAAQ",
+  "names": ["TabPanel", "defineElement"]
+}

package/sp-tab.d.ts

@@ -0,0 +1,6 @@
+import { Tab } from './src/Tab.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-tab': Tab;
+    }
+}

package/sp-tab.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { Tab } from "./src/Tab.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-tab", Tab);
+//# sourceMappingURL=sp-tab.dev.js.map

package/sp-tab.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-tab.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { 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"],
+  "mappings": ";AAYA,SAAS,WAAW;AACpB,SAAS,qBAAqB;AAE9B,cAAc,UAAU,GAAG;",
+  "names": []
+}

package/sp-tab.js

@@ -0,0 +1,2 @@
+"use strict";import{Tab as e}from"./src/Tab.js";import{defineElement as a}from"@spectrum-web-components/base/src/define-element.js";a("sp-tab",e);
+//# sourceMappingURL=sp-tab.js.map

package/sp-tab.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-tab.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { 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"],
+  "mappings": "aAYA,OAAS,OAAAA,MAAW,eACpB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,SAAUD,CAAG",
+  "names": ["Tab", "defineElement"]
+}

package/sp-tabs-overflow.d.ts

@@ -0,0 +1,6 @@
+import { TabsOverflow } from './src/TabsOverflow.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-tabs-overflow': TabsOverflow;
+    }
+}

package/sp-tabs-overflow.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { TabsOverflow } from "./src/TabsOverflow.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-tabs-overflow", TabsOverflow);
+//# sourceMappingURL=sp-tabs-overflow.dev.js.map

package/sp-tabs-overflow.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-tabs-overflow.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { 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"],
+  "mappings": ";AAWA,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAE9B,cAAc,oBAAoB,YAAY;",
+  "names": []
+}

package/sp-tabs-overflow.js

@@ -0,0 +1,2 @@
+"use strict";import{TabsOverflow as e}from"./src/TabsOverflow.js";import{defineElement as o}from"@spectrum-web-components/base/src/define-element.js";o("sp-tabs-overflow",e);
+//# sourceMappingURL=sp-tabs-overflow.js.map

package/sp-tabs-overflow.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-tabs-overflow.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { 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"],
+  "mappings": "aAWA,OAAS,gBAAAA,MAAoB,wBAC7B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,mBAAoBD,CAAY",
+  "names": ["TabsOverflow", "defineElement"]
+}

package/sp-tabs.d.ts

@@ -0,0 +1,6 @@
+import { Tabs } from './src/Tabs.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-tabs': Tabs;
+    }
+}

package/sp-tabs.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { Tabs } from "./src/Tabs.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-tabs", Tabs);
+//# sourceMappingURL=sp-tabs.dev.js.map

package/sp-tabs.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-tabs.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { 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"],
+  "mappings": ";AAYA,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,cAAc,WAAW,IAAI;",
+  "names": []
+}

package/sp-tabs.js

@@ -0,0 +1,2 @@
+"use strict";import{Tabs as e}from"./src/Tabs.js";import{defineElement as a}from"@spectrum-web-components/base/src/define-element.js";a("sp-tabs",e);
+//# sourceMappingURL=sp-tabs.js.map

package/sp-tabs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-tabs.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { 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"],
+  "mappings": "aAYA,OAAS,QAAAA,MAAY,gBACrB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,UAAWD,CAAI",
+  "names": ["Tabs", "defineElement"]
+}

package/src/Tab.d.ts

@@ -0,0 +1,28 @@
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+declare const Tab_base: typeof SpectrumElement & {
+    new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
+    prototype: import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
+} & {
+    new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
+    prototype: import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
+};
+/**
+ * @element sp-tab
+ *
+ * @slot - text label of the Tab
+ * @slot icon - The icon that appears on the left of the label
+ */
+export declare class Tab extends Tab_base {
+    static get styles(): CSSResultArray;
+    protected get hasIcon(): boolean;
+    protected get hasLabel(): boolean;
+    disabled: boolean;
+    label: string;
+    selected: boolean;
+    vertical: boolean;
+    value: string;
+    protected render(): TemplateResult;
+    protected firstUpdated(changes: PropertyValues): void;
+    protected updated(changes: PropertyValues): void;
+}
+export {};