@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/ToolbarSelect.js

@@ -20,14 +20,14 @@ import Option from "./Option.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-toolbar-select</code> component is used to create a toolbar drop-down list.
- * The items inside the <code>ui5-toolbar-select</code> define the available options by using the <code>ui5-toolbar-select-option</code> component.
+ * ### Overview
+ * The `ui5-toolbar-select` component is used to create a toolbar drop-down list.
+ * The items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents/dist/ToolbarSelect";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/ToolbarSelectOption";</code> (comes with <code>ui5-toolbar-select</code>)
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/ToolbarSelect.js";`
+ *
+ * `import "@ui5/webcomponents/dist/ToolbarSelectOption.js";` (comes with `ui5-toolbar-select`)
  * @constructor
  * @abstract
  * @extends ToolbarItem
@@ -44,9 +44,9 @@ let ToolbarSelect = class ToolbarSelect extends ToolbarItem {
     get subscribedEvents() {
         const map = new Map();
         map.set("click", { preventClosing: true });
-        map.set("change", { preventClosing: false });
-        map.set("open", { preventClosing: true });
-        map.set("close", { preventClosing: true });
+        map.set("ui5-change", { preventClosing: false });
+        map.set("ui5-open", { preventClosing: true });
+        map.set("ui5-close", { preventClosing: true });
         return map;
     }
     constructor() {
@@ -70,7 +70,7 @@ let ToolbarSelect = class ToolbarSelect extends ToolbarItem {
         });
     }
     _onEventHandler(e) {
-        if (e.type === "change") {
+        if (e.type === "ui5-change") {
             // update options
             const selectedOption = e.detail.selectedOption;
             const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
@@ -115,7 +115,6 @@ ToolbarSelect = __decorate([
     })
     /**
      * Fired when the selected option changes.
-     *
      * @allowPreventDefault
      * @param {HTMLElement} selectedOption the selected option.
      * @public
@@ -131,14 +130,12 @@ ToolbarSelect = __decorate([
     })
     /**
      * Fired after the component's dropdown menu opens.
-     *
      * @public
      */
     ,
     event("open")
     /**
      * Fired after the component's dropdown menu closes.
-     *
      * @public
      */
     ,

package/dist/ToolbarSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSelect.js","sourceRoot":"","sources":["../src/ToolbarSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport CSSSize from \"@ui5/webcomponents-base/dist/types/CSSSize.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\n// Templates\n\nimport ToolbarSelectTemplate from \"./generated/templates/ToolbarSelectTemplate.lit.js\";\nimport ToolbarPopoverSelectTemplate from \"./generated/templates/ToolbarPopoverSelectTemplate.lit.js\";\nimport ToolbarItem from \"./ToolbarItem.js\";\nimport Select from \"./Select.js\";\nimport Option from \"./Option.js\";\nimport type ToolbarSelectOption from \"./ToolbarSelectOption.js\";\nimport type { SelectChangeEventDetail } from \"./Select.js\";\n\ntype ToolbarSelectChangeEventDetail = SelectChangeEventDetail;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-toolbar-select</code> component is used to create a toolbar drop-down list.\n * The items inside the <code>ui5-toolbar-select</code> define the available options by using the <code>ui5-toolbar-select-option</code> component.\n *\n * <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents/dist/ToolbarSelect\";</code>\n * <br>\n * <code>import \"@ui5/webcomponents/dist/ToolbarSelectOption\";</code> (comes with <code>ui5-toolbar-select</code>)\n * @constructor\n * @abstract\n * @extends ToolbarItem\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-select\",\n\tdependencies: [Select, Option],\n})\n\n/**\n * Fired when the selected option changes.\n *\n * @allowPreventDefault\n * @param {HTMLElement} selectedOption the selected option.\n * @public\n */\n@event(\"change\", {\n\tdetail: {\n\t\t/**\n\t\t* @public\n\t\t*/\n\t\tselectedOption: { type: HTMLElement },\n\t},\n})\n\n/**\n * Fired after the component's dropdown menu opens.\n *\n * @public\n */\n@event(\"open\")\n/**\n * Fired after the component's dropdown menu closes.\n *\n * @public\n */\n@event(\"close\")\n\nclass ToolbarSelect extends ToolbarItem {\n\t/**\n\t * Defines the width of the select.\n\t * <br><br>\n\t *\n\t * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ validator: CSSSize })\n\twidth?: string;\n\n\t/**\n\t * Defines the component options.\n\t *\n\t * <br><br>\n\t * <b>Note:</b> Only one selected option is allowed.\n\t * If more than one option is defined as selected, the last one would be considered as the selected one.\n\t *\n\t * <br><br>\n\t * <b>Note:</b> Use the <code>ui5-toolbar-select-option</code> component to define the desired options.\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, invalidateOnChildChange: true })\n\toptions!: Array<ToolbarSelectOption>;\n\n\t/**\n\t * Defines the value state of the component.\n\t * <br><br>\n\t *\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property({ type: ValueState, defaultValue: ValueState.None })\n\tvalueState!: `${ValueState}`;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t * <br><br>\n\t * <b>Note:</b> A disabled component is noninteractive.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t *\n\t * @public\n\t * @default \"\"\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the select.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef!: string;\n\n\t_onEvent: EventListener\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarSelectTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarPopoverSelectTemplate;\n\t}\n\n\tget subscribedEvents() {\n\t\tconst map = new Map();\n\n\t\tmap.set(\"click\", { preventClosing: true });\n\t\tmap.set(\"change\", { preventClosing: false });\n\t\tmap.set(\"open\", { preventClosing: true });\n\t\tmap.set(\"close\", { preventClosing: true });\n\n\t\treturn map;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._onEvent = this._onEventHandler.bind(this);\n\t}\n\n\tonEnterDOM(): void {\n\t\tthis.attachEventListeners();\n\t}\n\n\tonExitDOM(): void {\n\t\tthis.detachEventListeners();\n\t}\n\n\tattachEventListeners(): void {\n\t\t[...this.subscribedEvents.keys()].forEach(e => {\n\t\t\tthis.addEventListener(e, this._onEvent);\n\t\t});\n\t}\n\n\tdetachEventListeners(): void {\n\t\t[...this.subscribedEvents.keys()].forEach(e => {\n\t\t\tthis.removeEventListener(e, this._onEvent);\n\t\t});\n\t}\n\n\t_onEventHandler(e: Event): void {\n\t\tif (e.type === \"change\") {\n\t\t\t// update options\n\t\t\tconst selectedOption = (e as CustomEvent<ToolbarSelectChangeEventDetail>).detail.selectedOption;\n\t\t\tconst selectedOptionIndex = Number(selectedOption?.getAttribute(\"data-ui5-external-action-item-index\"));\n\t\t\tthis.options.forEach((option: ToolbarSelectOption, index: number) => {\n\t\t\t\tif (index === selectedOptionIndex) {\n\t\t\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\t\t} else {\n\t\t\t\t\toption.removeAttribute(\"selected\");\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twidth: this.width,\n\t\t};\n\t}\n}\n\nregisterToolbarItem(ToolbarSelect);\n\nToolbarSelect.define();\n\nexport default ToolbarSelect;\n\nexport type {\n\tToolbarSelectChangeEventDetail,\n};\n"]}
+{"version":3,"file":"ToolbarSelect.js","sourceRoot":"","sources":["../src/ToolbarSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport CSSSize from \"@ui5/webcomponents-base/dist/types/CSSSize.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\n// Templates\n\nimport ToolbarSelectTemplate from \"./generated/templates/ToolbarSelectTemplate.lit.js\";\nimport ToolbarPopoverSelectTemplate from \"./generated/templates/ToolbarPopoverSelectTemplate.lit.js\";\nimport ToolbarItem from \"./ToolbarItem.js\";\nimport Select from \"./Select.js\";\nimport Option from \"./Option.js\";\nimport type ToolbarSelectOption from \"./ToolbarSelectOption.js\";\nimport type { SelectChangeEventDetail } from \"./Select.js\";\n\ntype ToolbarSelectChangeEventDetail = SelectChangeEventDetail;\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-select` component is used to create a toolbar drop-down list.\n * The items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/ToolbarSelect.js\";`\n *\n * `import \"@ui5/webcomponents/dist/ToolbarSelectOption.js\";` (comes with `ui5-toolbar-select`)\n * @constructor\n * @abstract\n * @extends ToolbarItem\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-select\",\n\tdependencies: [Select, Option],\n})\n\n/**\n * Fired when the selected option changes.\n * @allowPreventDefault\n * @param {HTMLElement} selectedOption the selected option.\n * @public\n */\n@event<ToolbarSelectChangeEventDetail>(\"change\", {\n\tdetail: {\n\t\t/**\n\t\t* @public\n\t\t*/\n\t\tselectedOption: { type: HTMLElement },\n\t},\n})\n\n/**\n * Fired after the component's dropdown menu opens.\n * @public\n */\n@event(\"open\")\n/**\n * Fired after the component's dropdown menu closes.\n * @public\n */\n@event(\"close\")\n\nclass ToolbarSelect extends ToolbarItem {\n\t/**\n\t * Defines the width of the select.\n\t *\n\t * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ validator: CSSSize })\n\twidth?: string;\n\n\t/**\n\t * Defines the component options.\n\t *\n\t * **Note:** Only one selected option is allowed.\n\t * If more than one option is defined as selected, the last one would be considered as the selected one.\n\t *\n\t * **Note:** Use the `ui5-toolbar-select-option` component to define the desired options.\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, invalidateOnChildChange: true })\n\toptions!: Array<ToolbarSelectOption>;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property({ type: ValueState, defaultValue: ValueState.None })\n\tvalueState!: `${ValueState}`;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t *\n\t * **Note:** A disabled component is noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default \"\"\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the select.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef!: string;\n\n\t_onEvent: EventListener\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarSelectTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarPopoverSelectTemplate;\n\t}\n\n\tget subscribedEvents() {\n\t\tconst map = new Map();\n\n\t\tmap.set(\"click\", { preventClosing: true });\n\t\tmap.set(\"ui5-change\", { preventClosing: false });\n\t\tmap.set(\"ui5-open\", { preventClosing: true });\n\t\tmap.set(\"ui5-close\", { preventClosing: true });\n\n\t\treturn map;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._onEvent = this._onEventHandler.bind(this);\n\t}\n\n\tonEnterDOM(): void {\n\t\tthis.attachEventListeners();\n\t}\n\n\tonExitDOM(): void {\n\t\tthis.detachEventListeners();\n\t}\n\n\tattachEventListeners(): void {\n\t\t[...this.subscribedEvents.keys()].forEach(e => {\n\t\t\tthis.addEventListener(e, this._onEvent);\n\t\t});\n\t}\n\n\tdetachEventListeners(): void {\n\t\t[...this.subscribedEvents.keys()].forEach(e => {\n\t\t\tthis.removeEventListener(e, this._onEvent);\n\t\t});\n\t}\n\n\t_onEventHandler(e: Event): void {\n\t\tif (e.type === \"ui5-change\") {\n\t\t\t// update options\n\t\t\tconst selectedOption = (e as CustomEvent<ToolbarSelectChangeEventDetail>).detail.selectedOption;\n\t\t\tconst selectedOptionIndex = Number(selectedOption?.getAttribute(\"data-ui5-external-action-item-index\"));\n\t\t\tthis.options.forEach((option: ToolbarSelectOption, index: number) => {\n\t\t\t\tif (index === selectedOptionIndex) {\n\t\t\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\t\t} else {\n\t\t\t\t\toption.removeAttribute(\"selected\");\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twidth: this.width,\n\t\t};\n\t}\n}\n\nregisterToolbarItem(ToolbarSelect);\n\nToolbarSelect.define();\n\nexport default ToolbarSelect;\n\nexport type {\n\tToolbarSelectChangeEventDetail,\n};\n"]}

package/dist/ToolbarSelectOption.d.ts

@@ -2,10 +2,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- *
- * The <code>ui5-toolbar-select-option</code> component defines the content of an option in the <code>ui5-toolbar-select</code>.
+ * ### Overview
  *
+ * The `ui5-toolbar-select-option` component defines the content of an option in the `ui5-toolbar-select`.
  * @constructor
  * @extends UI5Element
  * @abstract
@@ -21,9 +20,8 @@ declare class ToolbarSelectOption extends UI5Element {
     selected: boolean;
     /**
      * Defines the text of the component.
-     * <br><br>
-     * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
      *
+     * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
      * @public
      */
     text: Array<Node>;

package/dist/ToolbarSelectOption.js

@@ -11,10 +11,9 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- *
- * The <code>ui5-toolbar-select-option</code> component defines the content of an option in the <code>ui5-toolbar-select</code>.
+ * ### Overview
  *
+ * The `ui5-toolbar-select-option` component defines the content of an option in the `ui5-toolbar-select`.
  * @constructor
  * @extends UI5Element
  * @abstract

package/dist/ToolbarSelectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSelectOption.js","sourceRoot":"","sources":["../src/ToolbarSelectOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E;;;;;;;;;;;;GAYG;AAEH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;CAkB3C,CAAA;AAXA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACT;AAUnB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;iDAClD;AAjBd,mBAAmB;IADxB,aAAa,CAAC,2BAA2B,CAAC;GACrC,mBAAmB,CAkBxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-toolbar-select-option</code> component defines the content of an option in the <code>ui5-toolbar-select</code>.\n *\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n * @since 1.17.0\n */\n@customElement(\"ui5-toolbar-select-option\")\nclass ToolbarSelectOption extends UI5Element {\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t * <br><br>\n\t * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t *\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\ttext!: Array<Node>;\n}\n\nToolbarSelectOption.define();\n\nexport default ToolbarSelectOption;\n"]}
+{"version":3,"file":"ToolbarSelectOption.js","sourceRoot":"","sources":["../src/ToolbarSelectOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E;;;;;;;;;;;GAWG;AAEH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;CAiB3C,CAAA;AAVA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACT;AASnB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;iDAClD;AAhBd,mBAAmB;IADxB,aAAa,CAAC,2BAA2B,CAAC;GACrC,mBAAmB,CAiBxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-toolbar-select-option` component defines the content of an option in the `ui5-toolbar-select`.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n * @since 1.17.0\n */\n@customElement(\"ui5-toolbar-select-option\")\nclass ToolbarSelectOption extends UI5Element {\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\ttext!: Array<Node>;\n}\n\nToolbarSelectOption.define();\n\nexport default ToolbarSelectOption;\n"]}

package/dist/ToolbarSeparator.d.ts

@@ -4,10 +4,9 @@ import ToolbarItem from "./ToolbarItem.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-toolbar-separator</code> is an element, used for visual separation between two elements.
+ * ### Overview
+ * The `ui5-toolbar-separator` is an element, used for visual separation between two elements.
  * It takes no space in calculating toolbar items width.
- *
  * @constructor
  * @extends ToolbarItem
  * @since 1.17.0

package/dist/ToolbarSeparator.js

@@ -13,10 +13,9 @@ import ToolbarItem from "./ToolbarItem.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-toolbar-separator</code> is an element, used for visual separation between two elements.
+ * ### Overview
+ * The `ui5-toolbar-separator` is an element, used for visual separation between two elements.
  * It takes no space in calculating toolbar items width.
- *
  * @constructor
  * @extends ToolbarItem
  * @since 1.17.0

package/dist/ToolbarSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSeparator.js","sourceRoot":"","sources":["../src/ToolbarSeparator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,wBAAwB,MAAM,uDAAuD,CAAC;AAC7F,OAAO,+BAA+B,MAAM,8DAA8D,CAAC;AAE3G,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C;;;;;;;;;;;;GAYG;AAKH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAIzC,MAAM,KAAK,eAAe;QACzB,OAAO,wBAAwB,CAAC;IACjC,CAAC;IAED,MAAM,KAAK,sBAAsB;QAChC,OAAO,+BAA+B,CAAC;IACxC,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AAjBA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACV;AAFb,gBAAgB;IAJrB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;KAC5B,CAAC;GAEI,gBAAgB,CAmBrB;AAED,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEtC,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport ToolbarSeparatorTemplate from \"./generated/templates/ToolbarSeparatorTemplate.lit.js\";\nimport ToolbarPopoverSeparatorTemplate from \"./generated/templates/ToolbarPopoverSeparatorTemplate.lit.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\nimport ToolbarItem from \"./ToolbarItem.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-toolbar-separator</code> is an element, used for visual separation between two elements.\n * It takes no space in calculating toolbar items width.\n *\n * @constructor\n * @extends ToolbarItem\n * @since 1.17.0\n * @abstract\n * @public\n */\n@customElement({\n\ttag: \"ui5-toolbar-separator\",\n})\n\nclass ToolbarSeparator extends ToolbarItem {\n\t@property({ type: Boolean })\n\tvisible!: boolean;\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarSeparatorTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarPopoverSeparatorTemplate;\n\t}\n\n\tget isSeparator() {\n\t\treturn true;\n\t}\n\n\tget isInteractive() {\n\t\treturn false;\n\t}\n}\n\nregisterToolbarItem(ToolbarSeparator);\n\nToolbarSeparator.define();\n\nexport default ToolbarSeparator;\n"]}
+{"version":3,"file":"ToolbarSeparator.js","sourceRoot":"","sources":["../src/ToolbarSeparator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,wBAAwB,MAAM,uDAAuD,CAAC;AAC7F,OAAO,+BAA+B,MAAM,8DAA8D,CAAC;AAE3G,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C;;;;;;;;;;;GAWG;AAKH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAIzC,MAAM,KAAK,eAAe;QACzB,OAAO,wBAAwB,CAAC;IACjC,CAAC;IAED,MAAM,KAAK,sBAAsB;QAChC,OAAO,+BAA+B,CAAC;IACxC,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AAjBA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACV;AAFb,gBAAgB;IAJrB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;KAC5B,CAAC;GAEI,gBAAgB,CAmBrB;AAED,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEtC,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport ToolbarSeparatorTemplate from \"./generated/templates/ToolbarSeparatorTemplate.lit.js\";\nimport ToolbarPopoverSeparatorTemplate from \"./generated/templates/ToolbarPopoverSeparatorTemplate.lit.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\nimport ToolbarItem from \"./ToolbarItem.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-separator` is an element, used for visual separation between two elements.\n * It takes no space in calculating toolbar items width.\n * @constructor\n * @extends ToolbarItem\n * @since 1.17.0\n * @abstract\n * @public\n */\n@customElement({\n\ttag: \"ui5-toolbar-separator\",\n})\n\nclass ToolbarSeparator extends ToolbarItem {\n\t@property({ type: Boolean })\n\tvisible!: boolean;\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarSeparatorTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarPopoverSeparatorTemplate;\n\t}\n\n\tget isSeparator() {\n\t\treturn true;\n\t}\n\n\tget isInteractive() {\n\t\treturn false;\n\t}\n}\n\nregisterToolbarItem(ToolbarSeparator);\n\nToolbarSeparator.define();\n\nexport default ToolbarSeparator;\n"]}

