@vaadin/side-nav - npm Package Compare versions

Comparing version 24.2.0-alpha2 to 24.2.0-alpha3

package.json

 {
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha2",
+  "version": "24.2.0-alpha3",
   "publishConfig": {
@@ -38,6 +38,6 @@ "access": "public"
   "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"
@@ -55,3 +55,3 @@ },
   ],
-  "gitHead": "b8378bd2267728e172012bcb2ea45c3e5a6e590a"
+  "gitHead": "e5d1e1ed2d01b56d5922e18a3fcb7cd306351954"
 }

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

@@ -18,2 +18,6 @@ /**
 
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
   [part='content'] {
@@ -55,11 +59,2 @@ display: flex;
 
-  :host(:not([path])) button::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
   slot[name='prefix'],
@@ -66,0 +61,0 @@ slot[name='suffix'] {

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

@@ -41,2 +41,7 @@ /**
   protected readonly _itemsSlotName: string;
+
+  /**
+   * Count of child items.
+   */
+  protected _itemsCount: number;
 }

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

@@ -67,3 +67,3 @@ /**
          * Count of child items.
-         * @private
+         * @protected
          */
@@ -70,0 +70,0 @@ _itemsCount: {

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

@@ -7,2 +7,3 @@ /**
 import { LitElement } from 'lit';
+import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -74,2 +75,3 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
  * ---------------|-------------
+ * `disabled`     | Set when the element is disabled.
  * `expanded`     | Set when the element is expanded.
@@ -82,3 +84,5 @@ * `has-children` | Set when the element has child items.
  */
-declare class SideNavItem extends SideNavChildrenMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+declare class SideNavItem extends SideNavChildrenMixin(
+  DisabledMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
   /**
@@ -85,0 +89,0 @@ * The path to navigate to

src/vaadin-side-nav-item.js

@@ -8,2 +8,3 @@ /**
 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';
@@ -71,2 +72,3 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
  * ---------------|-------------
+ * `disabled`     | Set when the element is disabled.
  * `expanded`     | Set when the element is expanded.
@@ -82,6 +84,7 @@ * `has-children` | Set when the element has child items.
  * @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() {
@@ -175,2 +178,9 @@ return 'vaadin-side-nav-item';
     }
+
+    // Ensure all the child items are disabled
+    if (props.has('disabled') || props.has('_itemsCount')) {
+      this._items.forEach((item) => {
+        item.disabled = this.disabled;
+      });
+    }
   }
@@ -196,3 +206,10 @@
       <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>
@@ -204,2 +221,3 @@ <slot></slot>
           part="toggle-button"
+          ?disabled="${this.disabled}"
           @click="${this._onButtonClick}"
@@ -211,3 +229,3 @@ aria-controls="children"
       </div>
-      <ul part="children" ?hidden="${!this.expanded}">
+      <ul part="children" ?hidden="${!this.expanded}" aria-hidden="${this.expanded ? 'false' : 'true'}">
         <slot name="children"></slot>
@@ -214,0 +232,0 @@ </ul>

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

@@ -26,2 +26,6 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
+  :host([disabled]) [part='link'] {
+    color: var(--lumo-disabled-text-color);
+  }
+
   [part='toggle-button'] {
@@ -57,2 +61,6 @@ margin-inline-end: calc(var(--lumo-space-xs) * -1);
 
+  :host([dir='rtl']) [part='toggle-button']::before {
+    transform: rotate(90deg);
+  }
+
   :host([expanded]) [part='toggle-button']::before {
@@ -89,2 +97,6 @@ transform: none;
 
+  :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'])) {
@@ -91,0 +103,0 @@ color: inherit;

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

@@ -58,2 +58,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     content: var(--lumo-icons-angle-right);
+    transition: transform 140ms;
   }
@@ -65,6 +66,10 @@
 
-  :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) {
@@ -71,0 +76,0 @@ [part='label']:hover [part='toggle-button'] {

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

@@ -34,2 +34,6 @@ import '@vaadin/vaadin-material-styles/color.js';
 
+  :host([disabled]) [part='link'] {
+    color: var(--material-disabled-text-color);
+  }
+
   :host([current]) [part='link']::before {
@@ -122,2 +126,6 @@ position: absolute;
 
+  :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'])) {
@@ -124,0 +132,0 @@ color: inherit;

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha2",
+  "version": "24.2.0-alpha3",
   "description-markup": "markdown",
@@ -11,5 +11,16 @@ "contributions": {
           "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",
@@ -49,2 +60,13 @@ "description": "The path to navigate to",
               {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
                 "name": "i18n",
@@ -51,0 +73,0 @@ "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```",

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha2",
+  "version": "24.2.0-alpha3",
   "description-markup": "markdown",
@@ -19,6 +19,13 @@ "framework": "lit",
           "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",
@@ -25,0 +32,0 @@ "description": "Whether to show the child items or not",

No alert changes

Improved metrics

Total package byte prevSize

67600

3.72%

Lines of code

1592

4.46%

Dependency changes

• + Added

  @vaadin/component-base@24.2.0-alpha3
  (transitive)

• + Added

  @vaadin/icon@24.2.0-alpha3
  (transitive)

• + Added

  @vaadin/vaadin-lumo-styles@24.2.0-alpha3
  (transitive)

• + Added

  @vaadin/vaadin-material-styles@24.2.0-alpha3
  (transitive)

• + Added

  @vaadin/vaadin-themable-mixin@24.2.0-alpha3
  (transitive)

• - Removed

  @vaadin/component-base@24.2.0-alpha2
  (transitive)

• - Removed

  @vaadin/icon@24.2.0-alpha2
  (transitive)

• - Removed

  @vaadin/vaadin-lumo-styles@24.2.0-alpha2
  (transitive)

• - Removed

  @vaadin/vaadin-material-styles@24.2.0-alpha2
  (transitive)

• - Removed

  @vaadin/vaadin-themable-mixin@24.2.0-alpha2
  (transitive)

• Updated

  @vaadin/component-base@24.2.0-alpha3

• Updated

  @vaadin/vaadin-lumo-styles@24.2.0-alpha3

• Updated

  @vaadin/vaadin-material-styles@24.2.0-alpha3

• Updated

  @vaadin/vaadin-themable-mixin@24.2.0-alpha3