@vaadin/side-nav 24.2.0-alpha1 → 24.2.0-alpha2

package/README.md

@@ -49,9 +49,14 @@ import '@vaadin/side-nav';
 ## Themes
 
 Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-This component currently does not support Material theme.
 The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/side-nav/vaadin-side-nav.js) of the package uses the Lumo theme.
 
+To use the Material theme, import the component from the `theme/material` folder:
+
+```js
+import '@vaadin/side-nav/theme/material/vaadin-side-nav.js';
+```
+
 You can also import the Lumo version of the component explicitly:
 
 ```js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha1",
+  "version": "24.2.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,10 +35,10 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "24.2.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha1",
+    "@vaadin/component-base": "24.2.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha2",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0dbb118320203ab6c0c07450a3e718815367589f"
+  "gitHead": "b8378bd2267728e172012bcb2ea45c3e5a6e590a"
 }

package/src/vaadin-side-nav-base-styles.js

@@ -10,10 +10,16 @@ export const sideNavItemBaseStyles = css`
     display: block;
   }
 
+  :host([hidden]),
   [hidden] {
     display: none !important;
   }
 
+  [part='content'] {
+    display: flex;
+    align-items: center;
+  }
+
   [part='link'] {
     flex: auto;
     min-width: 0;
@@ -28,6 +34,11 @@ export const sideNavItemBaseStyles = css`
     -webkit-appearance: none;
     appearance: none;
     flex: none;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
   }
 
   [part='children'] {
@@ -40,10 +51,6 @@ export const sideNavItemBaseStyles = css`
     display: none !important;
   }
 
-  :host(:not([path])) a {
-    position: relative;
-  }
-
   :host(:not([path])) button::after {
     content: '';
     position: absolute;

package/src/vaadin-side-nav-children-mixin.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export interface SideNavI18n {
+  toggle: string;
+}
+
+export declare function SideNavChildrenMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<SideNavChildrenMixinClass> & T;
+
+export declare class SideNavChildrenMixinClass {
+  /**
+   * The object used to localize this component.
+   *
+   * To change the default localization, replace the entire
+   * `i18n` object with a custom one.
+   *
+   * The object has the following structure and default values:
+   * ```
+   * {
+   *   toggle: 'Toggle child items'
+   * }
+   * ```
+   */
+  i18n: SideNavI18n;
+
+  /**
+   * List of child items of this component.
+   */
+  protected readonly _items: HTMLElement[];
+
+  /**
+   * Name of the slot to be used for children.
+   */
+  protected readonly _itemsSlotName: string;
+}

package/src/vaadin-side-nav-children-mixin.js

@@ -0,0 +1,134 @@
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * A controller that manages the item content children slot.
+ */
+class ChildrenController extends SlotController {
+  constructor(host, slotName) {
+    super(host, slotName, null, { observe: true, multiple: true });
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  initAddedNode() {
+    this.host.requestUpdate();
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  teardownNode() {
+    this.host.requestUpdate();
+  }
+}
+
+/**
+ * @polymerMixin
+ */
+export const SideNavChildrenMixin = (superClass) =>
+  class SideNavChildrenMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * The object used to localize this component.
+         *
+         * To change the default localization, replace the entire
+         * `i18n` object with a custom one.
+         *
+         * The object has the following structure and default values:
+         * ```
+         * {
+         *   toggle: 'Toggle child items'
+         * }
+         * ```
+         *
+         * @type {SideNavI18n}
+         * @default {English/US}
+         */
+        i18n: {
+          type: Object,
+          value: () => {
+            return {
+              toggle: 'Toggle child items',
+            };
+          },
+        },
+
+        /**
+         * Count of child items.
+         * @private
+         */
+        _itemsCount: {
+          type: Number,
+          value: 0,
+        },
+      };
+    }
+
+    constructor() {
+      super();
+
+      this._childrenController = new ChildrenController(this, this._itemsSlotName);
+    }
+
+    /**
+     * List of child items of this component.
+     * @protected
+     */
+    get _items() {
+      return this._childrenController.nodes;
+    }
+
+    /**
+     * Name of the slot to be used for children.
+     * @protected
+     */
+    get _itemsSlotName() {
+      return 'children';
+    }
+
+    /** @protected */
+    firstUpdated() {
+      super.firstUpdated();
+
+      // Controller that detects changes to the side-nav items.
+      this.addController(this._childrenController);
+    }
+
+    /**
+     * @protected
+     * @override
+     */
+    willUpdate(props) {
+      super.willUpdate(props);
+
+      this._itemsCount = this._items.length;
+    }
+
+    /**
+     * @protected
+     * @override
+     */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('_itemsCount')) {
+        this.toggleAttribute('has-children', this._itemsCount > 0);
+      }
+
+      // Propagate i18n object to all the child items
+      if (props.has('_itemsCount') || props.has('i18n')) {
+        this._items.forEach((item) => {
+          item.i18n = this.i18n;
+        });
+      }
+    }
+  };