package/dist/ToolbarSpacer.d.ts

@@ -3,10 +3,9 @@ import ToolbarItem from "./ToolbarItem.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-toolbar-spacer</code> is an element, used for taking needed space for toolbar items to take 100% width.
+ * ### Overview
+ * The `ui5-toolbar-spacer` is an element, used for taking needed space for toolbar items to take 100% width.
  * It takes no space in calculating toolbar items width.
- *
  * @constructor
  * @extends ToolbarItem
  * @abstract
@@ -16,10 +15,8 @@ import ToolbarItem from "./ToolbarItem.js";
 declare class ToolbarSpacer extends ToolbarItem {
     /**
      * Defines the width of the spacer.
-     * <br><br>
-     *
-     * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
      *
+     * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
      * @public
      * @default undefined
      */

package/dist/ToolbarSpacer.js

@@ -13,10 +13,9 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-toolbar-spacer</code> is an element, used for taking needed space for toolbar items to take 100% width.
+ * ### Overview
+ * The `ui5-toolbar-spacer` is an element, used for taking needed space for toolbar items to take 100% width.
  * It takes no space in calculating toolbar items width.
- *
  * @constructor
  * @extends ToolbarItem
  * @abstract

package/dist/ToolbarSpacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSpacer.js","sourceRoot":"","sources":["../src/ToolbarSpacer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AAEvF,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;;;;;;;;;;GAYG;AAKH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAatC,IAAI,MAAM;QACT,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IAC9D,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM,KAAK,eAAe;QACzB,OAAO,qBAAqB,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,sBAAsB;QAChC,OAAO,qBAAqB,CAAC;IAC9B,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AAzBA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;4CAClB;AAXV,aAAa;IAJlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;KACzB,CAAC;GAEI,aAAa,CAoClB;AAED,mBAAmB,CAAC,aAAa,CAAC,CAAC;AAEnC,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport CSSSize from \"@ui5/webcomponents-base/dist/types/CSSSize.js\";\nimport ToolbarSpacerTemplate from \"./generated/templates/ToolbarSpacerTemplate.lit.js\";\n\nimport ToolbarItem from \"./ToolbarItem.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-toolbar-spacer</code> is an element, used for taking needed space for toolbar items to take 100% width.\n * It takes no space in calculating toolbar items width.\n *\n * @constructor\n * @extends ToolbarItem\n * @abstract\n * @since 1.17.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-toolbar-spacer\",\n})\n\nclass ToolbarSpacer extends ToolbarItem {\n\t/**\n\t * Defines the width of the spacer.\n\t * <br><br>\n\t *\n\t * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.\n\t *\n\t * @public\n\t * @default undefined\n\t */\n\t@property({ validator: CSSSize })\n\twidth?: string;\n\n\tget styles() {\n\t\treturn this.width ? { width: this.width } : { flex: \"auto\" };\n\t}\n\n\tget ignoreSpace() {\n\t\treturn this.width === \"\";\n\t}\n\n\tget hasFlexibleWidth() {\n\t\treturn this.width === \"\";\n\t}\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarSpacerTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarSpacerTemplate;\n\t}\n\n\tget isInteractive() {\n\t\treturn false;\n\t}\n}\n\nregisterToolbarItem(ToolbarSpacer);\n\nToolbarSpacer.define();\n\nexport default ToolbarSpacer;\n"]}
+{"version":3,"file":"ToolbarSpacer.js","sourceRoot":"","sources":["../src/ToolbarSpacer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AAEvF,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;;;;;;;;;GAWG;AAKH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAWtC,IAAI,MAAM;QACT,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IAC9D,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM,KAAK,eAAe;QACzB,OAAO,qBAAqB,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,sBAAsB;QAChC,OAAO,qBAAqB,CAAC;IAC9B,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AAzBA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;4CAClB;AATV,aAAa;IAJlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;KACzB,CAAC;GAEI,aAAa,CAkClB;AAED,mBAAmB,CAAC,aAAa,CAAC,CAAC;AAEnC,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport CSSSize from \"@ui5/webcomponents-base/dist/types/CSSSize.js\";\nimport ToolbarSpacerTemplate from \"./generated/templates/ToolbarSpacerTemplate.lit.js\";\n\nimport ToolbarItem from \"./ToolbarItem.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-spacer` is an element, used for taking needed space for toolbar items to take 100% width.\n * It takes no space in calculating toolbar items width.\n * @constructor\n * @extends ToolbarItem\n * @abstract\n * @since 1.17.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-toolbar-spacer\",\n})\n\nclass ToolbarSpacer extends ToolbarItem {\n\t/**\n\t * Defines the width of the spacer.\n\t *\n\t * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.\n\t * @public\n\t * @default undefined\n\t */\n\t@property({ validator: CSSSize })\n\twidth?: string;\n\n\tget styles() {\n\t\treturn this.width ? { width: this.width } : { flex: \"auto\" };\n\t}\n\n\tget ignoreSpace() {\n\t\treturn this.width === \"\";\n\t}\n\n\tget hasFlexibleWidth() {\n\t\treturn this.width === \"\";\n\t}\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarSpacerTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarSpacerTemplate;\n\t}\n\n\tget isInteractive() {\n\t\treturn false;\n\t}\n}\n\nregisterToolbarItem(ToolbarSpacer);\n\nToolbarSpacer.define();\n\nexport default ToolbarSpacer;\n"]}

