@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/ToolbarItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarItemTemplate.js","sourceRoot":"","sources":["../src/ToolbarItemTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,gBAAa,CACb,CAAC;AACH,CAAC","sourcesContent":["import type ToolbarItem from \"./ToolbarItem.js\";\n\nexport default function ToolbarItemTemplate(this: ToolbarItem) {\n\treturn (\n\t\t<slot></slot>\n\t);\n}\n"]}

package/dist/ToolbarSelect.d.ts

@@ -1,9 +1,10 @@
 import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import type Select from "./Select.js";
-import ToolbarItem from "./ToolbarItem.js";
-import type { ToolbarItemEventDetail } from "./ToolbarItem.js";
+import ToolbarItemBase from "./ToolbarItemBase.js";
+import type { ToolbarItemEventDetail } from "./ToolbarItemBase.js";
 import type ToolbarSelectOption from "./ToolbarSelectOption.js";
 import type { SelectChangeEventDetail } from "./Select.js";
+import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail;
 /**
  * @class
@@ -18,15 +19,16 @@ type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEvent
  * `import "@ui5/webcomponents/dist/ToolbarSelectOption.js";` (comes with `ui5-toolbar-select`)
  * @constructor
  * @abstract
- * @extends ToolbarItem
+ * @extends ToolbarItemBase
  * @public
  * @since 1.17.0
  */
-declare class ToolbarSelect extends ToolbarItem {
-    eventDetails: ToolbarItem["eventDetails"] & {
+declare class ToolbarSelect extends ToolbarItemBase {
+    eventDetails: ToolbarItemBase["eventDetails"] & {
         change: ToolbarSelectChangeEventDetail;
         open: ToolbarItemEventDetail;
         close: ToolbarItemEventDetail;
+        "click": ToolbarItemEventDetail;
     };
     /**
      * Defines the width of the select.
@@ -45,14 +47,14 @@ declare class ToolbarSelect extends ToolbarItem {
      * **Note:** Use the `ui5-toolbar-select-option` component to define the desired options.
      * @public
      */
-    options: Array<ToolbarSelectOption>;
+    options: DefaultSlot<ToolbarSelectOption>;
     /**
      * Defines the HTML element that will be displayed in the component input part,
      * representing the selected option.
      * @public
      * @since 2.15.0
     */
-    label: Array<HTMLElement>;
+    label: Slot<HTMLElement>;
     /**
      * Defines the value state of the component.
      * @default "None"

package/dist/ToolbarSelect.js

@@ -7,12 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import ToolbarSelectCss from "./generated/themes/ToolbarSelect.css.js";
 // Templates
 import ToolbarSelectTemplate from "./ToolbarSelectTemplate.js";
-import ToolbarItem from "./ToolbarItem.js";
+import ToolbarItemBase from "./ToolbarItemBase.js";
 /**
  * @class
  *
@@ -26,11 +26,11 @@ import ToolbarItem from "./ToolbarItem.js";
  * `import "@ui5/webcomponents/dist/ToolbarSelectOption.js";` (comes with `ui5-toolbar-select`)
  * @constructor
  * @abstract
- * @extends ToolbarItem
+ * @extends ToolbarItemBase
  * @public
  * @since 1.17.0
  */
-let ToolbarSelect = class ToolbarSelect extends ToolbarItem {
+let ToolbarSelect = class ToolbarSelect extends ToolbarItemBase {
     constructor() {
         super(...arguments);
         /**
@@ -101,12 +101,7 @@ let ToolbarSelect = class ToolbarSelect extends ToolbarItem {
     _syncOptions(selectedOption) {
         const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
         this.options.forEach((option, index) => {
-            if (index === selectedOptionIndex) {
-                option.setAttribute("selected", "");
-            }
-            else {
-                option.removeAttribute("selected");
-            }
+            option.selected = index === selectedOptionIndex;
         });
     }
     get styles() {
@@ -125,6 +120,7 @@ __decorate([
     slot({
         "default": true,
         type: HTMLElement,
+        invalidateOnChildChange: true,
     })
 ], ToolbarSelect.prototype, "options", void 0);
 __decorate([

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 jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport 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-strict.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport ToolbarSelectCss from \"./generated/themes/ToolbarSelect.css.js\";\nimport type Select from \"./Select.js\";\n\n// Templates\nimport ToolbarSelectTemplate from \"./ToolbarSelectTemplate.js\";\nimport ToolbarItem from \"./ToolbarItem.js\";\nimport type { ToolbarItemEventDetail } from \"./ToolbarItem.js\";\nimport type ToolbarSelectOption from \"./ToolbarSelectOption.js\";\nimport type { SelectChangeEventDetail } from \"./Select.js\";\n\ntype ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & 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\ttemplate: ToolbarSelectTemplate,\n\trenderer: jsxRenderer,\n\tstyles: ToolbarSelectCss,\n})\n\n/**\n * Fired when the selected option changes.\n * @param {HTMLElement} selectedOption the selected option.\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * Fired after the component's dropdown menu opens.\n * @public\n */\n@event(\"open\", {\n\tbubbles: true,\n})\n\n/**\n * Fired after the component's dropdown menu closes.\n * @public\n */\n@event(\"close\")\nclass ToolbarSelect extends ToolbarItem {\n\teventDetails!: ToolbarItem[\"eventDetails\"] & {\n\t\tchange: ToolbarSelectChangeEventDetail;\n\t\topen: ToolbarItemEventDetail;\n\t\tclose: ToolbarItemEventDetail;\n\t}\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()\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({\n\t\t\"default\": true,\n\t\ttype: HTMLElement,\n\t})\n\toptions!: Array<ToolbarSelectOption>;\n\n\t/**\n\t * Defines the HTML element that will be displayed in the component input part,\n\t * representing the selected option.\n\t * @public\n\t * @since 2.15.0\n\t*/\n\t@slot()\n\tlabel!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tvalueState: `${ValueState}` = \"None\";\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 = false;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\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 undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the value of the component:\n\t *\n\t * @public\n\t * @default \"\"\n\t * @since 2.15.0\n\t */\n\t@property()\n\tset value(newValue: string) {\n\t\tif (this.select && this.select.value !== newValue) {\n\t\t\tthis.select.value = newValue;\n\t\t}\n\t\tthis._value = newValue;\n\t}\n\n\tget value(): string | undefined {\n\t\treturn this.select ? this.select.value : this._value;\n\t}\n\n\tget select(): Select | null {\n\t\treturn this.shadowRoot!.querySelector<Select>(\"[ui5-select]\");\n\t}\n\n\t// Internal value storage, in case the composite select is not rendered on the the assignment happens\n\t_value: string = \"\";\n\n\tonClick(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"click\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented && !this.preventOverflowClosing) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonOpen(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"open\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonClose(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"close\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonChange(e: CustomEvent<SelectChangeEventDetail>): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"change\", { ...e.detail, targetRef: e.target as HTMLElement });\n\t\tif (!prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\n\t\tthis._syncOptions(e.detail.selectedOption);\n\t}\n\n\t_syncOptions(selectedOption: HTMLElement): void {\n\t\tconst selectedOptionIndex = Number(selectedOption?.getAttribute(\"data-ui5-external-action-item-index\"));\n\t\tthis.options.forEach((option: ToolbarSelectOption, index: number) => {\n\t\t\tif (index === selectedOptionIndex) {\n\t\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\t} else {\n\t\t\t\toption.removeAttribute(\"selected\");\n\t\t\t}\n\t\t});\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twidth: this.isOverflowed ? undefined : this.width,\n\t\t};\n\t}\n\n\tget hasCustomLabel() {\n\t\treturn !!this.label.length;\n\t}\n}\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":";;;;;;AAAA,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAE5E,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAGvE,YAAY;AACZ,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAC/D,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAQnD;;;;;;;;;;;;;;;;GAgBG;AA+BH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,eAAe;IAA3C;;QA2CC;;;;WAIG;QAEH,eAAU,GAAoB,MAAM,CAAC;QAErC;;;;;;WAMG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAyCjB,qGAAqG;QACrG,WAAM,GAAW,EAAE,CAAC;IAoDrB,CAAC;IA5EA;;;;;;OAMG;IAEH,IAAI,KAAK,CAAC,QAAgB;QACzB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YACnD,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IACxB,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IACtD,CAAC;IAED,IAAI,MAAM;QACT,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAS,cAAc,CAAC,CAAC;IAC/D,CAAC;IAKD,OAAO,CAAC,CAAQ;QACf,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC7B,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAqB,EAAE,CAAC,CAAC;QAC5F,IAAI,SAAS,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC/C,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QAC3C,CAAC;IACF,CAAC;IAED,MAAM,CAAC,CAAQ;QACd,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC7B,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAqB,EAAE,CAAC,CAAC;QAC3F,IAAI,SAAS,EAAE,CAAC;YACf,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QAC3C,CAAC;IACF,CAAC;IAED,OAAO,CAAC,CAAQ;QACf,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC7B,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAqB,EAAE,CAAC,CAAC;QAC5F,IAAI,SAAS,EAAE,CAAC;YACf,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QAC3C,CAAC;IACF,CAAC;IAED,QAAQ,CAAC,CAAuC;QAC/C,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC7B,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,MAAqB,EAAE,CAAC,CAAC;QAC1G,IAAI,CAAC,SAAS,EAAE,CAAC;YAChB,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;IAC5C,CAAC;IAED,YAAY,CAAC,cAA2B;QACvC,MAAM,mBAAmB,GAAG,MAAM,CAAC,cAAc,EAAE,YAAY,CAAC,qCAAqC,CAAC,CAAC,CAAC;QACxG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAA2B,EAAE,KAAa,EAAE,EAAE;YACnE,MAAM,CAAC,QAAQ,GAAG,KAAK,KAAK,mBAAmB,CAAC;QACjD,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,IAAI,MAAM;QACT,OAAO;YACN,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;SACjD,CAAC;IACH,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC;CACD,CAAA;AAzIA;IADC,QAAQ,EAAE;4CACI;AAgBf;IALC,IAAI,CAAC;QACL,SAAS,EAAE,IAAI;QACf,IAAI,EAAE,WAAW;QACjB,uBAAuB,EAAE,IAAI;KAC7B,CAAC;8CACyC;AAS3C;IADC,IAAI,EAAE;4CACmB;AAQ1B;IADC,QAAQ,EAAE;iDAC0B;AAUrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACX;AAQjB;IADC,QAAQ,EAAE;qDACY;AAQvB;IADC,QAAQ,EAAE;wDACgB;AAU3B;IADC,QAAQ,EAAE;0CAMV;AA1FI,aAAa;IA9BlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,gBAAgB;KACxB,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,QAAQ,EAAE;QAChB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KAChB,CAAC;IAEF;;;OAGG;;IACF,KAAK,CAAC,MAAM,EAAE;QACd,OAAO,EAAE,IAAI;KACb,CAAC;IAEF;;;OAGG;;IACF,KAAK,CAAC,OAAO,CAAC;GACT,aAAa,CAyJlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport 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-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport ToolbarSelectCss from \"./generated/themes/ToolbarSelect.css.js\";\nimport type Select from \"./Select.js\";\n\n// Templates\nimport ToolbarSelectTemplate from \"./ToolbarSelectTemplate.js\";\nimport ToolbarItemBase from \"./ToolbarItemBase.js\";\nimport type { ToolbarItemEventDetail } from \"./ToolbarItemBase.js\";\nimport type ToolbarSelectOption from \"./ToolbarSelectOption.js\";\nimport type { SelectChangeEventDetail } from \"./Select.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ntype ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & 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 ToolbarItemBase\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-select\",\n\ttemplate: ToolbarSelectTemplate,\n\trenderer: jsxRenderer,\n\tstyles: ToolbarSelectCss,\n})\n\n/**\n * Fired when the selected option changes.\n * @param {HTMLElement} selectedOption the selected option.\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * Fired after the component's dropdown menu opens.\n * @public\n */\n@event(\"open\", {\n\tbubbles: true,\n})\n\n/**\n * Fired after the component's dropdown menu closes.\n * @public\n */\n@event(\"close\")\nclass ToolbarSelect extends ToolbarItemBase {\n\teventDetails!: ToolbarItemBase[\"eventDetails\"] & {\n\t\tchange: ToolbarSelectChangeEventDetail;\n\t\topen: ToolbarItemEventDetail;\n\t\tclose: ToolbarItemEventDetail;\n\t\t\"click\": ToolbarItemEventDetail;\n\t}\n\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()\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({\n\t\t\"default\": true,\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: true,\n\t})\n\toptions!: DefaultSlot<ToolbarSelectOption>;\n\n\t/**\n\t * Defines the HTML element that will be displayed in the component input part,\n\t * representing the selected option.\n\t * @public\n\t * @since 2.15.0\n\t*/\n\t@slot()\n\tlabel!: Slot<HTMLElement>;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tvalueState: `${ValueState}` = \"None\";\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 = false;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\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 undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the value of the component:\n\t *\n\t * @public\n\t * @default \"\"\n\t * @since 2.15.0\n\t */\n\t@property()\n\tset value(newValue: string) {\n\t\tif (this.select && this.select.value !== newValue) {\n\t\t\tthis.select.value = newValue;\n\t\t}\n\t\tthis._value = newValue;\n\t}\n\n\tget value(): string | undefined {\n\t\treturn this.select ? this.select.value : this._value;\n\t}\n\n\tget select(): Select | null {\n\t\treturn this.shadowRoot!.querySelector<Select>(\"[ui5-select]\");\n\t}\n\n\t// Internal value storage, in case the composite select is not rendered on the the assignment happens\n\t_value: string = \"\";\n\n\tonClick(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"click\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented && !this.preventOverflowClosing) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonOpen(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"open\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonClose(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"close\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonChange(e: CustomEvent<SelectChangeEventDetail>): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"change\", { ...e.detail, targetRef: e.target as HTMLElement });\n\t\tif (!prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\n\t\tthis._syncOptions(e.detail.selectedOption);\n\t}\n\n\t_syncOptions(selectedOption: HTMLElement): void {\n\t\tconst selectedOptionIndex = Number(selectedOption?.getAttribute(\"data-ui5-external-action-item-index\"));\n\t\tthis.options.forEach((option: ToolbarSelectOption, index: number) => {\n\t\t\toption.selected = index === selectedOptionIndex;\n\t\t});\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twidth: this.isOverflowed ? undefined : this.width,\n\t\t};\n\t}\n\n\tget hasCustomLabel() {\n\t\treturn !!this.label.length;\n\t}\n}\n\nToolbarSelect.define();\n\nexport default ToolbarSelect;\n\nexport type {\n\tToolbarSelectChangeEventDetail,\n};\n"]}

package/dist/ToolbarSelectOption.d.ts

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 /**
  * @class
  *
@@ -17,13 +18,15 @@ declare class ToolbarSelectOption extends UI5Element {
      * @default false
      * @public
      */
-    selected: boolean;
+    set selected(value: boolean);
+    get selected(): boolean;
+    _clearSiblingsAndSync(): void;
     /**
      * Defines the text of the component.
      *
      * **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>;
+    text: DefaultSlot<Node>;
 }
 export default ToolbarSelectOption;

package/dist/ToolbarSelectOption.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 /**
  * @class
@@ -21,19 +21,40 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
  * @since 1.17.0
  */
 let ToolbarSelectOption = class ToolbarSelectOption extends UI5Element {
-    constructor() {
-        super(...arguments);
-        /**
-         * Defines the selected state of the component.
-         * @default false
-         * @public
-         */
-        this.selected = false;
+    /**
+     * Defines the selected state of the component.
+     * @default false
+     * @public
+     */
+    set selected(value) {
+        if (value) {
+            this.setAttribute("selected", "");
+            this._clearSiblingsAndSync();
+        }
+        else {
+            this.removeAttribute("selected");
+        }
+    }
+    get selected() {
+        return this.hasAttribute("selected");
+    }
+    _clearSiblingsAndSync() {
+        const parent = this.parentElement;
+        if (parent) {
+            parent.options?.forEach(option => {
+                if (option !== this) {
+                    option.removeAttribute("selected");
+                }
+            });
+            if (parent.select) {
+                parent.select.value = this.textContent || "";
+            }
+        }
     }
 };
 __decorate([
     property({ type: Boolean })
-], ToolbarSelectOption.prototype, "selected", void 0);
+], ToolbarSelectOption.prototype, "selected", null);
 __decorate([
     slot({ type: Node, "default": true, invalidateOnChildChange: true })
 ], ToolbarSelectOption.prototype, "text", void 0);

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;;;;;;;;;;;GAWG;AAEH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QACC;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;IAUlB,CAAC;CAAA,CAAA;AAVA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACX;AASjB;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 = false;\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"]}
+{"version":3,"file":"ToolbarSelectOption.js","sourceRoot":"","sources":["../src/ToolbarSelectOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAG3E;;;;;;;;;;;GAWG;AAEH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAC3C;;;;OAIG;IAEH,IAAI,QAAQ,CAAC,KAAc;QAC1B,IAAI,KAAK,EAAE,CAAC;YACX,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAClC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC9B,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC;IACF,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACtC,CAAC;IAED,qBAAqB;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,aAA8B,CAAC;QACnD,IAAI,MAAM,EAAE,CAAC;YACZ,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE;gBAChC,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;oBACrB,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;gBACpC,CAAC;YACF,CAAC,CAAC,CAAC;YACH,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;gBACnB,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;YAC9C,CAAC;QACF,CAAC;IACF,CAAC;CAUD,CAAA;AAnCA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAQ3B;AA2BD;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;iDAC5C;AAzCpB,mBAAmB;IADxB,aAAa,CAAC,2BAA2B,CAAC;GACrC,mBAAmB,CA0CxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type ToolbarSelect from \"./ToolbarSelect.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\tset selected(value: boolean) {\n\t\tif (value) {\n\t\t\tthis.setAttribute(\"selected\", \"\");\n\t\t\tthis._clearSiblingsAndSync();\n\t\t} else {\n\t\t\tthis.removeAttribute(\"selected\");\n\t\t}\n\t}\n\n\tget selected(): boolean {\n\t\treturn this.hasAttribute(\"selected\");\n\t}\n\n\t_clearSiblingsAndSync(): void {\n\t\tconst parent = this.parentElement as ToolbarSelect;\n\t\tif (parent) {\n\t\t\tparent.options?.forEach(option => {\n\t\t\t\tif (option !== this) {\n\t\t\t\t\toption.removeAttribute(\"selected\");\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (parent.select) {\n\t\t\t\tparent.select.value = this.textContent || \"\";\n\t\t\t}\n\t\t}\n\t}\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!: DefaultSlot<Node>;\n}\n\nToolbarSelectOption.define();\n\nexport default ToolbarSelectOption;\n"]}

package/dist/ToolbarSeparator.d.ts

@@ -1,4 +1,4 @@
-import ToolbarItem from "./ToolbarItem.js";
+import ToolbarItemBase from "./ToolbarItemBase.js";
 /**
  * @class
  *
@@ -6,12 +6,12 @@ import ToolbarItem from "./ToolbarItem.js";
  * 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
+ * @extends ToolbarItemBase
  * @since 1.17.0
  * @abstract
  * @public
  */
-declare class ToolbarSeparator extends ToolbarItem {
+declare class ToolbarSeparator extends ToolbarItemBase {
     visible: boolean;
     get isSeparator(): boolean;
     get isInteractive(): boolean;

package/dist/ToolbarSeparator.js

@@ -10,7 +10,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ToolbarSeparatorTemplate from "./ToolbarSeparatorTemplate.js";
 // Styles
 import ToolbarSeparatorCss from "./generated/themes/ToolbarSeparator.css.js";
-import ToolbarItem from "./ToolbarItem.js";
+import ToolbarItemBase from "./ToolbarItemBase.js";
 /**
  * @class
  *
@@ -18,12 +18,12 @@ import ToolbarItem from "./ToolbarItem.js";
  * 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
+ * @extends ToolbarItemBase
  * @since 1.17.0
  * @abstract
  * @public
  */
-let ToolbarSeparator = class ToolbarSeparator extends ToolbarItem {
+let ToolbarSeparator = class ToolbarSeparator extends ToolbarItemBase {
     constructor() {
         super(...arguments);
         this.visible = false;

package/dist/ToolbarSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSeparator.js","sourceRoot":"","sources":["../src/ToolbarSeparator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,SAAS;AACT,OAAO,mBAAmB,MAAM,4CAA4C,CAAC;AAE7E,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C;;;;;;;;;;;GAWG;AAQH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAEC,YAAO,GAAG,KAAK,CAAC;IASjB,CAAC;IAPA,IAAI,WAAW;QACd,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AATA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACZ;AAFX,gBAAgB;IAPrB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;QAC5B,QAAQ,EAAE,wBAAwB;QAClC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,mBAAmB,CAAC;KAC7B,CAAC;GAEI,gBAAgB,CAWrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport ToolbarSeparatorTemplate from \"./ToolbarSeparatorTemplate.js\";\n\n// Styles\nimport ToolbarSeparatorCss from \"./generated/themes/ToolbarSeparator.css.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\ttemplate: ToolbarSeparatorTemplate,\n\trenderer: jsxRenderer,\n\tstyles: [ToolbarSeparatorCss],\n})\n\nclass ToolbarSeparator extends ToolbarItem {\n\t@property({ type: Boolean })\n\tvisible = false;\n\n\tget isSeparator() {\n\t\treturn true;\n\t}\n\n\tget isInteractive() {\n\t\treturn false;\n\t}\n}\n\nToolbarSeparator.define();\n\nexport default ToolbarSeparator;\n"]}
+{"version":3,"file":"ToolbarSeparator.js","sourceRoot":"","sources":["../src/ToolbarSeparator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,SAAS;AACT,OAAO,mBAAmB,MAAM,4CAA4C,CAAC;AAE7E,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAEnD;;;;;;;;;;;GAWG;AAQH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,eAAe;IAA9C;;QAEC,YAAO,GAAG,KAAK,CAAC;IASjB,CAAC;IAPA,IAAI,WAAW;QACd,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AATA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACZ;AAFX,gBAAgB;IAPrB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;QAC5B,QAAQ,EAAE,wBAAwB;QAClC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,mBAAmB,CAAC;KAC7B,CAAC;GAEI,gBAAgB,CAWrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport ToolbarSeparatorTemplate from \"./ToolbarSeparatorTemplate.js\";\n\n// Styles\nimport ToolbarSeparatorCss from \"./generated/themes/ToolbarSeparator.css.js\";\n\nimport ToolbarItemBase from \"./ToolbarItemBase.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 ToolbarItemBase\n * @since 1.17.0\n * @abstract\n * @public\n */\n@customElement({\n\ttag: \"ui5-toolbar-separator\",\n\ttemplate: ToolbarSeparatorTemplate,\n\trenderer: jsxRenderer,\n\tstyles: [ToolbarSeparatorCss],\n})\n\nclass ToolbarSeparator extends ToolbarItemBase {\n\t@property({ type: Boolean })\n\tvisible = false;\n\n\tget isSeparator() {\n\t\treturn true;\n\t}\n\n\tget isInteractive() {\n\t\treturn false;\n\t}\n}\n\nToolbarSeparator.define();\n\nexport default ToolbarSeparator;\n"]}

package/dist/ToolbarSpacer.d.ts

@@ -1,4 +1,4 @@
-import ToolbarItem from "./ToolbarItem.js";
+import ToolbarItemBase from "./ToolbarItemBase.js";
 /**
  * @class
  *
@@ -6,12 +6,12 @@ import ToolbarItem from "./ToolbarItem.js";
  * 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
+ * @extends ToolbarItemBase
  * @abstract
  * @since 1.17.0
  * @public
  */
-declare class ToolbarSpacer extends ToolbarItem {
+declare class ToolbarSpacer extends ToolbarItemBase {
     /**
      * Defines the width of the spacer.
      *
@@ -30,5 +30,6 @@ declare class ToolbarSpacer extends ToolbarItem {
     get ignoreSpace(): boolean;
     get hasFlexibleWidth(): boolean;
     get isInteractive(): boolean;
+    get isSpacer(): boolean;
 }
 export default ToolbarSpacer;

package/dist/ToolbarSpacer.js

@@ -6,8 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import ToolbarCss from "./generated/themes/Toolbar.css.js";
-import ToolbarItem from "./ToolbarItem.js";
+import ToolbarItemBase from "./ToolbarItemBase.js";
 /**
  * @class
  *
@@ -15,12 +14,12 @@ import ToolbarItem from "./ToolbarItem.js";
  * 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
+ * @extends ToolbarItemBase
  * @abstract
  * @since 1.17.0
  * @public
  */
-let ToolbarSpacer = class ToolbarSpacer extends ToolbarItem {
+let ToolbarSpacer = class ToolbarSpacer extends ToolbarItemBase {
     get styles() {
         return this.width ? { width: this.width } : { flex: "auto" };
     }
@@ -33,6 +32,9 @@ let ToolbarSpacer = class ToolbarSpacer extends ToolbarItem {
     get isInteractive() {
         return false;
     }
+    get isSpacer() {
+        return true;
+    }
 };
 __decorate([
     property()
@@ -40,7 +42,6 @@ __decorate([
 ToolbarSpacer = __decorate([
     customElement({
         tag: "ui5-toolbar-spacer",
-        styles: ToolbarCss,
     })
 ], ToolbarSpacer);
 ToolbarSpacer.define();

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;AAErF,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAE3D,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C;;;;;;;;;;;GAWG;AAMH,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,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC;IAC/E,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC;IAC/E,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AAjBA;IADC,QAAQ,EAAE;4CACI;AATV,aAAa;IALlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,MAAM,EAAE,UAAU;KAClB,CAAC;GAEI,aAAa,CA0BlB;AAED,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\";\n\nimport ToolbarCss from \"./generated/themes/Toolbar.css.js\";\n\nimport ToolbarItem from \"./ToolbarItem.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\tstyles: ToolbarCss,\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()\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 === \"\" || this.width === undefined || this.width === \"auto\";\n\t}\n\n\tget hasFlexibleWidth() {\n\t\treturn this.width === \"\" || this.width === undefined || this.width === \"auto\";\n\t}\n\n\tget isInteractive() {\n\t\treturn false;\n\t}\n}\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;AAErF,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAEnD;;;;;;;;;;;GAWG;AAKH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,eAAe;IAW1C,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,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC;IAC/E,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC;IAC/E,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;IACD,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC;IACb,CAAC;CACD,CAAA;AApBA;IADC,QAAQ,EAAE;4CACI;AATV,aAAa;IAJlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;KACzB,CAAC;GAEI,aAAa,CA6BlB;AAED,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\";\n\nimport ToolbarItemBase from \"./ToolbarItemBase.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 ToolbarItemBase\n * @abstract\n * @since 1.17.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-toolbar-spacer\",\n})\n\nclass ToolbarSpacer extends ToolbarItemBase {\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()\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 === \"\" || this.width === undefined || this.width === \"auto\";\n\t}\n\n\tget hasFlexibleWidth() {\n\t\treturn this.width === \"\" || this.width === undefined || this.width === \"auto\";\n\t}\n\n\tget isInteractive() {\n\t\treturn false;\n\t}\n\tget isSpacer() {\n\t\treturn true;\n\t}\n}\n\nToolbarSpacer.define();\n\nexport default ToolbarSpacer;\n"]}

package/dist/ToolbarTemplate.js

@@ -7,10 +7,10 @@ export default function ToolbarTemplate() {
                     "ui5-tb-items": true,
                     "ui5-tb-items-full-width": this.hasFlexibleSpacers,
                 }, role: this.accInfo.root.role, "aria-label": this.accInfo.root.accessibleName, children: [this.standardItems.map(item => {
-                        if ("styles" in item) {
-                            return (_jsx("div", { class: "ui5-tb-item", id: item._individualSlot, style: item.styles, children: _jsx("slot", { name: item._individualSlot }) }));
-                        }
-                        return (_jsx("div", { class: "ui5-tb-item", id: item._individualSlot, children: _jsx("slot", { name: item._individualSlot }) }));
+                        return (_jsx("div", { class: {
+                                "ui5-tb-item": !item.hasFlexibleWidth,
+                                "ui5-tb-self-overflow": item.hasOverflow,
+                            }, id: item._individualSlot, style: item.isSpacer ? item.styles : undefined, children: _jsx("slot", { name: item._individualSlot }) }));
                     }), _jsx(Button, { "aria-hidden": this.hideOverflowButton, icon: overflowIcon, design: "Transparent", onClick: this.toggleOverflow, class: {
                             "ui5-tb-item": true,
                             "ui5-tb-overflow-btn": true,
@@ -18,10 +18,11 @@ export default function ToolbarTemplate() {
                         }, tooltip: this.accInfo.overflowButton.tooltip, accessibleName: this.accInfo.overflowButton.accessibleName, accessibilityAttributes: this.accInfo.overflowButton.accessibilityAttributes })] }), _jsx(Popover, { class: "ui5-overflow-popover", placement: "Bottom", horizontalAlign: "End", onClose: this.onOverflowPopoverClosed, onOpen: this.onOverflowPopoverOpened, accessibleName: this.accInfo.popover.accessibleName, hideArrow: true, children: _jsx("div", { class: {
                         "ui5-overflow-list": true
                     }, children: this.overflowItems.map(item => {
-                        if (item.isSeparator) {
-                            return (_jsx("div", { class: "ui5-tb-popover-item ui5-tb-separator ui5-tb-separator-in-overflow", id: item._individualSlot, children: _jsx("slot", { name: item._individualSlot }) }));
-                        }
-                        return (_jsx("div", { class: "ui5-tb-popover-item", id: item._individualSlot, children: _jsx("slot", { name: item._individualSlot }) }));
+                        return (_jsx("div", { class: {
+                                "ui5-tb-popover-item": true,
+                                "ui5-tb-separator ui5-tb-separator-in-overflow": item.isSeparator,
+                                "ui5-tb-popover-self-overflow": item.hasOverflow,
+                            }, id: item._individualSlot, children: _jsx("slot", { name: item._individualSlot }) }));
                     }) }) })] }));
 }
 //# sourceMappingURL=ToolbarTemplate.js.map

package/dist/ToolbarTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTemplate.js","sourceRoot":"","sources":["../src/ToolbarTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,YAAY,MAAM,2CAA2C,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,eAAe;IACtC,OAAO,CAAC,8BACP,eACC,KAAK,EAAE;oBACN,cAAc,EAAE,IAAI;oBACpB,yBAAyB,EAAE,IAAI,CAAC,kBAAkB;iBAClD,EACD,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,gBAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,aAE3C,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wBAC9B,IAAI,QAAQ,IAAI,IAAI,EAAE,CAAC;4BACtB,OAAO,CACN,cAAK,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,MAAgB,YAC9E,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,CACN,CAAC;wBACH,CAAC;wBACD,OAAO,CACN,cAAK,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,eAAe,YAChD,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,CACN,CAAC;oBACH,CAAC,CAAC,EACF,KAAC,MAAM,mBACO,IAAI,CAAC,kBAAkB,EACpC,IAAI,EAAE,YAAY,EAClB,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE;4BACN,aAAa,EAAE,IAAI;4BACnB,qBAAqB,EAAE,IAAI;4BAC3B,4BAA4B,EAAE,IAAI,CAAC,kBAAkB;yBACrD,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,OAAO,EAC5C,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,cAAc,EAC1D,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,uBAAuB,GAC3E,IACG,EAEN,KAAC,OAAO,IACP,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAC,QAAQ,EAClB,eAAe,EAAC,KAAK,EACrB,OAAO,EAAE,IAAI,CAAC,uBAAuB,EACrC,MAAM,EAAE,IAAI,CAAC,uBAAuB,EACpC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,EACnD,SAAS,EAAE,IAAI,YAEf,cAAK,KAAK,EAAE;wBACX,mBAAmB,EAAE,IAAI;qBACzB,YACC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wBAC9B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;4BACtB,OAAO,CACN,cAAK,KAAK,EAAC,mEAAmE,EAAC,EAAE,EAAE,IAAI,CAAC,eAAe,YACtG,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,CACN,CAAC;wBACH,CAAC;wBACD,OAAO,CACN,cAAK,KAAK,EAAC,qBAAqB,EAAC,EAAE,EAAE,IAAI,CAAC,eAAe,YACxD,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,CACN,CAAC;oBACH,CAAC,CAAC,GACG,GACG,IACR,CAAC,CAAC;AACN,CAAC","sourcesContent":["import Button from \"./Button.js\";\nimport type Toolbar from \"./Toolbar.js\";\nimport Popover from \"./Popover.js\";\nimport overflowIcon from \"@ui5/webcomponents-icons/dist/overflow.js\";\n\nexport default function ToolbarTemplate(this: Toolbar) {\n\treturn (<>\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-tb-items\": true,\n\t\t\t\t\"ui5-tb-items-full-width\": this.hasFlexibleSpacers,\n\t\t\t}}\n\t\t\trole={this.accInfo.root.role}\n\t\t\taria-label={this.accInfo.root.accessibleName}\n\t\t>\n\t\t\t{this.standardItems.map(item => {\n\t\t\t\tif (\"styles\" in item) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div class=\"ui5-tb-item\" id={item._individualSlot} style={item.styles as string}>\n\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<div class=\"ui5-tb-item\" id={item._individualSlot}>\n\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t\t<Button\n\t\t\t\taria-hidden={this.hideOverflowButton}\n\t\t\t\ticon={overflowIcon}\n\t\t\t\tdesign=\"Transparent\"\n\t\t\t\tonClick={this.toggleOverflow}\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-tb-item\": true,\n\t\t\t\t\t\"ui5-tb-overflow-btn\": true,\n\t\t\t\t\t\"ui5-tb-overflow-btn-hidden\": this.hideOverflowButton,\n\t\t\t\t}}\n\t\t\t\ttooltip={this.accInfo.overflowButton.tooltip}\n\t\t\t\taccessibleName={this.accInfo.overflowButton.accessibleName}\n\t\t\t\taccessibilityAttributes={this.accInfo.overflowButton.accessibilityAttributes}\n\t\t\t/>\n\t\t</div>\n\n\t\t<Popover\n\t\t\tclass=\"ui5-overflow-popover\"\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"End\"\n\t\t\tonClose={this.onOverflowPopoverClosed}\n\t\t\tonOpen={this.onOverflowPopoverOpened}\n\t\t\taccessibleName={this.accInfo.popover.accessibleName}\n\t\t\thideArrow={true}\n\t\t>\n\t\t\t<div class={{\n\t\t\t\t\"ui5-overflow-list\": true\n\t\t\t}}>\n\t\t\t\t{this.overflowItems.map(item => {\n\t\t\t\t\tif (item.isSeparator) {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div class=\"ui5-tb-popover-item ui5-tb-separator ui5-tb-separator-in-overflow\" id={item._individualSlot}>\n\t\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div class=\"ui5-tb-popover-item\" id={item._individualSlot}>\n\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</Popover>\n\t</>);\n}\n"]}
+{"version":3,"file":"ToolbarTemplate.js","sourceRoot":"","sources":["../src/ToolbarTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,YAAY,MAAM,2CAA2C,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,eAAe;IACtC,OAAO,CAAC,8BACP,eACC,KAAK,EAAE;oBACN,cAAc,EAAE,IAAI;oBACpB,yBAAyB,EAAE,IAAI,CAAC,kBAAkB;iBAClD,EACD,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,gBAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,aAE3C,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wBAC9B,OAAO,CACN,cAAK,KAAK,EAAE;gCACX,aAAa,EAAE,CAAC,IAAI,CAAC,gBAAgB;gCACrC,sBAAsB,EAAE,IAAI,CAAC,WAAW;6BACxC,EAAE,EAAE,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAC1E,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,CACN,CAAC;oBACH,CAAC,CAAC,EACF,KAAC,MAAM,mBACO,IAAI,CAAC,kBAAkB,EACpC,IAAI,EAAE,YAAY,EAClB,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE;4BACN,aAAa,EAAE,IAAI;4BACnB,qBAAqB,EAAE,IAAI;4BAC3B,4BAA4B,EAAE,IAAI,CAAC,kBAAkB;yBACrD,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,OAAO,EAC5C,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,cAAc,EAC1D,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,uBAAuB,GAC3E,IACG,EAEN,KAAC,OAAO,IACP,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAC,QAAQ,EAClB,eAAe,EAAC,KAAK,EACrB,OAAO,EAAE,IAAI,CAAC,uBAAuB,EACrC,MAAM,EAAE,IAAI,CAAC,uBAAuB,EACpC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,EACnD,SAAS,EAAE,IAAI,YAEf,cAAK,KAAK,EAAE;wBACX,mBAAmB,EAAE,IAAI;qBACzB,YACC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wBAC9B,OAAO,CACN,cAAK,KAAK,EAAG;gCACZ,qBAAqB,EAAE,IAAI;gCAC3B,+CAA+C,EAAE,IAAI,CAAC,WAAW;gCACjE,8BAA8B,EAAE,IAAI,CAAC,WAAW;6BAChD,EAAC,EAAE,EAAE,IAAI,CAAC,eAAe,YACzB,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,CACN,CAAC;oBACH,CAAC,CAAC,GACG,GACG,IACR,CAAC,CAAC;AACN,CAAC","sourcesContent":["import Button from \"./Button.js\";\nimport type Toolbar from \"./Toolbar.js\";\nimport Popover from \"./Popover.js\";\nimport overflowIcon from \"@ui5/webcomponents-icons/dist/overflow.js\";\n\nexport default function ToolbarTemplate(this: Toolbar) {\n\treturn (<>\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-tb-items\": true,\n\t\t\t\t\"ui5-tb-items-full-width\": this.hasFlexibleSpacers,\n\t\t\t}}\n\t\t\trole={this.accInfo.root.role}\n\t\t\taria-label={this.accInfo.root.accessibleName}\n\t\t>\n\t\t\t{this.standardItems.map(item => {\n\t\t\t\treturn (\n\t\t\t\t\t<div class={{\n\t\t\t\t\t\t\"ui5-tb-item\": !item.hasFlexibleWidth,\n\t\t\t\t\t\t\"ui5-tb-self-overflow\": item.hasOverflow,\n\t\t\t\t\t}} id={item._individualSlot} style={item.isSpacer ? item.styles : undefined}>\n\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t\t<Button\n\t\t\t\taria-hidden={this.hideOverflowButton}\n\t\t\t\ticon={overflowIcon}\n\t\t\t\tdesign=\"Transparent\"\n\t\t\t\tonClick={this.toggleOverflow}\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-tb-item\": true,\n\t\t\t\t\t\"ui5-tb-overflow-btn\": true,\n\t\t\t\t\t\"ui5-tb-overflow-btn-hidden\": this.hideOverflowButton,\n\t\t\t\t}}\n\t\t\t\ttooltip={this.accInfo.overflowButton.tooltip}\n\t\t\t\taccessibleName={this.accInfo.overflowButton.accessibleName}\n\t\t\t\taccessibilityAttributes={this.accInfo.overflowButton.accessibilityAttributes}\n\t\t\t/>\n\t\t</div>\n\n\t\t<Popover\n\t\t\tclass=\"ui5-overflow-popover\"\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"End\"\n\t\t\tonClose={this.onOverflowPopoverClosed}\n\t\t\tonOpen={this.onOverflowPopoverOpened}\n\t\t\taccessibleName={this.accInfo.popover.accessibleName}\n\t\t\thideArrow={true}\n\t\t>\n\t\t\t<div class={{\n\t\t\t\t\"ui5-overflow-list\": true\n\t\t\t}}>\n\t\t\t\t{this.overflowItems.map(item => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div class= {{\n\t\t\t\t\t\t\t\"ui5-tb-popover-item\": true,\n\t\t\t\t\t\t\t\"ui5-tb-separator ui5-tb-separator-in-overflow\": item.isSeparator,\n\t\t\t\t\t\t\t\"ui5-tb-popover-self-overflow\": item.hasOverflow,\n\t\t\t\t\t\t}}id={item._individualSlot}>\n\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</Popover>\n\t</>);\n}\n"]}

package/dist/Tree.d.ts

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import DragAndDropHandler from "./delegate/DragAndDropHandler.js";
 import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 import type DropIndicator from "./DropIndicator.js";
@@ -150,7 +151,7 @@ declare class Tree extends UI5Element {
      * **Note:** Use `ui5-tree-item` for the intended design.
      * @public
      */
-    items: Array<TreeItemBase>;
+    items: DefaultSlot<TreeItemBase>;
     /**
      * Defines the component header.
      *
@@ -158,7 +159,7 @@ declare class Tree extends UI5Element {
      * `headerText` property is ignored.
      * @public
      */
-    header: Array<HTMLElement>;
+    header: Slot<HTMLElement>;
     _dragAndDropHandler: DragAndDropHandler;
     constructor();
     onBeforeRendering(): void;
@@ -209,7 +210,6 @@ declare class Tree extends UI5Element {
     _transformElement(element: HTMLElement): HTMLElement;
     _validateDraggedElement(draggedElement: HTMLElement, targetElement: HTMLElement): boolean;
     _filterPlacements(placements: MovePlacement[], draggedElement: HTMLElement, targetElement: HTMLElement): MovePlacement[];
-    _isInstanceOfTreeItemBase(object: any): object is TreeItemBase;
 }
 export default Tree;
 export type { TreeMoveEventDetail, TreeItemToggleEventDetail, TreeItemMouseoverEventDetail, TreeItemMouseoutEventDetail, TreeItemClickEventDetail, TreeItemDeleteEventDetail, TreeItemFocusEventDetail, TreeSelectionChangeEventDetail, WalkCallback, };

package/dist/Tree.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import DragAndDropHandler from "./delegate/DragAndDropHandler.js";
 import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
@@ -19,6 +19,7 @@ import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import TreeTemplate from "./TreeTemplate.js";
 // Styles
 import TreeCss from "./generated/themes/Tree.css.js";
+import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js";
 /**
  * @class
  *
@@ -153,13 +154,13 @@ let Tree = class Tree extends UI5Element {
     }
     _onListItemMouseOver(e) {
         const target = e.target;
-        if (this._isInstanceOfTreeItemBase(target)) {
+        if (_isInstanceOfTreeItemBase(target)) {
             this.fireDecoratorEvent("item-mouseover", { item: target });
         }
     }
     _onListItemMouseOut(e) {
         const target = e.target;
-        if (this._isInstanceOfTreeItemBase(target)) {
+        if (_isInstanceOfTreeItemBase(target)) {
             this.fireDecoratorEvent("item-mouseout", { item: target });
         }
     }
@@ -247,9 +248,6 @@ let Tree = class Tree extends UI5Element {
         }
         return placements;
     }
-    _isInstanceOfTreeItemBase(object) {
-        return "isTreeItem" in object;
-    }
 };
 __decorate([
     property()
@@ -391,6 +389,7 @@ Tree = __decorate([
         cancelable: true,
     })
 ], Tree);
+const _isInstanceOfTreeItemBase = createInstanceChecker("isTreeItem");
 const walkTree = (el, level, callback) => {
     (el.items).forEach((item, index) => {
         callback(item, level, index);