@spectrum-web-components/tabs 0.9.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",
+    "version": "0.9.1",
     "publishConfig": {
         "access": "public"
     },
@@ -75,6 +75,7 @@
         "lit-html"
     ],
     "dependencies": {
+        "@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",
@@ -89,5 +90,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "05c81318844160db3f8156144106e643507fef97"
+    "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,2 +1,2 @@
-import{TabPanel as e}from"./src/TabPanel.js";customElements.define("sp-tab-panel",e);
+"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,6CAEA,eAAe,OAAO,eAAgB,CAAQ",
-  "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,2 +1,2 @@
-import{Tab as e}from"./src/Tab.js";customElements.define("sp-tab",e);
+"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,mCAEA,eAAe,OAAO,SAAU,CAAG",
-  "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,2 +1,2 @@
-import{Tabs as e}from"./src/Tabs.js";customElements.define("sp-tabs",e);
+"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,qCAEA,eAAe,OAAO,UAAW,CAAI",
-  "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": []
 }

package/src/Tab.js

@@ -1,10 +1,10 @@
-var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(u,e,o,i)=>{for(var t=i>1?void 0:i?h(e,o):e,a=u.length-1,d;a>=0;a--)(d=u[a])&&(t=(i?d(e,o,t):d(t))||t);return i&&t&&p(e,o,t),t};import{html as r,SpectrumElement as c}from"@spectrum-web-components/base";import{property as l}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as b,ObserveSlotPresence as f,ObserveSlotText as m}from"@spectrum-web-components/shared";import v from"./tab.css.js";const n=class extends b(m(f(c,'[slot="icon"]'),"")){constructor(){super(...arguments);this.disabled=!1;this.label="";this.selected=!1;this.vertical=!1;this.value=""}static get styles(){return[v]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}handleContentChange(){this.dispatchEvent(new Event("sp-tab-contentchange",{bubbles:!0,composed:!0}))}render(){return r`
-            ${this.hasIcon?r`
+"use strict";var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(u,l,e,r)=>{for(var t=r>1?void 0:r?h(l,e):l,a=u.length-1,d;a>=0;a--)(d=u[a])&&(t=(r?d(l,e,t):d(t))||t);return r&&t&&p(l,e,t),t};import{html as o,SpectrumElement as c}from"@spectrum-web-components/base";import{property as i}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as b,ObserveSlotPresence as f,ObserveSlotText as m}from"@spectrum-web-components/shared";import v from"./tab.css.js";const n=class extends b(m(f(c,'[slot="icon"]'),"")){constructor(){super(...arguments);this.disabled=!1;this.label="";this.selected=!1;this.vertical=!1;this.value=""}static get styles(){return[v]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}handleContentChange(){this.dispatchEvent(new Event("sp-tab-contentchange",{bubbles:!0,composed:!0}))}render(){return o`
+            ${this.hasIcon?o`
                       <slot name="icon"></slot>
-                  `:r``}
+                  `:o``}
             <label id="item-label" ?hidden=${!this.hasLabel}>
-                ${this.slotHasContent?r``:this.label}
+                ${this.slotHasContent?o``:this.label}
                 <slot>${this.label}</slot>
             </label>
-        `}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id=`sp-tab-${n.instanceCount++}`),this.shadowRoot.addEventListener("slotchange",this.handleContentChange)}updated(e){super.updated(e),e.has("label")&&typeof e.get("label")!="undefined"&&this.handleContentChange(),e.has("selected")&&(this.setAttribute("aria-selected",this.selected?"true":"false"),this.setAttribute("tabindex",this.selected?"0":"-1")),e.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}};export let Tab=n;Tab.instanceCount=0,s([l({type:Boolean,reflect:!0})],Tab.prototype,"disabled",2),s([l({reflect:!0})],Tab.prototype,"label",2),s([l({type:Boolean,reflect:!0})],Tab.prototype,"selected",2),s([l({type:Boolean,reflect:!0})],Tab.prototype,"vertical",2),s([l({type:String,reflect:!0})],Tab.prototype,"value",2);
+        `}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id=`sp-tab-${n.instanceCount++}`),this.shadowRoot.addEventListener("slotchange",this.handleContentChange)}updated(e){super.updated(e),e.has("label")&&typeof e.get("label")!="undefined"&&this.handleContentChange(),e.has("selected")&&(this.setAttribute("aria-selected",this.selected?"true":"false"),this.setAttribute("tabindex",this.selected?"0":"-1")),e.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}};export let Tab=n;Tab.instanceCount=0,s([i({type:Boolean,reflect:!0})],Tab.prototype,"disabled",2),s([i({reflect:!0})],Tab.prototype,"label",2),s([i({type:Boolean,reflect:!0})],Tab.prototype,"selected",2),s([i({type:Boolean,reflect:!0})],Tab.prototype,"vertical",2),s([i({type:String,reflect:!0})],Tab.prototype,"value",2);
 //# sourceMappingURL=Tab.js.map

