@spectrum-web-components/sidenav 0.12.0 → 0.12.3

package/custom-elements.json

@@ -104,6 +104,11 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "rovingTabindexController",
+              "default": "new RovingTabindexController<SideNavItem>(this, {\n        focusInIndex: (elements: SideNavItem[]) => {\n            return elements.findIndex((el) => {\n                return this.value\n                    ? !el.disabled &&\n                          !this.isDisabledChild(el) &&\n                          el.value === this.value\n                    : !el.disabled && !this.isDisabledChild(el);\n            });\n        },\n        direction: 'vertical',\n        elements: () => [...this.querySelectorAll('sp-sidenav-item')],\n        isFocusableElement: (el: SideNavItem) =>\n            !el.disabled && !this.isDisabledChild(el),\n    })"
+            },
             {
               "kind": "field",
               "name": "manageTabIndex",
@@ -182,62 +187,6 @@
               },
               "privacy": "public"
             },
-            {
-              "kind": "method",
-              "name": "startListeningToKeyboard",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "stopListeningToKeyboard",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleKeydown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "focusItemByOffset",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "direction",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "isDisabledChild",
@@ -265,16 +214,6 @@
                   "text": "void"
                 }
               }
-            },
-            {
-              "kind": "method",
-              "name": "manageTabIndexes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              }
             }
           ],
           "events": [
@@ -407,15 +346,6 @@
               "default": "undefined",
               "attribute": "value"
             },
