@spectrum-web-components/tabs 0.9.0-devmode.0 → 0.9.1

package/README.md

@@ -103,11 +103,36 @@ import {
 </sp-tab-panel>
 </sp-tabs>
 
-### Disabled
+## 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
+```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>
@@ -120,10 +145,37 @@ When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` chi
 </sp-tabs>
 ```
 
-### Vertical
+</sp-tab-panel>
+<sp-tab value="icons">Icons</sp-tab>
+<sp-tab-panel value="icons">
 
-```html
-<sp-tabs selected="1" direction="vertical">
+```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>
@@ -135,12 +187,38 @@ When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` chi
 </sp-tabs>
 ```
 
-## Variants
+</sp-tab-panel>
+<sp-tab value="quiet+compact">Quiet + Compact</sp-tab>
+<sp-tab-panel value="quiet+compact">
 
-### Quiet
+```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>
+```
 
-```html
-<sp-tabs selected="1" quiet>
+</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>
@@ -152,14 +230,43 @@ When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` chi
 </sp-tabs>
 ```
 
-### Compact
+</sp-tab-panel>
+<sp-tab value="disabled">Disabled</sp-tab>
+<sp-tab-panel value="disabled">
 
-```html
-<sp-tabs selected="1" compact>
+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>
@@ -167,32 +274,43 @@ When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` chi
 </sp-tabs>
 ```
 
-## With icons
-
-```html
-<div>
-    <sp-icons-medium></sp-icons-medium>
-    <sp-tabs selected="1" direction="horizontal">
-        <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>
-</div>
+</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/custom-elements.json

@@ -363,6 +363,18 @@
               "description": "Whether to activate a tab on keyboard focus or not.\n\nBy default a tab is activated via a \"click\" interaction. This is specifically intended for when\ntab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\nTo learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\nhttps://w3c.github.io/aria-practices/#kbd_selection_follows_focus",
               "attribute": "auto"
             },
+            {
+              "kind": "field",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "The tab items are displayed closer together.",
+              "attribute": "compact",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "direction",
@@ -395,6 +407,18 @@
               "default": "''",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "The tab list is displayed without a border.",
+              "attribute": "quiet",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "selectionIndicatorStyle",
@@ -592,27 +616,22 @@
           ],
           "attributes": [
             {
+              "name": "auto",
               "type": {
-                "text": "Boolean"
-              },
-              "description": "The tabs border is a lot smaller",
-              "name": "quiet"
-            },
-            {
-              "type": {
-                "text": "Boolean"
+                "text": "boolean"
               },
-              "description": "The collection of tabs take up less space",
-              "name": "compact"
+              "default": "false",
+              "description": "Whether to activate a tab on keyboard focus or not.\n\nBy default a tab is activated via a \"click\" interaction. This is specifically intended for when\ntab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\nTo learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\nhttps://w3c.github.io/aria-practices/#kbd_selection_follows_focus",
+              "fieldName": "auto"
             },
             {
-              "name": "auto",
+              "name": "compact",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether to activate a tab on keyboard focus or not.\n\nBy default a tab is activated via a \"click\" interaction. This is specifically intended for when\ntab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\nTo learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\nhttps://w3c.github.io/aria-practices/#kbd_selection_follows_focus",
-              "fieldName": "auto"
+              "description": "The tab items are displayed closer together.",
+              "fieldName": "compact"
             },
             {
               "name": "direction",
@@ -638,6 +657,15 @@
               "default": "''",
               "fieldName": "label"
             },
+            {
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The tab list is displayed without a border.",
+              "fieldName": "quiet"
+            },
             {
               "name": "selected",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/tabs",
-    "version": "0.9.0-devmode.0+7b0ea531e",
+    "version": "0.9.1",
     "publishConfig": {
         "access": "public"
     },
@@ -75,9 +75,10 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.6.0",
-        "@spectrum-web-components/reactive-controllers": "^0.2.5",
-        "@spectrum-web-components/shared": "^0.15.0-devmode.0+7b0ea531e",
+        "@lit-labs/observers": "^1.0.1",
+        "@spectrum-web-components/base": "^0.7.0",
+        "@spectrum-web-components/reactive-controllers": "^0.3.0",
+        "@spectrum-web-components/shared": "^0.15.0",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
@@ -89,5 +90,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "7b0ea531e9c7225c8964c5429bc5fd005618b80e"
+    "gitHead": "60b2d3b7d9020d72f9ae930568670321a1918e6f"
 }

package/sp-tab-panel.dev.js

@@ -1,3 +1,4 @@
+"use strict";
 import { TabPanel } from "./src/TabPanel.dev.js";
 customElements.define("sp-tab-panel", TabPanel);
 //# sourceMappingURL=sp-tab-panel.dev.js.map

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

@@ -2,6 +2,6 @@
   "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'\n\ncustomElements.define('sp-tab-panel', TabPanel);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-tab-panel': TabPanel;\n    }\n}\n"],
-  "mappings": "AAYA;AAEA,eAAe,OAAO,gBAAgB,QAAQ;",
+  "mappings": ";AAYA,SAAS,gBAAgB;AAEzB,eAAe,OAAO,gBAAgB,QAAQ;",
   "names": []
 }

package/sp-tab-panel.js

@@ -1,3 +1,2 @@
-import { TabPanel } from "./src/TabPanel.js";
-customElements.define("sp-tab-panel", TabPanel);
+"use strict";import{TabPanel as e}from"./src/TabPanel.js";customElements.define("sp-tab-panel",e);
 //# sourceMappingURL=sp-tab-panel.js.map

package/sp-tab-panel.js.map

@@ -2,6 +2,6 @@
   "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';\n\ncustomElements.define('sp-tab-panel', TabPanel);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-tab-panel': TabPanel;\n    }\n}\n"],
-  "mappings": "AAYA;AAEA,eAAe,OAAO,gBAAgB,QAAQ;",
-  "names": []
+  "mappings": "aAYA,OAAS,YAAAA,MAAgB,oBAEzB,eAAe,OAAO,eAAgBA,CAAQ",
+  "names": ["TabPanel"]
 }

package/sp-tab.dev.js

@@ -1,3 +1,4 @@
+"use strict";
 import { Tab } from "./src/Tab.dev.js";
 customElements.define("sp-tab", Tab);
 //# sourceMappingURL=sp-tab.dev.js.map

package/sp-tab.dev.js.map

@@ -2,6 +2,6 @@
   "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'\n\ncustomElements.define('sp-tab', Tab);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-tab': Tab;\n    }\n}\n"],
-  "mappings": "AAYA;AAEA,eAAe,OAAO,UAAU,GAAG;",
+  "mappings": ";AAYA,SAAS,WAAW;AAEpB,eAAe,OAAO,UAAU,GAAG;",
   "names": []
 }

package/sp-tab.js

@@ -1,3 +1,2 @@
-import { Tab } from "./src/Tab.js";
-customElements.define("sp-tab", Tab);
+"use strict";import{Tab as e}from"./src/Tab.js";customElements.define("sp-tab",e);
 //# sourceMappingURL=sp-tab.js.map

package/sp-tab.js.map

@@ -2,6 +2,6 @@
   "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';\n\ncustomElements.define('sp-tab', Tab);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-tab': Tab;\n    }\n}\n"],
-  "mappings": "AAYA;AAEA,eAAe,OAAO,UAAU,GAAG;",
-  "names": []
+  "mappings": "aAYA,OAAS,OAAAA,MAAW,eAEpB,eAAe,OAAO,SAAUA,CAAG",
+  "names": ["Tab"]
 }

package/sp-tabs.dev.js

@@ -1,3 +1,4 @@
+"use strict";
 import { Tabs } from "./src/Tabs.dev.js";
 customElements.define("sp-tabs", Tabs);
 //# sourceMappingURL=sp-tabs.dev.js.map

package/sp-tabs.dev.js.map

@@ -2,6 +2,6 @@
   "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'\n\ncustomElements.define('sp-tabs', Tabs);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-tabs': Tabs;\n    }\n}\n"],