package/src/vaadin-side-nav-item.d.ts

@@ -7,6 +7,7 @@ import { LitElement } from 'lit';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
 
 /**
  * Fired when the `expanded` property changes.
@@ -56,6 +57,8 @@ export type SideNavItemEventMap = HTMLElementEventMap & SideNavItemCustomEventMa
  *
  * ### Styling
  *
+ * The following shadow DOM parts are available for styling:
+ *
  * Part name       | Description
  * ----------------|----------------
  * `content`       | The element that wraps link and toggle button
@@ -63,22 +66,27 @@ export type SideNavItemEventMap = HTMLElementEventMap & SideNavItemCustomEventMa
  * `link`          | The clickable anchor used for navigation
  * `toggle-button` | The toggle button
  *
+ * The following state attributes are available for styling:
+ *
+ * Attribute      | Description
+ * ---------------|-------------
+ * `expanded`     | Set when the element is expanded.
+ * `has-children` | Set when the element has child items.
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  */
-declare class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
+declare class SideNavItem extends SideNavChildrenMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   /**
    * The path to navigate to
    */
   path: string | null | undefined;
 
   /**
-   * A comma-separated list of alternative paths matching this item.
-   *
-   * @attr {string} path-aliases
+   * The list of alternative paths matching this item
    */
-  pathAliases: string | null | undefined;
+  pathAliases: string[];
 
   /**
    * Whether to show the child items or not
@@ -90,7 +98,7 @@ declare class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitEle
    * Set when the item is appended to DOM or when navigated back
    * to the page that contains this item using the browser.
    */
-  readonly active: boolean;
+  readonly current: boolean;
 
   addEventListener<K extends keyof SideNavItemEventMap>(
     type: K,

package/src/vaadin-side-nav-item.js

@@ -5,42 +5,18 @@
  */
 import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { matchPaths } from '@vaadin/component-base/src/url-utils.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { sideNavItemBaseStyles } 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;
 }
 