-            {
-              "kind": "field",
-              "name": "manageTabIndex",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "selected",
@@ -656,7 +586,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n#list{--spectrum-sidenav-item-padding-y:var(\n--spectrum-global-dimension-size-65\n);list-style-type:none;margin:0;padding:0}:host([dir=ltr]) .spectrum-SideNav-itemLink.focus-visible:before{left:0}:host([dir=ltr]) .spectrum-SideNav-itemLink:focus-visible:before{left:0}:host([dir=rtl]) .spectrum-SideNav-itemLink.focus-visible:before{right:0}:host([dir=rtl]) .spectrum-SideNav-itemLink:focus-visible:before{right:0}:host([dir=ltr]) .spectrum-SideNav-itemLink.focus-visible:before{right:0}:host([dir=ltr]) .spectrum-SideNav-itemLink:focus-visible:before{right:0}:host([dir=rtl]) .spectrum-SideNav-itemLink.focus-visible:before{left:0}:host([dir=rtl]) .spectrum-SideNav-itemLink:focus-visible:before{left:0}:host([dir=ltr]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-right:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-left:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]) #heading{margin-right:0}:host([dir=rtl]) #heading{margin-left:0}:host([dir=ltr]) #heading{margin-left:0}:host([dir=rtl]) #heading{margin-right:0}#heading{border-radius:var(\n--spectrum-sidenav-heading-border-radius,var(--spectrum-alias-border-radius-regular)\n);font-size:var(\n--spectrum-sidenav-heading-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-style:normal;font-weight:var(\n--spectrum-sidenav-heading-text-font-weight,var(--spectrum-global-font-weight-medium)\n);height:var(\n--spectrum-sidenav-heading-height,var(--spectrum-alias-single-line-height)\n);letter-spacing:var(\n--spectrum-sidenav-heading-text-letter-spacing,var(--spectrum-global-font-letter-spacing-medium)\n);line-height:var(\n--spectrum-sidenav-heading-height,var(--spectrum-alias-single-line-height)\n);margin-bottom:var(\n--spectrum-sidenav-heading-gap-bottom,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-sidenav-heading-gap-top,var(--spectrum-global-dimension-size-200)\n);padding-bottom:0;padding-left:var(\n--spectrum-sidenav-heading-padding-x,var(--spectrum-global-dimension-size-150)\n);padding-right:var(\n--spectrum-sidenav-heading-padding-x,var(--spectrum-global-dimension-size-150)\n);padding-top:0;text-transform:uppercase}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list .spectrum-SideNav-itemLink{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list .spectrum-SideNav-itemLink{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list .spectrum-SideNav-itemLink{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list .spectrum-SideNav-itemLink{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}#heading{color:var(\n--spectrum-sidenav-heading-text-color,var(--spectrum-global-color-gray-700)\n)}:host{display:block}\n`"
+          "default": "css`\n#list{--spectrum-sidenav-item-padding-y:var(\n--spectrum-global-dimension-size-65\n);list-style-type:none;margin:0;padding:0}:host([dir=ltr]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-right:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-left:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]) #heading{margin-right:0}:host([dir=rtl]) #heading{margin-left:0}:host([dir=ltr]) #heading{margin-left:0}:host([dir=rtl]) #heading{margin-right:0}#heading{border-radius:var(\n--spectrum-sidenav-heading-border-radius,var(--spectrum-alias-border-radius-regular)\n);font-size:var(\n--spectrum-sidenav-heading-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-style:normal;font-weight:var(\n--spectrum-sidenav-heading-text-font-weight,var(--spectrum-global-font-weight-medium)\n);height:var(\n--spectrum-sidenav-heading-height,var(--spectrum-alias-single-line-height)\n);letter-spacing:var(\n--spectrum-sidenav-heading-text-letter-spacing,var(--spectrum-global-font-letter-spacing-medium)\n);line-height:var(\n--spectrum-sidenav-heading-height,var(--spectrum-alias-single-line-height)\n);margin-bottom:var(\n--spectrum-sidenav-heading-gap-bottom,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-sidenav-heading-gap-top,var(--spectrum-global-dimension-size-200)\n);padding-bottom:0;padding-left:var(\n--spectrum-sidenav-heading-padding-x,var(--spectrum-global-dimension-size-150)\n);padding-right:var(\n--spectrum-sidenav-heading-padding-x,var(--spectrum-global-dimension-size-150)\n);padding-top:0;text-transform:uppercase}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list .spectrum-SideNav-itemLink{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list .spectrum-SideNav-itemLink{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list .spectrum-SideNav-itemLink{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list .spectrum-SideNav-itemLink{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}#heading{color:var(\n--spectrum-sidenav-heading-text-color,var(--spectrum-global-color-gray-700)\n)}:host{display:block}\n`"
         }
       ],
       "exports": [
@@ -677,7 +607,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n#list{--spectrum-sidenav-item-padding-y:var(\n--spectrum-global-dimension-size-65\n);list-style-type:none;margin:0;padding:0}:host{list-style-type:none;margin-bottom:var(\n--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)\n)}#item-link{align-items:center;border-radius:var(\n--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)\n);box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(\n--spectrum-sidenav-item-text-size,var(--spectrum-alias-font-size-default)\n);font-style:normal;font-weight:var(\n--spectrum-sidenav-item-text-font-weight,var(--spectrum-global-font-weight-regular)\n);-webkit-hyphens:auto;hyphens:auto;justify-content:left;min-height:var(\n--spectrum-sidenav-item-height,var(--spectrum-alias-single-line-height)\n);padding:var(--spectrum-sidenav-item-padding-y) var(\n--spectrum-sidenav-item-padding-x,var(--spectrum-global-dimension-size-150)\n);position:relative;text-decoration:none;transition:background-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out;width:100%;word-break:break-word}#item-link:focus{outline:none}:host([dir=ltr]) #item-link.focus-visible:before{left:0}:host([dir=ltr]) #item-link:focus-visible:before{left:0}:host([dir=rtl]) #item-link.focus-visible:before{right:0}:host([dir=rtl]) #item-link:focus-visible:before{right:0}:host([dir=ltr]) #item-link.focus-visible:before{right:0}:host([dir=ltr]) #item-link:focus-visible:before{right:0}:host([dir=rtl]) #item-link.focus-visible:before{left:0}:host([dir=rtl]) #item-link:focus-visible:before{left:0}#item-link.focus-visible:before{border-bottom:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n) solid transparent;border-radius:var(\n--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)\n);border-top:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n) solid transparent;bottom:0;content:\"\";position:absolute;top:0}#item-link:focus-visible:before{border-bottom:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n) solid transparent;border-radius:var(\n--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)\n);border-top:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n) solid transparent;bottom:0;content:\"\";position:absolute;top:0}:host([dir=ltr]) #item-link ::slotted([slot=icon]){margin-right:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]) #item-link ::slotted([slot=icon]){margin-left:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}#item-link ::slotted([slot=icon]){flex-shrink:0}:host([dir=ltr]) .spectrum-SideNav-heading{margin-right:0}:host([dir=rtl]) .spectrum-SideNav-heading{margin-left:0}:host([dir=ltr]) .spectrum-SideNav-heading{margin-left:0}:host([dir=rtl]) .spectrum-SideNav-heading{margin-right:0}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #item-link{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #item-link{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([selected])>#item-link{background-color:var(\n--spectrum-sidenav-item-background-color-selected,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-selected,var(--spectrum-alias-text-color-hover)\n)}.is-active>#item-link{background-color:var(\n--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)\n)}:host([disabled]) #item-link{background-color:var(\n--spectrum-sidenav-item-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-sidenav-item-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);cursor:default;pointer-events:none}#item-link{background-color:var(\n--spectrum-sidenav-item-background-color,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-sidenav-item-text-color,var(--spectrum-alias-text-color)\n)}#item-link:hover{background-color:var(\n--spectrum-sidenav-item-background-color-hover,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}#item-link:active{background-color:var(\n--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)\n)}#item-link.focus-visible{background-color:var(\n--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}#item-link:focus-visible{background-color:var(\n--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}#item-link.focus-visible:before{border-color:var(\n--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#item-link:focus-visible:before{border-color:var(\n--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host{display:block}:host([disabled]){pointer-events:none}:host([multiLevel]){--spectrum-web-component-sidenav-font-weight:var(\n--spectrum-sidenav-item-font-weight,700\n)}::slotted(sp-sidenav-item:not([multiLevel])){--spectrum-web-component-sidenav-font-weight:var(\n--spectrum-sidenav-item-font-weight,400\n)}#item-link{font-weight:var(--spectrum-web-component-sidenav-font-weight);justify-content:start}:host([dir=ltr]) #item-link[data-level=\"1\"]{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-indentation-level1,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=ltr]) #item-link[data-level=\"2\"]{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-indentation-level2,\nvar(--spectrum-global-dimension-size-300)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) #item-link[data-level=\"1\"]{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-indentation-level1,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) #item-link[data-level=\"2\"]{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-indentation-level2,\nvar(--spectrum-global-dimension-size-300)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}a ::slotted(sp-sidenav-item){display:none}\n`"
+          "default": "css`\n#list{--spectrum-sidenav-item-padding-y:var(\n--spectrum-global-dimension-size-65\n);list-style-type:none;margin:0;padding:0}:host{list-style-type:none;margin-bottom:var(\n--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)\n)}#item-link{align-items:center;border-radius:var(\n--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)\n);box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(\n--spectrum-sidenav-item-text-size,var(--spectrum-alias-font-size-default)\n);font-style:normal;font-weight:var(\n--spectrum-sidenav-item-text-font-weight,var(--spectrum-global-font-weight-regular)\n);-webkit-hyphens:auto;hyphens:auto;justify-content:left;min-height:var(\n--spectrum-sidenav-item-height,var(--spectrum-alias-single-line-height)\n);padding:var(--spectrum-sidenav-item-padding-y) var(\n--spectrum-sidenav-item-padding-x,var(--spectrum-global-dimension-size-150)\n);position:relative;text-decoration:none;transition:background-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out;width:100%;word-break:break-word}#item-link:focus{outline:none}#item-link:before{border:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n) solid transparent;border-radius:var(\n--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)\n);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([dir=ltr]) #item-link ::slotted([slot=icon]){margin-right:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]) #item-link ::slotted([slot=icon]){margin-left:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}#item-link ::slotted([slot=icon]){flex-shrink:0}:host([dir=ltr]) .spectrum-SideNav-heading{margin-right:0}:host([dir=rtl]) .spectrum-SideNav-heading{margin-left:0}:host([dir=ltr]) .spectrum-SideNav-heading{margin-left:0}:host([dir=rtl]) .spectrum-SideNav-heading{margin-right:0}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #item-link{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #item-link{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([selected])>#item-link{background-color:var(\n--spectrum-sidenav-item-background-color-selected,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-selected,var(--spectrum-alias-text-color-hover)\n)}.is-active>#item-link{background-color:var(\n--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)\n)}:host([disabled]) #item-link{background-color:var(\n--spectrum-sidenav-item-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-sidenav-item-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);cursor:default;pointer-events:none}#item-link{background-color:var(\n--spectrum-sidenav-item-background-color,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-sidenav-item-text-color,var(--spectrum-alias-text-color)\n)}#item-link:hover{background-color:var(\n--spectrum-sidenav-item-background-color-hover,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}#item-link:active{background-color:var(\n--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)\n)}#item-link.focus-visible{background-color:var(\n--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}#item-link:focus-visible{background-color:var(\n--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}#item-link.focus-visible:before{border-color:var(\n--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#item-link:focus-visible:before{border-color:var(\n--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host{display:block}:host([disabled]){pointer-events:none}:host([multiLevel]){--spectrum-web-component-sidenav-font-weight:var(\n--spectrum-sidenav-item-font-weight,700\n)}::slotted(sp-sidenav-item:not([multiLevel])){--spectrum-web-component-sidenav-font-weight:var(\n--spectrum-sidenav-item-font-weight,400\n)}#item-link{font-weight:var(--spectrum-web-component-sidenav-font-weight);justify-content:start}:host([dir=ltr]) #item-link[data-level=\"1\"]{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-indentation-level1,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=ltr]) #item-link[data-level=\"2\"]{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-indentation-level2,\nvar(--spectrum-global-dimension-size-300)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) #item-link[data-level=\"1\"]{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-indentation-level1,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) #item-link[data-level=\"2\"]{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-indentation-level2,\nvar(--spectrum-global-dimension-size-300)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}a ::slotted(sp-sidenav-item){display:none}\n`"
         }
       ],
       "exports": [
@@ -719,7 +649,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n#list{--spectrum-sidenav-item-padding-y:var(\n--spectrum-global-dimension-size-65\n);list-style-type:none;margin:0;padding:0}:host([dir=ltr]) .spectrum-SideNav-itemLink.focus-visible:before{left:0}:host([dir=ltr]) .spectrum-SideNav-itemLink:focus-visible:before{left:0}:host([dir=rtl]) .spectrum-SideNav-itemLink.focus-visible:before{right:0}:host([dir=rtl]) .spectrum-SideNav-itemLink:focus-visible:before{right:0}:host([dir=ltr]) .spectrum-SideNav-itemLink.focus-visible:before{right:0}:host([dir=ltr]) .spectrum-SideNav-itemLink:focus-visible:before{right:0}:host([dir=rtl]) .spectrum-SideNav-itemLink.focus-visible:before{left:0}:host([dir=rtl]) .spectrum-SideNav-itemLink:focus-visible:before{left:0}:host([dir=ltr]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-right:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-left:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]) #heading{margin-right:0}:host([dir=rtl]) #heading{margin-left:0}:host([dir=ltr]) #heading{margin-left:0}:host([dir=rtl]) #heading{margin-right:0}#heading{border-radius:var(\n--spectrum-sidenav-heading-border-radius,var(--spectrum-alias-border-radius-regular)\n);font-size:var(\n--spectrum-sidenav-heading-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-style:normal;font-weight:var(\n--spectrum-sidenav-heading-text-font-weight,var(--spectrum-global-font-weight-medium)\n);height:var(\n--spectrum-sidenav-heading-height,var(--spectrum-alias-single-line-height)\n);letter-spacing:var(\n--spectrum-sidenav-heading-text-letter-spacing,var(--spectrum-global-font-letter-spacing-medium)\n);line-height:var(\n--spectrum-sidenav-heading-height,var(--spectrum-alias-single-line-height)\n);margin-bottom:var(\n--spectrum-sidenav-heading-gap-bottom,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-sidenav-heading-gap-top,var(--spectrum-global-dimension-size-200)\n);padding-bottom:0;padding-left:var(\n--spectrum-sidenav-heading-padding-x,var(--spectrum-global-dimension-size-150)\n);padding-right:var(\n--spectrum-sidenav-heading-padding-x,var(--spectrum-global-dimension-size-150)\n);padding-top:0;text-transform:uppercase}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list .spectrum-SideNav-itemLink{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list .spectrum-SideNav-itemLink{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list .spectrum-SideNav-itemLink{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list .spectrum-SideNav-itemLink{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}#heading{color:var(\n--spectrum-sidenav-heading-text-color,var(--spectrum-global-color-gray-700)\n)}\n`"
+          "default": "css`\n#list{--spectrum-sidenav-item-padding-y:var(\n--spectrum-global-dimension-size-65\n);list-style-type:none;margin:0;padding:0}:host([dir=ltr]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-right:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-left:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]) #heading{margin-right:0}:host([dir=rtl]) #heading{margin-left:0}:host([dir=ltr]) #heading{margin-left:0}:host([dir=rtl]) #heading{margin-right:0}#heading{border-radius:var(\n--spectrum-sidenav-heading-border-radius,var(--spectrum-alias-border-radius-regular)\n);font-size:var(\n--spectrum-sidenav-heading-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-style:normal;font-weight:var(\n--spectrum-sidenav-heading-text-font-weight,var(--spectrum-global-font-weight-medium)\n);height:var(\n--spectrum-sidenav-heading-height,var(--spectrum-alias-single-line-height)\n);letter-spacing:var(\n--spectrum-sidenav-heading-text-letter-spacing,var(--spectrum-global-font-letter-spacing-medium)\n);line-height:var(\n--spectrum-sidenav-heading-height,var(--spectrum-alias-single-line-height)\n);margin-bottom:var(\n--spectrum-sidenav-heading-gap-bottom,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-sidenav-heading-gap-top,var(--spectrum-global-dimension-size-200)\n);padding-bottom:0;padding-left:var(\n--spectrum-sidenav-heading-padding-x,var(--spectrum-global-dimension-size-150)\n);padding-right:var(\n--spectrum-sidenav-heading-padding-x,var(--spectrum-global-dimension-size-150)\n);padding-top:0;text-transform:uppercase}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list .spectrum-SideNav-itemLink{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list .spectrum-SideNav-itemLink{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list .spectrum-SideNav-itemLink{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list .spectrum-SideNav-itemLink{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}#heading{color:var(\n--spectrum-sidenav-heading-text-color,var(--spectrum-global-color-gray-700)\n)}\n`"
         }
       ],
       "exports": [
@@ -740,7 +670,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n#list{--spectrum-sidenav-item-padding-y:var(\n--spectrum-global-dimension-size-65\n);list-style-type:none;margin:0;padding:0}:host{list-style-type:none;margin-bottom:var(\n--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)\n)}#item-link{align-items:center;border-radius:var(\n--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)\n);box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(\n--spectrum-sidenav-item-text-size,var(--spectrum-alias-font-size-default)\n);font-style:normal;font-weight:var(\n--spectrum-sidenav-item-text-font-weight,var(--spectrum-global-font-weight-regular)\n);-webkit-hyphens:auto;hyphens:auto;justify-content:left;min-height:var(\n--spectrum-sidenav-item-height,var(--spectrum-alias-single-line-height)\n);padding:var(--spectrum-sidenav-item-padding-y) var(\n--spectrum-sidenav-item-padding-x,var(--spectrum-global-dimension-size-150)\n);position:relative;text-decoration:none;transition:background-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out;width:100%;word-break:break-word}#item-link:focus{outline:none}:host([dir=ltr]) #item-link.focus-visible:before{left:0}:host([dir=ltr]) #item-link:focus-visible:before{left:0}:host([dir=rtl]) #item-link.focus-visible:before{right:0}:host([dir=rtl]) #item-link:focus-visible:before{right:0}:host([dir=ltr]) #item-link.focus-visible:before{right:0}:host([dir=ltr]) #item-link:focus-visible:before{right:0}:host([dir=rtl]) #item-link.focus-visible:before{left:0}:host([dir=rtl]) #item-link:focus-visible:before{left:0}#item-link.focus-visible:before{border-bottom:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n) solid transparent;border-radius:var(\n--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)\n);border-top:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n) solid transparent;bottom:0;content:\"\";position:absolute;top:0}#item-link:focus-visible:before{border-bottom:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n) solid transparent;border-radius:var(\n--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)\n);border-top:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n) solid transparent;bottom:0;content:\"\";position:absolute;top:0}:host([dir=ltr]) #item-link ::slotted([slot=icon]){margin-right:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]) #item-link ::slotted([slot=icon]){margin-left:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}#item-link ::slotted([slot=icon]){flex-shrink:0}:host([dir=ltr]) .spectrum-SideNav-heading{margin-right:0}:host([dir=rtl]) .spectrum-SideNav-heading{margin-left:0}:host([dir=ltr]) .spectrum-SideNav-heading{margin-left:0}:host([dir=rtl]) .spectrum-SideNav-heading{margin-right:0}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #item-link{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #item-link{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([selected])>#item-link{background-color:var(\n--spectrum-sidenav-item-background-color-selected,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-selected,var(--spectrum-alias-text-color-hover)\n)}.is-active>#item-link{background-color:var(\n--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)\n)}:host([disabled]) #item-link{background-color:var(\n--spectrum-sidenav-item-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-sidenav-item-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);cursor:default;pointer-events:none}#item-link{background-color:var(\n--spectrum-sidenav-item-background-color,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-sidenav-item-text-color,var(--spectrum-alias-text-color)\n)}#item-link:hover{background-color:var(\n--spectrum-sidenav-item-background-color-hover,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}#item-link:active{background-color:var(\n--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)\n)}#item-link.focus-visible{background-color:var(\n--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}#item-link:focus-visible{background-color:var(\n--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}#item-link.focus-visible:before{border-color:var(\n--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#item-link:focus-visible:before{border-color:var(\n--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}\n`"
+          "default": "css`\n#list{--spectrum-sidenav-item-padding-y:var(\n--spectrum-global-dimension-size-65\n);list-style-type:none;margin:0;padding:0}:host{list-style-type:none;margin-bottom:var(\n--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)\n)}#item-link{align-items:center;border-radius:var(\n--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)\n);box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(\n--spectrum-sidenav-item-text-size,var(--spectrum-alias-font-size-default)\n);font-style:normal;font-weight:var(\n--spectrum-sidenav-item-text-font-weight,var(--spectrum-global-font-weight-regular)\n);-webkit-hyphens:auto;hyphens:auto;justify-content:left;min-height:var(\n--spectrum-sidenav-item-height,var(--spectrum-alias-single-line-height)\n);padding:var(--spectrum-sidenav-item-padding-y) var(\n--spectrum-sidenav-item-padding-x,var(--spectrum-global-dimension-size-150)\n);position:relative;text-decoration:none;transition:background-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out;width:100%;word-break:break-word}#item-link:focus{outline:none}#item-link:before{border:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n) solid transparent;border-radius:var(\n--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)\n);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([dir=ltr]) #item-link ::slotted([slot=icon]){margin-right:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]) #item-link ::slotted([slot=icon]){margin-left:var(\n--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)\n)}#item-link ::slotted([slot=icon]){flex-shrink:0}:host([dir=ltr]) .spectrum-SideNav-heading{margin-right:0}:host([dir=rtl]) .spectrum-SideNav-heading{margin-left:0}:host([dir=ltr]) .spectrum-SideNav-heading{margin-left:0}:host([dir=rtl]) .spectrum-SideNav-heading{margin-right:0}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #item-link{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #item-link{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-left:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-right:calc(var(\n--spectrum-sidenav-multilevel-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-sidenav-item-padding-x,\nvar(--spectrum-global-dimension-size-150)\n))}:host([selected])>#item-link{background-color:var(\n--spectrum-sidenav-item-background-color-selected,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-selected,var(--spectrum-alias-text-color-hover)\n)}.is-active>#item-link{background-color:var(\n--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)\n)}:host([disabled]) #item-link{background-color:var(\n--spectrum-sidenav-item-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-sidenav-item-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n);cursor:default;pointer-events:none}#item-link{background-color:var(\n--spectrum-sidenav-item-background-color,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-sidenav-item-text-color,var(--spectrum-alias-text-color)\n)}#item-link:hover{background-color:var(\n--spectrum-sidenav-item-background-color-hover,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}#item-link:active{background-color:var(\n--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)\n)}#item-link.focus-visible{background-color:var(\n--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}#item-link:focus-visible{background-color:var(\n--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)\n);color:var(\n--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}#item-link.focus-visible:before{border-color:var(\n--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#item-link:focus-visible:before{border-color:var(\n--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}\n`"
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/sidenav",
-    "version": "0.12.0",
+    "version": "0.12.3",
     "publishConfig": {
         "access": "public"
     },
@@ -48,17 +48,18 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.0",
-        "@spectrum-web-components/shared": "^0.13.0",
+        "@spectrum-web-components/base": "^0.5.1",
+        "@spectrum-web-components/reactive-controllers": "^0.1.0",
+        "@spectrum-web-components/shared": "^0.13.3",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/sidenav": "^3.0.5"
+        "@spectrum-css/sidenav": "^3.0.12"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "7ce77352f6894043bceac9ef92b21e5f85420969"
+    "gitHead": "279380c6d72c0819fe224b405844af9ddcb87f8a"
 }