package/dist/Tree.d.ts

@@ -1,9 +1,21 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
+import DropIndicator from "./DropIndicator.js";
 import type TreeItemBase from "./TreeItemBase.js";
 import TreeList from "./TreeList.js";
-import ListMode from "./types/ListMode.js";
+import ListSelectionMode from "./types/ListSelectionMode.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import type { TreeItemBaseToggleEventDetail, TreeItemBaseStepInEventDetail, TreeItemBaseStepOutEventDetail } from "./TreeItemBase.js";
-import type { ListItemClickEventDetail, ListItemDeleteEventDetail, ListSelectionChangeEventDetail } from "./List.js";
+import type { ListItemClickEventDetail, ListItemDeleteEventDetail, ListItemFocusEventDetail, ListSelectionChangeEventDetail } from "./List.js";
+type TreeMoveEventDetail = {
+    source: {
+        element: HTMLElement;
+    };
+    destination: {
+        element: HTMLElement;
+        placement: `${MovePlacement}`;
+    };
+};
 type TreeItemEventDetail = {
     item: TreeItemBase;
 };
@@ -12,6 +24,7 @@ type TreeItemMouseoverEventDetail = TreeItemEventDetail;
 type TreeItemMouseoutEventDetail = TreeItemEventDetail;
 type TreeItemClickEventDetail = TreeItemEventDetail;
 type TreeItemDeleteEventDetail = TreeItemEventDetail;
