@vaadin/side-nav 24.1.2 → 24.2.0-alpha2

package/src/vaadin-side-nav.js

@@ -4,11 +4,14 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { sideNavBaseStyles } from './vaadin-side-nav-base-styles.js';
+import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
 
 function isEnabled() {
   return window.Vaadin && window.Vaadin.featureFlags && !!window.Vaadin.featureFlags.sideNavComponent;
@@ -43,18 +46,43 @@ function isEnabled() {
  * </vaadin-side-nav>
  * ```
  *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name       | Description
+ * ----------------|----------------
+ * `label`         | The label element
+ * `children`      | The element that wraps child items
+ * `toggle-button` | The toggle button
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `collapsed`  | Set when the element is collapsed.
+ * `focus-ring` | Set when the label is focused using the keyboard.
+ * `focused`    | Set when the label is focused.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @fires {CustomEvent} collapsed-changed - Fired when the `collapsed` property changes.
  *
  * @extends LitElement
  * @mixes PolylitMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
+ * @mixes SideNavChildrenMixin
  */
-class SideNav extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-side-nav';
   }
 
+  static get shadowRootOptions() {
+    return { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  }
+
   static get properties() {
     return {
       /**
@@ -86,8 +114,30 @@ class SideNav extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
     return sideNavBaseStyles;
   }
 
+  constructor() {
+    super();
+
+    this._labelId = `side-nav-label-${generateUniqueId()}`;
+  }
+
+  /**
+   * Name of the slot to be used for children.
+   * @protected
+   * @override
+   */
+  get _itemsSlotName() {
+    return '';
+  }
+
+  /** @protected */
+  get focusElement() {
+    return this.shadowRoot.querySelector('button');
+  }
+
   /** @protected */
   firstUpdated() {
+    super.firstUpdated();
+
     // By default, if the user hasn't provided a custom role,
     // the role attribute is set to "navigation".
     if (!this.hasAttribute('role')) {
@@ -97,34 +147,55 @@ class SideNav extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
 
   /** @protected */
   render() {
-    const label = this.querySelector('[slot="label"]');
-    if (label && this.collapsible) {
-      return html`
-        <details ?open="${!this.collapsed}" @toggle="${this.__toggleCollapsed}">${this.__renderBody(label)}</details>
-      `;
+    return html`
+      <button
+        part="label"
+        @click="${this._onLabelClick}"
+        aria-expanded="${ifDefined(this.collapsible ? !this.collapsed : null)}"
+        aria-controls="children"
+      >
+        <slot name="label" @slotchange="${this._onLabelSlotChange}"></slot>
+        <span part="toggle-button" aria-hidden="true"></span>
+      </button>
+      <ul id="children" part="children" ?hidden="${this.collapsed}" aria-hidden="${this.collapsed ? 'true' : 'false'}">
+        <slot></slot>
+      </ul>
+    `;
+  }
+
+  /**
+   * @param {Event} event
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  _shouldSetFocus(event) {
+    return event.composedPath()[0] === this.focusElement;
+  }
+
+  /** @private */
+  _onLabelClick() {
+    if (this.collapsible) {
+      this.__toggleCollapsed();
     }
-    return this.__renderBody(label);
   }
 
   /** @private */
-  __renderBody(label) {
+  _onLabelSlotChange() {
+    const label = this.querySelector('[slot="label"]');
     if (label) {
-      if (!label.id) label.id = `side-nav-label-${generateUniqueId()}`;
+      if (!label.id) {
+        label.id = this._labelId;
+      }
       this.setAttribute('aria-labelledby', label.id);
     } else {
       this.removeAttribute('aria-labelledby');
     }
-    return html`
-      <summary part="label" ?hidden="${label == null}">
-        <slot name="label" @slotchange="${() => this.requestUpdate()}"></slot>
-      </summary>
-      <slot role="list"></slot>
-    `;
   }
 
   /** @private */
-  __toggleCollapsed(e) {
-    this.collapsed = !e.target.open;
+  __toggleCollapsed() {
+    this.collapsed = !this.collapsed;
   }
 }
 

package/theme/lumo/vaadin-side-nav-item-styles.js

@@ -4,10 +4,12 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 export const sideNavItemStyles = css`
-  a {
+  [part='link'] {
+    width: 100%;
     gap: var(--lumo-space-xs);
     padding: var(--lumo-space-s);
     padding-inline-start: calc(var(--lumo-space-s) + var(--_child-indent, 0px));
@@ -17,74 +19,72 @@ export const sideNavItemStyles = css`
     min-height: var(--lumo-icon-size-m);
   }
 
-  button {
-    border: 0;
-    margin: calc((var(--lumo-icon-size-m) - var(--lumo-size-s)) / 2) 0;
+  [part='link'][href] {
+    cursor: pointer;
+  }
+
+  [part='toggle-button'] {
     margin-inline-end: calc(var(--lumo-space-xs) * -1);
-    padding: 0;
-    background: transparent;
-    font: inherit;
-    color: var(--lumo-tertiary-text-color);
     width: var(--lumo-size-s);
     height: var(--lumo-size-s);
-    cursor: var(--lumo-clickable-cursor, default);
-    transition: color 140ms;
+  }
+
+  :host([has-children]) [part='content'] {
+    padding-inline-end: var(--lumo-space-s);
   }
 
   @media (any-hover: hover) {
-    a:hover {
+    [part='link']:hover {
       color: var(--lumo-header-text-color);
     }
 
-    button:hover {
+    [part='toggle-button']:hover {
       color: var(--lumo-body-text-color);
     }
   }
 
-  a:active:focus {
+  [part='link']:active:focus {
     background-color: var(--lumo-contrast-5pct);
   }
 
-  button::before {
-    font-family: lumo-icons;
+  [part='toggle-button']::before {
     content: var(--lumo-icons-dropdown);
-    font-size: 1.5em;
-    line-height: var(--lumo-size-s);
-    display: inline-block;
     transform: rotate(-90deg);
     transition: transform 140ms;
   }
 
-  :host([expanded]) button::before {
+  :host([expanded]) [part='toggle-button']::before {
     transform: none;
   }
 
   @supports selector(:focus-visible) {
-    a,
-    button {
+    [part='link'],
+    [part='toggle-button'] {
       outline: none;
     }
 
-    a:focus-visible,
-    button:focus-visible {
+    [part='link']:focus-visible,
+    [part='toggle-button']:focus-visible {
       border-radius: var(--lumo-border-radius-m);
       box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
     }
   }
 
-  a:active {
+  [part='link']:active {
     color: var(--lumo-header-text-color);
   }
 
   slot:not([name]) {
-    margin: 0 var(--lumo-space-xs);
+    margin: 0 var(--lumo-space-s);
   }
 
   slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
+    padding: 0.1em;
+    flex-shrink: 0;
     color: var(--lumo-contrast-60pct);
   }
 
-  :host([active]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
+  :host([current]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
     color: inherit;
   }
 
@@ -96,10 +96,10 @@ export const sideNavItemStyles = css`
     --_child-indent-2: var(--_child-indent);
   }
 
-  :host([active]) a {
+  :host([current]) [part='link'] {
     color: var(--lumo-primary-text-color);
     background-color: var(--lumo-primary-color-10pct);
   }
 `;
 
-registerStyles('vaadin-side-nav-item', sideNavItemStyles, { moduleId: 'lumo-side-nav-item' });
+registerStyles('vaadin-side-nav-item', [fieldButton, sideNavItemStyles], { moduleId: 'lumo-side-nav-item' });

package/theme/lumo/vaadin-side-nav-item.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-side-nav-item-styles.js';

package/theme/lumo/vaadin-side-nav-styles.js

@@ -16,49 +16,58 @@ export const sideNavStyles = css`
     -webkit-tap-highlight-color: transparent;
   }
 
-  summary {
-    cursor: var(--lumo-clickable-cursor, default);
+  [part='label'] {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    outline: none;
+    box-sizing: border-box;
     border-radius: var(--lumo-border-radius-m);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-s);
+    font-weight: 500;
+    line-height: var(--lumo-line-height-xs);
   }
 
-  summary ::slotted([slot='label']) {
-    font-size: var(--lumo-font-size-s);
+  [part='label'] ::slotted([slot='label']) {
     color: var(--lumo-secondary-text-color);
     margin: var(--lumo-space-s);
-    border-radius: inherit;
   }
 
-  summary::after {
-    font-family: lumo-icons;
-    color: var(--lumo-tertiary-text-color);
-    font-size: var(--lumo-icon-size-m);
+  :host([focus-ring]) [part='label'] {
+    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+  }
+
+  [part='toggle-button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: var(--lumo-size-s);
     height: var(--lumo-size-s);
-    transition: transform 140ms;
-    margin: 0 var(--lumo-space-xs);
+    margin-inline-start: auto;
+    margin-inline-end: var(--lumo-space-xs);
+    font-size: var(--lumo-icon-size-m);
+    line-height: 1;
+    color: var(--lumo-contrast-60pct);
+    font-family: 'lumo-icons';
+    cursor: var(--lumo-clickable-cursor);
   }
 
-  :host([collapsible]) summary::after {
-    content: var(--lumo-icons-dropdown);
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-angle-right);
   }
 
-  @media (any-hover: hover) {
-    summary:hover::after {
-      color: var(--lumo-body-text-color);
-    }
+  :host(:not([collapsible])) [part='toggle-button'] {
+    display: none !important;
   }
 
-  :host([collapsed]) summary::after {
-    transform: rotate(-90deg);
+  :host(:not([collapsed])) [part='toggle-button'] {
+    transform: rotate(90deg);
   }
 
-  @supports selector(:focus-visible) {
-    summary {
-      outline: none;
-    }
-
-    summary:focus-visible {
-      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+  @media (any-hover: hover) {
+    [part='label']:hover [part='toggle-button'] {
+      color: var(--lumo-body-text-color);
     }
   }
 `;

package/theme/lumo/vaadin-side-nav.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-side-nav-item.js';

package/theme/material/vaadin-side-nav-item-styles.js

@@ -0,0 +1,134 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/font-icons.js';
+import '@vaadin/vaadin-material-styles/typography.js';
+import { fieldButton } from '@vaadin/vaadin-material-styles/mixins/field-button.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const sideNavItemStyles = css`
+  [part='link'] {
+    position: relative;
+    width: 100%;
+    min-height: 32px;
+    margin: 4px 0;
+    gap: 8px;
+    padding: 4px 8px;
+    padding-inline-start: calc(8px + var(--_child-indent, 0px));
+    font-family: var(--material-font-family);
+    font-size: var(--material-small-font-size);
+    line-height: 1;
+    font-weight: 500;
+    color: var(--material-body-text-color);
+    transition: background-color 140ms, color 140ms;
+    border-radius: 4px;
+    cursor: default;
+  }
+
+  [part='link'][href] {
+    cursor: pointer;
+  }
+
+  :host([current]) [part='link'] {
+    color: var(--material-primary-text-color);
+  }
+
+  :host([current]) [part='link']::before {
+    position: absolute;
+    content: '';
+    inset: 0;
+    background-color: var(--material-primary-color);
+    opacity: 0.12;
+    border-radius: 4px;
+  }
+
+  [part='toggle-button'] {
+    width: 32px;
+    height: 32px;
+    margin-inline-end: -4px;
+    transform: rotate(90deg);
+  }
+
+  [part='toggle-button']::before {
+    font-family: 'material-icons';
+    font-size: 24px;
+    width: 24px;
+    display: inline-block;
+    content: var(--material-icons-chevron-right);
+  }
+
+  [part='toggle-button']::after {
+    display: inline-block;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: var(--material-disabled-text-color);
+    transform: scale(0);
+    opacity: 0;
+    transition: transform 0s 0.8s, opacity 0.8s;
+    will-change: transform, opacity;
+  }
+
+  [part='toggle-button']:focus-visible::after {
+    transition-duration: 0.08s, 0.01s;
+    transition-delay: 0s, 0s;
+    transform: scale(1.25);
+    opacity: 0.16;
+  }
+
+  :host([expanded]) [part='toggle-button'] {
+    transform: rotate(270deg);
+  }
+
+  :host([has-children]) [part='content'] {
+    padding-inline-end: 8px;
+  }
+
+  @media (any-hover: hover) {
+    :host(:not([current])) [part='link'][href]:hover {
+      background-color: var(--material-secondary-background-color);
+    }
+
+    [part='toggle-button']:hover {
+      color: var(--material-body-text-color);
+    }
+  }
+
+  @supports selector(:focus-visible) {
+    [part='link'],
+    [part='toggle-button'] {
+      outline: none;
+    }
+
+    :host(:not([current])) [part='link']:focus-visible {
+      background-color: var(--material-divider-color);
+    }
+
+    :host([current]) [part='link']:focus-visible::before {
+      opacity: 0.24;
+    }
+  }
+
+  slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
+    padding: 0.1em;
+    flex-shrink: 0;
+    margin-inline-end: 24px;
+    color: var(--material-secondary-text-color);
+  }
+
+  :host([current]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
+    color: inherit;
+  }
+
+  slot[name='children'] {
+    --_child-indent: calc(var(--_child-indent-2, 0px) + var(--vaadin-side-nav-child-indent, 24px));
+  }
+
+  slot[name='children']::slotted(*) {
+    --_child-indent-2: var(--_child-indent);
+  }
+`;
+
+registerStyles('vaadin-side-nav-item', [fieldButton, sideNavItemStyles], { moduleId: 'material-side-nav-item' });

package/theme/material/vaadin-side-nav-item.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-side-nav-item-styles.js';
+import '../../src/vaadin-side-nav-item.js';

package/theme/material/vaadin-side-nav-styles.js

@@ -0,0 +1,69 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/font-icons.js';
+import '@vaadin/vaadin-material-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const sideNavStyles = css`
+  :host {
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+  }
+
+  [part='label'] {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 40px;
+    margin: 4px 0;
+    padding: 4px 8px;
+    outline: none;
+    box-sizing: border-box;
+    font-family: var(--material-font-family);
+    font-size: var(--material-small-font-size);
+    color: var(--material-secondary-text-color);
+    line-height: 1;
+    font-weight: 500;
+    border-radius: 4px;
+  }
+
+  :host([focus-ring]) [part='label'] {
+    background-color: var(--material-divider-color);
+  }
+
+  [part='toggle-button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    margin-inline-start: auto;
+    margin-inline-end: -4px;
+    font-size: var(--material-icon-font-size);
+    line-height: 1;
+    color: var(--material-secondary-text-color);
+    font-family: 'material-icons';
+    transform: rotate(90deg);
+  }
+
+  [part='toggle-button']::before {
+    content: var(--material-icons-chevron-right);
+    font-size: 24px;
+  }
+
+  :host(:not([collapsible])) [part='toggle-button'] {
+    display: none !important;
+  }
+
+  :host(:not([collapsed])) [part='toggle-button'] {
+    transform: rotate(270deg);
+  }
+
+  @media (any-hover: hover) {
+    [part='label']:hover [part='toggle-button'] {
+      color: var(--material-body-text-color);
+    }
+  }
+`;
+
+registerStyles('vaadin-side-nav', sideNavStyles, { moduleId: 'material-side-nav' });

package/theme/material/vaadin-side-nav.js

@@ -1,7 +1,8 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import './vaadin-side-nav-item.js';
+import './vaadin-side-nav-styles.js';
 import '../../src/vaadin-side-nav.js';
-import '../../src/vaadin-side-nav-item.js';