@ui5/webcomponents 1.17.0-rc.2 → 1.17.1

package/dist/ToolbarSelect.d.ts

@@ -0,0 +1,112 @@
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import ToolbarSelectTemplate from "./generated/templates/ToolbarSelectTemplate.lit.js";
+import ToolbarPopoverSelectTemplate from "./generated/templates/ToolbarPopoverSelectTemplate.lit.js";
+import ToolbarItem from "./ToolbarItem.js";
+import Option from "./Option.js";
+import "./ToolbarSelectOption.js";
+import type { SelectChangeEventDetail } from "./Select.js";
+type ToolbarSelectChangeEventDetail = SelectChangeEventDetail;
+/**
+ * @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.
+ *
+ * <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>)
+ * @constructor
+ * @abstract
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSelect
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-toolbar-select
+ * @appenddocs sap.ui.webc.main.ToolbarSelectOption
+ * @public
+ * @since 1.17.0
+ */
+declare class ToolbarSelect extends ToolbarItem {
+    /**
+     * Defines the width of the select.
+     * <br><br>
+     *
+     * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
+     *
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.width
+     * @defaultvalue undefined
+     * @type { sap.ui.webc.base.types.CSSSize }
+     * @public
+     */
+    width?: string;
+    /**
+     * Defines the component options.
+     *
+     * <br><br>
+     * <b>Note:</b> Only one selected option is allowed.
+     * If more than one option is defined as selected, the last one would be considered as the selected one.
+     *
+     * <br><br>
+     * <b>Note:</b> Use the <code>ui5-toolbar-select-option</code> component to define the desired options.
+     * @type {sap.ui.webc.main.ISelectOption[]}
+     * @slot options
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.default
+     * @public
+     */
+    options: Array<Option>;
+    /**
+     * Defines the value state of the component.
+     * <br><br>
+     *
+     * @type {sap.ui.webc.base.types.ValueState}
+     * @defaultvalue "None"
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.valueState
+     * @public
+     */
+    valueState: `${ValueState}`;
+    /**
+     * Defines whether the component is in disabled state.
+     * <br><br>
+     * <b>Note:</b> A disabled component is noninteractive.
+     *
+     * @type {boolean}
+     * @defaultvalue false
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.disabled
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines the accessible ARIA name of the component.
+     *
+     * @type {string}
+     * @public
+     * @defaultvalue ""
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.accessibleName
+     */
+    accessibleName: string;
+    /**
+     * Receives id(or many ids) of the elements that label the select.
+     *
+     * @type {string}
+     * @defaultvalue ""
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.accessibleNameRef
+     * @public
+     */
+    accessibleNameRef: string;
+    _onEvent: EventListener;
+    static get toolbarTemplate(): typeof ToolbarSelectTemplate;
+    static get toolbarPopoverTemplate(): typeof ToolbarPopoverSelectTemplate;
+    get subscribedEvents(): Map<any, any>;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    attachEventListeners(): void;
+    detachEventListeners(): void;
+    _onEventHandler(e: Event): void;
+    get styles(): {
+        width: string | undefined;
+    };
+}
+export default ToolbarSelect;
+export type { ToolbarSelectChangeEventDetail, };

package/dist/ToolbarSelect.js