-  "mappings": "AAYA;AAEA,eAAe,OAAO,WAAW,IAAI;",
+  "mappings": ";AAYA,SAAS,YAAY;AAErB,eAAe,OAAO,WAAW,IAAI;",
   "names": []
 }

package/sp-tabs.js

@@ -1,3 +1,2 @@
-import { Tabs } from "./src/Tabs.js";
-customElements.define("sp-tabs", Tabs);
+"use strict";import{Tabs as e}from"./src/Tabs.js";customElements.define("sp-tabs",e);
 //# sourceMappingURL=sp-tabs.js.map

package/sp-tabs.js.map

@@ -2,6 +2,6 @@
   "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';\n\ncustomElements.define('sp-tabs', Tabs);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-tabs': Tabs;\n    }\n}\n"],
-  "mappings": "AAYA;AAEA,eAAe,OAAO,WAAW,IAAI;",
-  "names": []
+  "mappings": "aAYA,OAAS,QAAAA,MAAY,gBAErB,eAAe,OAAO,UAAWA,CAAI",
+  "names": ["Tabs"]
 }

package/src/Tab.dev.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -20,7 +21,9 @@ import {
   ObserveSlotText
 } from "@spectrum-web-components/shared";
 import tabItemStyles from "./tab.css.js";
-const _Tab = class extends FocusVisiblePolyfillMixin(ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), "")) {
+const _Tab = class extends FocusVisiblePolyfillMixin(
+  ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), "")
+) {
   constructor() {
     super(...arguments);
     this.disabled = false;
@@ -39,10 +42,12 @@ const _Tab = class extends FocusVisiblePolyfillMixin(ObserveSlotText(ObserveSlot
     return !!this.label || this.slotHasContent;
   }
   handleContentChange() {
-    this.dispatchEvent(new Event("sp-tab-contentchange", {
-      bubbles: true,
-      composed: true
-    }));
+    this.dispatchEvent(
+      new Event("sp-tab-contentchange", {
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   render() {
     return html`
@@ -61,7 +66,10 @@ const _Tab = class extends FocusVisiblePolyfillMixin(ObserveSlotText(ObserveSlot
     if (!this.hasAttribute("id")) {
       this.id = `sp-tab-${_Tab.instanceCount++}`;
     }
-    this.shadowRoot.addEventListener("slotchange", this.handleContentChange);
+    this.shadowRoot.addEventListener(
+      "slotchange",
+      this.handleContentChange
+    );
   }
   updated(changes) {
     super.updated(changes);
@@ -69,7 +77,10 @@ const _Tab = class extends FocusVisiblePolyfillMixin(ObserveSlotText(ObserveSlot
       this.handleContentChange();
     }
     if (changes.has("selected")) {
-      this.setAttribute("aria-selected", this.selected ? "true" : "false");
+      this.setAttribute(
+        "aria-selected",
+        this.selected ? "true" : "false"
+      );
       this.setAttribute("tabindex", this.selected ? "0" : "-1");
     }
     if (changes.has("disabled")) {

package/src/Tab.dev.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["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 {\n    CSSResultArray,\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 {\n    FocusVisiblePolyfillMixin,\n    ObserveSlotPresence,\n    ObserveSlotText,\n} from '@spectrum-web-components/shared';\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    /**\n     * @private\n     */\n    static instanceCount = 0;\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 handleContentChange(): void {\n        /**\n         * When the content in a tab has changed, JS powered layout related to that content may also need to be changed.\n         */\n        this.dispatchEvent(\n            new Event('sp-tab-contentchange', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            ${this.hasIcon\n                ? html`\n                      <slot name=\"icon\"></slot>\n                  `\n                : html``}\n            <label id=\"item-label\" ?hidden=${!this.hasLabel}>\n                ${this.slotHasContent ? html`` : 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-${Tab.instanceCount++}`;\n        }\n        // @TODO - refactor this as a ResizeObserver up to `sp-tabs` so that it can be more\n        // resiliant to Tab content changes, as well as other content slotted into the \"tablist\".\n        this.shadowRoot.addEventListener(\n            'slotchange',\n            this.handleContentChange\n        );\n    }\n\n    protected override updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (\n            changes.has('label') &&\n            typeof changes.get('label') !== 'undefined'\n        ) {\n            this.handleContentChange();\n        }\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"],
-  "mappings": ";;;;;;;;;;;AAYA;AAAA;AAAA;AAAA;AAOA;AACA;AAAA;AAAA;AAAA;AAAA;AAMA;AAQO,2BAAkB,0BACrB,gBAAgB,oBAAoB,iBAAiB,eAAe,GAAG,EAAE,CAC7E,EAAE;AAAA,EAFK;AAAA;AAqBI,oBAAW;AAGX,iBAAQ;AAGR,oBAAW;AAGX,oBAAW;AAGX,iBAAQ;AAAA;AAAA,aA9BY,SAAyB;AAChD,WAAO,CAAC,aAAa;AAAA,EACzB;AAAA,MAOc,UAAmB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,MAEc,WAAoB;AAC9B,WAAO,CAAC,CAAC,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAiBU,sBAA4B;AAIlC,SAAK,cACD,IAAI,MAAM,wBAAwB;AAAA,MAC9B,SAAS;AAAA,MACT,UAAU;AAAA,IACd,CAAC,CACL;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,UACD;AAAA;AAAA,sBAGA;AAAA,6CAC2B,CAAC,KAAK;AAAA,kBACjC,KAAK,iBAAiB,SAAS,KAAK;AAAA,wBAC9B,KAAK;AAAA;AAAA;AAAA,EAGzB;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,KAAI;AAAA,IAC5B;AAGA,SAAK,WAAW,iBACZ,cACA,KAAK,mBACT;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QACI,QAAQ,IAAI,OAAO,KACnB,OAAO,QAAQ,IAAI,OAAO,MAAM,aAClC;AACE,WAAK,oBAAoB;AAAA,IAC7B;AACA,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,WAAK,aACD,iBACA,KAAK,WAAW,SAAS,OAC7B;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;AAlGO;AAUI,AAVJ,IAUI,gBAAgB;AAWhB;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GACnC,AArBJ,IAqBI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GACpB,AAxBJ,IAwBI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GACnC,AA3BJ,IA2BI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GACnC,AA9BJ,IA8BI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAClC,AAjCJ,IAiCI;",
+  "mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,OAAO,mBAAmB;AAQnB,MAAM,OAAN,cAAkB;AAAA,EACrB,gBAAgB,oBAAoB,iBAAiB,eAAe,GAAG,EAAE;AAC7E,EAAE;AAAA,EAFK;AAAA;AAqBH,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAGf,SAAO,WAAW;AAGlB,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAAA;AAAA,EA9Bf,WAA2B,SAAyB;AAChD,WAAO,CAAC,aAAa;AAAA,EACzB;AAAA,EAOA,IAAc,UAAmB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAc,WAAoB;AAC9B,WAAO,CAAC,CAAC,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAiBU,sBAA4B;AAIlC,SAAK;AAAA,MACD,IAAI,MAAM,wBAAwB;AAAA,QAC9B,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,UACD;AAAA;AAAA,sBAGA;AAAA,6CAC2B,CAAC,KAAK;AAAA,kBACjC,KAAK,iBAAiB,SAAS,KAAK;AAAA,wBAC9B,KAAK;AAAA;AAAA;AAAA,EAGzB;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,KAAI;AAAA,IAC5B;AAGA,SAAK,WAAW;AAAA,MACZ;AAAA,MACA,KAAK;AAAA,IACT;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QACI,QAAQ,IAAI,OAAO,KACnB,OAAO,QAAQ,IAAI,OAAO,MAAM,aAClC;AACE,WAAK,oBAAoB;AAAA,IAC7B;AACA,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;AAlGO,WAAM,MAAN;AAAM,IAUF,gBAAgB;AAWhB;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApBjC,IAqBF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAvBlB,IAwBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA1BjC,IA2BF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA7BjC,IA8BF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAhChC,IAiCF;",
   "names": []
 }