@vaadin/side-nav 24.2.0-dev.e9803eea7 → 24.3.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-dev.e9803eea7",
+  "version": "24.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -20,7 +20,6 @@
   "module": "vaadin-side-nav.js",
   "type": "module",
   "files": [
-    "enable.js",
     "src",
     "theme",
     "vaadin-*.d.ts",
@@ -35,15 +34,15 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "24.2.0-dev.e9803eea7",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.e9803eea7",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.e9803eea7",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.e9803eea7",
+    "@vaadin/component-base": "24.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -51,5 +50,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a065b79b9d5a189e457fab312cc8aff0d7f2f910"
+  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
 }

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

@@ -3,10 +3,8 @@
  * Copyright (c) 2023 Vaadin Ltd.
  * 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';
 import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
 
@@ -79,9 +77,7 @@ export type SideNavItemEventMap = HTMLElementEventMap & SideNavItemCustomEventMa
  *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  */
-declare class SideNavItem extends SideNavChildrenMixin(
-  DisabledMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))),
-) {
+declare class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
   /**
    * The path to navigate to
    */

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

@@ -7,6 +7,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 { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { matchPaths } from '@vaadin/component-base/src/url-utils.js';
@@ -14,10 +15,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 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 navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.
  * Not intended to be used separately.
@@ -76,8 +73,8 @@ function isEnabled() {
  *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  *
- * @extends LitElement
- * @mixes PolylitMixin
+ * @customElement
+ * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes DisabledMixin
  * @mixes ElementMixin
@@ -202,7 +199,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
         <a
           id="link"
           ?disabled="${this.disabled}"
-          tabindex="${this.disabled ? '-1' : '0'}"
+          tabindex="${this.disabled || !this.path ? '-1' : '0'}"
           href="${ifDefined(this.disabled ? null : this.path)}"
           part="link"
           aria-current="${this.current ? 'page' : 'false'}"
@@ -220,7 +217,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
           aria-labelledby="link i18n"
         ></button>
       </div>
-      <ul part="children" ?hidden="${!this.expanded}" aria-hidden="${this.expanded ? 'false' : 'true'}">
+      <ul part="children" role="list" ?hidden="${!this.expanded}" aria-hidden="${this.expanded ? 'false' : 'true'}">
         <slot name="children"></slot>
       </ul>
       <div class="sr-only" id="i18n">${this.i18n.toggle}</div>
@@ -268,8 +265,6 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
   }
 }
 
-if (isEnabled()) {
-  customElements.define(SideNavItem.is, SideNavItem);
-}
+defineCustomElement(SideNavItem);
 
 export { SideNavItem };

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

@@ -3,10 +3,8 @@
  * Copyright (c) 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { LitElement } from 'lit';
 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';
 
@@ -74,7 +72,7 @@ export type SideNavEventMap = HTMLElementEventMap & SideNavCustomEventMap;
  *
  * @fires {CustomEvent} collapsed-changed - Fired when the `collapsed` property changes.
  */
-declare class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+declare class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
   /**
    * Whether the side nav is collapsible. When enabled, the toggle icon is shown.
    */

package/src/vaadin-side-nav.js

@@ -6,6 +6,7 @@
 import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.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';
@@ -13,10 +14,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 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;
-}
-
 /**
  * `<vaadin-side-nav>` is a Web Component for navigation menus.
  *
@@ -68,8 +65,8 @@ function isEnabled() {
  *
  * @fires {CustomEvent} collapsed-changed - Fired when the `collapsed` property changes.
  *
- * @extends LitElement
- * @mixes PolylitMixin
+ * @customElement
+ * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin
  * @mixes SideNavChildrenMixin
@@ -152,12 +149,19 @@ class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin
         part="label"
         @click="${this._onLabelClick}"
         aria-expanded="${ifDefined(this.collapsible ? !this.collapsed : null)}"
+        aria-hidden="${ifDefined(this.collapsible === false ? true : 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'}">
+      <ul
+        id="children"
+        role="list"
+        part="children"
+        ?hidden="${this.collapsed}"
+        aria-hidden="${this.collapsed ? 'true' : 'false'}"
+      >
         <slot></slot>
       </ul>
     `;
@@ -199,12 +203,6 @@ class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin
   }
 }
 
-if (isEnabled()) {
-  customElements.define(SideNav.is, SideNav);
-} else {
-  console.warn(
-    'WARNING: The side-nav component is currently an experimental feature and needs to be explicitly enabled. To enable the component, `import "@vaadin/side-nav/enable.js"` *before* importing the side-nav module itself.',
-  );
-}
+defineCustomElement(SideNav);
 
 export { SideNav };

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

@@ -108,9 +108,10 @@ export const sideNavItemStyles = css`
     --_child-indent-2: var(--_child-indent);
   }
 
-  :host([current]) [part='link'] {
-    color: var(--lumo-primary-text-color);
+  :host([current]) [part='content'] {
     background-color: var(--lumo-primary-color-10pct);
+    color: var(--lumo-primary-text-color);
+    border-radius: var(--lumo-border-radius-m);
   }
 `;
 

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

@@ -5,8 +5,11 @@ import { fieldButton } from '@vaadin/vaadin-material-styles/mixins/field-button.
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 export const sideNavItemStyles = css`
-  [part='link'] {
+  [part='content'] {
     position: relative;
+  }
+
+  [part='link'] {
     width: 100%;
     min-height: 32px;
     margin: 4px 0;
@@ -35,10 +38,10 @@ export const sideNavItemStyles = css`
     color: var(--material-disabled-text-color);
   }
 
-  :host([current]) [part='link']::before {
+  :host([current]) [part='content']::before {
     position: absolute;
     content: '';
-    inset: 0;
+    inset: 4px 0;
     background-color: var(--material-primary-color);
     opacity: 0.12;
     border-radius: 4px;

package/web-types.json

@@ -0,0 +1,191 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/side-nav",
+  "version": "24.3.0-alpha1",
+  "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`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",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "expanded",
+              "description": "Whether to show the child items or not",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "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```",
+                "value": {
+                  "type": [
+                    "SideNavI18n"
+                  ]
+                }
+              },
+              {
+                "name": "path",
+                "description": "The path to navigate to",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "pathAliases",
+                "description": "The list of alternative paths matching this item",
+                "value": {
+                  "type": [
+                    "Array.<string>"
+                  ]
+                }
+              },
+              {
+                "name": "expanded",
+                "description": "Whether to show the child items or not",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "expanded-changed",
+                "description": "Fired when the `expanded` property changes."
+              }
+            ]
+          }
+        },
+        {
+          "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\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",
+              "description": "Whether the side nav is collapsible. When enabled, the toggle icon is shown.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "collapsed",
+              "description": "Whether the side nav is collapsed. When collapsed, the items are hidden.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "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.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "collapsed",
+                "description": "Whether the side nav is collapsed. When collapsed, the items are hidden.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "collapsed-changed",
+                "description": "Fired when the `collapsed` property changes."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,104 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/side-nav",
+  "version": "24.3.0-alpha1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "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`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",
+              "value": {
+                "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",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".pathAliases",
+              "description": "The list of alternative paths matching this item",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@expanded-changed",
+              "description": "Fired when the `expanded` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
+        {
+          "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\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": [
+            {
+              "name": "?collapsible",
+              "description": "Whether the side nav is collapsible. When enabled, the toggle icon is shown.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?collapsed",
+              "description": "Whether the side nav is collapsed. When collapsed, the items are hidden.",
+              "value": {
+                "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.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

package/enable.js

@@ -1,3 +0,0 @@
-window.Vaadin ||= {};
-window.Vaadin.featureFlags ||= {};
-window.Vaadin.featureFlags.sideNavComponent = true;