@@ -0,0 +1,155 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
+import { registerToolbarItem } from "./ToolbarRegistry.js";
+// Templates
+import ToolbarSelectTemplate from "./generated/templates/ToolbarSelectTemplate.lit.js";
+import ToolbarPopoverSelectTemplate from "./generated/templates/ToolbarPopoverSelectTemplate.lit.js";
+import ToolbarItem from "./ToolbarItem.js";
+import Select from "./Select.js";
+import Option from "./Option.js";
+import "./ToolbarSelectOption.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.
+ *
+ * <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>)
+ * @constructor
+ * @abstract
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSelect
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-toolbar-select
+ * @appenddocs sap.ui.webc.main.ToolbarSelectOption
+ * @public
+ * @since 1.17.0
+ */
+let ToolbarSelect = class ToolbarSelect extends ToolbarItem {
+    static get toolbarTemplate() {
+        return ToolbarSelectTemplate;
+    }
+    static get toolbarPopoverTemplate() {
+        return ToolbarPopoverSelectTemplate;
+    }
+    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 });
+        return map;
+    }
+    constructor() {
+        super();
+        this._onEvent = this._onEventHandler.bind(this);
+    }
+    onEnterDOM() {
+        this.attachEventListeners();
+    }
+    onExitDOM() {
+        this.detachEventListeners();
+    }
+    attachEventListeners() {
+        [...this.subscribedEvents.keys()].forEach(e => {
+            this.addEventListener(e, this._onEvent);
+        });
+    }
+    detachEventListeners() {
+        [...this.subscribedEvents.keys()].forEach(e => {
+            this.removeEventListener(e, this._onEvent);
+        });
+    }
+    _onEventHandler(e) {
+        if (e.type === "change") {
+            // update options
+            const selectedOption = e.detail.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");
+                }
+            });
+        }
+    }
+    get styles() {
+        return {
+            width: this.width,
+        };
+    }
+};
+__decorate([
+    property({ validator: CSSSize })
+], ToolbarSelect.prototype, "width", void 0);
+__decorate([
+    slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
+], ToolbarSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: ValueState.None })
+], ToolbarSelect.prototype, "valueState", void 0);
+__decorate([
+    property({ type: Boolean })
+], ToolbarSelect.prototype, "disabled", void 0);
+__decorate([
+    property()
+], ToolbarSelect.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], ToolbarSelect.prototype, "accessibleNameRef", void 0);
+ToolbarSelect = __decorate([
+    customElement({
+        tag: "ui5-toolbar-select",
+        dependencies: [Select, Option],
+    })
+    /**
+     * Fired when the selected option changes.
+     *
+     * @event sap.ui.webc.main.ToolbarSelect#change
+     * @allowPreventDefault
+     * @param {HTMLElement} selectedOption the selected option.
+     * @public
+     */
+    ,
+    event("change", {
+        detail: {
+            selectedOption: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fired after the component's dropdown menu opens.
+     *
+     * @event sap.ui.webc.main.ToolbarSelect#open
+     * @public
+     */
+    ,
+    event("open")
+    /**
+     * Fired after the component's dropdown menu closes.
+     *
+     * @event sap.ui.webc.main.ToolbarSelect#close
+     * @public
+     */
+    ,
+    event("close")
+], ToolbarSelect);
+registerToolbarItem(ToolbarSelect);
+ToolbarSelect.define();
+export default ToolbarSelect;
+//# sourceMappingURL=ToolbarSelect.js.map

package/dist/ToolbarSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSelect.js","sourceRoot":"","sources":["../src/ToolbarSelect.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,UAAU,MAAM,kDAAkD,CAAC;AAC1E,OAAO,OAAO,MAAM,+CAA+C,CAAC;AAEpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,YAAY;AAEZ,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AACvF,OAAO,4BAA4B,MAAM,2DAA2D,CAAC;AACrG,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,0BAA0B,CAAC;AAKlC;;;;;;;;;;;;;;;;;;;;GAoBG;AAmCH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAiFtC,MAAM,KAAK,eAAe;QACzB,OAAO,qBAAqB,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,sBAAsB;QAChC,OAAO,4BAA4B,CAAC;IACrC,CAAC;IAED,IAAI,gBAAgB;QACnB,MAAM,GAAG,GAAG,IAAI,GAAG,EAAE,CAAC;QAEtB,GAAG,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3C,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;QAC7C,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;QAC1C,GAAG,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;QAE3C,OAAO,GAAG,CAAC;IACZ,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,CAAC;IAED,UAAU;QACT,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC7B,CAAC;IAED,SAAS;QACR,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC7B,CAAC;IAED,oBAAoB;QACnB,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAC7C,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,oBAAoB;QACnB,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAC7C,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,eAAe,CAAC,CAAQ;QACvB,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE;YACxB,iBAAiB;YACjB,MAAM,cAAc,GAAI,CAAiD,CAAC,MAAM,CAAC,cAAc,CAAC;YAChG,MAAM,mBAAmB,GAAG,MAAM,CAAC,cAAc,EAAE,YAAY,CAAC,qCAAqC,CAAC,CAAC,CAAC;YACxG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAc,EAAE,KAAa,EAAE,EAAE;gBACtD,IAAI,KAAK,KAAK,mBAAmB,EAAE;oBAClC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;iBACpC;qBAAM;oBACN,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;iBACnC;YACF,CAAC,CAAC,CAAC;SACH;IACF,CAAC;IAED,IAAI,MAAM;QACT,OAAO;YACN,KAAK,EAAE,IAAI,CAAC,KAAK;SACjB,CAAC;IACH,CAAC;CACD,CAAA;AArIA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;4CAClB;AAiBf;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;8CACpD;AAYxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,CAAC,IAAI,EAAE,CAAC;iDACjC;AAa7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACT;AAWnB;IADC,QAAQ,EAAE;qDACa;AAWxB;IADC,QAAQ,EAAE;wDACgB;AA7EtB,aAAa;IAlClB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;KAC9B,CAAC;IAEF;;;;;;;OAOG;;IACF,KAAK,CAAC,QAAQ,EAAE;QAChB,MAAM,EAAE;YACP,cAAc,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SACrC;KACD,CAAC;IAEF;;;;;OAKG;;IACF,KAAK,CAAC,MAAM,CAAC;IACd;;;;;OAKG;;IACF,KAAK,CAAC,OAAO,CAAC;GAET,aAAa,CAkJlB;AAED,mBAAmB,CAAC,aAAa,CAAC,CAAC;AAEnC,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","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 \"./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 * @author SAP SE\n * @alias sap.ui.webc.main.ToolbarSelect\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-toolbar-select\n * @appenddocs sap.ui.webc.main.ToolbarSelectOption\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 * @event sap.ui.webc.main.ToolbarSelect#change\n * @allowPreventDefault\n * @param {HTMLElement} selectedOption the selected option.\n * @public\n */\n@event(\"change\", {\n\tdetail: {\n\t\tselectedOption: { type: HTMLElement },\n\t},\n})\n\n/**\n * Fired after the component's dropdown menu opens.\n *\n * @event sap.ui.webc.main.ToolbarSelect#open\n * @public\n */\n@event(\"open\")\n/**\n * Fired after the component's dropdown menu closes.\n *\n * @event sap.ui.webc.main.ToolbarSelect#close\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 * @name sap.ui.webc.main.ToolbarSelect.prototype.width\n\t * @defaultvalue undefined\n\t * @type { sap.ui.webc.base.types.CSSSize }\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 * @type {sap.ui.webc.main.ISelectOption[]}\n\t * @slot options\n\t * @name sap.ui.webc.main.ToolbarSelect.prototype.default\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, invalidateOnChildChange: true })\n\toptions!: Array<Option>;\n\n\t/**\n\t * Defines the value state of the component.\n\t * <br><br>\n\t *\n\t * @type {sap.ui.webc.base.types.ValueState}\n\t * @defaultvalue \"None\"\n\t * @name sap.ui.webc.main.ToolbarSelect.prototype.valueState\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 * @type {boolean}\n\t * @defaultvalue false\n\t * @name sap.ui.webc.main.ToolbarSelect.prototype.disabled\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 * @type {string}\n\t * @public\n\t * @defaultvalue \"\"\n\t * @name sap.ui.webc.main.ToolbarSelect.prototype.accessibleName\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 * @type {string}\n\t * @defaultvalue \"\"\n\t * @name sap.ui.webc.main.ToolbarSelect.prototype.accessibleNameRef\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: Option, 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

@@ -0,0 +1,40 @@
+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>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSelectOption
+ * @extends sap.ui.webc.base.UI5Element
+ * @abstract
+ * @tagname ui5-toolbar-select-option
+ * @implements sap.ui.webc.main.IToolbarSelectOption
+ * @public
+ * @since 1.17.0
+ */
+declare class ToolbarSelectOption extends UI5Element {
+    /**
+     * Defines the selected state of the component.
+     * @type {boolean}
+     * @defaultvalue false
+     * @name sap.ui.webc.main.ToolbarSelectOption.prototype.selected
+     * @public
+     */
+    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.
+     *
+     * @type {Node[]}
+     * @name sap.ui.webc.main.ToolbarSelectOption.prototype.default
+     * @slot
+     * @public
+     */
+    text: Array<Node>;
+}
+export default ToolbarSelectOption;

package/dist/ToolbarSelectOption.js

@@ -0,0 +1,41 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 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>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSelectOption
+ * @extends sap.ui.webc.base.UI5Element
+ * @abstract
+ * @tagname ui5-toolbar-select-option
+ * @implements sap.ui.webc.main.IToolbarSelectOption
+ * @public
+ * @since 1.17.0
+ */
+let ToolbarSelectOption = class ToolbarSelectOption extends UI5Element {
+};
+__decorate([
+    property({ type: Boolean })
+], ToolbarSelectOption.prototype, "selected", void 0);
+__decorate([
+    slot({ type: Node, "default": true, invalidateOnChildChange: true })
+], ToolbarSelectOption.prototype, "text", void 0);
+ToolbarSelectOption = __decorate([
+    customElement("ui5-toolbar-select-option")
+], ToolbarSelectOption);
+ToolbarSelectOption.define();
+export default ToolbarSelectOption;
+//# sourceMappingURL=ToolbarSelectOption.js.map

package/dist/ToolbarSelectOption.js.map

@@ -0,0 +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;;;;;;;;;;;;;;;;GAgBG;AAEH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;CAuB3C,CAAA;AAdA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACT;AAanB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;iDAClD;AAtBd,mBAAmB;IADxB,aAAa,CAAC,2BAA2B,CAAC;GACrC,mBAAmB,CAuBxB;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 * @author SAP SE\n * @alias sap.ui.webc.main.ToolbarSelectOption\n * @extends sap.ui.webc.base.UI5Element\n * @abstract\n * @tagname ui5-toolbar-select-option\n * @implements sap.ui.webc.main.IToolbarSelectOption\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 * @type {boolean}\n\t * @defaultvalue false\n\t * @name sap.ui.webc.main.ToolbarSelectOption.prototype.selected\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 * @type {Node[]}\n\t * @name sap.ui.webc.main.ToolbarSelectOption.prototype.default\n\t * @slot\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

@@ -0,0 +1,27 @@
+import ToolbarSeparatorTemplate from "./generated/templates/ToolbarSeparatorTemplate.lit.js";
+import ToolbarPopoverSeparatorTemplate from "./generated/templates/ToolbarPopoverSeparatorTemplate.lit.js";
+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.
+ * It takes no space in calculating toolbar items width.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSeparator
+ * @extends sap.ui.webc.main.ToolbarItem
+ * @tagname ui5-toolbar-separator
+ * @since 1.17.0
+ * @abstract
+ * @public
+ */
+declare class ToolbarSeparator extends ToolbarItem {
+    visible: boolean;
+    static get toolbarTemplate(): typeof ToolbarSeparatorTemplate;
+    static get toolbarPopoverTemplate(): typeof ToolbarPopoverSeparatorTemplate;
+    get isSeparator(): boolean;
+    get isInteractive(): boolean;
+}
+export default ToolbarSeparator;

package/dist/ToolbarSeparator.js

@@ -0,0 +1,54 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import ToolbarSeparatorTemplate from "./generated/templates/ToolbarSeparatorTemplate.lit.js";
+import ToolbarPopoverSeparatorTemplate from "./generated/templates/ToolbarPopoverSeparatorTemplate.lit.js";
+import { registerToolbarItem } from "./ToolbarRegistry.js";
+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.
+ * It takes no space in calculating toolbar items width.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSeparator
+ * @extends sap.ui.webc.main.ToolbarItem
+ * @tagname ui5-toolbar-separator
+ * @since 1.17.0
+ * @abstract
+ * @public
+ */
+let ToolbarSeparator = class ToolbarSeparator extends ToolbarItem {
+    static get toolbarTemplate() {
+        return ToolbarSeparatorTemplate;
+    }
+    static get toolbarPopoverTemplate() {
+        return ToolbarPopoverSeparatorTemplate;
+    }
+    get isSeparator() {
+        return true;
+    }
+    get isInteractive() {
+        return false;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ToolbarSeparator.prototype, "visible", void 0);
+ToolbarSeparator = __decorate([
+    customElement({
+        tag: "ui5-toolbar-separator",
+    })
+], ToolbarSeparator);
+registerToolbarItem(ToolbarSeparator);
+ToolbarSeparator.define();
+export default ToolbarSeparator;
+//# sourceMappingURL=ToolbarSeparator.js.map

package/dist/ToolbarSeparator.js.map

@@ -0,0 +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;;;;;;;;;;;;;;;GAeG;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 * @author SAP SE\n * @alias sap.ui.webc.main.ToolbarSeparator\n * @extends sap.ui.webc.main.ToolbarItem\n * @tagname ui5-toolbar-separator\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

@@ -0,0 +1,45 @@
+import ToolbarSpacerTemplate from "./generated/templates/ToolbarSpacerTemplate.lit.js";
+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.
+ * It takes no space in calculating toolbar items width.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSpacer
+ * @extends sap.ui.webc.main.ToolbarItem
+ * @tagname ui5-toolbar-spacer
+ * @abstract
+ * @since 1.17.0
+ * @public
+ */
+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.
+     *
+     * @public
+     * @type { sap.ui.webc.base.types.CSSSize }
+     * @name sap.ui.webc.main.ToolbarSpacer.prototype.width
+     * @defaultvalue undefined
+     */
+    width?: string;
+    get styles(): {
+        width: string;
+        flex?: undefined;
+    } | {
+        flex: string;
+        width?: undefined;
+    };
+    get ignoreSpace(): boolean;
+    get hasFlexibleWidth(): boolean;
+    static get toolbarTemplate(): typeof ToolbarSpacerTemplate;
+    static get toolbarPopoverTemplate(): typeof ToolbarSpacerTemplate;
+    get isInteractive(): boolean;
+}
+export default ToolbarSpacer;

package/dist/ToolbarSpacer.js

@@ -0,0 +1,60 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
+import ToolbarSpacerTemplate from "./generated/templates/ToolbarSpacerTemplate.lit.js";
+import ToolbarItem from "./ToolbarItem.js";
+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.
+ * It takes no space in calculating toolbar items width.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSpacer
+ * @extends sap.ui.webc.main.ToolbarItem
+ * @tagname ui5-toolbar-spacer
+ * @abstract
+ * @since 1.17.0
+ * @public
+ */
+let ToolbarSpacer = class ToolbarSpacer extends ToolbarItem {
+    get styles() {
+        return this.width ? { width: this.width } : { flex: "auto" };
+    }
+    get ignoreSpace() {
+        return this.width === "";
+    }
+    get hasFlexibleWidth() {
+        return this.width === "";
+    }
+    static get toolbarTemplate() {
+        return ToolbarSpacerTemplate;
+    }
+    static get toolbarPopoverTemplate() {
+        return ToolbarSpacerTemplate;
+    }
+    get isInteractive() {
+        return false;
+    }
+};
+__decorate([
+    property({ validator: CSSSize })
+], ToolbarSpacer.prototype, "width", void 0);
+ToolbarSpacer = __decorate([
+    customElement({
+        tag: "ui5-toolbar-spacer",
+    })
+], ToolbarSpacer);
+registerToolbarItem(ToolbarSpacer);
+ToolbarSpacer.define();
+export default ToolbarSpacer;
+//# sourceMappingURL=ToolbarSpacer.js.map

package/dist/ToolbarSpacer.js.map

@@ -0,0 +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;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;;;;;;;;;;;;;GAeG;AAKH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAetC,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;AAbV,aAAa;IAJlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;KACzB,CAAC;GAEI,aAAa,CAsClB;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\";\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 * @author SAP SE\n * @alias sap.ui.webc.main.ToolbarSpacer\n * @extends sap.ui.webc.main.ToolbarItem\n * @tagname ui5-toolbar-spacer\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 * @type { sap.ui.webc.base.types.CSSSize }\n\t * @name sap.ui.webc.main.ToolbarSpacer.prototype.width\n\t * @defaultvalue 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/TreeItemBase.js

@@ -13,6 +13,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
@@ -47,7 +48,7 @@ let TreeItemBase = TreeItemBase_1 = class TreeItemBase extends ListItem {
     get styles() {
         return {
             preContent: {
-                "padding-inline-start": `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
+                "padding-inline-start": `calc(var(${getScopedVarName("--_ui5-tree-indent-step")}) * ${this.effectiveLevel})`,
             },
         };
     }