@spectrum-web-components/sidenav 0.12.0 → 0.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +4 -4
- package/package.json +5 -5
- package/src/sidenav-heading.css.js +1 -1
- package/src/sidenav-heading.css.js.map +1 -1
- package/src/sidenav-item.css.js +2 -10
- package/src/sidenav-item.css.js.map +1 -1
- package/src/spectrum-sidenav-heading.css.js +1 -1
- package/src/spectrum-sidenav-heading.css.js.map +1 -1
- package/src/spectrum-sidenav-item.css.js +2 -10
- package/src/spectrum-sidenav-item.css.js.map +1 -1
- package/test/sidenav-item.test.js +0 -95
- package/test/sidenav-item.test.js.map +0 -1
- package/test/sidenav.test-vrt.js +0 -15
- package/test/sidenav.test-vrt.js.map +0 -1
- package/test/sidenav.test.js +0 -355
- package/test/sidenav.test.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -656,7 +656,7 @@
|
|
|
656
656
|
{
|
|
657
657
|
"kind": "variable",
|
|
658
658
|
"name": "styles",
|
|
659
|
-
"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
|
|
659
|
+
"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`"
|
|
660
660
|
}
|
|
661
661
|
],
|
|
662
662
|
"exports": [
|
|
@@ -677,7 +677,7 @@
|
|
|
677
677
|
{
|
|
678
678
|
"kind": "variable",
|
|
679
679
|
"name": "styles",
|
|
680
|
-
"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}
|
|
680
|
+
"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`"
|
|
681
681
|
}
|
|
682
682
|
],
|
|
683
683
|
"exports": [
|
|
@@ -719,7 +719,7 @@
|
|
|
719
719
|
{
|
|
720
720
|
"kind": "variable",
|
|
721
721
|
"name": "styles",
|
|
722
|
-
"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
|
|
722
|
+
"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`"
|
|
723
723
|
}
|
|
724
724
|
],
|
|
725
725
|
"exports": [
|
|
@@ -740,7 +740,7 @@
|
|
|
740
740
|
{
|
|
741
741
|
"kind": "variable",
|
|
742
742
|
"name": "styles",
|
|
743
|
-
"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}
|
|
743
|
+
"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`"
|
|
744
744
|
}
|
|
745
745
|
],
|
|
746
746
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/sidenav",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -48,17 +48,17 @@
|
|
|
48
48
|
"lit-html"
|
|
49
49
|
],
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@spectrum-web-components/base": "^0.5.
|
|
52
|
-
"@spectrum-web-components/shared": "^0.13.
|
|
51
|
+
"@spectrum-web-components/base": "^0.5.1",
|
|
52
|
+
"@spectrum-web-components/shared": "^0.13.1",
|
|
53
53
|
"tslib": "^2.0.0"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@spectrum-css/sidenav": "^3.0.
|
|
56
|
+
"@spectrum-css/sidenav": "^3.0.10"
|
|
57
57
|
},
|
|
58
58
|
"types": "./src/index.d.ts",
|
|
59
59
|
"customElements": "custom-elements.json",
|
|
60
60
|
"sideEffects": [
|
|
61
61
|
"./sp-*.js"
|
|
62
62
|
],
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "df3f333ee26a45f9fc247716b6e8ef051dca630b"
|
|
64
64
|
}
|
|
@@ -13,7 +13,7 @@ import { css } from '@spectrum-web-components/base';
|
|
|
13
13
|
const styles = css `
|
|
14
14
|
#list{--spectrum-sidenav-item-padding-y:var(
|
|
15
15
|
--spectrum-global-dimension-size-65
|
|
16
|
-
);list-style-type:none;margin:0;padding:0}:host([dir=ltr]) .spectrum-SideNav-itemLink
|
|
16
|
+
);list-style-type:none;margin:0;padding:0}:host([dir=ltr]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-right:var(
|
|
17
17
|
--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)
|
|
18
18
|
)}:host([dir=rtl]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-left:var(
|
|
19
19
|
--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidenav-heading.css.js","sourceRoot":"","sources":["sidenav-heading.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,CAAC;AACF,eAAe,MAAM,CAAC","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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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
|
|
1
|
+
{"version":3,"file":"sidenav-heading.css.js","sourceRoot":"","sources":["sidenav-heading.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,CAAC;AACF,eAAe,MAAM,CAAC","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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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`;\nexport default styles;"]}
|
package/src/sidenav-item.css.js
CHANGED
|
@@ -27,19 +27,11 @@ const styles = css `
|
|
|
27
27
|
--spectrum-sidenav-item-height,var(--spectrum-alias-single-line-height)
|
|
28
28
|
);padding:var(--spectrum-sidenav-item-padding-y) var(
|
|
29
29
|
--spectrum-sidenav-item-padding-x,var(--spectrum-global-dimension-size-150)
|
|
30
|
-
);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}
|
|
30
|
+
);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(
|
|
31
31
|
--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)
|
|
32
32
|
) solid transparent;border-radius:var(
|
|
33
33
|
--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
34
|
-
);
|
|
35
|
-
--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)
|
|
36
|
-
) solid transparent;bottom:0;content:"";position:absolute;top:0}#item-link:focus-visible:before{border-bottom:var(
|
|
37
|
-
--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)
|
|
38
|
-
) solid transparent;border-radius:var(
|
|
39
|
-
--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
40
|
-
);border-top:var(
|
|
41
|
-
--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)
|
|
42
|
-
) solid transparent;bottom:0;content:"";position:absolute;top:0}:host([dir=ltr]) #item-link ::slotted([slot=icon]){margin-right:var(
|
|
34
|
+
);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(
|
|
43
35
|
--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)
|
|
44
36
|
)}:host([dir=rtl]) #item-link ::slotted([slot=icon]){margin-left:var(
|
|
45
37
|
--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidenav-item.css.js","sourceRoot":"","sources":["sidenav-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sidenav-item.css.js","sourceRoot":"","sources":["sidenav-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GjB,CAAC;AACF,eAAe,MAAM,CAAC","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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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`;\nexport default styles;"]}
|
|
@@ -13,7 +13,7 @@ import { css } from '@spectrum-web-components/base';
|
|
|
13
13
|
const styles = css `
|
|
14
14
|
#list{--spectrum-sidenav-item-padding-y:var(
|
|
15
15
|
--spectrum-global-dimension-size-65
|
|
16
|
-
);list-style-type:none;margin:0;padding:0}:host([dir=ltr]) .spectrum-SideNav-itemLink
|
|
16
|
+
);list-style-type:none;margin:0;padding:0}:host([dir=ltr]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-right:var(
|
|
17
17
|
--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)
|
|
18
18
|
)}:host([dir=rtl]) .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon{margin-left:var(
|
|
19
19
|
--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-sidenav-heading.css.js","sourceRoot":"","sources":["spectrum-sidenav-heading.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,CAAC;AACF,eAAe,MAAM,CAAC","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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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
|
|
1
|
+
{"version":3,"file":"spectrum-sidenav-heading.css.js","sourceRoot":"","sources":["spectrum-sidenav-heading.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,CAAC;AACF,eAAe,MAAM,CAAC","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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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`;\nexport default styles;"]}
|
|
@@ -27,19 +27,11 @@ const styles = css `
|
|
|
27
27
|
--spectrum-sidenav-item-height,var(--spectrum-alias-single-line-height)
|
|
28
28
|
);padding:var(--spectrum-sidenav-item-padding-y) var(
|
|
29
29
|
--spectrum-sidenav-item-padding-x,var(--spectrum-global-dimension-size-150)
|
|
30
|
-
);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}
|
|
30
|
+
);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(
|
|
31
31
|
--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)
|
|
32
32
|
) solid transparent;border-radius:var(
|
|
33
33
|
--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
34
|
-
);
|
|
35
|
-
--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)
|
|
36
|
-
) solid transparent;bottom:0;content:"";position:absolute;top:0}#item-link:focus-visible:before{border-bottom:var(
|
|
37
|
-
--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)
|
|
38
|
-
) solid transparent;border-radius:var(
|
|
39
|
-
--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
40
|
-
);border-top:var(
|
|
41
|
-
--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)
|
|
42
|
-
) solid transparent;bottom:0;content:"";position:absolute;top:0}:host([dir=ltr]) #item-link ::slotted([slot=icon]){margin-right:var(
|
|
34
|
+
);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(
|
|
43
35
|
--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)
|
|
44
36
|
)}:host([dir=rtl]) #item-link ::slotted([slot=icon]){margin-left:var(
|
|
45
37
|
--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-sidenav-item.css.js","sourceRoot":"","sources":["spectrum-sidenav-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"spectrum-sidenav-item.css.js","sourceRoot":"","sources":["spectrum-sidenav-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFjB,CAAC;AACF,eAAe,MAAM,CAAC","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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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`;\nexport default styles;"]}
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import '../sp-sidenav.js';
|
|
13
|
-
import '../sp-sidenav-item.js';
|
|
14
|
-
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
|
|
15
|
-
describe('Sidenav Item', () => {
|
|
16
|
-
it('can exist disabled and with no parent', async () => {
|
|
17
|
-
let selected = false;
|
|
18
|
-
const onSidenavSelect = () => {
|
|
19
|
-
selected = true;
|
|
20
|
-
};
|
|
21
|
-
const el = await fixture(html `
|
|
22
|
-
<sp-sidenav-item
|
|
23
|
-
disabled
|
|
24
|
-
value="Section 2"
|
|
25
|
-
label="Section 2"
|
|
26
|
-
@sidenav-select=${onSidenavSelect}
|
|
27
|
-
></sp-sidenav-item>
|
|
28
|
-
`);
|
|
29
|
-
await elementUpdated(el);
|
|
30
|
-
expect(selected).to.be.false;
|
|
31
|
-
el.click();
|
|
32
|
-
await elementUpdated(el);
|
|
33
|
-
expect(selected).to.be.false;
|
|
34
|
-
el.disabled = false;
|
|
35
|
-
el.click();
|
|
36
|
-
await elementUpdated(el);
|
|
37
|
-
expect(selected).to.be.true;
|
|
38
|
-
});
|
|
39
|
-
it('clicking expands a sidenav item with children', async () => {
|
|
40
|
-
const el = await fixture(html `
|
|
41
|
-
<sp-sidenav-item>
|
|
42
|
-
<sp-sidenav-item
|
|
43
|
-
value="Section 1"
|
|
44
|
-
label="Section 1"
|
|
45
|
-
></sp-sidenav-item>
|
|
46
|
-
<sp-sidenav-item
|
|
47
|
-
value="Section 2"
|
|
48
|
-
label="Section 2"
|
|
49
|
-
></sp-sidenav-item>
|
|
50
|
-
</sp-sidenav-item>
|
|
51
|
-
`);
|
|
52
|
-
await elementUpdated(el);
|
|
53
|
-
expect(el.shadowRoot).to.exist;
|
|
54
|
-
if (!el.shadowRoot)
|
|
55
|
-
return;
|
|
56
|
-
let slot = el.shadowRoot.querySelector('slot[name="descendant"]');
|
|
57
|
-
expect(slot).not.to.exist;
|
|
58
|
-
expect(el.expanded).to.be.false;
|
|
59
|
-
el.click();
|
|
60
|
-
await elementUpdated(el);
|
|
61
|
-
expect(el.expanded).to.be.true;
|
|
62
|
-
slot = el.shadowRoot.querySelector('slot[name="descendant"]');
|
|
63
|
-
expect(slot).to.exist;
|
|
64
|
-
if (!slot)
|
|
65
|
-
return;
|
|
66
|
-
expect(slot.assignedElements().length).to.equal(2);
|
|
67
|
-
});
|
|
68
|
-
it('populated `aria-current`', async () => {
|
|
69
|
-
const el = await fixture(html `
|
|
70
|
-
<sp-sidenav value="Section 2">
|
|
71
|
-
<sp-sidenav-item
|
|
72
|
-
href="https://opensource.adobe.com/spectrum-web-components/"
|
|
73
|
-
label="Section 1"
|
|
74
|
-
value="Section 1"
|
|
75
|
-
></sp-sidenav-item>
|
|
76
|
-
<sp-sidenav-item
|
|
77
|
-
href=${window.location.href}
|
|
78
|
-
label="Section 2"
|
|
79
|
-
value="Section 2"
|
|
80
|
-
selected
|
|
81
|
-
></sp-sidenav-item>
|
|
82
|
-
</sp-sidenav>
|
|
83
|
-
`);
|
|
84
|
-
await elementUpdated(el);
|
|
85
|
-
const currentItem = el.querySelector('sp-sidenav-item:nth-child(2)');
|
|
86
|
-
const otherItem = el.querySelector('sp-sidenav-item:nth-child(1)');
|
|
87
|
-
await elementUpdated(currentItem);
|
|
88
|
-
await elementUpdated(otherItem);
|
|
89
|
-
expect(currentItem.focusElement.hasAttribute('aria-current'), 'current')
|
|
90
|
-
.to.be.true;
|
|
91
|
-
expect(otherItem.focusElement.hasAttribute('aria-current'), 'other').to
|
|
92
|
-
.be.false;
|
|
93
|
-
});
|
|
94
|
-
});
|
|
95
|
-
//# sourceMappingURL=sidenav-item.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sidenav-item.test.js","sourceRoot":"","sources":["sidenav-item.test.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 '../sp-sidenav.js';\nimport '../sp-sidenav-item.js';\nimport { SideNavItem } from '../';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\ndescribe('Sidenav Item', () => {\n it('can exist disabled and with no parent', async () => {\n let selected = false;\n const onSidenavSelect = (): void => {\n selected = true;\n };\n const el = await fixture<SideNavItem>(\n html`\n <sp-sidenav-item\n disabled\n value=\"Section 2\"\n label=\"Section 2\"\n @sidenav-select=${onSidenavSelect}\n ></sp-sidenav-item>\n `\n );\n\n await elementUpdated(el);\n\n expect(selected).to.be.false;\n\n el.click();\n\n await elementUpdated(el);\n\n expect(selected).to.be.false;\n\n el.disabled = false;\n\n el.click();\n\n await elementUpdated(el);\n\n expect(selected).to.be.true;\n });\n\n it('clicking expands a sidenav item with children', async () => {\n const el = await fixture<SideNavItem>(\n html`\n <sp-sidenav-item>\n <sp-sidenav-item\n value=\"Section 1\"\n label=\"Section 1\"\n ></sp-sidenav-item>\n <sp-sidenav-item\n value=\"Section 2\"\n label=\"Section 2\"\n ></sp-sidenav-item>\n </sp-sidenav-item>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.shadowRoot).to.exist;\n if (!el.shadowRoot) return;\n\n let slot: HTMLSlotElement | null = el.shadowRoot.querySelector(\n 'slot[name=\"descendant\"]'\n );\n expect(slot).not.to.exist;\n\n expect(el.expanded).to.be.false;\n\n el.click();\n\n await elementUpdated(el);\n\n expect(el.expanded).to.be.true;\n\n slot = el.shadowRoot.querySelector(\n 'slot[name=\"descendant\"]'\n ) as HTMLSlotElement;\n expect(slot).to.exist;\n if (!slot) return;\n\n expect(slot.assignedElements().length).to.equal(2);\n });\n\n it('populated `aria-current`', async () => {\n const el = await fixture<SideNavItem>(\n html`\n <sp-sidenav value=\"Section 2\">\n <sp-sidenav-item\n href=\"https://opensource.adobe.com/spectrum-web-components/\"\n label=\"Section 1\"\n value=\"Section 1\"\n ></sp-sidenav-item>\n <sp-sidenav-item\n href=${window.location.href}\n label=\"Section 2\"\n value=\"Section 2\"\n selected\n ></sp-sidenav-item>\n </sp-sidenav>\n `\n );\n\n await elementUpdated(el);\n\n const currentItem = el.querySelector(\n 'sp-sidenav-item:nth-child(2)'\n ) as SideNavItem;\n const otherItem = el.querySelector(\n 'sp-sidenav-item:nth-child(1)'\n ) as SideNavItem;\n\n await elementUpdated(currentItem);\n await elementUpdated(otherItem);\n\n expect(currentItem.focusElement.hasAttribute('aria-current'), 'current')\n .to.be.true;\n expect(otherItem.focusElement.hasAttribute('aria-current'), 'other').to\n .be.false;\n });\n});\n"]}
|
package/test/sidenav.test-vrt.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import * as stories from '../stories/sidenav.stories.js';
|
|
13
|
-
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
-
regressVisuals('SidenavStories', stories);
|
|
15
|
-
//# sourceMappingURL=sidenav.test-vrt.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sidenav.test-vrt.js","sourceRoot":"","sources":["sidenav.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC","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 * as stories from '../stories/sidenav.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('SidenavStories', stories);\n"]}
|
package/test/sidenav.test.js
DELETED
|
@@ -1,355 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import '../sp-sidenav.js';
|
|
13
|
-
import '../sp-sidenav-item.js';
|
|
14
|
-
import '../sp-sidenav-heading.js';
|
|
15
|
-
import { SideNavItem } from '../';
|
|
16
|
-
import { manageTabIndex } from '../stories/sidenav.stories.js';
|
|
17
|
-
import { arrowDownEvent, arrowUpEvent, shiftTabEvent, } from '../../../test/testing-helpers.js';
|
|
18
|
-
import { elementUpdated, expect, fixture, html, waitUntil, } from '@open-wc/testing';
|
|
19
|
-
import { LitElement } from '@spectrum-web-components/base';
|
|
20
|
-
import { spy } from 'sinon';
|
|
21
|
-
import { executeServerCommand } from '@web/test-runner-commands';
|
|
22
|
-
describe('Sidenav', () => {
|
|
23
|
-
it('loads', async () => {
|
|
24
|
-
const el = await fixture(html `
|
|
25
|
-
<sp-sidenav>
|
|
26
|
-
<sp-sidenav-heading label="CATEGORY 1">
|
|
27
|
-
<sp-sidenav-item
|
|
28
|
-
value="Section 1"
|
|
29
|
-
label="Section 1"
|
|
30
|
-
></sp-sidenav-item>
|
|
31
|
-
<sp-sidenav-item
|
|
32
|
-
value="Section 2"
|
|
33
|
-
label="Section 2"
|
|
34
|
-
></sp-sidenav-item>
|
|
35
|
-
</sp-sidenav-heading>
|
|
36
|
-
</sp-sidenav>
|
|
37
|
-
`);
|
|
38
|
-
await elementUpdated(el);
|
|
39
|
-
await expect(el).to.be.accessible();
|
|
40
|
-
});
|
|
41
|
-
it('does not accept focus/click/blur when empty', async () => {
|
|
42
|
-
const el = await fixture(html `
|
|
43
|
-
<sp-sidenav></sp-sidenav>
|
|
44
|
-
`);
|
|
45
|
-
await elementUpdated(el);
|
|
46
|
-
expect(document.activeElement === el).to.be.false;
|
|
47
|
-
el.focus();
|
|
48
|
-
await elementUpdated(el);
|
|
49
|
-
expect(document.activeElement === el).to.be.false;
|
|
50
|
-
el.blur();
|
|
51
|
-
await elementUpdated(el);
|
|
52
|
-
expect(document.activeElement === el).to.be.false;
|
|
53
|
-
el.click();
|
|
54
|
-
await elementUpdated(el);
|
|
55
|
-
expect(document.activeElement === el).to.be.false;
|
|
56
|
-
});
|
|
57
|
-
it('does not accept keyboard events when items are not present', async () => {
|
|
58
|
-
const errorSpy = spy();
|
|
59
|
-
const el = await fixture(html `
|
|
60
|
-
<sp-sidenav>
|
|
61
|
-
<sp-sidenav-item
|
|
62
|
-
value="Section 1"
|
|
63
|
-
label="Section 1"
|
|
64
|
-
></sp-sidenav-item>
|
|
65
|
-
</sp-sidenav>
|
|
66
|
-
`);
|
|
67
|
-
await elementUpdated(el);
|
|
68
|
-
const item = el.querySelector('sp-sidenav-item');
|
|
69
|
-
window.addEventListener('error', () => errorSpy());
|
|
70
|
-
el.dispatchEvent(new FocusEvent('focusin'));
|
|
71
|
-
item.remove();
|
|
72
|
-
el.dispatchEvent(new KeyboardEvent('keydown', {
|
|
73
|
-
code: 'ArrowDown',
|
|
74
|
-
}));
|
|
75
|
-
expect(errorSpy.callCount).to.equal(0);
|
|
76
|
-
});
|
|
77
|
-
it('does not accept focus when all children [disabled]', async () => {
|
|
78
|
-
const el = await fixture(html `
|
|
79
|
-
<sp-sidenav>
|
|
80
|
-
<sp-sidenav-item
|
|
81
|
-
disabled
|
|
82
|
-
value="Section 1"
|
|
83
|
-
label="Section 1"
|
|
84
|
-
></sp-sidenav-item>
|
|
85
|
-
<sp-sidenav-item
|
|
86
|
-
disabled
|
|
87
|
-
value="Section 2"
|
|
88
|
-
label="Section 2"
|
|
89
|
-
></sp-sidenav-item>
|
|
90
|
-
</sp-sidenav>
|
|
91
|
-
`);
|
|
92
|
-
await elementUpdated(el);
|
|
93
|
-
expect(document.activeElement === el).to.be.false;
|
|
94
|
-
el.focus();
|
|
95
|
-
await elementUpdated(el);
|
|
96
|
-
expect(document.activeElement === el).to.be.false;
|
|
97
|
-
expect(el.matches(':focus-within')).to.be.false;
|
|
98
|
-
});
|
|
99
|
-
it('sets manageTabIndex on new children', async () => {
|
|
100
|
-
const el = await fixture(html `
|
|
101
|
-
<sp-sidenav>
|
|
102
|
-
<sp-sidenav-item
|
|
103
|
-
value="Section 1"
|
|
104
|
-
label="Section 1"
|
|
105
|
-
></sp-sidenav-item>
|
|
106
|
-
<sp-sidenav-item
|
|
107
|
-
value="Section 2"
|
|
108
|
-
label="Section 2"
|
|
109
|
-
></sp-sidenav-item>
|
|
110
|
-
</sp-sidenav>
|
|
111
|
-
`);
|
|
112
|
-
await elementUpdated(el);
|
|
113
|
-
expect(el.manageTabIndex).to.be.false;
|
|
114
|
-
const item1 = el.querySelector('sp-sidenav-item');
|
|
115
|
-
expect(item1.manageTabIndex).to.be.false;
|
|
116
|
-
expect(item1.tabIndex).to.equal(0);
|
|
117
|
-
const newItem = document.createElement('sp-sidenav-item');
|
|
118
|
-
newItem.value = 'Section 3';
|
|
119
|
-
newItem.label = 'Section 3';
|
|
120
|
-
el.appendChild(newItem);
|
|
121
|
-
await elementUpdated(newItem);
|
|
122
|
-
expect(newItem.manageTabIndex).to.be.false;
|
|
123
|
-
expect(newItem.tabIndex).to.equal(0);
|
|
124
|
-
el.focus();
|
|
125
|
-
const focused = document.activeElement;
|
|
126
|
-
focused.click();
|
|
127
|
-
expect(focused.selected).to.be.true;
|
|
128
|
-
el.dispatchEvent(shiftTabEvent);
|
|
129
|
-
const outsideFocused = document.activeElement;
|
|
130
|
-
expect(typeof outsideFocused).not.to.equal(SideNavItem);
|
|
131
|
-
});
|
|
132
|
-
it('handles select', async () => {
|
|
133
|
-
const changeSpy = spy();
|
|
134
|
-
const el = await fixture(html `
|
|
135
|
-
<sp-sidenav @change=${() => changeSpy()}>
|
|
136
|
-
<sp-sidenav-heading label="CATEGORY 1">
|
|
137
|
-
<sp-sidenav-item
|
|
138
|
-
value="Section 1"
|
|
139
|
-
label="Section 1"
|
|
140
|
-
></sp-sidenav-item>
|
|
141
|
-
<sp-sidenav-item value="Section 2" label="Section 2">
|
|
142
|
-
<sp-sidenav-item
|
|
143
|
-
value="Section 2a"
|
|
144
|
-
label="Section 2a"
|
|
145
|
-
></sp-sidenav-item>
|
|
146
|
-
</sp-sidenav-item>
|
|
147
|
-
</sp-sidenav-heading>
|
|
148
|
-
</sp-sidenav>
|
|
149
|
-
`);
|
|
150
|
-
await elementUpdated(el);
|
|
151
|
-
expect(el.value).to.be.undefined;
|
|
152
|
-
const sidenavItem = el.querySelector('[value="Section 2"]');
|
|
153
|
-
sidenavItem.dispatchEvent(new CustomEvent('sidenav-select', {
|
|
154
|
-
bubbles: true,
|
|
155
|
-
detail: {
|
|
156
|
-
value: 'Section 2',
|
|
157
|
-
},
|
|
158
|
-
}));
|
|
159
|
-
await elementUpdated(el);
|
|
160
|
-
expect(el.value).to.equal('Section 2');
|
|
161
|
-
expect(changeSpy.callCount).to.equal(1);
|
|
162
|
-
sidenavItem.click();
|
|
163
|
-
await elementUpdated(sidenavItem);
|
|
164
|
-
const sidenavItemChild = el.querySelector('[value="Section 2a"]');
|
|
165
|
-
sidenavItemChild.click();
|
|
166
|
-
await elementUpdated(el);
|
|
167
|
-
expect(el.value).to.equal('Section 2a');
|
|
168
|
-
expect(changeSpy.callCount).to.equal(2);
|
|
169
|
-
});
|
|
170
|
-
it('prevents selection', async () => {
|
|
171
|
-
const changeSpy = spy();
|
|
172
|
-
const el = await fixture(html `
|
|
173
|
-
<sp-sidenav
|
|
174
|
-
@change=${(event) => {
|
|
175
|
-
event.preventDefault();
|
|
176
|
-
changeSpy();
|
|
177
|
-
}}
|
|
178
|
-
>
|
|
179
|
-
<sp-sidenav-heading label="CATEGORY 1">
|
|
180
|
-
<sp-sidenav-item
|
|
181
|
-
value="Section 1"
|
|
182
|
-
label="Section 1"
|
|
183
|
-
></sp-sidenav-item>
|
|
184
|
-
<sp-sidenav-item
|
|
185
|
-
value="Section 2"
|
|
186
|
-
label="Section 2"
|
|
187
|
-
opened
|
|
188
|
-
>
|
|
189
|
-
<sp-sidenav-item
|
|
190
|
-
value="Section 2a"
|
|
191
|
-
label="Section 2a"
|
|
192
|
-
></sp-sidenav-item>
|
|
193
|
-
</sp-sidenav-item>
|
|
194
|
-
</sp-sidenav-heading>
|
|
195
|
-
</sp-sidenav>
|
|
196
|
-
`);
|
|
197
|
-
await elementUpdated(el);
|
|
198
|
-
expect(el.value).to.be.undefined;
|
|
199
|
-
el.click();
|
|
200
|
-
await elementUpdated(el);
|
|
201
|
-
expect(el.value).to.be.undefined;
|
|
202
|
-
expect(changeSpy.callCount).to.equal(1);
|
|
203
|
-
});
|
|
204
|
-
it('prevents [tabindex=0] while `focusin`', async () => {
|
|
205
|
-
const el = await fixture(manageTabIndex());
|
|
206
|
-
const selected = el.querySelector('[value="Section 1"]');
|
|
207
|
-
const toBeSelected = el.querySelector('[value="Section 0"]');
|
|
208
|
-
await elementUpdated(el);
|
|
209
|
-
await waitUntil(() => el.value === 'Section 1', 'wait for selection');
|
|
210
|
-
expect(el.value).to.equal('Section 1');
|
|
211
|
-
expect(selected.tabIndex, 'initially 0').to.equal(0);
|
|
212
|
-
el.focus();
|
|
213
|
-
await elementUpdated(el);
|
|
214
|
-
expect(el.value).to.equal('Section 1');
|
|
215
|
-
expect(selected.tabIndex, '-1 when focusin').to.equal(-1);
|
|
216
|
-
el.blur();
|
|
217
|
-
await elementUpdated(el);
|
|
218
|
-
expect(el.value).to.equal('Section 1');
|
|
219
|
-
expect(selected.tabIndex, '0 when blur').to.equal(0);
|
|
220
|
-
toBeSelected.focusElement.click();
|
|
221
|
-
await elementUpdated(el);
|
|
222
|
-
expect(el.value).to.equal('Section 0');
|
|
223
|
-
expect(toBeSelected.tabIndex, 'will be new focusable child').to.equal(0);
|
|
224
|
-
expect(selected.tabIndex, 'no longer selected').to.equal(-1);
|
|
225
|
-
});
|
|
226
|
-
it('manage tab index', async () => {
|
|
227
|
-
const el = await fixture(manageTabIndex());
|
|
228
|
-
await elementUpdated(el);
|
|
229
|
-
expect(el.value).to.equal('Section 1');
|
|
230
|
-
el.focus();
|
|
231
|
-
el.dispatchEvent(arrowUpEvent);
|
|
232
|
-
let focused = document.activeElement;
|
|
233
|
-
focused.focusElement.click();
|
|
234
|
-
await elementUpdated(el);
|
|
235
|
-
expect(el.value).to.equal('Section 0');
|
|
236
|
-
el.focus();
|
|
237
|
-
el.dispatchEvent(arrowDownEvent);
|
|
238
|
-
el.dispatchEvent(arrowDownEvent);
|
|
239
|
-
focused = document.activeElement;
|
|
240
|
-
expect(focused.expanded, 'not expanded').to.be.false;
|
|
241
|
-
focused.focusElement.click();
|
|
242
|
-
await elementUpdated(el);
|
|
243
|
-
expect(focused.expanded, 'expanded').to.be.true;
|
|
244
|
-
el.dispatchEvent(arrowDownEvent);
|
|
245
|
-
await elementUpdated(el);
|
|
246
|
-
focused = document.activeElement;
|
|
247
|
-
focused.focusElement.click();
|
|
248
|
-
await elementUpdated(el);
|
|
249
|
-
expect(el.value).to.equal('Section 3a');
|
|
250
|
-
document.body.focus();
|
|
251
|
-
el.focus();
|
|
252
|
-
focused = document.activeElement;
|
|
253
|
-
expect(focused.selected, 'selected').to.be.true;
|
|
254
|
-
el.dispatchEvent(shiftTabEvent);
|
|
255
|
-
const outsideFocused = document.activeElement;
|
|
256
|
-
expect(typeof outsideFocused).not.to.equal(SideNavItem);
|
|
257
|
-
});
|
|
258
|
-
it('focuses the child anchor not the root when [tabindex=-1]', async () => {
|
|
259
|
-
const el = await fixture(manageTabIndex());
|
|
260
|
-
await elementUpdated(el);
|
|
261
|
-
const firstItem = el.querySelector('[value="Section 0"]');
|
|
262
|
-
const selected = el.querySelector('[selected]');
|
|
263
|
-
expect(selected.tabIndex).to.equal(0);
|
|
264
|
-
expect(firstItem.tabIndex).to.equal(-1);
|
|
265
|
-
const firstRect = firstItem.getBoundingClientRect();
|
|
266
|
-
await executeServerCommand('send-mouse', {
|
|
267
|
-
steps: [
|
|
268
|
-
{
|
|
269
|
-
type: 'move',
|
|
270
|
-
position: [firstRect.x + 2, firstRect.y + 2],
|
|
271
|
-
},
|
|
272
|
-
{
|
|
273
|
-
type: 'down',
|
|
274
|
-
},
|
|
275
|
-
],
|
|
276
|
-
});
|
|
277
|
-
await elementUpdated(el);
|
|
278
|
-
expect(firstItem.focusElement.matches(':focus')).to.be.true;
|
|
279
|
-
});
|
|
280
|
-
it('manage tab index through shadow DOM', async () => {
|
|
281
|
-
class SideNavTestEl extends LitElement {
|
|
282
|
-
render() {
|
|
283
|
-
return manageTabIndex();
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
customElements.define('sidenav-test-el', SideNavTestEl);
|
|
287
|
-
const el = await fixture(html `
|
|
288
|
-
<sidenav-test-el></sidenav-test-el>
|
|
289
|
-
`);
|
|
290
|
-
await elementUpdated(el);
|
|
291
|
-
const rootNode = el.shadowRoot;
|
|
292
|
-
const sidenavEl = rootNode.querySelector('sp-sidenav');
|
|
293
|
-
await elementUpdated(sidenavEl);
|
|
294
|
-
expect(sidenavEl.value).to.equal('Section 1');
|
|
295
|
-
sidenavEl.focus();
|
|
296
|
-
sidenavEl.dispatchEvent(arrowUpEvent);
|
|
297
|
-
let focused = rootNode.activeElement;
|
|
298
|
-
focused.focusElement.click();
|
|
299
|
-
await elementUpdated(sidenavEl);
|
|
300
|
-
expect(sidenavEl.value).to.equal('Section 0');
|
|
301
|
-
sidenavEl.focus();
|
|
302
|
-
sidenavEl.dispatchEvent(arrowDownEvent);
|
|
303
|
-
sidenavEl.dispatchEvent(arrowDownEvent);
|
|
304
|
-
focused = rootNode.activeElement;
|
|
305
|
-
expect(focused.expanded).to.be.false;
|
|
306
|
-
focused.focusElement.click();
|
|
307
|
-
await elementUpdated(sidenavEl);
|
|
308
|
-
expect(focused.expanded).to.be.true;
|
|
309
|
-
sidenavEl.dispatchEvent(arrowDownEvent);
|
|
310
|
-
await elementUpdated(sidenavEl);
|
|
311
|
-
focused = rootNode.activeElement;
|
|
312
|
-
focused.focusElement.click();
|
|
313
|
-
await elementUpdated(sidenavEl);
|
|
314
|
-
expect(sidenavEl.value).to.equal('Section 3a');
|
|
315
|
-
document.body.focus();
|
|
316
|
-
sidenavEl.focus();
|
|
317
|
-
focused = rootNode.activeElement;
|
|
318
|
-
expect(focused.selected).to.be.true;
|
|
319
|
-
sidenavEl.dispatchEvent(shiftTabEvent);
|
|
320
|
-
const outsideFocused = rootNode.activeElement;
|
|
321
|
-
expect(typeof outsideFocused).not.to.equal(SideNavItem);
|
|
322
|
-
});
|
|
323
|
-
it('manage tab index for late added items', async () => {
|
|
324
|
-
const el = await fixture(html `
|
|
325
|
-
<sp-sidenav manage-tab-index>
|
|
326
|
-
<sp-sidenav-item
|
|
327
|
-
value="Section 0"
|
|
328
|
-
label="Section 0"
|
|
329
|
-
></sp-sidenav-item>
|
|
330
|
-
<sp-sidenav-item
|
|
331
|
-
value="Section 1"
|
|
332
|
-
label="Section 1"
|
|
333
|
-
></sp-sidenav-item>
|
|
334
|
-
</sp-sidenav>
|
|
335
|
-
`);
|
|
336
|
-
await elementUpdated(el);
|
|
337
|
-
expect(el.manageTabIndex).to.be.true;
|
|
338
|
-
const item1 = el.querySelector('sp-sidenav-item');
|
|
339
|
-
const item2 = el.querySelector('sp-sidenav-item:nth-child(2)');
|
|
340
|
-
await elementUpdated(item1);
|
|
341
|
-
await elementUpdated(item2);
|
|
342
|
-
expect(item1.manageTabIndex).to.be.true;
|
|
343
|
-
expect(item1.tabIndex, 'first item tabindex').to.equal(0);
|
|
344
|
-
expect(item2.tabIndex, 'second item tabindex').to.equal(-1);
|
|
345
|
-
const item3 = document.createElement('sp-sidenav-item');
|
|
346
|
-
item3.value = 'Section 2';
|
|
347
|
-
item3.label = 'Section 2';
|
|
348
|
-
await elementUpdated(el);
|
|
349
|
-
el.appendChild(item3);
|
|
350
|
-
await elementUpdated(item3);
|
|
351
|
-
expect(item3.manageTabIndex).to.be.true;
|
|
352
|
-
await waitUntil(() => item3.tabIndex === -1, 'after');
|
|
353
|
-
});
|
|
354
|
-
});
|
|
355
|
-
//# sourceMappingURL=sidenav.test.js.map
|
package/test/sidenav.test.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sidenav.test.js","sourceRoot":"","sources":["sidenav.test.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 '../sp-sidenav.js';\nimport '../sp-sidenav-item.js';\nimport '../sp-sidenav-heading.js';\nimport { SideNav, SideNavItem } from '../';\nimport { manageTabIndex } from '../stories/sidenav.stories.js';\nimport {\n arrowDownEvent,\n arrowUpEvent,\n shiftTabEvent,\n} from '../../../test/testing-helpers.js';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n waitUntil,\n} from '@open-wc/testing';\nimport { LitElement, TemplateResult } from '@spectrum-web-components/base';\nimport { spy } from 'sinon';\nimport { executeServerCommand } from '@web/test-runner-commands';\n\ndescribe('Sidenav', () => {\n it('loads', async () => {\n const el = await fixture<SideNav>(\n html`\n <sp-sidenav>\n <sp-sidenav-heading label=\"CATEGORY 1\">\n <sp-sidenav-item\n value=\"Section 1\"\n label=\"Section 1\"\n ></sp-sidenav-item>\n <sp-sidenav-item\n value=\"Section 2\"\n label=\"Section 2\"\n ></sp-sidenav-item>\n </sp-sidenav-heading>\n </sp-sidenav>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('does not accept focus/click/blur when empty', async () => {\n const el = await fixture<SideNav>(\n html`\n <sp-sidenav></sp-sidenav>\n `\n );\n\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.blur();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.click();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n });\n it('does not accept keyboard events when items are not present', async () => {\n const errorSpy = spy();\n const el = await fixture<SideNav>(\n html`\n <sp-sidenav>\n <sp-sidenav-item\n value=\"Section 1\"\n label=\"Section 1\"\n ></sp-sidenav-item>\n </sp-sidenav>\n `\n );\n\n await elementUpdated(el);\n const item = el.querySelector('sp-sidenav-item') as SideNavItem;\n window.addEventListener('error', () => errorSpy());\n\n el.dispatchEvent(new FocusEvent('focusin'));\n item.remove();\n el.dispatchEvent(\n new KeyboardEvent('keydown', {\n code: 'ArrowDown',\n })\n );\n\n expect(errorSpy.callCount).to.equal(0);\n });\n it('does not accept focus when all children [disabled]', async () => {\n const el = await fixture<SideNav>(\n html`\n <sp-sidenav>\n <sp-sidenav-item\n disabled\n value=\"Section 1\"\n label=\"Section 1\"\n ></sp-sidenav-item>\n <sp-sidenav-item\n disabled\n value=\"Section 2\"\n label=\"Section 2\"\n ></sp-sidenav-item>\n </sp-sidenav>\n `\n );\n\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n expect(el.matches(':focus-within')).to.be.false;\n });\n it('sets manageTabIndex on new children', async () => {\n const el = await fixture<SideNav>(\n html`\n <sp-sidenav>\n <sp-sidenav-item\n value=\"Section 1\"\n label=\"Section 1\"\n ></sp-sidenav-item>\n <sp-sidenav-item\n value=\"Section 2\"\n label=\"Section 2\"\n ></sp-sidenav-item>\n </sp-sidenav>\n `\n );\n\n await elementUpdated(el);\n expect(el.manageTabIndex).to.be.false;\n\n const item1 = el.querySelector('sp-sidenav-item') as SideNavItem;\n expect(item1.manageTabIndex).to.be.false;\n expect(item1.tabIndex).to.equal(0);\n\n const newItem = document.createElement('sp-sidenav-item');\n newItem.value = 'Section 3';\n newItem.label = 'Section 3';\n el.appendChild(newItem);\n\n await elementUpdated(newItem);\n\n expect(newItem.manageTabIndex).to.be.false;\n expect(newItem.tabIndex).to.equal(0);\n\n el.focus();\n const focused = document.activeElement as SideNavItem;\n focused.click();\n expect(focused.selected).to.be.true;\n\n el.dispatchEvent(shiftTabEvent);\n const outsideFocused = document.activeElement as HTMLElement;\n\n expect(typeof outsideFocused).not.to.equal(SideNavItem);\n });\n it('handles select', async () => {\n const changeSpy = spy();\n const el = await fixture<SideNav>(\n html`\n <sp-sidenav @change=${() => changeSpy()}>\n <sp-sidenav-heading label=\"CATEGORY 1\">\n <sp-sidenav-item\n value=\"Section 1\"\n label=\"Section 1\"\n ></sp-sidenav-item>\n <sp-sidenav-item value=\"Section 2\" label=\"Section 2\">\n <sp-sidenav-item\n value=\"Section 2a\"\n label=\"Section 2a\"\n ></sp-sidenav-item>\n </sp-sidenav-item>\n </sp-sidenav-heading>\n </sp-sidenav>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.be.undefined;\n\n const sidenavItem = el.querySelector(\n '[value=\"Section 2\"]'\n ) as SideNavItem;\n sidenavItem.dispatchEvent(\n new CustomEvent('sidenav-select', {\n bubbles: true,\n detail: {\n value: 'Section 2',\n },\n })\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal('Section 2');\n expect(changeSpy.callCount).to.equal(1);\n\n sidenavItem.click();\n\n await elementUpdated(sidenavItem);\n\n const sidenavItemChild = el.querySelector(\n '[value=\"Section 2a\"]'\n ) as SideNavItem;\n sidenavItemChild.click();\n\n await elementUpdated(el);\n\n expect(el.value).to.equal('Section 2a');\n expect(changeSpy.callCount).to.equal(2);\n });\n it('prevents selection', async () => {\n const changeSpy = spy();\n const el = await fixture<SideNav>(\n html`\n <sp-sidenav\n @change=${(event: Event) => {\n event.preventDefault();\n changeSpy();\n }}\n >\n <sp-sidenav-heading label=\"CATEGORY 1\">\n <sp-sidenav-item\n value=\"Section 1\"\n label=\"Section 1\"\n ></sp-sidenav-item>\n <sp-sidenav-item\n value=\"Section 2\"\n label=\"Section 2\"\n opened\n >\n <sp-sidenav-item\n value=\"Section 2a\"\n label=\"Section 2a\"\n ></sp-sidenav-item>\n </sp-sidenav-item>\n </sp-sidenav-heading>\n </sp-sidenav>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.be.undefined;\n\n el.click();\n\n await elementUpdated(el);\n\n expect(el.value).to.be.undefined;\n expect(changeSpy.callCount).to.equal(1);\n });\n it('prevents [tabindex=0] while `focusin`', async () => {\n const el = await fixture<SideNav>(manageTabIndex());\n const selected = el.querySelector('[value=\"Section 1\"]') as SideNavItem;\n const toBeSelected = el.querySelector(\n '[value=\"Section 0\"]'\n ) as SideNavItem;\n\n await elementUpdated(el);\n await waitUntil(() => el.value === 'Section 1', 'wait for selection');\n\n expect(el.value).to.equal('Section 1');\n expect(selected.tabIndex, 'initially 0').to.equal(0);\n\n el.focus();\n\n await elementUpdated(el);\n\n expect(el.value).to.equal('Section 1');\n expect(selected.tabIndex, '-1 when focusin').to.equal(-1);\n\n el.blur();\n\n await elementUpdated(el);\n\n expect(el.value).to.equal('Section 1');\n expect(selected.tabIndex, '0 when blur').to.equal(0);\n\n toBeSelected.focusElement.click();\n\n await elementUpdated(el);\n\n expect(el.value).to.equal('Section 0');\n expect(toBeSelected.tabIndex, 'will be new focusable child').to.equal(\n 0\n );\n expect(selected.tabIndex, 'no longer selected').to.equal(-1);\n });\n it('manage tab index', async () => {\n const el = await fixture<SideNav>(manageTabIndex());\n\n await elementUpdated(el);\n expect(el.value).to.equal('Section 1');\n\n el.focus();\n el.dispatchEvent(arrowUpEvent);\n let focused = document.activeElement as SideNavItem;\n focused.focusElement.click();\n\n await elementUpdated(el);\n\n expect(el.value).to.equal('Section 0');\n\n el.focus();\n el.dispatchEvent(arrowDownEvent);\n el.dispatchEvent(arrowDownEvent);\n focused = document.activeElement as SideNavItem;\n expect(focused.expanded, 'not expanded').to.be.false;\n focused.focusElement.click();\n\n await elementUpdated(el);\n\n expect(focused.expanded, 'expanded').to.be.true;\n\n el.dispatchEvent(arrowDownEvent);\n await elementUpdated(el);\n focused = document.activeElement as SideNavItem;\n focused.focusElement.click();\n\n await elementUpdated(el);\n\n expect(el.value).to.equal('Section 3a');\n\n document.body.focus();\n\n el.focus();\n focused = document.activeElement as SideNavItem;\n expect(focused.selected, 'selected').to.be.true;\n\n el.dispatchEvent(shiftTabEvent);\n const outsideFocused = document.activeElement as HTMLElement;\n\n expect(typeof outsideFocused).not.to.equal(SideNavItem);\n });\n it('focuses the child anchor not the root when [tabindex=-1]', async () => {\n const el = await fixture<SideNav>(manageTabIndex());\n\n await elementUpdated(el);\n const firstItem = el.querySelector(\n '[value=\"Section 0\"]'\n ) as SideNavItem;\n const selected = el.querySelector('[selected]') as SideNavItem;\n expect(selected.tabIndex).to.equal(0);\n expect(firstItem.tabIndex).to.equal(-1);\n\n const firstRect = firstItem.getBoundingClientRect();\n await executeServerCommand('send-mouse', {\n steps: [\n {\n type: 'move',\n position: [firstRect.x + 2, firstRect.y + 2],\n },\n {\n type: 'down',\n },\n ],\n });\n await elementUpdated(el);\n\n expect(firstItem.focusElement.matches(':focus')).to.be.true;\n });\n it('manage tab index through shadow DOM', async () => {\n class SideNavTestEl extends LitElement {\n protected render(): TemplateResult {\n return manageTabIndex();\n }\n }\n customElements.define('sidenav-test-el', SideNavTestEl);\n const el = await fixture<SideNav>(html`\n <sidenav-test-el></sidenav-test-el>\n `);\n\n await elementUpdated(el);\n const rootNode = el.shadowRoot as ShadowRoot;\n const sidenavEl = rootNode.querySelector('sp-sidenav') as SideNav;\n\n await elementUpdated(sidenavEl);\n expect(sidenavEl.value).to.equal('Section 1');\n\n sidenavEl.focus();\n sidenavEl.dispatchEvent(arrowUpEvent);\n let focused = rootNode.activeElement as SideNavItem;\n focused.focusElement.click();\n\n await elementUpdated(sidenavEl);\n\n expect(sidenavEl.value).to.equal('Section 0');\n\n sidenavEl.focus();\n sidenavEl.dispatchEvent(arrowDownEvent);\n sidenavEl.dispatchEvent(arrowDownEvent);\n focused = rootNode.activeElement as SideNavItem;\n expect(focused.expanded).to.be.false;\n focused.focusElement.click();\n\n await elementUpdated(sidenavEl);\n\n expect(focused.expanded).to.be.true;\n\n sidenavEl.dispatchEvent(arrowDownEvent);\n await elementUpdated(sidenavEl);\n focused = rootNode.activeElement as SideNavItem;\n focused.focusElement.click();\n\n await elementUpdated(sidenavEl);\n\n expect(sidenavEl.value).to.equal('Section 3a');\n\n document.body.focus();\n\n sidenavEl.focus();\n focused = rootNode.activeElement as SideNavItem;\n expect(focused.selected).to.be.true;\n\n sidenavEl.dispatchEvent(shiftTabEvent);\n const outsideFocused = rootNode.activeElement as HTMLElement;\n\n expect(typeof outsideFocused).not.to.equal(SideNavItem);\n });\n it('manage tab index for late added items', async () => {\n const el = await fixture<SideNav>(\n html`\n <sp-sidenav manage-tab-index>\n <sp-sidenav-item\n value=\"Section 0\"\n label=\"Section 0\"\n ></sp-sidenav-item>\n <sp-sidenav-item\n value=\"Section 1\"\n label=\"Section 1\"\n ></sp-sidenav-item>\n </sp-sidenav>\n `\n );\n\n await elementUpdated(el);\n expect(el.manageTabIndex).to.be.true;\n\n const item1 = el.querySelector('sp-sidenav-item') as SideNavItem;\n const item2 = el.querySelector(\n 'sp-sidenav-item:nth-child(2)'\n ) as SideNavItem;\n\n await elementUpdated(item1);\n await elementUpdated(item2);\n expect(item1.manageTabIndex).to.be.true;\n expect(item1.tabIndex, 'first item tabindex').to.equal(0);\n expect(item2.tabIndex, 'second item tabindex').to.equal(-1);\n\n const item3 = document.createElement('sp-sidenav-item');\n item3.value = 'Section 2';\n item3.label = 'Section 2';\n\n await elementUpdated(el);\n\n el.appendChild(item3);\n\n await elementUpdated(item3);\n\n expect(item3.manageTabIndex).to.be.true;\n await waitUntil(() => item3.tabIndex === -1, 'after');\n });\n});\n"]}
|