@vaadin/tabsheet 24.5.0-alpha8 → 24.5.0-beta1

package/README.md

@@ -61,7 +61,7 @@ import '@vaadin/tabsheet/src/vaadin-tabsheet.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+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.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tabsheet",
-  "version": "24.5.0-alpha8",
+  "version": "24.5.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,15 +37,15 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.5.0-alpha8",
-    "@vaadin/scroller": "24.5.0-alpha8",
-    "@vaadin/tabs": "24.5.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.5.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha8"
+    "@vaadin/component-base": "24.5.0-beta1",
+    "@vaadin/scroller": "24.5.0-beta1",
+    "@vaadin/tabs": "24.5.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.5.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-beta1"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.5.0-alpha8",
+    "@vaadin/chai-plugins": "24.5.0-beta1",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1e227aaa55df3f5dae3d477b9afb5fce4f5ece33"
+  "gitHead": "da4b57724d7089e3766d59d01068159322adb2b8"
 }

package/src/vaadin-tabsheet-mixin.js

@@ -141,7 +141,28 @@ export const TabSheetMixin = (superClass) =>
 
       // Observe the panels slot for nodes. Set the assigned element nodes as the __panels array.
       const panelSlot = this.shadowRoot.querySelector('#panel-slot');
-      this.__panelsObserver = new SlotObserver(panelSlot, () => {
+      this.__panelsObserver = new SlotObserver(panelSlot, ({ addedNodes, removedNodes }) => {
+        if (addedNodes.length) {
+          addedNodes.forEach((node) => {
+            // Preserve custom hidden attribute to not override it.
+            if (node.nodeType === Node.ELEMENT_NODE && node.hidden) {
+              node.__customHidden = true;
+            }
+          });
+        }
+        if (removedNodes.length) {
+          removedNodes.forEach((node) => {
+            // Clear hidden attribute when removing node from the default slot,
+            // e.g. when changing its slot to `prefix` or `suffix` dynamically.
+            if (node.nodeType === Node.ELEMENT_NODE && node.hidden) {
+              if (node.__customHidden) {
+                delete node.__customHidden;
+              } else {
+                node.hidden = false;
+              }
+            }
+          });
+        }
         this.__panels = Array.from(
           panelSlot.assignedNodes({
             flatten: true,

package/src/vaadin-tabsheet.d.ts

@@ -64,7 +64,7 @@ export interface TabSheetEventMap extends HTMLElementEventMap, TabSheetCustomEve
  * `loading` | Set when a tab without associated content is selected
  * `overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
  *
- * See [Styling Components](hhttps://vaadin.com/docs/latest/components/ds-resources/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.

package/src/vaadin-tabsheet.js

@@ -48,7 +48,7 @@ import { TabSheetMixin } from './vaadin-tabsheet-mixin.js';
  * `loading` | Set when a tab without associated content is selected
  * `overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
  *
- * See [Styling Components](hhttps://vaadin.com/docs/latest/components/ds-resources/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabsheet",
-  "version": "24.5.0-alpha8",
+  "version": "24.5.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-tabsheet",
-          "description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n```\n <vaadin-tabsheet>\n   <div slot=\"prefix\">Prefix</div>\n   <div slot=\"suffix\">Suffix</div>\n\n   <vaadin-tabs slot=\"tabs\">\n     <vaadin-tab id=\"tab-1\">Tab 1</vaadin-tab>\n     <vaadin-tab id=\"tab-2\">Tab 2</vaadin-tab>\n     <vaadin-tab id=\"tab-3\">Tab 3</vaadin-tab>\n   </vaadin-tabs>\n\n   <div tab=\"tab-1\">Panel 1</div>\n   <div tab=\"tab-2\">Panel 2</div>\n   <div tab=\"tab-3\">Panel 3</div>\n </vaadin-tabsheet>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`tabs-container`    | The container for the slotted prefix, tabs and suffix\n`content`    | The container for the slotted panels\n\nThe following state attributes are available for styling:\n\nAttribute         | Description\n------------------|-------------\n`loading` | Set when a tab without associated content is selected\n`overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\nSee [Styling Components](hhttps://vaadin.com/docs/latest/components/ds-resources/customization/styling-components) documentation.",
+          "description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n```\n <vaadin-tabsheet>\n   <div slot=\"prefix\">Prefix</div>\n   <div slot=\"suffix\">Suffix</div>\n\n   <vaadin-tabs slot=\"tabs\">\n     <vaadin-tab id=\"tab-1\">Tab 1</vaadin-tab>\n     <vaadin-tab id=\"tab-2\">Tab 2</vaadin-tab>\n     <vaadin-tab id=\"tab-3\">Tab 3</vaadin-tab>\n   </vaadin-tabs>\n\n   <div tab=\"tab-1\">Panel 1</div>\n   <div tab=\"tab-2\">Panel 2</div>\n   <div tab=\"tab-3\">Panel 3</div>\n </vaadin-tabsheet>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`tabs-container`    | The container for the slotted prefix, tabs and suffix\n`content`    | The container for the slotted panels\n\nThe following state attributes are available for styling:\n\nAttribute         | Description\n------------------|-------------\n`loading` | Set when a tab without associated content is selected\n`overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "selected",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabsheet",
-  "version": "24.5.0-alpha8",
+  "version": "24.5.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-tabsheet",
-          "description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n```\n <vaadin-tabsheet>\n   <div slot=\"prefix\">Prefix</div>\n   <div slot=\"suffix\">Suffix</div>\n\n   <vaadin-tabs slot=\"tabs\">\n     <vaadin-tab id=\"tab-1\">Tab 1</vaadin-tab>\n     <vaadin-tab id=\"tab-2\">Tab 2</vaadin-tab>\n     <vaadin-tab id=\"tab-3\">Tab 3</vaadin-tab>\n   </vaadin-tabs>\n\n   <div tab=\"tab-1\">Panel 1</div>\n   <div tab=\"tab-2\">Panel 2</div>\n   <div tab=\"tab-3\">Panel 3</div>\n </vaadin-tabsheet>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`tabs-container`    | The container for the slotted prefix, tabs and suffix\n`content`    | The container for the slotted panels\n\nThe following state attributes are available for styling:\n\nAttribute         | Description\n------------------|-------------\n`loading` | Set when a tab without associated content is selected\n`overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\nSee [Styling Components](hhttps://vaadin.com/docs/latest/components/ds-resources/customization/styling-components) documentation.",
+          "description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n```\n <vaadin-tabsheet>\n   <div slot=\"prefix\">Prefix</div>\n   <div slot=\"suffix\">Suffix</div>\n\n   <vaadin-tabs slot=\"tabs\">\n     <vaadin-tab id=\"tab-1\">Tab 1</vaadin-tab>\n     <vaadin-tab id=\"tab-2\">Tab 2</vaadin-tab>\n     <vaadin-tab id=\"tab-3\">Tab 3</vaadin-tab>\n   </vaadin-tabs>\n\n   <div tab=\"tab-1\">Panel 1</div>\n   <div tab=\"tab-2\">Panel 2</div>\n   <div tab=\"tab-3\">Panel 3</div>\n </vaadin-tabsheet>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`tabs-container`    | The container for the slotted prefix, tabs and suffix\n`content`    | The container for the slotted panels\n\nThe following state attributes are available for styling:\n\nAttribute         | Description\n------------------|-------------\n`loading` | Set when a tab without associated content is selected\n`overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {