@vaadin/side-nav 24.2.0-alpha12 → 24.2.0-alpha14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-alpha12",
+  "version": "24.2.0-alpha14",
   "publishConfig": {
     "access": "public"
   },
@@ -34,10 +34,10 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "24.2.0-alpha12",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha12",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha12",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha12",
+    "@vaadin/component-base": "24.2.0-alpha14",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha14",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha14",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha14",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -50,5 +50,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "854d2809340ef73f765350808bb92ed5c840d147"
+  "gitHead": "203a2fda8d879db6ee8bccd7cf5b915de3e5008b"
 }

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

@@ -72,8 +72,7 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
  *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  *
- * @extends LitElement
- * @mixes PolylitMixin
+ * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes DisabledMixin
  * @mixes ElementMixin

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

@@ -64,8 +64,7 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
  *
  * @fires {CustomEvent} collapsed-changed - Fired when the `collapsed` property changes.
  *
- * @extends LitElement
- * @mixes PolylitMixin
+ * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin
  * @mixes SideNavChildrenMixin

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-alpha12",
+  "version": "24.2.0-alpha14",
   "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-alpha12",
+  "version": "24.2.0-alpha14",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {