@vaadin/tabs 24.4.0-dev.b3e1d14600 → 24.5.0-alpha1

package/README.md

@@ -5,7 +5,6 @@ A web component for organizing and grouping content into sections.
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/tabs)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/tabs)](https://www.npmjs.com/package/@vaadin/tabs)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-tabs selected="3">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tabs",
-  "version": "24.4.0-dev.b3e1d14600",
+  "version": "24.5.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -24,6 +24,8 @@
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
+    "!vaadin-lit-*.d.ts",
+    "!vaadin-lit-*.js",
     "web-types.json",
     "web-types.lit.json"
   ],
@@ -37,12 +39,12 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/component-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/item": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.b3e1d14600",
+    "@vaadin/a11y-base": "24.5.0-alpha1",
+    "@vaadin/component-base": "24.5.0-alpha1",
+    "@vaadin/item": "24.5.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -54,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "502d4f5b03f770a83d270d98078cde230254dd0e"
+  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
 }

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

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export * from './vaadin-tab.js';

package/src/vaadin-lit-tab.js

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+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 { TooltipController } from '@vaadin/component-base/src/tooltip-controller.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';
+
+/**
+ * LitElement based version of `<vaadin-tab>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ *
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ * @mixes TabMixin
+ * @mixes ThemableMixin
+ */
+class Tab extends TabMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-tab';
+  }
+
+  static get styles() {
+    return [tabStyles];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <slot></slot>
+      <slot name="tooltip"></slot>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+  }
+}
+
+defineCustomElement(Tab);
+
+export { Tab };

package/src/vaadin-lit-tabs.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export * from './vaadin-tabs.js';