-/**
- * A controller to manage the item content children slot.
- */
-class ChildrenController extends SlotController {
-  constructor(host) {
-    super(host, 'children', null, { observe: true, multiple: true });
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  initAddedNode() {
-    this.host.requestUpdate();
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  teardownNode() {
-    this.host.requestUpdate();
-  }
-}
-
 /**
  * A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.
  * Not intended to be used separately.
@@ -78,6 +54,8 @@ class ChildrenController extends SlotController {
  *
  * ### Styling
  *
+ * The following shadow DOM parts are available for styling:
+ *
  * Part name       | Description
  * ----------------|----------------
  * `content`       | The element that wraps link and toggle button
@@ -85,6 +63,13 @@ class ChildrenController extends SlotController {
  * `link`          | The clickable anchor used for navigation
  * `toggle-button` | The toggle button
  *
+ * The following state attributes are available for styling:
+ *
+ * Attribute      | Description
+ * ---------------|-------------
+ * `expanded`     | Set when the element is expanded.
+ * `has-children` | Set when the element has child items.
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
@@ -93,8 +78,9 @@ class ChildrenController extends SlotController {
  * @mixes PolylitMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
+ * @mixes SideNavChildrenMixin
  */
-class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class SideNavItem extends SideNavChildrenMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-side-nav-item';
   }
@@ -107,11 +93,14 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
       path: String,
 
       /**
-       * A comma-separated list of alternative paths matching this item.
+       * The list of alternative paths matching this item
        *
-       * @attr {string} path-aliases
+       * @type {!Array<string>}
        */
-      pathAliases: String,
+      pathAliases: {
+        type: Array,
+        value: () => [],
+      },
 
       /**
        * Whether to show the child items or not
@@ -132,7 +121,7 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
        *
        * @type {boolean}
        */
-      active: {
+      current: {
         type: Boolean,
         value: false,
         readOnly: true,
@@ -142,13 +131,13 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
   }
 
   static get styles() {
-    return sideNavItemBaseStyles;
+    return [screenReaderOnly, sideNavItemBaseStyles];
   }
 
   constructor() {
     super();
 
-    this._childrenController = new ChildrenController(this);
+    this.__boundUpdateCurrent = this.__updateCurrent.bind(this);
   }
 
   /** @protected */
@@ -161,8 +150,7 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
    * @override
    */
   firstUpdated() {
-    // Controller to detect whether the item has child items.
-    this.addController(this._childrenController);
+    super.firstUpdated();
 
     // By default, if the user hasn't provided a custom role,
     // the role attribute is set to "listitem".
@@ -179,31 +167,29 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
     super.updated(props);
 
     if (props.has('path') || props.has('pathAliases')) {
-      this.__updateActive();
+      this.__updateCurrent();
     }
-
-    this.toggleAttribute('has-children', this._childrenController.nodes.length > 0);
   }
 
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
-    this.__updateActive();
-    this.__boundUpdateActive = this.__updateActive.bind(this);
-    window.addEventListener('popstate', this.__boundUpdateActive);
+    this.__updateCurrent();
+
+    window.addEventListener('popstate', this.__boundUpdateCurrent);
   }
 
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener('popstate', this.__boundUpdateActive);
+    window.removeEventListener('popstate', this.__boundUpdateCurrent);
   }
 
   /** @protected */
   render() {
     return html`
       <div part="content" @click="${this._onContentClick}">
-        <a href="${ifDefined(this.path)}" part="link" aria-current="${this.active ? 'page' : 'false'}">
+        <a id="link" href="${ifDefined(this.path)}" part="link" aria-current="${this.current ? 'page' : 'false'}">
           <slot name="prefix"></slot>
           <slot></slot>
           <slot name="suffix"></slot>
@@ -213,12 +199,13 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
           @click="${this._onButtonClick}"
           aria-controls="children"
           aria-expanded="${this.expanded}"
-          aria-label="Toggle child items"
+          aria-labelledby="link i18n"
         ></button>
       </div>
       <ul part="children" ?hidden="${!this.expanded}">
         <slot name="children"></slot>
       </ul>
+      <div class="sr-only" id="i18n">${this.i18n.toggle}</div>
     `;
   }
 
@@ -244,29 +231,21 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
   }
 
   /** @private */
-  __updateActive() {
-    if (!this.path && this.path !== '') {
-      this._setActive(false);
-      return;
-    }
-    this._setActive(this.__calculateActive());
-    this.toggleAttribute('child-active', document.location.pathname.startsWith(this.path));
-    if (this.active) {
-      this.expanded = true;
+  __updateCurrent() {
+    this._setCurrent(this.__isCurrent());
+    if (this.current) {
+      this.expanded = this._items.length > 0;
     }
   }
 
   /** @private */
-  __calculateActive() {
+  __isCurrent() {
     if (this.path == null) {
       return false;
     }
-    if (matchPaths(document.location.pathname, this.path)) {
-      return true;
-    }
     return (
-      this.pathAliases != null &&
-      this.pathAliases.split(',').some((alias) => matchPaths(document.location.pathname, alias))
+      matchPaths(document.location.pathname, this.path) ||
+      this.pathAliases.some((alias) => matchPaths(document.location.pathname, alias))
     );
   }
 }

package/src/vaadin-side-nav.d.ts

@@ -8,6 +8,9 @@ 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { SideNavChildrenMixin, type SideNavI18n } from './vaadin-side-nav-children-mixin.js';
+
+export type { SideNavI18n };
 
 /**
  * Fired when the `collapsed` property changes.
@@ -51,17 +54,27 @@ export type SideNavEventMap = HTMLElementEventMap & SideNavCustomEventMap;
  *
  * ### 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.
  */
-declare class SideNav extends FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+declare class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
   /**
    * Whether the side nav is collapsible. When enabled, the toggle icon is shown.
    */

package/src/vaadin-side-nav.js

@@ -11,6 +11,7 @@ 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;
@@ -47,12 +48,22 @@ function isEnabled() {
  *
  * ### 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.
@@ -61,8 +72,9 @@ function isEnabled() {
  * @mixes PolylitMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
+ * @mixes SideNavChildrenMixin
  */
-class SideNav extends FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-side-nav';
   }
@@ -108,6 +120,15 @@ class SideNav extends FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElem
     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');
@@ -115,6 +136,8 @@ class SideNav extends FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElem
 
   /** @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')) {

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

@@ -4,14 +4,10 @@ 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`
-  [part='content'] {
-    display: flex;
-    align-items: center;
-  }
-
   [part='link'] {
     width: 100%;
     gap: var(--lumo-space-xs);
@@ -23,19 +19,14 @@ export const sideNavItemStyles = css`
     min-height: var(--lumo-icon-size-m);
   }
 
+  [part='link'][href] {
+    cursor: pointer;
+  }
+
   [part='toggle-button'] {
-    position: relative;
-    border: 0;
-    margin: calc((var(--lumo-icon-size-m) - var(--lumo-size-s)) / 2) 0;
     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'] {
@@ -57,11 +48,7 @@ export const sideNavItemStyles = css`
   }
 
   [part='toggle-button']::before {
-    font-family: lumo-icons;
     content: var(--lumo-icons-dropdown);
-    font-size: 1.5em;
-    line-height: var(--lumo-size-s);
-    display: inline-block;
     transform: rotate(-90deg);
     transition: transform 140ms;
   }
@@ -93,10 +80,11 @@ export const sideNavItemStyles = css`
 
   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;
   }
 
@@ -108,10 +96,10 @@ export const sideNavItemStyles = css`
     --_child-indent-2: var(--_child-indent);
   }
 
-  :host([active]) [part='link'] {
+  :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/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

@@ -3,5 +3,6 @@
  * 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';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha1",
+  "version": "24.2.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-side-nav-item",
-          "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n  Item 1\n  <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n    Child item 1\n  </vaadin-side-nav-item>\n  <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n    Child item 2\n  </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix`  | A slot for content before the label (e.g. an icon).\n`suffix`  | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n  <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n  Item\n  <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nPart name       | Description\n----------------|----------------\n`content`       | The element that wraps link and toggle button\n`children`      | The element that wraps child items\n`link`          | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n  Item 1\n  <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n    Child item 1\n  </vaadin-side-nav-item>\n  <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n    Child item 2\n  </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix`  | A slot for content before the label (e.g. an icon).\n`suffix`  | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n  <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n  Item\n  <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name       | Description\n----------------|----------------\n`content`       | The element that wraps link and toggle button\n`children`      | The element that wraps child items\n`link`          | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`expanded`     | Set when the element is expanded.\n`has-children` | Set when the element has child items.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "path",
@@ -21,17 +21,6 @@
                 ]
               }
             },
-            {
-              "name": "path-aliases",
-              "description": "A comma-separated list of alternative paths matching this item.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "expanded",
               "description": "Whether to show the child items or not",
@@ -55,6 +44,15 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  toggle: 'Toggle child items'\n}\n```",
+                "value": {
+                  "type": [
+                    "SideNavI18n"
+                  ]
+                }
+              },
               {
                 "name": "path",
                 "description": "The path to navigate to",
@@ -68,12 +66,10 @@
               },
               {
                 "name": "pathAliases",
-                "description": "A comma-separated list of alternative paths matching this item.",
+                "description": "The list of alternative paths matching this item",
                 "value": {
                   "type": [
-                    "string",
-                    "null",
-                    "undefined"
+                    "Array.<string>"
                   ]
                 }
               },
@@ -97,7 +93,7 @@
         },
         {
           "name": "vaadin-side-nav",
-          "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n  <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label`   | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n  <span slot=\"label\">Main menu</span>\n  <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nPart name       | Description\n----------------|----------------\n`label`         | The label element\n`children`      | The element that wraps child items\n`toggle-button` | The toggle button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n  <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label`   | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n  <span slot=\"label\">Main menu</span>\n  <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name       | Description\n----------------|----------------\n`label`         | The label element\n`children`      | The element that wraps child items\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`collapsed`  | Set when the element is collapsed.\n`focus-ring` | Set when the label is focused using the keyboard.\n`focused`    | Set when the label is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "collapsible",
@@ -131,6 +127,15 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  toggle: 'Toggle child items'\n}\n```",
+                "value": {
+                  "type": [
+                    "SideNavI18n"
+                  ]
+                }
+              },
               {
                 "name": "collapsible",
                 "description": "Whether the side nav is collapsible. When enabled, the toggle icon is shown.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha1",
+  "version": "24.2.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-side-nav-item",
-          "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n  Item 1\n  <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n    Child item 1\n  </vaadin-side-nav-item>\n  <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n    Child item 2\n  </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix`  | A slot for content before the label (e.g. an icon).\n`suffix`  | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n  <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n  Item\n  <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nPart name       | Description\n----------------|----------------\n`content`       | The element that wraps link and toggle button\n`children`      | The element that wraps child items\n`link`          | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n  Item 1\n  <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n    Child item 1\n  </vaadin-side-nav-item>\n  <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n    Child item 2\n  </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix`  | A slot for content before the label (e.g. an icon).\n`suffix`  | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n  <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n  Item\n  <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name       | Description\n----------------|----------------\n`content`       | The element that wraps link and toggle button\n`children`      | The element that wraps child items\n`link`          | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`expanded`     | Set when the element is expanded.\n`has-children` | Set when the element has child items.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -26,6 +26,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".i18n",
+              "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  toggle: 'Toggle child items'\n}\n```",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".path",
               "description": "The path to navigate to",
@@ -35,7 +42,7 @@
             },
             {
               "name": ".pathAliases",
-              "description": "A comma-separated list of alternative paths matching this item.",
+              "description": "The list of alternative paths matching this item",
               "value": {
                 "kind": "expression"
               }
@@ -51,7 +58,7 @@
         },
         {
           "name": "vaadin-side-nav",
-          "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n  <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label`   | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n  <span slot=\"label\">Main menu</span>\n  <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nPart name       | Description\n----------------|----------------\n`label`         | The label element\n`children`      | The element that wraps child items\n`toggle-button` | The toggle button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n  <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n  <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label`   | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n  <span slot=\"label\">Main menu</span>\n  <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name       | Description\n----------------|----------------\n`label`         | The label element\n`children`      | The element that wraps child items\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`collapsed`  | Set when the element is collapsed.\n`focus-ring` | Set when the label is focused using the keyboard.\n`focused`    | Set when the label is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -68,6 +75,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".i18n",
+              "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  toggle: 'Toggle child items'\n}\n```",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@collapsed-changed",
               "description": "Fired when the `collapsed` property changes.",