+type TreeItemFocusEventDetail = TreeItemEventDetail;
 type TreeSelectionChangeEventDetail = {
     selectedItems: Array<TreeItemBase>;
     previouslySelectedItems: Array<TreeItemBase>;
@@ -21,47 +34,41 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-tree</code> component provides a tree structure for displaying data in a hierarchy.
+ * ### Overview
+ * The `ui5-tree` component provides a tree structure for displaying data in a hierarchy.
+ *
+ * ### Usage
  *
- * <h3>Usage</h3>
+ * #### When to use:
  *
- * <h4>When to use:</h4>
- * <ul>
- * <li>To display hierarchically structured items.</li>
- * <li>To select one or more items out of a set of hierarchically structured items.</li>
- * </ul>
+ * - To display hierarchically structured items.
+ * - To select one or more items out of a set of hierarchically structured items.
  *
- * <h4>When not to use:</h4>
- * <ul>
- * <li>To display items not hierarchically structured. In this case, use the List component.</li>
- * <li>To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.</li>
- * <li>The hierarchy turns out to have only two levels. In this case, use List with group items.</li>
- * </ul>
+ * #### When not to use:
  *
- * <h3>Keyboard Handling</h3>
+ * - To display items not hierarchically structured. In this case, use the List component.
+ * - To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.
+ * - The hierarchy turns out to have only two levels. In this case, use List with group items.
  *
- * The <code>ui5-tree</code> provides advanced keyboard handling.
+ * ### Keyboard Handling
+ *
+ * The `ui5-tree` provides advanced keyboard handling.
  * The user can use the following keyboard shortcuts in order to navigate trough the tree:
- * <ul>
- * <li>[UP/DOWN] - Navigates up and down the tree items that are currently visible.</li>
- * <li>[RIGHT] - Drills down the tree by expanding the tree nodes.</li>
- * <li>[LEFT] - Goes up the tree and collapses the tree nodes.</li>
- * </ul>
- * <br>
+ *
+ * - [Up] or [Down] - Navigates up and down the tree items that are currently visible.
+ * - [Right] - Drills down the tree by expanding the tree nodes.
+ * - [Left] - Goes up the tree and collapses the tree nodes.
  *
  * The user can use the following keyboard shortcuts to perform selection,
- * when the <code>mode</code> property is in use:
- * <ul>
- * <li>[SPACE] - Selects the currently focused item upon keyup.</li>
- * <li>[ENTER]  - Selects the currently focused item upon keydown.</li>
- * </ul>
+ * when the `selectionMode` property is in use:
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents/dist/Tree.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/TreeItem.js";</code>
+ * - [Space] - Selects the currently focused item upon keyup.
+ * - [Enter]  - Selects the currently focused item upon keydown.
  *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/Tree.js";`
+ *
+ * `import "@ui5/webcomponents/dist/TreeItem.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -69,39 +76,34 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
  */
 declare class Tree extends UI5Element {
     /**
-     * Defines the mode of the component. Since the tree uses a <code>ui5-list</code> to display its structure,
+     * Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,
      * the tree modes are exactly the same as the list modes, and are all applicable.
-     *
      * @public
      * @default "None"
      */
-    mode: `${ListMode}`;
+    selectionMode: `${ListSelectionMode}`;
     /**
      * Defines the text that is displayed when the component contains no items.
-     *
      * @default ""
      * @public
      */
     noDataText: string;
     /**
      * Defines the component header text.
-     * <br><br>
-     * <b>Note:</b> If the <code>header</code> slot is set, this property is ignored.
      *
+     * **Note:** If the `header` slot is set, this property is ignored.
      * @default ""
      * @public
      */
     headerText: string;
     /**
      * Defines the component footer text.
-     *
      * @default ""
      * @public
      */
     footerText: string;
     /**
      * Defines the accessible name of the component.
-     *
      * @default ""
      * @public
      * @since 1.8.0
@@ -109,54 +111,51 @@ declare class Tree extends UI5Element {
     accessibleName: string;
     /**
      * Defines the IDs of the elements that label the component.
-     *
      * @default ""
      * @public
      * @since 1.8.0
      */
     accessibleNameRef: string;
-    /**
-     * Defines the description for the accessible role of the component.
-     * @protected
-     * @default undefined
-     * @since 1.10.0
-     */
-    accessibleRoleDescription?: string;
     /**
      * Defines the items of the component. Tree items may have other tree items as children.
-     * <br><br>
-     * <b>Note:</b> Use <code>ui5-tree-item</code> for the intended design.
      *
+     * **Note:** Use `ui5-tree-item` for the intended design.
      * @public
      */
     items: Array<TreeItemBase>;
     /**
      * Defines the component header.
-     * <br><br>
-     * <b>Note:</b> When the <code>header</code> slot is set, the
-     * <code>headerText</code> property is ignored.
      *
+     * **Note:** When the `header` slot is set, the
+     * `headerText` property is ignored.
      * @public
      */
     header: Array<HTMLElement>;
+    onEnterDOM(): void;
+    onExitDOM(): void;
     onBeforeRendering(): void;
     onAfterRendering(): void;
+    get dropIndicatorDOM(): DropIndicator | null;
     get list(): TreeList;
-    get _role(): string;
+    get _role(): ListAccessibleRole;
     get _label(): string | undefined;
     get _hasHeader(): boolean;
+    _ondragenter(e: DragEvent): void;
+    _ondragleave(e: DragEvent): void;
+    _ondragover(e: DragEvent): void;
+    _ondrop(e: DragEvent): void;
     _onListItemStepIn(e: CustomEvent<TreeItemBaseStepInEventDetail>): void;
     _onListItemStepOut(e: CustomEvent<TreeItemBaseStepOutEventDetail>): void;
     _onListItemToggle(e: CustomEvent<TreeItemBaseToggleEventDetail>): void;
     _onListItemClick(e: CustomEvent<ListItemClickEventDetail>): void;
     _onListItemDelete(e: CustomEvent<ListItemDeleteEventDetail>): void;
+    _onListItemFocus(e: CustomEvent<ListItemFocusEventDetail>): void;
     _onListItemMouseOver(e: MouseEvent): void;
     _onListItemMouseOut(e: MouseEvent): void;
     _onListSelectionChange(e: CustomEvent<ListSelectionChangeEventDetail>): void;
     _prepareTreeItems(): void;
     /**
      * Returns the corresponding list item for a given tree item
-     *
      * @param item The tree item
      * @protected
      */
@@ -175,7 +174,6 @@ declare class Tree extends UI5Element {
     focusItemByIndex(index: number): void;
     /**
      * Perform Depth-First-Search walk on the tree and run a callback on each node
-     *
      * @public
      * @param callback function to execute on each node of the tree with 3 arguments: the node, the level and the index
      */
@@ -183,4 +181,4 @@ declare class Tree extends UI5Element {
     _isInstanceOfTreeItemBase(object: any): object is TreeItemBase;
 }
 export default Tree;
-export type { TreeItemToggleEventDetail, TreeItemMouseoverEventDetail, TreeItemMouseoutEventDetail, TreeItemClickEventDetail, TreeItemDeleteEventDetail, TreeSelectionChangeEventDetail, };
+export type { TreeMoveEventDetail, TreeItemToggleEventDetail, TreeItemMouseoverEventDetail, TreeItemMouseoutEventDetail, TreeItemClickEventDetail, TreeItemDeleteEventDetail, TreeItemFocusEventDetail, TreeSelectionChangeEventDetail, WalkCallback, };