@vaadin/tabsheet 24.2.0-dev.f254716fe → 24.3.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tabsheet",
-  "version": "24.2.0-dev.f254716fe",
+  "version": "24.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,21 +36,21 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.2.0-dev.f254716fe",
-    "@vaadin/scroller": "24.2.0-dev.f254716fe",
-    "@vaadin/tabs": "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/scroller": "24.3.0-alpha1",
+    "@vaadin/tabs": "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"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
+  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
 }

package/src/vaadin-tabsheet-scroller.js

@@ -3,11 +3,13 @@
  * Copyright (c) 2022 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { Scroller } from '@vaadin/scroller/src/vaadin-scroller.js';
 
 /**
  * An element used internally by `<vaadin-tabsheet>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends Scroller
  * @private
  */
@@ -17,4 +19,4 @@ class TabsheetScroller extends Scroller {
   }
 }
 
-customElements.define(TabsheetScroller.is, TabsheetScroller);
+defineCustomElement(TabsheetScroller);

package/src/vaadin-tabsheet.js

@@ -4,13 +4,14 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-tabsheet-scroller.js';
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { Tabs } from '@vaadin/tabs/src/vaadin-tabs.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -100,11 +101,12 @@ class TabsSlotController extends SlotController {
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
  * @mixes ControllerMixin
- * @mises DelegateStateMixin
+ * @mixes DelegateStateMixin
  */
 class TabSheet extends ControllerMixin(DelegateStateMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
   static get template() {
@@ -222,7 +224,7 @@ class TabSheet extends ControllerMixin(DelegateStateMixin(ElementMixin(ThemableM
 
     // 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 FlattenedNodesObserver(panelSlot, () => {
+    this.__panelsObserver = new SlotObserver(panelSlot, () => {
       this.__panels = Array.from(panelSlot.assignedNodes({ flatten: true })).filter(
         (node) => node.nodeType === Node.ELEMENT_NODE,
       );
@@ -288,6 +290,6 @@ class TabSheet extends ControllerMixin(DelegateStateMixin(ElementMixin(ThemableM
   }
 }
 
-customElements.define(TabSheet.is, TabSheet);
+defineCustomElement(TabSheet);
 
 export { TabSheet };

package/web-types.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/tabsheet",
+  "version": "24.3.0-alpha1",
+  "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.",
+          "attributes": [
+            {
+              "name": "selected",
+              "description": "The index of the selected tab.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "selected",
+                "description": "The index of the selected tab.",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "items-changed",
+                "description": "Fired when the `items` property changes."
+              },
+              {
+                "name": "selected-changed",
+                "description": "Fired when the `selected` property changes."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/tabsheet",
+  "version": "24.3.0-alpha1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "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.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": ".selected",
+              "description": "The index of the selected tab.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@items-changed",
+              "description": "Fired when the `items` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@selected-changed",
+              "description": "Fired when the `selected` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}