package/src/Sidenav.d.ts

@@ -1,4 +1,5 @@
 import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
+import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import { Focusable } from '@spectrum-web-components/shared';
 import { SideNavItem } from './SidenavItem.js';
 export interface SidenavSelectDetail {
@@ -16,21 +17,16 @@ export declare class SideNav extends Focusable {
     private items;
     startTrackingSelectionForItem(item: SideNavItem): void;
     stopTrackingSelectionForItem(item: SideNavItem): void;
+    rovingTabindexController: RovingTabindexController<SideNavItem>;
     manageTabIndex: boolean;
     value: string | undefined;
     private handleSelect;
-    constructor();
     focus(): void;
     blur(): void;
     click(): void;
     get focusElement(): SideNavItem | SideNav;
-    private startListeningToKeyboard;
-    private stopListeningToKeyboard;
-    private handleKeydown;
-    private focusItemByOffset;
     private isDisabledChild;
     private handleSlotchange;
-    private manageTabIndexes;
     protected render(): TemplateResult;
     protected firstUpdated(changes: PropertyValues): void;
     protected updated(changes: PropertyValues): void;

package/src/Sidenav.js

@@ -12,8 +12,9 @@ governing permissions and limitations under the License.
 import { __decorate } from "tslib";
 import { html, } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
+import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import sidenavStyles from './sidenav.css.js';
-import { Focusable, getActiveElement } from '@spectrum-web-components/shared';
+import { Focusable } from '@spectrum-web-components/shared';
 import { SideNavItem } from './SidenavItem.js';
 import { SideNavHeading } from './SidenavHeading.js';
 /**
@@ -25,20 +26,35 @@ import { SideNavHeading } from './SidenavHeading.js';
  */
 export class SideNav extends Focusable {
     constructor() {
-        super();
+        super(...arguments);
         this.items = new Set();
+        this.rovingTabindexController = new RovingTabindexController(this, {
+            focusInIndex: (elements) => {
+                return elements.findIndex((el) => {
+                    return this.value
+                        ? !el.disabled &&
+                            !this.isDisabledChild(el) &&
+                            el.value === this.value
+                        : !el.disabled && !this.isDisabledChild(el);
+                });
+            },
+            direction: 'vertical',
+            elements: () => [...this.querySelectorAll('sp-sidenav-item')],
+            isFocusableElement: (el) => !el.disabled && !this.isDisabledChild(el),
+        });
         this.manageTabIndex = false;
         this.value = undefined;
-        this.addEventListener('focusin', this.startListeningToKeyboard);
     }
     static get styles() {
         return [sidenavStyles];
     }
     startTrackingSelectionForItem(item) {
         this.items.add(item);
+        this.rovingTabindexController.clearElementCache();
     }
     stopTrackingSelectionForItem(item) {
         this.items.delete(item);
+        this.rovingTabindexController.clearElementCache();
     }
     handleSelect(event) {
         event.stopPropagation();
@@ -62,10 +78,7 @@ export class SideNav extends Focusable {
         }
     }
     focus() {
-        if (this.focusElement === this) {
-            return;
-        }
-        super.focus();
+        this.rovingTabindexController.focus();
     }
     blur() {
         if (this.focusElement === this) {
@@ -80,69 +93,7 @@ export class SideNav extends Focusable {
         super.click();
     }
     get focusElement() {
-        const selected = this.querySelector('[selected]');
-        if (selected && !this.isDisabledChild(selected)) {
-            return selected;
-        }
-        const items = [...this.querySelectorAll('sp-sidenav-item')];
-        let index = 0;
-        while (index < items.length &&
-            items[index] &&
-            this.isDisabledChild(items[index])) {
-            index += 1;
-        }
-        if (items[index]) {
-            return items[index];
-        }
-        /* c8 ignore next */
-        return this;
-    }
-    startListeningToKeyboard() {
-        this.addEventListener('keydown', this.handleKeydown);
-        this.addEventListener('focusout', this.stopListeningToKeyboard);
-        if (this.value && this.manageTabIndex) {
-            const selected = this.querySelector(`[value="${this.value}"]`);
-            if (selected) {
-                selected.tabIndex = -1;
-            }
-        }
-    }
-    stopListeningToKeyboard() {
-        this.removeEventListener('keydown', this.handleKeydown);
-        this.removeEventListener('focusout', this.stopListeningToKeyboard);
-        if (this.value && this.manageTabIndex) {
-            const selected = this.querySelector(`[value="${this.value}"]`);
-            if (selected) {
-                selected.tabIndex = 0;
-            }
-        }
-    }
-    handleKeydown(event) {
-        const { code } = event;
-        /* c8 ignore next */
-        if (code !== 'ArrowDown' && code !== 'ArrowUp') {
-            return;
-        }
-        event.preventDefault();
-        const direction = code === 'ArrowDown' ? 1 : -1;
-        this.focusItemByOffset(direction);
-    }
-    focusItemByOffset(direction) {
-        const items = [...this.querySelectorAll('sp-sidenav-item')];
-        const focused = items.indexOf(getActiveElement(this));
-        let next = focused;
-        next = (items.length + next + direction) % items.length;
-        let nextItem = items[next];
-        // cycle through the available items in the directions of the offset to find the next non-disabled item
-        while (nextItem && this.isDisabledChild(nextItem)) {
-            next = (items.length + next + direction) % items.length;
-            nextItem = items[next];
-        }
-        // if there are no non-disabled items, skip the work to focus a child
-        if (!nextItem || this.isDisabledChild(nextItem)) {
-            return;
-        }
-        nextItem.focus();
+        return this.rovingTabindexController.focusInElement || this;
     }
     isDisabledChild(child) {
         if (child.disabled) {
@@ -158,19 +109,11 @@ export class SideNav extends Focusable {
         return parent !== this;
     }
     handleSlotchange() {
-        this.manageTabIndexes();
-    }
-    async manageTabIndexes() {
-        if (!this.value && this.manageTabIndex) {
-            const managed = this.querySelector('sp-sidenav-item:not([tabindex])');
-            if (managed) {
-                managed.tabIndex = -1;
-            }
-            const first = this.querySelector('sp-sidenav-item');
-            if (first) {
-                await first.updateComplete;
-                first.tabIndex = 0;
-            }
+        if (this.manageTabIndex) {
+            this.rovingTabindexController.manage();
+        }
+        else {
+            this.rovingTabindexController.unmanage();
         }
     }
     render() {
@@ -189,15 +132,16 @@ export class SideNav extends Focusable {
         if (selectedChild) {
             this.value = selectedChild.value;
         }
-        else {
-            this.manageTabIndexes();
-        }
     }
     updated(changes) {
         super.updated(changes);
         if (changes.has('manageTabIndex')) {
-            const items = [...this.querySelectorAll('sp-sidenav-item')];
-            items.map((item) => (item.manageTabIndex = this.manageTabIndex));
+            if (this.manageTabIndex) {
+                this.rovingTabindexController.manage();
+            }
+            else {
+                this.rovingTabindexController.unmanage();
+            }
         }
     }
 }

package/src/Sidenav.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidenav.js","sourceRoot":"","sources":["Sidenav.ts"],"names":[],"mappings":"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","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    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport sidenavStyles from './sidenav.css.js';\nimport { Focusable, getActiveElement } from '@spectrum-web-components/shared';\nimport { SideNavItem } from './SidenavItem.js';\nimport { SideNavHeading } from './SidenavHeading.js';\n\nexport interface SidenavSelectDetail {\n    value: string;\n}\n\n/**\n * @element sp-sidenav\n *\n * @slot - the Sidenav Items to display\n * @fires change - Announces a change in the `value` property of the navigation element.\n * This change can be \"canceled\" via `event.preventDefault()`.\n */\nexport class SideNav extends Focusable {\n    public static get styles(): CSSResultArray {\n        return [sidenavStyles];\n    }\n\n    private items = new Set<SideNavItem>();\n\n    public startTrackingSelectionForItem(item: SideNavItem): void {\n        this.items.add(item);\n    }\n\n    public stopTrackingSelectionForItem(item: SideNavItem): void {\n        this.items.delete(item);\n    }\n\n    @property({ type: Boolean, reflect: true, attribute: 'manage-tab-index' })\n    public manageTabIndex = false;\n\n    @property({ reflect: true })\n    public value: string | undefined = undefined;\n\n    private handleSelect(\n        event: CustomEvent<SidenavSelectDetail> & { target: SideNavItem }\n    ): void {\n        event.stopPropagation();\n        if (this.value === event.detail.value) {\n            return;\n        }\n        const oldValue = this.value;\n        this.value = event.detail.value;\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n        if (!applyDefault) {\n            this.value = oldValue;\n            event.target.selected = false;\n            event.preventDefault();\n        } else {\n            this.items.forEach((item) => item.handleSideNavSelect(event));\n        }\n    }\n\n    public constructor() {\n        super();\n        this.addEventListener('focusin', this.startListeningToKeyboard);\n    }\n\n    public focus(): void {\n        if (this.focusElement === this) {\n            return;\n        }\n\n        super.focus();\n    }\n\n    public blur(): void {\n        if (this.focusElement === this) {\n            return;\n        }\n\n        super.blur();\n    }\n\n    public click(): void {\n        if (this.focusElement === this) {\n            return;\n        }\n\n        super.click();\n    }\n\n    public get focusElement(): SideNavItem | SideNav {\n        const selected = this.querySelector('[selected]') as SideNavItem;\n        if (selected && !this.isDisabledChild(selected)) {\n            return selected;\n        }\n        const items = [...this.querySelectorAll('sp-sidenav-item')];\n        let index = 0;\n        while (\n            index < items.length &&\n            items[index] &&\n            this.isDisabledChild(items[index])\n        ) {\n            index += 1;\n        }\n        if (items[index]) {\n            return items[index];\n        }\n        /* c8 ignore next */\n        return this;\n    }\n\n    private startListeningToKeyboard(): void {\n        this.addEventListener('keydown', this.handleKeydown);\n        this.addEventListener('focusout', this.stopListeningToKeyboard);\n        if (this.value && this.manageTabIndex) {\n            const selected = this.querySelector(\n                `[value=\"${this.value}\"]`\n            ) as SideNavItem;\n            if (selected) {\n                selected.tabIndex = -1;\n            }\n        }\n    }\n\n    private stopListeningToKeyboard(): void {\n        this.removeEventListener('keydown', this.handleKeydown);\n        this.removeEventListener('focusout', this.stopListeningToKeyboard);\n        if (this.value && this.manageTabIndex) {\n            const selected = this.querySelector(\n                `[value=\"${this.value}\"]`\n            ) as SideNavItem;\n            if (selected) {\n                selected.tabIndex = 0;\n            }\n        }\n    }\n\n    private handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        /* c8 ignore next */\n        if (code !== 'ArrowDown' && code !== 'ArrowUp') {\n            return;\n        }\n        event.preventDefault();\n        const direction = code === 'ArrowDown' ? 1 : -1;\n        this.focusItemByOffset(direction);\n    }\n\n    private focusItemByOffset(direction: number): void {\n        const items = [...this.querySelectorAll('sp-sidenav-item')];\n        const focused = items.indexOf(getActiveElement(this) as SideNavItem);\n        let next = focused;\n        next = (items.length + next + direction) % items.length;\n        let nextItem = items[next];\n        // cycle through the available items in the directions of the offset to find the next non-disabled item\n        while (nextItem && this.isDisabledChild(nextItem)) {\n            next = (items.length + next + direction) % items.length;\n            nextItem = items[next];\n        }\n        // if there are no non-disabled items, skip the work to focus a child\n        if (!nextItem || this.isDisabledChild(nextItem)) {\n            return;\n        }\n        nextItem.focus();\n    }\n\n    private isDisabledChild(child: SideNavItem): boolean {\n        if (child.disabled) {\n            return true;\n        }\n        let parent = child.parentElement as\n            | SideNavItem\n            | SideNav\n            | SideNavHeading;\n        while (\n            parent instanceof SideNavHeading ||\n            (!(parent as SideNavItem).disabled &&\n                parent instanceof SideNavItem &&\n                parent.expanded)\n        ) {\n            parent = parent.parentElement as\n                | SideNavItem\n                | SideNav\n                | SideNavHeading;\n        }\n        return parent !== this;\n    }\n\n    private handleSlotchange(): void {\n        this.manageTabIndexes();\n    }\n\n    private async manageTabIndexes(): Promise<void> {\n        if (!this.value && this.manageTabIndex) {\n            const managed = this.querySelector(\n                'sp-sidenav-item:not([tabindex])'\n            ) as SideNavItem;\n            if (managed) {\n                managed.tabIndex = -1;\n            }\n            const first = this.querySelector('sp-sidenav-item');\n            if (first) {\n                await first.updateComplete;\n                first.tabIndex = 0;\n            }\n        }\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <nav @sidenav-select=${this.handleSelect}>\n                <slot\n                    name=\"descendant\"\n                    @slotchange=${this.handleSlotchange}\n                ></slot>\n            </nav>\n        `;\n    }\n\n    protected firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        const selectedChild = this.querySelector('[selected]') as SideNavItem;\n        if (selectedChild) {\n            this.value = selectedChild.value;\n        } else {\n            this.manageTabIndexes();\n        }\n    }\n\n    protected updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (changes.has('manageTabIndex')) {\n            const items = [...this.querySelectorAll('sp-sidenav-item')];\n            items.map((item) => (item.manageTabIndex = this.manageTabIndex));\n        }\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-sidenav:select': CustomEvent<SidenavSelectDetail>;\n    }\n}\n"]}
+{"version":3,"file":"Sidenav.js","sourceRoot":"","sources":["Sidenav.ts"],"names":[],"mappings":"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","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    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport sidenavStyles from './sidenav.css.js';\nimport { Focusable } from '@spectrum-web-components/shared';\nimport { SideNavItem } from './SidenavItem.js';\nimport { SideNavHeading } from './SidenavHeading.js';\n\nexport interface SidenavSelectDetail {\n    value: string;\n}\n\n/**\n * @element sp-sidenav\n *\n * @slot - the Sidenav Items to display\n * @fires change - Announces a change in the `value` property of the navigation element.\n * This change can be \"canceled\" via `event.preventDefault()`.\n */\nexport class SideNav extends Focusable {\n    public static get styles(): CSSResultArray {\n        return [sidenavStyles];\n    }\n\n    private items = new Set<SideNavItem>();\n\n    public startTrackingSelectionForItem(item: SideNavItem): void {\n        this.items.add(item);\n        this.rovingTabindexController.clearElementCache();\n    }\n\n    public stopTrackingSelectionForItem(item: SideNavItem): void {\n        this.items.delete(item);\n        this.rovingTabindexController.clearElementCache();\n    }\n\n    rovingTabindexController = new RovingTabindexController<SideNavItem>(this, {\n        focusInIndex: (elements: SideNavItem[]) => {\n            return elements.findIndex((el) => {\n                return this.value\n                    ? !el.disabled &&\n                          !this.isDisabledChild(el) &&\n                          el.value === this.value\n                    : !el.disabled && !this.isDisabledChild(el);\n            });\n        },\n        direction: 'vertical',\n        elements: () => [...this.querySelectorAll('sp-sidenav-item')],\n        isFocusableElement: (el: SideNavItem) =>\n            !el.disabled && !this.isDisabledChild(el),\n    });\n\n    @property({ type: Boolean, reflect: true, attribute: 'manage-tab-index' })\n    public manageTabIndex = false;\n\n    @property({ reflect: true })\n    public value: string | undefined = undefined;\n\n    private handleSelect(\n        event: CustomEvent<SidenavSelectDetail> & { target: SideNavItem }\n    ): void {\n        event.stopPropagation();\n        if (this.value === event.detail.value) {\n            return;\n        }\n        const oldValue = this.value;\n        this.value = event.detail.value;\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n        if (!applyDefault) {\n            this.value = oldValue;\n            event.target.selected = false;\n            event.preventDefault();\n        } else {\n            this.items.forEach((item) => item.handleSideNavSelect(event));\n        }\n    }\n\n    public focus(): void {\n        this.rovingTabindexController.focus();\n    }\n\n    public blur(): void {\n        if (this.focusElement === this) {\n            return;\n        }\n\n        super.blur();\n    }\n\n    public click(): void {\n        if (this.focusElement === this) {\n            return;\n        }\n\n        super.click();\n    }\n\n    public get focusElement(): SideNavItem | SideNav {\n        return this.rovingTabindexController.focusInElement || this;\n    }\n\n    private isDisabledChild(child: SideNavItem): boolean {\n        if (child.disabled) {\n            return true;\n        }\n        let parent = child.parentElement as\n            | SideNavItem\n            | SideNav\n            | SideNavHeading;\n        while (\n            parent instanceof SideNavHeading ||\n            (!(parent as SideNavItem).disabled &&\n                parent instanceof SideNavItem &&\n                parent.expanded)\n        ) {\n            parent = parent.parentElement as\n                | SideNavItem\n                | SideNav\n                | SideNavHeading;\n        }\n        return parent !== this;\n    }\n\n    private handleSlotchange(): void {\n        if (this.manageTabIndex) {\n            this.rovingTabindexController.manage();\n        } else {\n            this.rovingTabindexController.unmanage();\n        }\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <nav @sidenav-select=${this.handleSelect}>\n                <slot\n                    name=\"descendant\"\n                    @slotchange=${this.handleSlotchange}\n                ></slot>\n            </nav>\n        `;\n    }\n\n    protected firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        const selectedChild = this.querySelector('[selected]') as SideNavItem;\n        if (selectedChild) {\n            this.value = selectedChild.value;\n        }\n    }\n\n    protected updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (changes.has('manageTabIndex')) {\n            if (this.manageTabIndex) {\n                this.rovingTabindexController.manage();\n            } else {\n                this.rovingTabindexController.unmanage();\n            }\n        }\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-sidenav:select': CustomEvent<SidenavSelectDetail>;\n    }\n}\n"]}

package/src/SidenavItem.d.ts

@@ -13,7 +13,6 @@ declare const SideNavItem_base: typeof Focusable & {
 export declare class SideNavItem extends SideNavItem_base {
     static get styles(): CSSResultArray;
     value: string | undefined;
-    manageTabIndex: boolean;
     selected: boolean;
     expanded: boolean;
     protected get parentSideNav(): SideNav | undefined;

package/src/SidenavItem.js

@@ -25,7 +25,6 @@ export class SideNavItem extends LikeAnchor(Focusable) {
     constructor() {
         super(...arguments);
         this.value = undefined;
-        this.manageTabIndex = false;
         this.selected = false;
         this.expanded = false;
     }
@@ -113,9 +112,8 @@ export class SideNavItem extends LikeAnchor(Focusable) {
         `;
     }
     updated(changes) {
-        if (changes.has('selected') || changes.has('manageTabIndex')) {
-            const tabIndexForSelectedState = this.selected ? 0 : -1;
-            this.tabIndex = this.manageTabIndex ? tabIndexForSelectedState : 0;
+        if (this.hasChildren && this.expanded && !this.selected) {
+            this.focusElement.tabIndex = -1;
         }
         super.updated(changes);
     }
@@ -131,7 +129,6 @@ export class SideNavItem extends LikeAnchor(Focusable) {
         const parentSideNav = this.parentSideNav;
         if (parentSideNav) {
             await parentSideNav.updateComplete;
-            this.manageTabIndex = parentSideNav.manageTabIndex;
             parentSideNav.startTrackingSelectionForItem(this);
             this.selected =
                 this.value != null && this.value === parentSideNav.value;
@@ -148,9 +145,6 @@ export class SideNavItem extends LikeAnchor(Focusable) {
 __decorate([
     property()
 ], SideNavItem.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, attribute: false })
-], SideNavItem.prototype, "manageTabIndex", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SideNavItem.prototype, "selected", void 0);

package/src/SidenavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidenavItem.js","sourceRoot":"","sources":["SidenavItem.ts"],"names":[],"mappings":"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","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    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nimport { SideNav, SidenavSelectDetail } from './Sidenav.js';\n\nimport sidenavItemStyles from './sidenav-item.css.js';\n\n/**\n * @element sp-sidenav-item\n *\n * @slot - the Sidenav Items to display as children of this item\n */\nexport class SideNavItem extends LikeAnchor(Focusable) {\n    public static get styles(): CSSResultArray {\n        return [sidenavItemStyles];\n    }\n\n    @property()\n    public value: string | undefined = undefined;\n\n    @property({ type: Boolean, attribute: false })\n    public manageTabIndex = false;\n\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    @property({ type: Boolean, reflect: true })\n    public expanded = false;\n\n    protected get parentSideNav(): SideNav | undefined {\n        if (!this._parentSidenav) {\n            this._parentSidenav = this.closest('sp-sidenav') as\n                | SideNav\n                | undefined;\n        }\n        return this._parentSidenav;\n    }\n\n    protected _parentSidenav?: SideNav;\n\n    protected get hasChildren(): boolean {\n        return !!this.querySelector('sp-sidenav-item');\n    }\n\n    protected get depth(): number {\n        let depth = 0;\n        let element = this.parentElement;\n        while (element instanceof SideNavItem) {\n            depth++;\n            element = element.parentElement;\n        }\n        return depth;\n    }\n\n    public handleSideNavSelect(event: Event): void {\n        this.selected = event.target === this;\n    }\n\n    protected handleClick(event?: Event): void {\n        if (!this.href && event) {\n            event.preventDefault();\n        }\n        if (!this.disabled) {\n            if (this.hasChildren) {\n                this.expanded = !this.expanded;\n            } else if (this.value) {\n                this.announceSelected(this.value);\n            }\n        }\n    }\n\n    private announceSelected(value: string): void {\n        const selectDetail: SidenavSelectDetail = {\n            value,\n        };\n\n        const selectionEvent = new CustomEvent('sidenav-select', {\n            bubbles: true,\n            composed: true,\n            detail: selectDetail,\n        });\n\n        this.dispatchEvent(selectionEvent);\n    }\n\n    public click(): void {\n        this.handleClick();\n    }\n\n    public get focusElement(): HTMLElement {\n        return this.shadowRoot.querySelector('#item-link') as HTMLElement;\n    }\n\n    protected update(changes: PropertyValues): void {\n        if (!this.hasAttribute('slot')) {\n            this.slot = 'descendant';\n        }\n        super.update(changes);\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <a\n                href=${this.href || '#'}\n                target=${ifDefined(this.target)}\n                download=${ifDefined(this.download)}\n                rel=${ifDefined(this.rel)}\n                data-level=\"${this.depth}\"\n                @click=\"${this.handleClick}\"\n                id=\"item-link\"\n                aria-current=${ifDefined(\n                    this.selected && this.href ? 'page' : undefined\n                )}\n            >\n                <slot name=\"icon\"></slot>\n                ${this.label}\n                <slot></slot>\n            </a>\n            ${this.expanded\n                ? html`\n                      <slot name=\"descendant\"></slot>\n                  `\n                : html``}\n        `;\n    }\n\n    protected updated(changes: PropertyValues): void {\n        if (changes.has('selected') || changes.has('manageTabIndex')) {\n            const tabIndexForSelectedState = this.selected ? 0 : -1;\n            this.tabIndex = this.manageTabIndex ? tabIndexForSelectedState : 0;\n        }\n        super.updated(changes);\n    }\n\n    public connectedCallback(): void {\n        super.connectedCallback();\n        this.startTrackingSelection();\n    }\n\n    public disconnectedCallback(): void {\n        this.stopTrackingSelection();\n        super.disconnectedCallback();\n    }\n\n    private async startTrackingSelection(): Promise<void> {\n        const parentSideNav = this.parentSideNav;\n        if (parentSideNav) {\n            await parentSideNav.updateComplete;\n            this.manageTabIndex = parentSideNav.manageTabIndex;\n            parentSideNav.startTrackingSelectionForItem(this);\n            this.selected =\n                this.value != null && this.value === parentSideNav.value;\n        }\n    }\n\n    private stopTrackingSelection(): void {\n        const parentSideNav = this.parentSideNav;\n        if (parentSideNav) {\n            parentSideNav.stopTrackingSelectionForItem(this);\n        }\n        this._parentSidenav = undefined;\n    }\n}\n"]}
+{"version":3,"file":"SidenavItem.js","sourceRoot":"","sources":["SidenavItem.ts"],"names":[],"mappings":"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","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    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nimport { SideNav, SidenavSelectDetail } from './Sidenav.js';\n\nimport sidenavItemStyles from './sidenav-item.css.js';\n\n/**\n * @element sp-sidenav-item\n *\n * @slot - the Sidenav Items to display as children of this item\n */\nexport class SideNavItem extends LikeAnchor(Focusable) {\n    public static get styles(): CSSResultArray {\n        return [sidenavItemStyles];\n    }\n\n    @property()\n    public value: string | undefined = undefined;\n\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    @property({ type: Boolean, reflect: true })\n    public expanded = false;\n\n    protected get parentSideNav(): SideNav | undefined {\n        if (!this._parentSidenav) {\n            this._parentSidenav = this.closest('sp-sidenav') as\n                | SideNav\n                | undefined;\n        }\n        return this._parentSidenav;\n    }\n\n    protected _parentSidenav?: SideNav;\n\n    protected get hasChildren(): boolean {\n        return !!this.querySelector('sp-sidenav-item');\n    }\n\n    protected get depth(): number {\n        let depth = 0;\n        let element = this.parentElement;\n        while (element instanceof SideNavItem) {\n            depth++;\n            element = element.parentElement;\n        }\n        return depth;\n    }\n\n    public handleSideNavSelect(event: Event): void {\n        this.selected = event.target === this;\n    }\n\n    protected handleClick(event?: Event): void {\n        if (!this.href && event) {\n            event.preventDefault();\n        }\n        if (!this.disabled) {\n            if (this.hasChildren) {\n                this.expanded = !this.expanded;\n            } else if (this.value) {\n                this.announceSelected(this.value);\n            }\n        }\n    }\n\n    private announceSelected(value: string): void {\n        const selectDetail: SidenavSelectDetail = {\n            value,\n        };\n\n        const selectionEvent = new CustomEvent('sidenav-select', {\n            bubbles: true,\n            composed: true,\n            detail: selectDetail,\n        });\n\n        this.dispatchEvent(selectionEvent);\n    }\n\n    public click(): void {\n        this.handleClick();\n    }\n\n    public get focusElement(): HTMLElement {\n        return this.shadowRoot.querySelector('#item-link') as HTMLElement;\n    }\n\n    protected update(changes: PropertyValues): void {\n        if (!this.hasAttribute('slot')) {\n            this.slot = 'descendant';\n        }\n        super.update(changes);\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <a\n                href=${this.href || '#'}\n                target=${ifDefined(this.target)}\n                download=${ifDefined(this.download)}\n                rel=${ifDefined(this.rel)}\n                data-level=\"${this.depth}\"\n                @click=\"${this.handleClick}\"\n                id=\"item-link\"\n                aria-current=${ifDefined(\n                    this.selected && this.href ? 'page' : undefined\n                )}\n            >\n                <slot name=\"icon\"></slot>\n                ${this.label}\n                <slot></slot>\n            </a>\n            ${this.expanded\n                ? html`\n                      <slot name=\"descendant\"></slot>\n                  `\n                : html``}\n        `;\n    }\n\n    protected updated(changes: PropertyValues): void {\n        if (this.hasChildren && this.expanded && !this.selected) {\n            this.focusElement.tabIndex = -1;\n        }\n        super.updated(changes);\n    }\n\n    public connectedCallback(): void {\n        super.connectedCallback();\n        this.startTrackingSelection();\n    }\n\n    public disconnectedCallback(): void {\n        this.stopTrackingSelection();\n        super.disconnectedCallback();\n    }\n\n    private async startTrackingSelection(): Promise<void> {\n        const parentSideNav = this.parentSideNav;\n        if (parentSideNav) {\n            await parentSideNav.updateComplete;\n            parentSideNav.startTrackingSelectionForItem(this);\n            this.selected =\n                this.value != null && this.value === parentSideNav.value;\n        }\n    }\n\n    private stopTrackingSelection(): void {\n        const parentSideNav = this.parentSideNav;\n        if (parentSideNav) {\n            parentSideNav.stopTrackingSelectionForItem(this);\n        }\n        this._parentSidenav = undefined;\n    }\n}\n"]}

package/src/sidenav-heading.css.js

@@ -13,7 +13,7 @@ import { css } from '@spectrum-web-components/base';
 const styles = css `
 #list{--spectrum-sidenav-item-padding-y:var(
 --spectrum-global-dimension-size-65
-);list-style-type:none;margin:0;padding:0}:host([dir=ltr]) .spectrum-SideNav-itemLink.focus-visible:before{left:0}:host([dir=ltr]) .spectrum-SideNav-itemLink:focus-visible:before{left:0}:host([dir=rtl]) .spectrum-SideNav-itemLink.focus-visible:before{right:0}:host([dir=rtl]) .spectrum-SideNav-itemLink:focus-visible:before{right:0}:host([dir=ltr]) .spectrum-SideNav-itemLink.focus-visible:before{right:0}:host([dir=ltr]) .spectrum-SideNav-itemLink:focus-visible:before{right:0}:host([dir=rtl]) .spectrum-SideNav-itemLink.focus-visible:before{left:0}:host([dir=rtl]) .spectrum-SideNav-itemLink:focus-visible:before{left:0}:host([dir=ltr]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-right:var(
+);list-style-type:none;margin:0;padding:0}:host([dir=ltr]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-right:var(
 --spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)
 )}:host([dir=rtl]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-left:var(
 --spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)