package/src/Tab.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": "wMAYA,0EAOA,2EACA,0HAMA,4BAQO,qBAAkB,GACrB,EAAgB,EAAoB,EAAiB,eAAe,EAAG,EAAE,CAC7E,CAAE,CAFK,kCAqBI,cAAW,GAGX,WAAQ,GAGR,cAAW,GAGX,cAAW,GAGX,WAAQ,aA9BY,SAAyB,CAChD,MAAO,CAAC,CAAa,CACzB,IAOc,UAAmB,CAC7B,MAAO,MAAK,oBAChB,IAEc,WAAoB,CAC9B,MAAO,CAAC,CAAC,KAAK,OAAS,KAAK,cAChC,CAiBU,qBAA4B,CAIlC,KAAK,cACD,GAAI,OAAM,uBAAwB,CAC9B,QAAS,GACT,SAAU,EACd,CAAC,CACL,CACJ,CAEmB,QAAyB,CACxC,MAAO;AAAA,cACD,KAAK,QACD;AAAA;AAAA,oBAGA;AAAA,6CAC2B,CAAC,KAAK;AAAA,kBACjC,KAAK,eAAiB,IAAS,KAAK;AAAA,wBAC9B,KAAK;AAAA;AAAA,SAGzB,CAEmB,aAAa,EAA+B,CAC3D,MAAM,aAAa,CAAO,EAC1B,KAAK,aAAa,OAAQ,KAAK,EAC1B,KAAK,aAAa,IAAI,GACvB,MAAK,GAAK,UAAU,EAAI,mBAI5B,KAAK,WAAW,iBACZ,aACA,KAAK,mBACT,CACJ,CAEmB,QAAQ,EAA+B,CACtD,MAAM,QAAQ,CAAO,EAEjB,EAAQ,IAAI,OAAO,GACnB,MAAO,GAAQ,IAAI,OAAO,GAAM,aAEhC,KAAK,oBAAoB,EAEzB,EAAQ,IAAI,UAAU,GACtB,MAAK,aACD,gBACA,KAAK,SAAW,OAAS,OAC7B,EACA,KAAK,aAAa,WAAY,KAAK,SAAW,IAAM,IAAI,GAExD,EAAQ,IAAI,UAAU,GACtB,CAAI,KAAK,SACL,KAAK,aAAa,gBAAiB,MAAM,EAEzC,KAAK,gBAAgB,eAAe,EAGhD,CACJ,EAlGO,iBAUI,AAVJ,IAUI,cAAgB,EAWhB,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AArBJ,IAqBI,wBAGA,GADP,AAAC,EAAS,CAAE,QAAS,EAAK,CAAC,GACpB,AAxBJ,IAwBI,qBAGA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AA3BJ,IA2BI,wBAGA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AA9BJ,IA8BI,wBAGA,GADP,AAAC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAClC,AAjCJ,IAiCI",
-  "names": []
+  "mappings": "qNAYA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OACI,6BAAAC,EACA,uBAAAC,EACA,mBAAAC,MACG,kCAEP,OAAOC,MAAmB,eAQnB,MAAMC,EAAN,cAAkBJ,EACrBE,EAAgBD,EAAoBH,EAAiB,eAAe,EAAG,EAAE,CAC7E,CAAE,CAFK,kCAqBH,KAAO,SAAW,GAGlB,KAAO,MAAQ,GAGf,KAAO,SAAW,GAGlB,KAAO,SAAW,GAGlB,KAAO,MAAQ,GA9Bf,WAA2B,QAAyB,CAChD,MAAO,CAACK,CAAa,CACzB,CAOA,IAAc,SAAmB,CAC7B,OAAO,KAAK,oBAChB,CAEA,IAAc,UAAoB,CAC9B,MAAO,CAAC,CAAC,KAAK,OAAS,KAAK,cAChC,CAiBU,qBAA4B,CAIlC,KAAK,cACD,IAAI,MAAM,uBAAwB,CAC9B,QAAS,GACT,SAAU,EACd,CAAC,CACL,CACJ,CAEmB,QAAyB,CACxC,OAAON;AAAA,cACD,KAAK,QACDA;AAAA;AAAA,oBAGAA;AAAA,6CAC2B,CAAC,KAAK;AAAA,kBACjC,KAAK,eAAiBA,IAAS,KAAK;AAAA,wBAC9B,KAAK;AAAA;AAAA,SAGzB,CAEmB,aAAaQ,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,aAAa,OAAQ,KAAK,EAC1B,KAAK,aAAa,IAAI,IACvB,KAAK,GAAK,UAAUD,EAAI,mBAI5B,KAAK,WAAW,iBACZ,aACA,KAAK,mBACT,CACJ,CAEmB,QAAQC,EAA+B,CACtD,MAAM,QAAQA,CAAO,EAEjBA,EAAQ,IAAI,OAAO,GACnB,OAAOA,EAAQ,IAAI,OAAO,GAAM,aAEhC,KAAK,oBAAoB,EAEzBA,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,EAlGO,WAAM,IAAND,EAAM,IAUF,cAAgB,EAWhBE,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApBjC,IAqBF,wBAGAO,EAAA,CADNP,EAAS,CAAE,QAAS,EAAK,CAAC,GAvBlB,IAwBF,qBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BjC,IA2BF,wBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7BjC,IA8BF,wBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAhChC,IAiCF",
+  "names": ["html", "SpectrumElement", "property", "FocusVisiblePolyfillMixin", "ObserveSlotPresence", "ObserveSlotText", "tabItemStyles", "_Tab", "changes", "__decorateClass"]
 }

