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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha2",
+  "version": "24.2.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -35,10 +35,10 @@
     "web-component"
   ],
   "dependencies": {
-    "@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",
+    "@vaadin/component-base": "24.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha3",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha3",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "b8378bd2267728e172012bcb2ea45c3e5a6e590a"
+  "gitHead": "e5d1e1ed2d01b56d5922e18a3fcb7cd306351954"
 }

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

@@ -15,6 +15,10 @@ export const sideNavItemBaseStyles = css`
     display: none !important;
   }
 
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
   [part='content'] {
     display: flex;
     align-items: center;
@@ -51,15 +55,6 @@ export const sideNavItemBaseStyles = css`
     display: none !important;
   }
 
-  :host(:not([path])) button::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
   slot[name='prefix'],
   slot[name='suffix'] {
     flex: none;

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

@@ -38,4 +38,9 @@ export declare class SideNavChildrenMixinClass {
    * Name of the slot to be used for children.
    */
   protected readonly _itemsSlotName: string;
+
+  /**
+   * Count of child items.
+   */
+  protected _itemsCount: number;
 }

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

@@ -64,7 +64,7 @@ export const SideNavChildrenMixin = (superClass) =>
 
         /**
          * Count of child items.
-         * @private
+         * @protected
          */
         _itemsCount: {
           type: Number,

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { LitElement } from 'lit';
+import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-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';
@@ -70,6 +71,7 @@ export type SideNavItemEventMap = HTMLElementEventMap & SideNavItemCustomEventMa
  *
  * Attribute      | Description
  * ---------------|-------------
+ * `disabled`     | Set when the element is disabled.
  * `expanded`     | Set when the element is expanded.
  * `has-children` | Set when the element has child items.
  *
@@ -77,7 +79,9 @@ export type SideNavItemEventMap = HTMLElementEventMap & SideNavItemCustomEventMa
  *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  */
-declare class SideNavItem extends SideNavChildrenMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+declare class SideNavItem extends SideNavChildrenMixin(
+  DisabledMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
   /**
    * The path to navigate to
    */

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

@@ -5,6 +5,7 @@
  */
 import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.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';
@@ -67,6 +68,7 @@ function isEnabled() {
  *
  * Attribute      | Description
  * ---------------|-------------
+ * `disabled`     | Set when the element is disabled.
  * `expanded`     | Set when the element is expanded.
  * `has-children` | Set when the element has child items.
  *
@@ -77,10 +79,11 @@ function isEnabled() {
  * @extends LitElement
  * @mixes PolylitMixin
  * @mixes ThemableMixin
+ * @mixes DisabledMixin
  * @mixes ElementMixin
  * @mixes SideNavChildrenMixin
  */
-class SideNavItem extends SideNavChildrenMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-side-nav-item';
   }
@@ -169,6 +172,13 @@ class SideNavItem extends SideNavChildrenMixin(ElementMixin(ThemableMixin(Polyli
     if (props.has('path') || props.has('pathAliases')) {
       this.__updateCurrent();
     }
+
+    // Ensure all the child items are disabled
+    if (props.has('disabled') || props.has('_itemsCount')) {
+      this._items.forEach((item) => {
+        item.disabled = this.disabled;
+      });
+    }
   }
 
   /** @protected */
@@ -189,20 +199,28 @@ class SideNavItem extends SideNavChildrenMixin(ElementMixin(ThemableMixin(Polyli
   render() {
     return html`
       <div part="content" @click="${this._onContentClick}">
-        <a id="link" href="${ifDefined(this.path)}" part="link" aria-current="${this.current ? 'page' : 'false'}">
+        <a
+          id="link"
+          ?disabled="${this.disabled}"
+          tabindex="${this.disabled ? '-1' : '0'}"
+          href="${ifDefined(this.disabled ? null : this.path)}"
+          part="link"
+          aria-current="${this.current ? 'page' : 'false'}"
+        >
           <slot name="prefix"></slot>
           <slot></slot>
           <slot name="suffix"></slot>
         </a>
         <button
           part="toggle-button"
+          ?disabled="${this.disabled}"
           @click="${this._onButtonClick}"
           aria-controls="children"
           aria-expanded="${this.expanded}"
           aria-labelledby="link i18n"
         ></button>
       </div>
-      <ul part="children" ?hidden="${!this.expanded}">
+      <ul part="children" ?hidden="${!this.expanded}" aria-hidden="${this.expanded ? 'false' : 'true'}">
         <slot name="children"></slot>
       </ul>
       <div class="sr-only" id="i18n">${this.i18n.toggle}</div>

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

@@ -23,6 +23,10 @@ export const sideNavItemStyles = css`
     cursor: pointer;
   }
 
+  :host([disabled]) [part='link'] {
+    color: var(--lumo-disabled-text-color);
+  }
+
   [part='toggle-button'] {
     margin-inline-end: calc(var(--lumo-space-xs) * -1);
     width: var(--lumo-size-s);
@@ -53,6 +57,10 @@ export const sideNavItemStyles = css`
     transition: transform 140ms;
   }
 
+  :host([dir='rtl']) [part='toggle-button']::before {
+    transform: rotate(90deg);
+  }
+
   :host([expanded]) [part='toggle-button']::before {
     transform: none;
   }
@@ -84,6 +92,10 @@ export const sideNavItemStyles = css`
     color: var(--lumo-contrast-60pct);
   }
 
+  :host([disabled]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
+    color: var(--lumo-disabled-text-color);
+  }
+
   :host([current]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
     color: inherit;
   }

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

@@ -55,16 +55,21 @@ export const sideNavStyles = css`
 
   [part='toggle-button']::before {
     content: var(--lumo-icons-angle-right);
+    transition: transform 140ms;
   }
 
   :host(:not([collapsible])) [part='toggle-button'] {
     display: none !important;
   }
 
-  :host(:not([collapsed])) [part='toggle-button'] {
+  :host(:not([collapsed])) [part='toggle-button']::before {
     transform: rotate(90deg);
   }
 
+  :host([collapsed][dir='rtl']) [part='toggle-button']::before {
+    transform: rotate(180deg);
+  }
+
   @media (any-hover: hover) {
     [part='label']:hover [part='toggle-button'] {
       color: var(--lumo-body-text-color);

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

@@ -31,6 +31,10 @@ export const sideNavItemStyles = css`
     color: var(--material-primary-text-color);
   }
 
+  :host([disabled]) [part='link'] {
+    color: var(--material-disabled-text-color);
+  }
+
   :host([current]) [part='link']::before {
     position: absolute;
     content: '';
@@ -118,6 +122,10 @@ export const sideNavItemStyles = css`
     color: var(--material-secondary-text-color);
   }
 
+  :host([disabled]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
+    color: var(--material-disabled-text-color);
+  }
+
   :host([current]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
     color: inherit;
   }

package/web-types.json

@@ -1,15 +1,26 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha2",
+  "version": "24.2.0-alpha3",
   "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\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.",
+          "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`disabled`     | Set when the element is disabled.\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": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "path",
               "description": "The path to navigate to",
@@ -44,6 +55,17 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "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```",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha2",
+  "version": "24.2.0-alpha3",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,9 +16,16 @@
       "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\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.",
+          "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`disabled`     | Set when the element is disabled.\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": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?expanded",
               "description": "Whether to show the child items or not",