@spectrum-web-components/sidenav 0.11.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.d.ts +1 -1
- package/src/Sidenav.js +2 -1
- package/src/Sidenav.js.map +1 -1
- package/src/SidenavHeading.d.ts +1 -1
- package/src/SidenavHeading.js +2 -1
- package/src/SidenavHeading.js.map +1 -1
- package/src/SidenavItem.d.ts +1 -1
- package/src/SidenavItem.js +5 -3
- package/src/SidenavItem.js.map +1 -1
- package/src/sidenav-heading.css.js +1 -1
- package/src/sidenav-heading.css.js.map +1 -1
- package/src/sidenav-item.css.js +22 -30
- package/src/sidenav-item.css.js.map +1 -1
- package/src/spectrum-config.js +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 +18 -26
- package/src/spectrum-sidenav-item.css.js.map +1 -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)}#
|
|
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)}#
|
|
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.
|
|
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.
|
|
52
|
-
"@spectrum-web-components/shared": "^0.
|
|
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
|
}
|
package/src/Sidenav.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSResultArray,
|
|
1
|
+
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import { Focusable } from '@spectrum-web-components/shared';
|
|
3
3
|
import { SideNavItem } from './SidenavItem.js';
|
|
4
4
|
export interface SidenavSelectDetail {
|
package/src/Sidenav.js
CHANGED
|
@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { __decorate } from "tslib";
|
|
13
|
-
import { html,
|
|
13
|
+
import { html, } from '@spectrum-web-components/base';
|
|
14
|
+
import { property } from '@spectrum-web-components/base/src/decorators.js';
|
|
14
15
|
import sidenavStyles from './sidenav.css.js';
|
|
15
16
|
import { Focusable, getActiveElement } from '@spectrum-web-components/shared';
|
|
16
17
|
import { SideNavItem } from './SidenavItem.js';
|
package/src/Sidenav.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidenav.js","sourceRoot":"","sources":["Sidenav.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n html,\n CSSResultArray,\n TemplateResult,\n property,\n PropertyValues,\n} from '@spectrum-web-components/base';\n\nimport sidenavStyles from './sidenav.css.js';\nimport { Focusable, getActiveElement } from '@spectrum-web-components/shared';\nimport { SideNavItem } from './SidenavItem.js';\nimport { SideNavHeading } from './SidenavHeading.js';\n\nexport interface SidenavSelectDetail {\n value: string;\n}\n\n/**\n * @element sp-sidenav\n *\n * @slot - the Sidenav Items to display\n * @fires change - Announces a change in the `value` property of the navigation element.\n * This change can be \"canceled\" via `event.preventDefault()`.\n */\nexport class SideNav extends Focusable {\n public static get styles(): CSSResultArray {\n return [sidenavStyles];\n }\n\n private items = new Set<SideNavItem>();\n\n public startTrackingSelectionForItem(item: SideNavItem): void {\n this.items.add(item);\n }\n\n public stopTrackingSelectionForItem(item: SideNavItem): void {\n this.items.delete(item);\n }\n\n @property({ type: Boolean, reflect: true, attribute: 'manage-tab-index' })\n public manageTabIndex = false;\n\n @property({ reflect: true })\n public value: string | undefined = undefined;\n\n private handleSelect(\n event: CustomEvent<SidenavSelectDetail> & { target: SideNavItem }\n ): void {\n event.stopPropagation();\n if (this.value === event.detail.value) {\n return;\n }\n const oldValue = this.value;\n this.value = event.detail.value;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.value = oldValue;\n event.target.selected = false;\n event.preventDefault();\n } else {\n this.items.forEach((item) => item.handleSideNavSelect(event));\n }\n }\n\n public constructor() {\n super();\n this.addEventListener('focusin', this.startListeningToKeyboard);\n }\n\n public focus(): void {\n if (this.focusElement === this) {\n return;\n }\n\n super.focus();\n }\n\n public blur(): void {\n if (this.focusElement === this) {\n return;\n }\n\n super.blur();\n }\n\n public click(): void {\n if (this.focusElement === this) {\n return;\n }\n\n super.click();\n }\n\n public get focusElement(): SideNavItem | SideNav {\n const selected = this.querySelector('[selected]') as SideNavItem;\n if (selected && !this.isDisabledChild(selected)) {\n return selected;\n }\n const items = [...this.querySelectorAll('sp-sidenav-item')];\n let index = 0;\n while (\n index < items.length &&\n items[index] &&\n this.isDisabledChild(items[index])\n ) {\n index += 1;\n }\n if (items[index]) {\n return items[index];\n }\n /* c8 ignore next */\n return this;\n }\n\n private startListeningToKeyboard(): void {\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('focusout', this.stopListeningToKeyboard);\n if (this.value && this.manageTabIndex) {\n const selected = this.querySelector(\n `[value=\"${this.value}\"]`\n ) as SideNavItem;\n if (selected) {\n selected.tabIndex = -1;\n }\n }\n }\n\n private stopListeningToKeyboard(): void {\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.stopListeningToKeyboard);\n if (this.value && this.manageTabIndex) {\n const selected = this.querySelector(\n `[value=\"${this.value}\"]`\n ) as SideNavItem;\n if (selected) {\n selected.tabIndex = 0;\n }\n }\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n /* c8 ignore next */\n if (code !== 'ArrowDown' && code !== 'ArrowUp') {\n return;\n }\n event.preventDefault();\n const direction = code === 'ArrowDown' ? 1 : -1;\n this.focusItemByOffset(direction);\n }\n\n private focusItemByOffset(direction: number): void {\n const items = [...this.querySelectorAll('sp-sidenav-item')];\n const focused = items.indexOf(getActiveElement(this) as SideNavItem);\n let next = focused;\n next = (items.length + next + direction) % items.length;\n let nextItem = items[next];\n // cycle through the available items in the directions of the offset to find the next non-disabled item\n while (nextItem && this.isDisabledChild(nextItem)) {\n next = (items.length + next + direction) % items.length;\n nextItem = items[next];\n }\n // if there are no non-disabled items, skip the work to focus a child\n if (!nextItem || this.isDisabledChild(nextItem)) {\n return;\n }\n nextItem.focus();\n }\n\n private isDisabledChild(child: SideNavItem): boolean {\n if (child.disabled) {\n return true;\n }\n let parent = child.parentElement as\n | SideNavItem\n | SideNav\n | SideNavHeading;\n while (\n parent instanceof SideNavHeading ||\n (!(parent as SideNavItem).disabled &&\n parent instanceof SideNavItem &&\n parent.expanded)\n ) {\n parent = parent.parentElement as\n | SideNavItem\n | SideNav\n | SideNavHeading;\n }\n return parent !== this;\n }\n\n private handleSlotchange(): void {\n this.manageTabIndexes();\n }\n\n private async manageTabIndexes(): Promise<void> {\n if (!this.value && this.manageTabIndex) {\n const managed = this.querySelector(\n 'sp-sidenav-item:not([tabindex])'\n ) as SideNavItem;\n if (managed) {\n managed.tabIndex = -1;\n }\n const first = this.querySelector('sp-sidenav-item');\n if (first) {\n await first.updateComplete;\n first.tabIndex = 0;\n }\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <nav @sidenav-select=${this.handleSelect}>\n <slot\n name=\"descendant\"\n @slotchange=${this.handleSlotchange}\n ></slot>\n </nav>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n const selectedChild = this.querySelector('[selected]') as SideNavItem;\n if (selectedChild) {\n this.value = selectedChild.value;\n } else {\n this.manageTabIndexes();\n }\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('manageTabIndex')) {\n const items = [...this.querySelectorAll('sp-sidenav-item')];\n items.map((item) => (item.manageTabIndex = this.manageTabIndex));\n }\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'sp-sidenav:select': CustomEvent<SidenavSelectDetail>;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Sidenav.js","sourceRoot":"","sources":["Sidenav.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport sidenavStyles from './sidenav.css.js';\nimport { Focusable, getActiveElement } from '@spectrum-web-components/shared';\nimport { SideNavItem } from './SidenavItem.js';\nimport { SideNavHeading } from './SidenavHeading.js';\n\nexport interface SidenavSelectDetail {\n value: string;\n}\n\n/**\n * @element sp-sidenav\n *\n * @slot - the Sidenav Items to display\n * @fires change - Announces a change in the `value` property of the navigation element.\n * This change can be \"canceled\" via `event.preventDefault()`.\n */\nexport class SideNav extends Focusable {\n public static get styles(): CSSResultArray {\n return [sidenavStyles];\n }\n\n private items = new Set<SideNavItem>();\n\n public startTrackingSelectionForItem(item: SideNavItem): void {\n this.items.add(item);\n }\n\n public stopTrackingSelectionForItem(item: SideNavItem): void {\n this.items.delete(item);\n }\n\n @property({ type: Boolean, reflect: true, attribute: 'manage-tab-index' })\n public manageTabIndex = false;\n\n @property({ reflect: true })\n public value: string | undefined = undefined;\n\n private handleSelect(\n event: CustomEvent<SidenavSelectDetail> & { target: SideNavItem }\n ): void {\n event.stopPropagation();\n if (this.value === event.detail.value) {\n return;\n }\n const oldValue = this.value;\n this.value = event.detail.value;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.value = oldValue;\n event.target.selected = false;\n event.preventDefault();\n } else {\n this.items.forEach((item) => item.handleSideNavSelect(event));\n }\n }\n\n public constructor() {\n super();\n this.addEventListener('focusin', this.startListeningToKeyboard);\n }\n\n public focus(): void {\n if (this.focusElement === this) {\n return;\n }\n\n super.focus();\n }\n\n public blur(): void {\n if (this.focusElement === this) {\n return;\n }\n\n super.blur();\n }\n\n public click(): void {\n if (this.focusElement === this) {\n return;\n }\n\n super.click();\n }\n\n public get focusElement(): SideNavItem | SideNav {\n const selected = this.querySelector('[selected]') as SideNavItem;\n if (selected && !this.isDisabledChild(selected)) {\n return selected;\n }\n const items = [...this.querySelectorAll('sp-sidenav-item')];\n let index = 0;\n while (\n index < items.length &&\n items[index] &&\n this.isDisabledChild(items[index])\n ) {\n index += 1;\n }\n if (items[index]) {\n return items[index];\n }\n /* c8 ignore next */\n return this;\n }\n\n private startListeningToKeyboard(): void {\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('focusout', this.stopListeningToKeyboard);\n if (this.value && this.manageTabIndex) {\n const selected = this.querySelector(\n `[value=\"${this.value}\"]`\n ) as SideNavItem;\n if (selected) {\n selected.tabIndex = -1;\n }\n }\n }\n\n private stopListeningToKeyboard(): void {\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.stopListeningToKeyboard);\n if (this.value && this.manageTabIndex) {\n const selected = this.querySelector(\n `[value=\"${this.value}\"]`\n ) as SideNavItem;\n if (selected) {\n selected.tabIndex = 0;\n }\n }\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n /* c8 ignore next */\n if (code !== 'ArrowDown' && code !== 'ArrowUp') {\n return;\n }\n event.preventDefault();\n const direction = code === 'ArrowDown' ? 1 : -1;\n this.focusItemByOffset(direction);\n }\n\n private focusItemByOffset(direction: number): void {\n const items = [...this.querySelectorAll('sp-sidenav-item')];\n const focused = items.indexOf(getActiveElement(this) as SideNavItem);\n let next = focused;\n next = (items.length + next + direction) % items.length;\n let nextItem = items[next];\n // cycle through the available items in the directions of the offset to find the next non-disabled item\n while (nextItem && this.isDisabledChild(nextItem)) {\n next = (items.length + next + direction) % items.length;\n nextItem = items[next];\n }\n // if there are no non-disabled items, skip the work to focus a child\n if (!nextItem || this.isDisabledChild(nextItem)) {\n return;\n }\n nextItem.focus();\n }\n\n private isDisabledChild(child: SideNavItem): boolean {\n if (child.disabled) {\n return true;\n }\n let parent = child.parentElement as\n | SideNavItem\n | SideNav\n | SideNavHeading;\n while (\n parent instanceof SideNavHeading ||\n (!(parent as SideNavItem).disabled &&\n parent instanceof SideNavItem &&\n parent.expanded)\n ) {\n parent = parent.parentElement as\n | SideNavItem\n | SideNav\n | SideNavHeading;\n }\n return parent !== this;\n }\n\n private handleSlotchange(): void {\n this.manageTabIndexes();\n }\n\n private async manageTabIndexes(): Promise<void> {\n if (!this.value && this.manageTabIndex) {\n const managed = this.querySelector(\n 'sp-sidenav-item:not([tabindex])'\n ) as SideNavItem;\n if (managed) {\n managed.tabIndex = -1;\n }\n const first = this.querySelector('sp-sidenav-item');\n if (first) {\n await first.updateComplete;\n first.tabIndex = 0;\n }\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <nav @sidenav-select=${this.handleSelect}>\n <slot\n name=\"descendant\"\n @slotchange=${this.handleSlotchange}\n ></slot>\n </nav>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n const selectedChild = this.querySelector('[selected]') as SideNavItem;\n if (selectedChild) {\n this.value = selectedChild.value;\n } else {\n this.manageTabIndexes();\n }\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('manageTabIndex')) {\n const items = [...this.querySelectorAll('sp-sidenav-item')];\n items.map((item) => (item.manageTabIndex = this.manageTabIndex));\n }\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'sp-sidenav:select': CustomEvent<SidenavSelectDetail>;\n }\n}\n"]}
|
package/src/SidenavHeading.d.ts
CHANGED
package/src/SidenavHeading.js
CHANGED
|
@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { __decorate } from "tslib";
|
|
13
|
-
import { html, SpectrumElement,
|
|
13
|
+
import { html, SpectrumElement, } from '@spectrum-web-components/base';
|
|
14
|
+
import { property } from '@spectrum-web-components/base/src/decorators.js';
|
|
14
15
|
import sidenavItemStyles from './sidenav-item.css.js';
|
|
15
16
|
import sidenavHeadingStyles from './sidenav-heading.css.js';
|
|
16
17
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidenavHeading.js","sourceRoot":"","sources":["SidenavHeading.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,
|
|
1
|
+
{"version":3,"file":"SidenavHeading.js","sourceRoot":"","sources":["SidenavHeading.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EAEJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAE3E,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AACtD,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAE5D;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,eAAe;IAAnD;;QAEW,UAAK,GAAG,EAAE,CAAC;IAqBtB,CAAC;IAnBU,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,CAAC;IACrD,CAAC;IAES,MAAM,CAAC,OAAuB;QACpC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;YAC5B,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;SAC5B;QACD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;+BACY,IAAI,CAAC,KAAK;;;;SAIhC,CAAC;IACN,CAAC;CACJ;AArBG;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACV","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport sidenavItemStyles from './sidenav-item.css.js';\nimport sidenavHeadingStyles from './sidenav-heading.css.js';\n\n/**\n * @element sp-sidenav-heading\n *\n * @slot - the Sidenav Items to display in association with the heading\n */\nexport class SideNavHeading extends SpectrumElement {\n @property({ reflect: true })\n public label = '';\n\n public static get styles(): CSSResultArray {\n return [sidenavItemStyles, sidenavHeadingStyles];\n }\n\n protected update(changes: PropertyValues): void {\n if (!this.hasAttribute('slot')) {\n this.slot = 'descendant';\n }\n super.update(changes);\n }\n\n protected render(): TemplateResult {\n return html`\n <h2 id=\"heading\">${this.label}</h2>\n <div id=\"list\" aria-labelledby=\"heading\">\n <slot name=\"descendant\"></slot>\n </div>\n `;\n }\n}\n"]}
|
package/src/SidenavItem.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSResultArray,
|
|
1
|
+
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
|
|
3
3
|
import { SideNav } from './Sidenav.js';
|
|
4
4
|
declare const SideNavItem_base: typeof Focusable & {
|
package/src/SidenavItem.js
CHANGED
|
@@ -10,7 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { __decorate } from "tslib";
|
|
13
|
-
import { html,
|
|
13
|
+
import { html, } from '@spectrum-web-components/base';
|
|
14
|
+
import { property } from '@spectrum-web-components/base/src/decorators.js';
|
|
15
|
+
import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
|
|
14
16
|
import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
|
|
15
17
|
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
|
|
16
18
|
import sidenavItemStyles from './sidenav-item.css.js';
|
|
@@ -79,7 +81,7 @@ export class SideNavItem extends LikeAnchor(Focusable) {
|
|
|
79
81
|
this.handleClick();
|
|
80
82
|
}
|
|
81
83
|
get focusElement() {
|
|
82
|
-
return this.shadowRoot.querySelector('#
|
|
84
|
+
return this.shadowRoot.querySelector('#item-link');
|
|
83
85
|
}
|
|
84
86
|
update(changes) {
|
|
85
87
|
if (!this.hasAttribute('slot')) {
|
|
@@ -96,7 +98,7 @@ export class SideNavItem extends LikeAnchor(Focusable) {
|
|
|
96
98
|
rel=${ifDefined(this.rel)}
|
|
97
99
|
data-level="${this.depth}"
|
|
98
100
|
@click="${this.handleClick}"
|
|
99
|
-
id="
|
|
101
|
+
id="item-link"
|
|
100
102
|
aria-current=${ifDefined(this.selected && this.href ? 'page' : undefined)}
|
|
101
103
|
>
|
|
102
104
|
<slot name="icon"></slot>
|
package/src/SidenavItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidenavItem.js","sourceRoot":"","sources":["SidenavItem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,
|
|
1
|
+
{"version":3,"file":"SidenavItem.js","sourceRoot":"","sources":["SidenavItem.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nimport { SideNav, SidenavSelectDetail } from './Sidenav.js';\n\nimport sidenavItemStyles from './sidenav-item.css.js';\n\n/**\n * @element sp-sidenav-item\n *\n * @slot - the Sidenav Items to display as children of this item\n */\nexport class SideNavItem extends LikeAnchor(Focusable) {\n public static get styles(): CSSResultArray {\n return [sidenavItemStyles];\n }\n\n @property()\n public value: string | undefined = undefined;\n\n @property({ type: Boolean, attribute: false })\n public manageTabIndex = false;\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public expanded = false;\n\n protected get parentSideNav(): SideNav | undefined {\n if (!this._parentSidenav) {\n this._parentSidenav = this.closest('sp-sidenav') as\n | SideNav\n | undefined;\n }\n return this._parentSidenav;\n }\n\n protected _parentSidenav?: SideNav;\n\n protected get hasChildren(): boolean {\n return !!this.querySelector('sp-sidenav-item');\n }\n\n protected get depth(): number {\n let depth = 0;\n let element = this.parentElement;\n while (element instanceof SideNavItem) {\n depth++;\n element = element.parentElement;\n }\n return depth;\n }\n\n public handleSideNavSelect(event: Event): void {\n this.selected = event.target === this;\n }\n\n protected handleClick(event?: Event): void {\n if (!this.href && event) {\n event.preventDefault();\n }\n if (!this.disabled) {\n if (this.hasChildren) {\n this.expanded = !this.expanded;\n } else if (this.value) {\n this.announceSelected(this.value);\n }\n }\n }\n\n private announceSelected(value: string): void {\n const selectDetail: SidenavSelectDetail = {\n value,\n };\n\n const selectionEvent = new CustomEvent('sidenav-select', {\n bubbles: true,\n composed: true,\n detail: selectDetail,\n });\n\n this.dispatchEvent(selectionEvent);\n }\n\n public click(): void {\n this.handleClick();\n }\n\n public get focusElement(): HTMLElement {\n return this.shadowRoot.querySelector('#item-link') as HTMLElement;\n }\n\n protected update(changes: PropertyValues): void {\n if (!this.hasAttribute('slot')) {\n this.slot = 'descendant';\n }\n super.update(changes);\n }\n\n protected render(): TemplateResult {\n return html`\n <a\n href=${this.href || '#'}\n target=${ifDefined(this.target)}\n download=${ifDefined(this.download)}\n rel=${ifDefined(this.rel)}\n data-level=\"${this.depth}\"\n @click=\"${this.handleClick}\"\n id=\"item-link\"\n aria-current=${ifDefined(\n this.selected && this.href ? 'page' : undefined\n )}\n >\n <slot name=\"icon\"></slot>\n ${this.label}\n <slot></slot>\n </a>\n ${this.expanded\n ? html`\n <slot name=\"descendant\"></slot>\n `\n : html``}\n `;\n }\n\n protected updated(changes: PropertyValues): void {\n if (changes.has('selected') || changes.has('manageTabIndex')) {\n const tabIndexForSelectedState = this.selected ? 0 : -1;\n this.tabIndex = this.manageTabIndex ? tabIndexForSelectedState : 0;\n }\n super.updated(changes);\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this.startTrackingSelection();\n }\n\n public disconnectedCallback(): void {\n this.stopTrackingSelection();\n super.disconnectedCallback();\n }\n\n private async startTrackingSelection(): Promise<void> {\n const parentSideNav = this.parentSideNav;\n if (parentSideNav) {\n await parentSideNav.updateComplete;\n this.manageTabIndex = parentSideNav.manageTabIndex;\n parentSideNav.startTrackingSelectionForItem(this);\n this.selected =\n this.value != null && this.value === parentSideNav.value;\n }\n }\n\n private stopTrackingSelection(): void {\n const parentSideNav = this.parentSideNav;\n if (parentSideNav) {\n parentSideNav.stopTrackingSelectionForItem(this);\n }\n this._parentSidenav = undefined;\n }\n}\n"]}
|
|
@@ -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
|
@@ -17,7 +17,7 @@ const styles = css `
|
|
|
17
17
|
--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)
|
|
18
18
|
);margin-left:0;margin-right:0;margin-top:var(
|
|
19
19
|
--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)
|
|
20
|
-
)}#
|
|
20
|
+
)}#item-link{align-items:center;border-radius:var(
|
|
21
21
|
--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
22
22
|
);box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(
|
|
23
23
|
--spectrum-sidenav-item-text-size,var(--spectrum-alias-font-size-default)
|
|
@@ -27,101 +27,93 @@ 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}#
|
|
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}#itemLink: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]) #itemLink ::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
|
-
)}:host([dir=rtl]) #
|
|
36
|
+
)}:host([dir=rtl]) #item-link ::slotted([slot=icon]){margin-left:var(
|
|
45
37
|
--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)
|
|
46
|
-
)}#
|
|
38
|
+
)}#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(
|
|
47
39
|
--spectrum-sidenav-multilevel-item-margin-left,
|
|
48
40
|
var(--spectrum-global-dimension-size-150)
|
|
49
41
|
) + var(
|
|
50
42
|
--spectrum-sidenav-item-padding-x,
|
|
51
43
|
var(--spectrum-global-dimension-size-150)
|
|
52
|
-
))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #
|
|
44
|
+
))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #item-link{padding-right:calc(var(
|
|
53
45
|
--spectrum-sidenav-multilevel-item-margin-left,
|
|
54
46
|
var(--spectrum-global-dimension-size-150)
|
|
55
47
|
) + var(
|
|
56
48
|
--spectrum-sidenav-item-padding-x,
|
|
57
49
|
var(--spectrum-global-dimension-size-150)
|
|
58
|
-
))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list #
|
|
50
|
+
))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-left:calc(var(
|
|
59
51
|
--spectrum-sidenav-multilevel-item-margin-left,
|
|
60
52
|
var(--spectrum-global-dimension-size-150)
|
|
61
53
|
) + var(
|
|
62
54
|
--spectrum-sidenav-item-padding-x,
|
|
63
55
|
var(--spectrum-global-dimension-size-150)
|
|
64
|
-
))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list #
|
|
56
|
+
))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-right:calc(var(
|
|
65
57
|
--spectrum-sidenav-multilevel-item-margin-left,
|
|
66
58
|
var(--spectrum-global-dimension-size-150)
|
|
67
59
|
) + var(
|
|
68
60
|
--spectrum-sidenav-item-padding-x,
|
|
69
61
|
var(--spectrum-global-dimension-size-150)
|
|
70
|
-
))}:host([selected])>#
|
|
62
|
+
))}:host([selected])>#item-link{background-color:var(
|
|
71
63
|
--spectrum-sidenav-item-background-color-selected,var(--spectrum-alias-highlight-hover)
|
|
72
64
|
);color:var(
|
|
73
65
|
--spectrum-sidenav-item-text-color-selected,var(--spectrum-alias-text-color-hover)
|
|
74
|
-
)}.is-active>#
|
|
66
|
+
)}.is-active>#item-link{background-color:var(
|
|
75
67
|
--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)
|
|
76
|
-
)}:host([disabled]) #
|
|
68
|
+
)}:host([disabled]) #item-link{background-color:var(
|
|
77
69
|
--spectrum-sidenav-item-background-color-disabled,var(--spectrum-alias-background-color-transparent)
|
|
78
70
|
);color:var(
|
|
79
71
|
--spectrum-sidenav-item-text-color-disabled,var(--spectrum-alias-text-color-disabled)
|
|
80
|
-
);cursor:default;pointer-events:none}#
|
|
72
|
+
);cursor:default;pointer-events:none}#item-link{background-color:var(
|
|
81
73
|
--spectrum-sidenav-item-background-color,var(--spectrum-alias-background-color-transparent)
|
|
82
74
|
);color:var(
|
|
83
75
|
--spectrum-sidenav-item-text-color,var(--spectrum-alias-text-color)
|
|
84
|
-
)}#
|
|
76
|
+
)}#item-link:hover{background-color:var(
|
|
85
77
|
--spectrum-sidenav-item-background-color-hover,var(--spectrum-alias-highlight-hover)
|
|
86
78
|
);color:var(
|
|
87
79
|
--spectrum-sidenav-item-text-color-hover,var(--spectrum-alias-text-color-hover)
|
|
88
|
-
)}#
|
|
80
|
+
)}#item-link:active{background-color:var(
|
|
89
81
|
--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)
|
|
90
|
-
)}#
|
|
82
|
+
)}#item-link.focus-visible{background-color:var(
|
|
91
83
|
--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)
|
|
92
84
|
);color:var(
|
|
93
85
|
--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)
|
|
94
|
-
)}#
|
|
86
|
+
)}#item-link:focus-visible{background-color:var(
|
|
95
87
|
--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)
|
|
96
88
|
);color:var(
|
|
97
89
|
--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)
|
|
98
|
-
)}#
|
|
90
|
+
)}#item-link.focus-visible:before{border-color:var(
|
|
99
91
|
--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
100
|
-
)}#
|
|
92
|
+
)}#item-link:focus-visible:before{border-color:var(
|
|
101
93
|
--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
102
94
|
)}:host{display:block}:host([disabled]){pointer-events:none}:host([multiLevel]){--spectrum-web-component-sidenav-font-weight:var(
|
|
103
95
|
--spectrum-sidenav-item-font-weight,700
|
|
104
96
|
)}::slotted(sp-sidenav-item:not([multiLevel])){--spectrum-web-component-sidenav-font-weight:var(
|
|
105
97
|
--spectrum-sidenav-item-font-weight,400
|
|
106
|
-
)}#
|
|
98
|
+
)}#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(
|
|
107
99
|
--spectrum-sidenav-multilevel-item-indentation-level1,
|
|
108
100
|
var(--spectrum-global-dimension-size-150)
|
|
109
101
|
) + var(
|
|
110
102
|
--spectrum-sidenav-item-padding-x,
|
|
111
103
|
var(--spectrum-global-dimension-size-150)
|
|
112
|
-
))}:host([dir=ltr]) #
|
|
104
|
+
))}:host([dir=ltr]) #item-link[data-level="2"]{padding-left:calc(var(
|
|
113
105
|
--spectrum-sidenav-multilevel-item-indentation-level2,
|
|
114
106
|
var(--spectrum-global-dimension-size-300)
|
|
115
107
|
) + var(
|
|
116
108
|
--spectrum-sidenav-item-padding-x,
|
|
117
109
|
var(--spectrum-global-dimension-size-150)
|
|
118
|
-
))}:host([dir=rtl]) #
|
|
110
|
+
))}:host([dir=rtl]) #item-link[data-level="1"]{padding-right:calc(var(
|
|
119
111
|
--spectrum-sidenav-multilevel-item-indentation-level1,
|
|
120
112
|
var(--spectrum-global-dimension-size-150)
|
|
121
113
|
) + var(
|
|
122
114
|
--spectrum-sidenav-item-padding-x,
|
|
123
115
|
var(--spectrum-global-dimension-size-150)
|
|
124
|
-
))}:host([dir=rtl]) #
|
|
116
|
+
))}:host([dir=rtl]) #item-link[data-level="2"]{padding-right:calc(var(
|
|
125
117
|
--spectrum-sidenav-multilevel-item-indentation-level2,
|
|
126
118
|
var(--spectrum-global-dimension-size-300)
|
|
127
119
|
) + var(
|
|
@@ -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;"]}
|
package/src/spectrum-config.js
CHANGED
|
@@ -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;"]}
|
|
@@ -17,7 +17,7 @@ const styles = css `
|
|
|
17
17
|
--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)
|
|
18
18
|
);margin-left:0;margin-right:0;margin-top:var(
|
|
19
19
|
--spectrum-sidenav-item-gap,var(--spectrum-global-dimension-size-50)
|
|
20
|
-
)}#
|
|
20
|
+
)}#item-link{align-items:center;border-radius:var(
|
|
21
21
|
--spectrum-sidenav-item-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
22
22
|
);box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(
|
|
23
23
|
--spectrum-sidenav-item-text-size,var(--spectrum-alias-font-size-default)
|
|
@@ -27,77 +27,69 @@ 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}#
|
|
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}#itemLink: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]) #itemLink ::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
|
-
)}:host([dir=rtl]) #
|
|
36
|
+
)}:host([dir=rtl]) #item-link ::slotted([slot=icon]){margin-left:var(
|
|
45
37
|
--spectrum-sidenav-icon-gap,var(--spectrum-global-dimension-size-100)
|
|
46
|
-
)}#
|
|
38
|
+
)}#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(
|
|
47
39
|
--spectrum-sidenav-multilevel-item-margin-left,
|
|
48
40
|
var(--spectrum-global-dimension-size-150)
|
|
49
41
|
) + var(
|
|
50
42
|
--spectrum-sidenav-item-padding-x,
|
|
51
43
|
var(--spectrum-global-dimension-size-150)
|
|
52
|
-
))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #
|
|
44
|
+
))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #item-link{padding-right:calc(var(
|
|
53
45
|
--spectrum-sidenav-multilevel-item-margin-left,
|
|
54
46
|
var(--spectrum-global-dimension-size-150)
|
|
55
47
|
) + var(
|
|
56
48
|
--spectrum-sidenav-item-padding-x,
|
|
57
49
|
var(--spectrum-global-dimension-size-150)
|
|
58
|
-
))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list #
|
|
50
|
+
))}:host([dir=ltr]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-left:calc(var(
|
|
59
51
|
--spectrum-sidenav-multilevel-item-margin-left,
|
|
60
52
|
var(--spectrum-global-dimension-size-150)
|
|
61
53
|
) + var(
|
|
62
54
|
--spectrum-sidenav-item-padding-x,
|
|
63
55
|
var(--spectrum-global-dimension-size-150)
|
|
64
|
-
))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list #
|
|
56
|
+
))}:host([dir=rtl]) .spectrum-SideNav--multiLevel #list #list #item-link{padding-right:calc(var(
|
|
65
57
|
--spectrum-sidenav-multilevel-item-margin-left,
|
|
66
58
|
var(--spectrum-global-dimension-size-150)
|
|
67
59
|
) + var(
|
|
68
60
|
--spectrum-sidenav-item-padding-x,
|
|
69
61
|
var(--spectrum-global-dimension-size-150)
|
|
70
|
-
))}:host([selected])>#
|
|
62
|
+
))}:host([selected])>#item-link{background-color:var(
|
|
71
63
|
--spectrum-sidenav-item-background-color-selected,var(--spectrum-alias-highlight-hover)
|
|
72
64
|
);color:var(
|
|
73
65
|
--spectrum-sidenav-item-text-color-selected,var(--spectrum-alias-text-color-hover)
|
|
74
|
-
)}.is-active>#
|
|
66
|
+
)}.is-active>#item-link{background-color:var(
|
|
75
67
|
--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)
|
|
76
|
-
)}:host([disabled]) #
|
|
68
|
+
)}:host([disabled]) #item-link{background-color:var(
|
|
77
69
|
--spectrum-sidenav-item-background-color-disabled,var(--spectrum-alias-background-color-transparent)
|
|
78
70
|
);color:var(
|
|
79
71
|
--spectrum-sidenav-item-text-color-disabled,var(--spectrum-alias-text-color-disabled)
|
|
80
|
-
);cursor:default;pointer-events:none}#
|
|
72
|
+
);cursor:default;pointer-events:none}#item-link{background-color:var(
|
|
81
73
|
--spectrum-sidenav-item-background-color,var(--spectrum-alias-background-color-transparent)
|
|
82
74
|
);color:var(
|
|
83
75
|
--spectrum-sidenav-item-text-color,var(--spectrum-alias-text-color)
|
|
84
|
-
)}#
|
|
76
|
+
)}#item-link:hover{background-color:var(
|
|
85
77
|
--spectrum-sidenav-item-background-color-hover,var(--spectrum-alias-highlight-hover)
|
|
86
78
|
);color:var(
|
|
87
79
|
--spectrum-sidenav-item-text-color-hover,var(--spectrum-alias-text-color-hover)
|
|
88
|
-
)}#
|
|
80
|
+
)}#item-link:active{background-color:var(
|
|
89
81
|
--spectrum-sidenav-item-background-color-down,var(--spectrum-alias-highlight-hover)
|
|
90
|
-
)}#
|
|
82
|
+
)}#item-link.focus-visible{background-color:var(
|
|
91
83
|
--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)
|
|
92
84
|
);color:var(
|
|
93
85
|
--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)
|
|
94
|
-
)}#
|
|
86
|
+
)}#item-link:focus-visible{background-color:var(
|
|
95
87
|
--spectrum-sidenav-item-background-color-key-focus,var(--spectrum-alias-highlight-hover)
|
|
96
88
|
);color:var(
|
|
97
89
|
--spectrum-sidenav-item-text-color-key-focus,var(--spectrum-alias-text-color-hover)
|
|
98
|
-
)}#
|
|
90
|
+
)}#item-link.focus-visible:before{border-color:var(
|
|
99
91
|
--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
100
|
-
)}#
|
|
92
|
+
)}#item-link:focus-visible:before{border-color:var(
|
|
101
93
|
--spectrum-sidenav-item-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
102
94
|
)}
|
|
103
95
|
`;
|
|
@@ -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;"]}
|