@vaadin/side-nav 24.2.0-alpha8 → 24.2.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha8",
+  "version": "24.2.0-beta1",
   "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-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha8",
+    "@vaadin/component-base": "24.2.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.2.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-beta1",
     "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": "2c024e8fd462d178430418f76a61f498fb549998"
+  "gitHead": "67c8eef57d1c59e7476e29adaf003cf4548878f2"
 }

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha8",
+  "version": "24.2.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha8",
+  "version": "24.2.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

package/enable.js

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