@vaadin/side-nav - npm Package Compare versions

Comparing version 24.2.0-dev.f254716fe to 24.3.0-alpha1

package.json

 {
   "name": "@vaadin/side-nav",
-  "version": "24.2.0-dev.f254716fe",
+  "version": "24.3.0-alpha1",
   "publishConfig": {
@@ -23,3 +23,2 @@ "access": "public"
   "files": [
-    "enable.js",
     "src",
@@ -39,6 +38,6 @@ "theme",
   "dependencies": {
-    "@vaadin/component-base": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.f254716fe",
+    "@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"
@@ -48,3 +47,3 @@ },
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "lit": "^2.0.0",
@@ -57,3 +56,3 @@ "sinon": "^13.0.2"
   ],
-  "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
+  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
 }

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

@@ -6,6 +6,4 @@ /**
  */
-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';
@@ -83,5 +81,3 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
  */
-declare class SideNavItem extends SideNavChildrenMixin(
-  DisabledMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))),
-) {
+declare class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
   /**
@@ -88,0 +84,0 @@ * The path to navigate to

src/vaadin-side-nav-item.js

@@ -10,2 +10,3 @@ /**
 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';
@@ -18,6 +19,2 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 
-function isEnabled() {
-  return window.Vaadin && window.Vaadin.featureFlags && !!window.Vaadin.featureFlags.sideNavComponent;
-}
-
 /**
@@ -81,4 +78,4 @@ * A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.
  *
- * @extends LitElement
- * @mixes PolylitMixin
+ * @customElement
+ * @extends HTMLElement
  * @mixes ThemableMixin
@@ -208,3 +205,3 @@ * @mixes DisabledMixin
           ?disabled="${this.disabled}"
-          tabindex="${this.disabled ? '-1' : '0'}"
+          tabindex="${this.disabled || !this.path ? '-1' : '0'}"
           href="${ifDefined(this.disabled ? null : this.path)}"
@@ -227,3 +224,3 @@ part="link"
       </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>
@@ -276,6 +273,4 @@ </ul>
 
-if (isEnabled()) {
-  customElements.define(SideNavItem.is, SideNavItem);
-}
+defineCustomElement(SideNavItem);
 
 export { SideNavItem };

src/vaadin-side-nav.d.ts

@@ -6,6 +6,4 @@ /**
  */
-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';
@@ -78,3 +76,3 @@ import { SideNavChildrenMixin, type SideNavI18n } from './vaadin-side-nav-children-mixin.js';
  */
-declare class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+declare class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
   /**
@@ -81,0 +79,0 @@ * Whether the side nav is collapsible. When enabled, the toggle icon is shown.

src/vaadin-side-nav.js

@@ -9,2 +9,3 @@ /**
 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';
@@ -17,6 +18,2 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 
-function isEnabled() {
-  return window.Vaadin && window.Vaadin.featureFlags && !!window.Vaadin.featureFlags.sideNavComponent;
-}
-
 /**
@@ -73,4 +70,4 @@ * `<vaadin-side-nav>` is a Web Component for navigation menus.
  *
- * @extends LitElement
- * @mixes PolylitMixin
+ * @customElement
+ * @extends HTMLElement
  * @mixes ThemableMixin
@@ -158,2 +155,3 @@ * @mixes ElementMixin
         aria-expanded="${ifDefined(this.collapsible ? !this.collapsed : null)}"
+        aria-hidden="${ifDefined(this.collapsible === false ? true : null)}"
         aria-controls="children"
@@ -164,3 +162,9 @@ >
       </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>
@@ -207,10 +211,4 @@ </ul>
 
-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 };

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

@@ -111,5 +111,6 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
-  :host([current]) [part='link'] {
+  :host([current]) [part='content'] {
+    background-color: var(--lumo-primary-color-10pct);
     color: var(--lumo-primary-text-color);
-    background-color: var(--lumo-primary-color-10pct);
+    border-radius: var(--lumo-border-radius-m);
   }
@@ -116,0 +117,0 @@ `;

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

@@ -8,4 +8,7 @@ import '@vaadin/vaadin-material-styles/color.js';
 export const sideNavItemStyles = css`
+  [part='content'] {
+    position: relative;
+  }
+
   [part='link'] {
-    position: relative;
     width: 100%;
@@ -39,6 +42,6 @@ min-height: 32px;
 
-  :host([current]) [part='link']::before {
+  :host([current]) [part='content']::before {
     position: absolute;
     content: '';
-    inset: 0;
+    inset: 4px 0;
     background-color: var(--material-primary-color);
@@ -45,0 +48,0 @@ opacity: 0.12;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67025

increased by27.45%

Number of package files

24

increased by4.35%

Lines of code

1581

increased by23.42%

Dependency changes

• + Added@vaadin/component-base@24.3.0-alpha1(transitive)

• + Added@vaadin/icon@24.3.0-alpha1(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.3.0-alpha1(transitive)

• + Added@vaadin/vaadin-material-styles@24.3.0-alpha1(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.3.0-alpha1(transitive)

• - Removed@vaadin/component-base@24.2.0-dev.f254716fe(transitive)

• - Removed@vaadin/icon@24.2.0-dev.f254716fe(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.2.0-dev.f254716fe(transitive)

• - Removed@vaadin/vaadin-material-styles@24.2.0-dev.f254716fe(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.2.0-dev.f254716fe(transitive)

• Updated@vaadin/component-base@24.3.0-alpha1

• Updated@vaadin/vaadin-lumo-styles@24.3.0-alpha1

• Updated@vaadin/vaadin-material-styles@24.3.0-alpha1

• Updated@vaadin/vaadin-themable-mixin@24.3.0-alpha1