package/src/TabPanel.dev.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {

package/src/TabPanel.dev.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["TabPanel.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    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.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    /**\n     * @private\n     */\n    static instanceCount = 0;\n\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    @property({ type: String, reflect: true })\n    public value = '';\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot></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-${TabPanel.instanceCount++}`;\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"],
-  "mappings": ";;;;;;;;;;;AAYA;AAAA;AAAA;AAAA;AAMA;AAEA;AAOO,gCAAuB,gBAAgB;AAAA,EAAvC;AAAA;AASI,oBAAW;AAGX,iBAAQ;AAAA;AAAA,EAEI,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA,EAGX;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,UAAS;AAAA,IACvC;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;AAxCO;AACa,AADb,SACa,SAAS,CAAC,WAAW;AAK9B,AANJ,SAMI,gBAAgB;AAGhB;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GACnC,AATJ,SASI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAClC,AAZJ,SAYI;",
+  "mappings": ";;;;;;;;;;;;AAYA;AAAA,EACI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,OAAO,iBAAiB;AAOjB,MAAM,YAAN,cAAuB,gBAAgB;AAAA,EAAvC;AAAA;AASH,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAAA;AAAA,EAEI,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA,EAGX;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,UAAS;AAAA,IACvC;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;AAxCO,WAAM,WAAN;AAAM,SACO,SAAS,CAAC,WAAW;AAD5B,SAMF,gBAAgB;AAGhB;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GARjC,SASF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAXhC,SAYF;",
   "names": []
 }

package/src/TabPanel.js

@@ -1,4 +1,4 @@
-var u=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var d=(p,e,i,r)=>{for(var t=r>1?void 0:r?n(e,i):e,s=p.length-1,o;s>=0;s--)(o=p[s])&&(t=(r?o(e,i,t):o(t))||t);return r&&t&&u(e,i,t),t};import{html as c,SpectrumElement as h}from"@spectrum-web-components/base";import{property as a}from"@spectrum-web-components/base/src/decorators.js";import m from"./tab-panel.css.js";const l=class extends h{constructor(){super(...arguments);this.selected=!1;this.value=""}render(){return c`
+"use strict";var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(p,e,r,i)=>{for(var t=i>1?void 0:i?c(e,r):e,s=p.length-1,o;s>=0;s--)(o=p[s])&&(t=(i?o(e,r,t):o(t))||t);return i&&t&&u(e,r,t),t};import{html as h,SpectrumElement as n}from"@spectrum-web-components/base";import{property as a}from"@spectrum-web-components/base/src/decorators.js";import m from"./tab-panel.css.js";const l=class extends n{constructor(){super(...arguments);this.selected=!1;this.value=""}render(){return h`
             <slot></slot>
-        `}firstUpdated(){this.slot="tab-panel",this.setAttribute("role","tabpanel"),this.tabIndex=0,this.hasAttribute("id")||(this.id=`sp-tab-panel-${l.instanceCount++}`)}updated(e){e.has("selected")&&(this.selected?(this.removeAttribute("aria-hidden"),this.tabIndex=0):(this.setAttribute("aria-hidden","true"),this.tabIndex=-1))}};export let TabPanel=l;TabPanel.styles=[m],TabPanel.instanceCount=0,d([a({type:Boolean,reflect:!0})],TabPanel.prototype,"selected",2),d([a({type:String,reflect:!0})],TabPanel.prototype,"value",2);
+        `}firstUpdated(){this.slot="tab-panel",this.setAttribute("role","tabpanel"),this.tabIndex=0,this.hasAttribute("id")||(this.id=`sp-tab-panel-${l.instanceCount++}`)}updated(r){r.has("selected")&&(this.selected?(this.removeAttribute("aria-hidden"),this.tabIndex=0):(this.setAttribute("aria-hidden","true"),this.tabIndex=-1))}};export let TabPanel=l;TabPanel.styles=[m],TabPanel.instanceCount=0,d([a({type:Boolean,reflect:!0})],TabPanel.prototype,"selected",2),d([a({type:String,reflect:!0})],TabPanel.prototype,"value",2);
 //# sourceMappingURL=TabPanel.js.map