@vaadin/side-nav 24.8.0-alpha9 → 25.0.0-alpha1

package/README.md

@@ -41,29 +41,6 @@ Once installed, import the component in your application:
 import '@vaadin/side-nav';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/side-nav/vaadin-side-nav.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/side-nav/theme/material/vaadin-side-nav.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/side-nav/theme/lumo/vaadin-side-nav.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/side-nav/src/vaadin-side-nav.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,16 +35,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/a11y-base": "25.0.0-alpha1",
+    "@vaadin/component-base": "25.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-alpha1",
+    "@vaadin/test-runner-commands": "25.0.0-alpha1",
     "@vaadin/testing-helpers": "^1.1.0",
     "lit": "^3.0.0",
     "sinon": "^18.0.0"
@@ -53,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha1",
   "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.8.0-alpha9",
+  "version": "25.0.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

package/theme/material/vaadin-side-nav-item-styles.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-export declare const sideNavItemStyles: import("lit").CSSResult;

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

@@ -1,149 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { fieldButton } from '@vaadin/vaadin-material-styles/mixins/field-button.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-export const sideNavItemStyles = css`
-  [part='content'] {
-    position: relative;
-  }
-
-  [part='link'] {
-    width: 100%;
-    min-height: 32px;
-    margin: 4px 0;
-    gap: 8px;
-    padding: 4px 8px;
-    padding-inline-start: calc(8px + var(--_child-indent, 0px));
-    font-family: var(--material-font-family);
-    font-size: var(--material-small-font-size);
-    line-height: 1;
-    font-weight: 500;
-    color: var(--material-body-text-color);
-    transition:
-      background-color 140ms,
-      color 140ms;
-    border-radius: 4px;
-    cursor: default;
-  }
-
-  [part='link'][href] {
-    cursor: pointer;
-  }
-
-  :host([current]) [part='link'] {
-    color: var(--material-primary-text-color);
-  }
-
-  :host([disabled]) [part='link'] {
-    color: var(--material-disabled-text-color);
-  }
-
-  :host([current]) [part='content']::before {
-    position: absolute;
-    content: '';
-    inset: 4px 0;
-    background-color: var(--material-primary-color);
-    opacity: 0.12;
-    border-radius: 4px;
-  }
-
-  [part='toggle-button'] {
-    width: 32px;
-    height: 32px;
-    margin-inline-end: -4px;
-    transform: rotate(90deg);
-  }
-
-  [part='toggle-button']::before {
-    font-family: 'material-icons';
-    font-size: 24px;
-    width: 24px;
-    display: inline-block;
-    content: var(--material-icons-chevron-right);
-  }
-
-  [part='toggle-button']::after {
-    display: inline-block;
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: var(--material-disabled-text-color);
-    transform: scale(0);
-    opacity: 0;
-    transition:
-      transform 0s 0.8s,
-      opacity 0.8s;
-    will-change: transform, opacity;
-  }
-
-  [part='toggle-button']:focus-visible::after {
-    transition-duration: 0.08s, 0.01s;
-    transition-delay: 0s, 0s;
-    transform: scale(1.25);
-    opacity: 0.16;
-  }
-
-  :host([expanded]) [part='toggle-button'] {
-    transform: rotate(270deg);
-  }
-
-  :host([has-children]) [part='content'] {
-    padding-inline-end: 8px;
-  }
-
-  @media (any-hover: hover) {
-    :host(:not([current])) [part='link'][href]:hover {
-      background-color: var(--material-secondary-background-color);
-    }
-
-    [part='toggle-button']:hover {
-      color: var(--material-body-text-color);
-    }
-  }
-
-  @supports selector(:focus-visible) {
-    [part='link'],
-    [part='toggle-button'] {
-      outline: none;
-    }
-
-    :host(:not([current])) [part='link']:focus-visible {
-      background-color: var(--material-divider-color);
-    }
-
-    :host([current]) [part='link']:focus-visible::before {
-      opacity: 0.24;
-    }
-  }
-
-  slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
-    padding: 0.1em;
-    flex-shrink: 0;
-    margin-inline-end: 24px;
-    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;
-  }
-
-  slot[name='children'] {
-    --_child-indent: calc(var(--_child-indent-2, 0px) + var(--vaadin-side-nav-child-indent, 24px));
-  }
-
-  slot[name='children']::slotted(*) {
-    --_child-indent-2: var(--_child-indent);
-  }
-`;
-
-registerStyles('vaadin-side-nav-item', [fieldButton, sideNavItemStyles], { moduleId: 'material-side-nav-item' });

package/theme/material/vaadin-side-nav-item.d.ts

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-side-nav-item-styles.js';
-import '../../src/vaadin-side-nav-item.js';

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

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-side-nav-item-styles.js';
-import '../../src/vaadin-side-nav-item.js';

package/theme/material/vaadin-side-nav-styles.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-export declare const sideNavStyles: import("lit").CSSResult;

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

@@ -1,68 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-export const sideNavStyles = css`
-  :host {
-    -webkit-tap-highlight-color: transparent;
-    outline: none;
-  }
-
-  [part='label'] {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: 40px;
-    margin: 4px 0;
-    padding: 4px 8px;
-    outline: none;
-    box-sizing: border-box;
-    font-family: var(--material-font-family);
-    font-size: var(--material-small-font-size);
-    color: var(--material-secondary-text-color);
-    line-height: 1;
-    font-weight: 500;
-    border-radius: 4px;
-  }
-
-  :host([focus-ring]) [part='label'] {
-    background-color: var(--material-divider-color);
-  }
-
-  [part='toggle-button'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    padding: 4px;
-    margin-inline: auto -4px;
-    font-size: var(--material-icon-font-size);
-    line-height: 1;
-    color: var(--material-secondary-text-color);
-    font-family: 'material-icons';
-    transform: rotate(90deg);
-  }
-
-  [part='toggle-button']::before {
-    content: var(--material-icons-chevron-right);
-    font-size: 24px;
-  }
-
-  :host(:not([collapsible])) [part='toggle-button'] {
-    display: none !important;
-  }
-
-  :host(:not([collapsed])) [part='toggle-button'] {
-    transform: rotate(270deg);
-  }
-
-  @media (any-hover: hover) {
-    [part='label']:hover [part='toggle-button'] {
-      color: var(--material-body-text-color);
-    }
-  }
-`;
-
-registerStyles('vaadin-side-nav', sideNavStyles, { moduleId: 'material-side-nav' });

package/theme/material/vaadin-side-nav.d.ts

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-side-nav-item.js';
-import './vaadin-side-nav-styles.js';
-import '../../src/vaadin-side-nav.js';

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

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-side-nav-item.js';
-import './vaadin-side-nav-styles.js';
-import '../../src/vaadin-side-nav.js';