package/src/vaadin-lit-tabs.js

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-tab.js';
+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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { TabsMixin } from './vaadin-tabs-mixin.js';
+import { tabsStyles } from './vaadin-tabs-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-tabs>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ *
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ * @mixes TabsMixin
+ * @mixes ThemableMixin
+ */
+class Tabs extends TabsMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-tabs';
+  }
+
+  static get styles() {
+    return [tabsStyles];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div @click="${this._scrollBack}" part="back-button" aria-hidden="true"></div>
+
+      <div id="scroll" part="tabs">
+        <slot></slot>
+      </div>
+
+      <div @click="${this._scrollForward}" part="forward-button" aria-hidden="true"></div>
+    `;
+  }
+}
+
+defineCustomElement(Tabs);
+
+export { Tabs };

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 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';

package/src/vaadin-tab-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { CSSResult } from 'lit';

package/src/vaadin-tab-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';

package/src/vaadin-tab.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';

package/src/vaadin-tab.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 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';

package/src/vaadin-tabs-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
@@ -24,6 +24,8 @@ export const TabsMixin = (superClass) =>
         orientation: {
           value: 'horizontal',
           type: String,
+          reflectToAttribute: true,
+          sync: true,
         },
 
         /**

package/src/vaadin-tabs-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { CSSResult } from 'lit';

package/src/vaadin-tabs-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';

package/src/vaadin-tabs.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';

package/src/vaadin-tabs.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-tab.js';

package/theme/lumo/vaadin-lit-tab.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-tab-styles.js';
+import '../../src/vaadin-lit-tab.js';

package/theme/lumo/vaadin-lit-tab.js

@@ -0,0 +1,2 @@
+import './vaadin-tab-styles.js';
+import '../../src/vaadin-lit-tab.js';

package/theme/lumo/vaadin-lit-tabs.d.ts

@@ -0,0 +1,3 @@
+import './vaadin-lit-tab.js';
+import './vaadin-tabs-styles.js';
+import '../../src/vaadin-lit-tabs.js';

package/theme/lumo/vaadin-lit-tabs.js

@@ -0,0 +1,3 @@
+import './vaadin-lit-tab.js';
+import './vaadin-tabs-styles.js';
+import '../../src/vaadin-lit-tabs.js';

package/theme/lumo/vaadin-tab-styles.d.ts

@@ -0,0 +1,4 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/lumo/vaadin-tab.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-tab-styles.js';
+import '../../src/vaadin-tab.js';

package/theme/lumo/vaadin-tabs-styles.d.ts

@@ -0,0 +1,6 @@
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/lumo/vaadin-tabs.d.ts

@@ -0,0 +1,3 @@
+import './vaadin-tab.js';
+import './vaadin-tabs-styles.js';
+import '../../src/vaadin-tabs.js';

package/theme/material/vaadin-lit-tab.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-tab-styles.js';
+import '../../src/vaadin-lit-tab.js';

package/theme/material/vaadin-lit-tab.js

@@ -0,0 +1,2 @@
+import './vaadin-tab-styles.js';
+import '../../src/vaadin-lit-tab.js';

package/theme/material/vaadin-lit-tabs.d.ts

@@ -0,0 +1,3 @@
+import './vaadin-lit-tab.js';
+import './vaadin-tabs-styles.js';
+import '../../src/vaadin-lit-tabs.js';

package/theme/material/vaadin-lit-tabs.js

@@ -0,0 +1,3 @@
+import './vaadin-lit-tab.js';
+import './vaadin-tabs-styles.js';
+import '../../src/vaadin-lit-tabs.js';

package/theme/material/vaadin-tab-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/typography.js';

package/theme/material/vaadin-tab.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-tab-styles.js';
+import '../../src/vaadin-tab.js';

package/theme/material/vaadin-tabs-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/vaadin-material-styles/font-icons.js';
+import '@vaadin/vaadin-material-styles/color.js';

package/theme/material/vaadin-tabs.d.ts

@@ -0,0 +1,3 @@
+import './vaadin-tab.js';
+import './vaadin-tabs-styles.js';
+import '../../src/vaadin-tabs.js';

package/web-types.json

@@ -0,0 +1,176 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/tabs",
+  "version": "24.5.0-alpha1",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-tab",
+          "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```\n  <vaadin-tab>\n    Tab 1\n  </vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`disabled` | Set to a disabled tab | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`selected` | Set when the tab is selected | :host\n`active` | Set when mousedown or enter/spacebar pressed | :host\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items  | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "selected",
+              "description": "If true, the item is in selected state.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "value",
+                "description": "",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "selected",
+                "description": "If true, the item is in selected state.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vaadin-tabs",
+          "description": "`<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.\n\n```\n  <vaadin-tabs selected=\"4\">\n    <vaadin-tab>Page 1</vaadin-tab>\n    <vaadin-tab>Page 2</vaadin-tab>\n    <vaadin-tab>Page 3</vaadin-tab>\n    <vaadin-tab>Page 4</vaadin-tab>\n  </vaadin-tabs>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name         | Description\n------------------|--------------------------------------\n`back-button`     | Button for moving the scroll back\n`tabs`            | The tabs container\n`forward-button`  | Button for moving the scroll forward\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host\n`overflow` | It's set to `start`, `end`, none or both. | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.\nWhen the element is disabled, the selected item is\nnot updated when `selected` property is changed.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "selected",
+              "description": "The index of the selected tab.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "orientation",
+              "description": "Set tabs disposition. Possible values are `horizontal|vertical`",
+              "value": {
+                "type": [
+                  "TabsOrientation"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.\nWhen the element is disabled, the selected item is\nnot updated when `selected` property is changed.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "selected",
+                "description": "The index of the selected tab.",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "orientation",
+                "description": "Set tabs disposition. Possible values are `horizontal|vertical`",
+                "value": {
+                  "type": [
+                    "TabsOrientation"
+                  ]
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "selected-changed",
+                "description": "Fired when the selection is changed.\nNot fired when used in `multiple` selection mode."
+              },
+              {
+                "name": "items-changed",
+                "description": "Fired when the `items` property changes."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,90 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/tabs",
+  "version": "24.5.0-alpha1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-tab",
+          "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```\n  <vaadin-tab>\n    Tab 1\n  </vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`disabled` | Set to a disabled tab | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`selected` | Set when the tab is selected | :host\n`active` | Set when mousedown or enter/spacebar pressed | :host\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items  | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?selected",
+              "description": "If true, the item is in selected state.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".value",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
+        {
+          "name": "vaadin-tabs",
+          "description": "`<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.\n\n```\n  <vaadin-tabs selected=\"4\">\n    <vaadin-tab>Page 1</vaadin-tab>\n    <vaadin-tab>Page 2</vaadin-tab>\n    <vaadin-tab>Page 3</vaadin-tab>\n    <vaadin-tab>Page 4</vaadin-tab>\n  </vaadin-tabs>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name         | Description\n------------------|--------------------------------------\n`back-button`     | Button for moving the scroll back\n`tabs`            | The tabs container\n`forward-button`  | Button for moving the scroll forward\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host\n`overflow` | It's set to `start`, `end`, none or both. | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.\nWhen the element is disabled, the selected item is\nnot updated when `selected` property is changed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".selected",
+              "description": "The index of the selected tab.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".orientation",
+              "description": "Set tabs disposition. Possible values are `horizontal|vertical`",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@selected-changed",
+              "description": "Fired when the selection is changed.\nNot fired when used in `multiple` selection mode.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@items-changed",
+              "description": "Fired when the `items` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}