@vaadin/tabs 25.0.0-alpha3 → 25.0.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tabs",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -35,16 +35,16 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha3",
-    "@vaadin/component-base": "25.0.0-alpha3",
-    "@vaadin/item": "25.0.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha3",
+    "@vaadin/a11y-base": "25.0.0-alpha5",
+    "@vaadin/component-base": "25.0.0-alpha5",
+    "@vaadin/item": "25.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha5",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha3",
-    "@vaadin/test-runner-commands": "25.0.0-alpha3",
+    "@vaadin/chai-plugins": "25.0.0-alpha5",
+    "@vaadin/test-runner-commands": "25.0.0-alpha5",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8367dd20a47f53ca5589ad349a8e286ec2673055"
+  "gitHead": "7dc87bb2a3cae81ed53259fa10b58f990d50c6fd"
 }

package/src/vaadin-tab.js

@@ -8,9 +8,10 @@ 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 { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { TabMixin } from './vaadin-tab-mixin.js';
-import { tabStyles } from './vaadin-tab-styles.js';
+import { tabStyles } from './styles/vaadin-tab-core-styles.js';
 
 /**
  * `<vaadin-tab>` is a Web Component providing an accessible and customizable tab.
@@ -37,16 +38,16 @@ import { tabStyles } from './vaadin-tab-styles.js';
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes ItemMixin
  * @mixes ThemableMixin
- * @mixes TabMixin
  */
-class Tab extends TabMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+class Tab extends ItemMixin(ThemableMixin(ElementMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-tab';
   }
 
   static get styles() {
-    return [tabStyles];
+    return tabStyles;
   }
 
   /** @protected */
@@ -61,9 +62,31 @@ class Tab extends TabMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))
   ready() {
     super.ready();
 
+    this.setAttribute('role', 'tab');
+
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
   }
+
+  /**
+   * Override an event listener from `KeyboardMixin`
+   * to handle clicking anchors inside the tabs.
+   * @param {!KeyboardEvent} event
+   * @protected
+   * @override
+   */
+  _onKeyUp(event) {
+    const willClick = this.hasAttribute('active');
+
+    super._onKeyUp(event);
+
+    if (willClick) {
+      const anchor = this.querySelector('a');
+      if (anchor) {
+        anchor.click();
+      }
+    }
+  }
 }
 
 defineCustomElement(Tab);

package/src/vaadin-tabs.js

@@ -8,9 +8,10 @@ import { html, LitElement } from 'lit';
 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { tabsStyles } from './styles/vaadin-tabs-core-styles.js';
 import { TabsMixin } from './vaadin-tabs-mixin.js';
-import { tabsStyles } from './vaadin-tabs-styles.js';
 
 /**
  * `<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.
@@ -52,13 +53,13 @@ import { tabsStyles } from './vaadin-tabs-styles.js';
  * @mixes TabsMixin
  * @mixes ThemableMixin
  */
-class Tabs extends TabsMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class Tabs extends TabsMixin(ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-tabs';
   }
 
   static get styles() {
-    return [tabsStyles];
+    return tabsStyles;
   }
 
   /** @protected */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabs",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabs",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

package/src/vaadin-tab-mixin.d.ts

@@ -1,18 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { ActiveMixinClass } from '@vaadin/a11y-base/src/active-mixin.js';
-import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
-import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
-import type { ItemMixinClass } from '@vaadin/item/src/vaadin-item-mixin.js';
-
-export declare function TabMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<ActiveMixinClass> &
-  Constructor<DisabledMixinClass> &
-  Constructor<FocusMixinClass> &
-  Constructor<ItemMixinClass> &
-  T;

package/src/vaadin-tab-mixin.js

@@ -1,40 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
-
-/**
- * @polymerMixin
- * @mixes ItemMixin
- */
-export const TabMixin = (superClass) =>
-  class TabMixinClass extends ItemMixin(superClass) {
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this.setAttribute('role', 'tab');
-    }
-
-    /**
-     * Override an event listener from `KeyboardMixin`
-     * to handle clicking anchors inside the tabs.
-     * @param {!KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyUp(event) {
-      const willClick = this.hasAttribute('active');
-
-      super._onKeyUp(event);
-
-      if (willClick) {
-        const anchor = this.querySelector('a');
-        if (anchor) {
-          anchor.click();
-        }
-      }
-    }
-  };