@ui5/webcomponents 0.0.0-32b659ddc → 0.0.0-33e059bcd

package/dist/types/ToastPlacement.js

@@ -1,92 +1,56 @@
-import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
-
-
 /**
- * @lends sap.ui.webcomponents.main.types.ToastPlacement.prototype
+ * Toast placement.
+ *
  * @public
  */
-const ToastPlacements = {
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>TopStart</code> position of its container.
-	 * @public
-	 * @type {TopStart}
-	 */
-	TopStart: "TopStart",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>TopCenter</code> position of its container.
-	 * @public
-	 * @type {TopCenter}
-	 */
-	TopCenter: "TopCenter",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>TopEnd</code> position of its container.
-	 * @public
-	 * @type {TopEnd}
-	 */
-	TopEnd: "TopEnd",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>MiddleStart</code> position of its container.
-	 * @public
-	 * @type {MiddleStart}
-	 */
-	MiddleStart: "MiddleStart",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>MiddleCenter</code> position of its container.
-	 * @public
-	 * @type {MiddleCenter}
-	 */
-	MiddleCenter: "MiddleCenter",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>MiddleEnd</code> position of its container.
-	 * @public
-	 * @type {MiddleEnd}
-	 */
-	MiddleEnd: "MiddleEnd",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>BottomStart</code> position of its container.
-	 * @public
-	 * @type {BottomStart}
-	 */
-	BottomStart: "BottomStart",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>BottomCenter</code> position of its container.
-	 * Default placement (no selection)
-	 * @public
-	 * @type {BottomCenter}
-	 */
-	BottomCenter: "BottomCenter",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>BottomEnd</code> position of its container.
-	 * @public
-	 * @type {BottomEnd}
-	 */
-	BottomEnd: "BottomEnd",
-};
-
-/**
- * @class
- * Defines where the <code>ui5-toast</code> will be placed.
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.types.ToastPlacement
- * @public
- * @enum {string}
- */
-class ToastPlacement extends DataType {
-	static isValid(value) {
-		return !!ToastPlacements[value];
-	}
-}
-
-ToastPlacement.generataTypeAcessors(ToastPlacements);
-
+var ToastPlacement;
+(function (ToastPlacement) {
+    /**
+     * Toast is placed at the <code>TopStart</code> position of its container.
+     * @public
+     */
+    ToastPlacement["TopStart"] = "TopStart";
+    /**
+     * Toast is placed at the <code>TopCenter</code> position of its container.
+     * @public
+     */
+    ToastPlacement["TopCenter"] = "TopCenter";
+    /**
+     * Toast is placed at the <code>TopEnd</code> position of its container.
+     * @public
+     */
+    ToastPlacement["TopEnd"] = "TopEnd";
+    /**
+     * Toast is placed at the <code>MiddleStart</code> position of its container.
+     * @public
+     */
+    ToastPlacement["MiddleStart"] = "MiddleStart";
+    /**
+     * Toast is placed at the <code>MiddleCenter</code> position of its container.
+     * @public
+     */
+    ToastPlacement["MiddleCenter"] = "MiddleCenter";
+    /**
+     * Toast is placed at the <code>MiddleEnd</code> position of its container.
+     * @public
+     */
+    ToastPlacement["MiddleEnd"] = "MiddleEnd";
+    /**
+     * Toast is placed at the <code>BottomStart</code> position of its container.
+     * @public
+     */
+    ToastPlacement["BottomStart"] = "BottomStart";
+    /**
+     * Toast is placed at the <code>BottomCenter</code> position of its container.
+     * Default placement (no selection)
+     * @public
+     */
+    ToastPlacement["BottomCenter"] = "BottomCenter";
+    /**
+     * Toast is placed at the <code>BottomEnd</code> position of its container.
+     * @public
+     */
+    ToastPlacement["BottomEnd"] = "BottomEnd";
+})(ToastPlacement || (ToastPlacement = {}));
 export default ToastPlacement;
+//# sourceMappingURL=ToastPlacement.js.map

package/dist/types/ToastPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastPlacement.js","sourceRoot":"","sources":["../../src/types/ToastPlacement.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,cAwDJ;AAxDD,WAAK,cAAc;IAElB;;;OAGG;IACH,uCAAqB,CAAA;IAErB;;;OAGG;IACH,yCAAuB,CAAA;IAEvB;;;OAGG;IACH,mCAAiB,CAAA;IAEjB;;;OAGG;IACH,6CAA2B,CAAA;IAE3B;;;OAGG;IACH,+CAA6B,CAAA;IAE7B;;;OAGG;IACH,yCAAuB,CAAA;IAEvB;;;OAGG;IACH,6CAA2B,CAAA;IAE3B;;;;OAIG;IACH,+CAA6B,CAAA;IAE7B;;;OAGG;IACH,yCAAuB,CAAA;AACxB,CAAC,EAxDI,cAAc,KAAd,cAAc,QAwDlB;AAED,eAAe,cAAc,CAAC","sourcesContent":["/**\n * Toast placement.\n *\n * @public\n */\nenum ToastPlacement {\n\n\t/**\n\t * Toast is placed at the <code>TopStart</code> position of its container.\n\t * @public\n\t */\n\tTopStart = \"TopStart\",\n\n\t/**\n\t * Toast is placed at the <code>TopCenter</code> position of its container.\n\t * @public\n\t */\n\tTopCenter = \"TopCenter\",\n\n\t/**\n\t * Toast is placed at the <code>TopEnd</code> position of its container.\n\t * @public\n\t */\n\tTopEnd = \"TopEnd\",\n\n\t/**\n\t * Toast is placed at the <code>MiddleStart</code> position of its container.\n\t * @public\n\t */\n\tMiddleStart = \"MiddleStart\",\n\n\t/**\n\t * Toast is placed at the <code>MiddleCenter</code> position of its container.\n\t * @public\n\t */\n\tMiddleCenter = \"MiddleCenter\",\n\n\t/**\n\t * Toast is placed at the <code>MiddleEnd</code> position of its container.\n\t * @public\n\t */\n\tMiddleEnd = \"MiddleEnd\",\n\n\t/**\n\t * Toast is placed at the <code>BottomStart</code> position of its container.\n\t * @public\n\t */\n\tBottomStart = \"BottomStart\",\n\n\t/**\n\t * Toast is placed at the <code>BottomCenter</code> position of its container.\n\t * Default placement (no selection)\n\t * @public\n\t */\n\tBottomCenter = \"BottomCenter\",\n\n\t/**\n\t * Toast is placed at the <code>BottomEnd</code> position of its container.\n\t * @public\n\t */\n\tBottomEnd = \"BottomEnd\",\n}\n\nexport default ToastPlacement;\n"]}

package/dist/types/ToolbarAlign.d.ts

@@ -0,0 +1,18 @@
+/**
+* Defines which direction the items of ui5-toolbar will be aligned.
+ *
+ * @public
+ */
+declare enum ToolbarAlign {
+    /**
+     * Toolbar items are situated at the <code>start</code> of the Toolbar
+     * @public
+     */
+    Start = "Start",
+    /**
+     * Toolbar items are situated at the <code>end</code> of the Toolbar
+     * @public
+     */
+    End = "End"
+}
+export default ToolbarAlign;

package/dist/types/ToolbarAlign.js

@@ -0,0 +1,20 @@
+/**
+* Defines which direction the items of ui5-toolbar will be aligned.
+ *
+ * @public
+ */
+var ToolbarAlign;
+(function (ToolbarAlign) {
+    /**
+     * Toolbar items are situated at the <code>start</code> of the Toolbar
+     * @public
+     */
+    ToolbarAlign["Start"] = "Start";
+    /**
+     * Toolbar items are situated at the <code>end</code> of the Toolbar
+     * @public
+     */
+    ToolbarAlign["End"] = "End";
+})(ToolbarAlign || (ToolbarAlign = {}));
+export default ToolbarAlign;
+//# sourceMappingURL=ToolbarAlign.js.map

package/dist/types/ToolbarAlign.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarAlign.js","sourceRoot":"","sources":["../../src/types/ToolbarAlign.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,YAYJ;AAZD,WAAK,YAAY;IAChB;;;OAGG;IACH,+BAAe,CAAA;IAEf;;;OAGG;IACH,2BAAW,CAAA;AACZ,CAAC,EAZI,YAAY,KAAZ,YAAY,QAYhB;AAED,eAAe,YAAY,CAAC","sourcesContent":["/**\n* Defines which direction the items of ui5-toolbar will be aligned.\n *\n * @public\n */\nenum ToolbarAlign {\n\t/**\n\t * Toolbar items are situated at the <code>start</code> of the Toolbar\n\t * @public\n\t */\n\tStart = \"Start\",\n\n\t/**\n\t * Toolbar items are situated at the <code>end</code> of the Toolbar\n\t * @public\n\t */\n\tEnd = \"End\",\n}\n\nexport default ToolbarAlign;\n"]}

package/dist/types/ToolbarItemOverflowBehavior.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Defines the priority of the toolbar item to go inside overflow popover.
+ *
+ * @public
+ */
+declare enum ToolbarItemOverflowBehavior {
+    /**
+     * The item is presented inside the toolbar and goes in the popover, when there is not enough space.
+     * @public
+     */
+    Default = "Default",
+    /**
+     * When set, the item will never go to the overflow popover.
+     * @public
+     */
+    NeverOverflow = "NeverOverflow",
+    /**
+     * When set, the item will be always part of the overflow part of ui5-toolbar.
+     * @public
+     */
+    AlwaysOverflow = "AlwaysOverflow"
+}
+export default ToolbarItemOverflowBehavior;

package/dist/types/ToolbarItemOverflowBehavior.js

@@ -0,0 +1,25 @@
+/**
+ * Defines the priority of the toolbar item to go inside overflow popover.
+ *
+ * @public
+ */
+var ToolbarItemOverflowBehavior;
+(function (ToolbarItemOverflowBehavior) {
+    /**
+     * The item is presented inside the toolbar and goes in the popover, when there is not enough space.
+     * @public
+     */
+    ToolbarItemOverflowBehavior["Default"] = "Default";
+    /**
+     * When set, the item will never go to the overflow popover.
+     * @public
+     */
+    ToolbarItemOverflowBehavior["NeverOverflow"] = "NeverOverflow";
+    /**
+     * When set, the item will be always part of the overflow part of ui5-toolbar.
+     * @public
+     */
+    ToolbarItemOverflowBehavior["AlwaysOverflow"] = "AlwaysOverflow";
+})(ToolbarItemOverflowBehavior || (ToolbarItemOverflowBehavior = {}));
+export default ToolbarItemOverflowBehavior;
+//# sourceMappingURL=ToolbarItemOverflowBehavior.js.map

package/dist/types/ToolbarItemOverflowBehavior.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarItemOverflowBehavior.js","sourceRoot":"","sources":["../../src/types/ToolbarItemOverflowBehavior.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,2BAkBJ;AAlBD,WAAK,2BAA2B;IAE/B;;;OAGG;IACF,kDAAmB,CAAA;IACpB;;;OAGG;IACH,8DAA+B,CAAA;IAE/B;;;OAGG;IACH,gEAAiC,CAAA;AAClC,CAAC,EAlBI,2BAA2B,KAA3B,2BAA2B,QAkB/B;AAED,eAAe,2BAA2B,CAAC","sourcesContent":["/**\n * Defines the priority of the toolbar item to go inside overflow popover.\n *\n * @public\n */\nenum ToolbarItemOverflowBehavior {\n\n\t/**\n\t * The item is presented inside the toolbar and goes in the popover, when there is not enough space.\n\t * @public\n\t */\n\t Default = \"Default\",\n\t/**\n\t * When set, the item will never go to the overflow popover.\n\t * @public\n\t */\n\tNeverOverflow = \"NeverOverflow\",\n\n\t/**\n\t * When set, the item will be always part of the overflow part of ui5-toolbar.\n\t * @public\n\t */\n\tAlwaysOverflow = \"AlwaysOverflow\",\n}\n\nexport default ToolbarItemOverflowBehavior;\n"]}

package/dist/types/WrappingType.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Different types of wrapping.
+ *
+ * @public
+ */
+declare enum WrappingType {
+    /**
+     * The text will be truncated with an ellipsis.
+     * @public
+     */
+    None = "None",
+    /**
+     * The text will wrap. The words will not be broken based on hyphenation.
+     * @public
+     */
+    Normal = "Normal"
+}
+export default WrappingType;

package/dist/types/WrappingType.js

@@ -0,0 +1,20 @@
+/**
+ * Different types of wrapping.
+ *
+ * @public
+ */
+var WrappingType;
+(function (WrappingType) {
+    /**
+     * The text will be truncated with an ellipsis.
+     * @public
+     */
+    WrappingType["None"] = "None";
+    /**
+     * The text will wrap. The words will not be broken based on hyphenation.
+     * @public
+     */
+    WrappingType["Normal"] = "Normal";
+})(WrappingType || (WrappingType = {}));
+export default WrappingType;
+//# sourceMappingURL=WrappingType.js.map

package/dist/types/WrappingType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrappingType.js","sourceRoot":"","sources":["../../src/types/WrappingType.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,YAYJ;AAZD,WAAK,YAAY;IAChB;;;OAGG;IACH,6BAAa,CAAA;IAEb;;;OAGG;IACH,iCAAiB,CAAA;AAClB,CAAC,EAZI,YAAY,KAAZ,YAAY,QAYhB;AAED,eAAe,YAAY,CAAC","sourcesContent":["/**\n * Different types of wrapping.\n *\n * @public\n */\nenum WrappingType {\n\t/**\n\t * The text will be truncated with an ellipsis.\n\t * @public\n\t */\n\tNone = \"None\",\n\n\t/**\n\t * The text will wrap. The words will not be broken based on hyphenation.\n\t * @public\n\t */\n\tNormal = \"Normal\",\n}\n\nexport default WrappingType;\n"]}

package/{package-scripts.js → package-scripts.cjs}

@@ -2,6 +2,10 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
 
 const options = {
 	port: 8080,
+	portStep: 2,
+	typescript: true,
+	noWatchTS: true,
+	dev: true,
 };
 
 const scripts = getScripts(options);

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-32b659ddc",
+  "version": "0.0.0-33e059bcd",
   "description": "UI5 Web Components: webcomponents.main",
+  "ui5": {
+    "webComponentsPackage": true
+  },
+  "type": "module",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "private": false,
+  "customElements": "./dist/custom-elements.json",
   "keywords": [
     "openui5",
     "sapui5",
@@ -13,11 +18,29 @@
   "scripts": {
     "clean": "wc-dev clean",
     "lint": "wc-dev lint",
+    "lint:scope": "nps scope.lint",
     "start": "wc-dev start",
+    "watch": "wc-dev watch",
+    "generate": "nps generate",
+    "generateAPI": "nps generateAPI",
     "build": "wc-dev build",
+    "bundle": "nps build.bundle",
     "test": "wc-dev test",
+    "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
+    "test:suite-1": "wc-dev test-suite-1",
+    "test:suite-2": "wc-dev test-suite-2",
     "create-ui5-element": "wc-create-ui5-element",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "tsc -b"
+  },
+  "exports": {
+    "./.port": "./.port",
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
+    "./bundle.esm.js": "./bundle.esm.js",
+    "./bundle.common.js": "./bundle.common.js",
+    "./bundle.scoped.esm.js": "./bundle.scoped.esm.js",
+    "./*": "./dist/*"
   },
   "repository": {
     "type": "git",
@@ -25,12 +48,15 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-32b659ddc",
-    "@ui5/webcomponents-utils": "0.0.0-32b659ddc",
-    "@ui5/webcomponents-icons": "0.0.0-32b659ddc",
-    "@ui5/webcomponents-theme-base": "0.0.0-32b659ddc"
+    "@ui5/webcomponents-base": "0.0.0-33e059bcd",
+    "@ui5/webcomponents-icons": "0.0.0-33e059bcd",
+    "@ui5/webcomponents-icons-business-suite": "0.0.0-33e059bcd",
+    "@ui5/webcomponents-icons-tnt": "0.0.0-33e059bcd",
+    "@ui5/webcomponents-localization": "0.0.0-33e059bcd",
+    "@ui5/webcomponents-theming": "0.0.0-33e059bcd"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-32b659ddc"
+    "@ui5/webcomponents-tools": "0.0.0-33e059bcd",
+    "chromedriver": "120.0.0"
   }
 }

package/src/Avatar.hbs

@@ -0,0 +1,30 @@
+<div
+	class="ui5-avatar-root"
+	tabindex="{{tabindex}}"
+	data-sap-focus-ref
+	@keyup={{_onkeyup}}
+	@keydown={{_onkeydown}}
+	@focusout={{_onfocusout}}
+	@focusin={{_onfocusin}}
+	@click={{_onclick}}
+	role="{{_role}}"
+	aria-haspopup="{{_ariaHasPopup}}"
+	aria-label="{{accessibleNameText}}"
+	fallback-icon="{{_fallbackIcon}}"
+>
+	{{#if hasImage}}
+		<slot></slot>
+	{{else}}
+		{{#if icon}}
+			<ui5-icon class="ui5-avatar-icon" name="{{icon}}"></ui5-icon>
+		{{/if}}
+
+		{{#if initials}}
+			<span class="ui5-avatar-initials">{{validInitials}}</span>
+			<ui5-icon class="ui5-avatar-icon ui5-avatar-icon-fallback" name="{{fallbackIcon}}"></ui5-icon>
+		{{/if}}
+
+	{{/if}}
+
+	<slot name="badge"></slot>
+</div>

package/src/AvatarGroup.hbs

@@ -0,0 +1,30 @@
+<div class="ui5-avatar-group-root">
+	<div
+		class="ui5-avatar-group-items"
+		@keyup="{{_onkeyup}}"
+		@keydown="{{_onkeydown}}"
+		@focusin="{{_onfocusin}}"
+		tabindex="{{_groupTabIndex}}"
+		@click="{{_onClick}}"
+		@ui5-click="{{_onUI5Click}}"
+		aria-label="{{_ariaLabelText}}"
+		role="{{_role}}"
+		aria-haspopup="{{_containerAriaHasPopup}}"
+	>
+		<slot></slot>
+
+		{{#if _customOverflowButton}}
+			<slot name="overflowButton"></slot>
+		{{else}}
+			<ui5-button
+				.accessibilityAttributes="{{_overflowButtonAccAttributes}}"
+				aria-label="{{_overflowButtonAriaLabelText}}"
+				?hidden="{{_overflowBtnHidden}}"
+				?non-interactive={{_isGroup}}
+				class="{{classes.overflowButton}}"
+			>
+				{{_overflowButtonText}}
+			</ui5-button>
+		{{/if}}
+	</div>
+</div>

package/src/Badge.hbs

@@ -0,0 +1,30 @@
+{{#if interactive}}
+	<button class="ui5-badge-root"
+			title="{{_title}}"
+			aria-roledescription="{{_roleDescription}}"
+			aria-description="{{_valueState}}"
+			@onclick={{_onclick}}
+	>
+		{{> content}}
+	</button>
+{{else}}
+	<div class="ui5-badge-root"
+		 title="{{_title}}">
+		{{> content}}
+	</div>
+{{/if}}
+
+{{#*inline "content"}}
+	<slot name="icon"></slot>
+	{{#if this._semanticIconName}}
+		<ui5-icon class="ui5-badge-semantic-icon" name="{{_semanticIconName}}"></ui5-icon>
+	{{/if}}
+	<span class="ui5-hidden-text">{{badgeDescription}}</span>
+	{{#if hasText}}
+		<span class="ui5-badge-text"><bdi><slot></slot></bdi></span>
+	{{/if}}
+{{/inline}}
+
+
+
+

package/src/Breadcrumbs.hbs

@@ -0,0 +1,37 @@
+<nav class="ui5-breadcrumbs-root"
+	aria-label="{{_accessibleNameText}}">
+
+	<ol @focusin="{{_onfocusin}}"
+		@keydown="{{_onkeydown}}"
+		@keyup="{{_onkeyup}}">
+
+		<li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" ?hidden="{{_isOverflowEmpty}}">
+			<ui5-link @ui5-click="{{_openRespPopover}}"
+				accessible-role="button"
+				aria-label="{{_dropdownArrowAccessibleNameText}}"
+				aria-haspopup="{{_ariaHasPopup}}">
+				<ui5-icon name="slim-arrow-down" title="{{_dropdownArrowAccessibleNameText}}"></ui5-icon>
+			</ui5-link>
+		</li>
+
+		{{#each _linksData}}
+		<li class="ui5-breadcrumbs-link-wrapper"
+			id="{{this._id}}-link-wrapper">
+
+			<ui5-link @ui5-click="{{../_onLinkPress}}"
+				href="{{this.href}}"
+				target="{{this.target}}"
+				id="{{this._id}}-link"
+				design="{{this._linkDesign}}"
+				accessible-name="{{this._accessibleNameText}}"
+				data-ui5-stable="{{this.stableDomRef}}">
+				{{this.innerText}}
+			</ui5-link>
+
+			{{#unless this._isCurrentPageItem}}
+				<span class="ui5-breadcrumbs-separator" aria-hidden="true"></span>
+			{{/unless}}
+		</li>
+		{{/each}}
+	</ol>
+</nav>

package/src/BreadcrumbsPopover.hbs

@@ -0,0 +1,28 @@
+<ui5-responsive-popover
+	class="ui5-breadcrumbs-popover"
+	hide-arrow
+	content-only-on-desktop
+	placement-type="Bottom"
+	horizontal-align="Left"
+	_hide-header
+	@keydown="{{_onkeydown}}">
+	<ui5-list mode="SingleSelect"
+		separators="None"
+		@ui5-selection-change="{{_onOverflowListItemSelect}}">
+
+		{{#each _overflowItemsData}}
+			<ui5-li
+				id="{{this._id}}-li"
+				accessible-name="{{this.accessibleName}}"
+				data-ui5-stable="{{this.stableDomRef}}">
+				{{this.textContent}}
+			</ui5-li>
+		{{/each}}
+	</ui5-list>
+	<div slot="footer" class="ui5-breadcrumbs-popover-footer">
+		<ui5-button
+			design="Transparent"
+			@click="{{_closeRespPopover}}"
+		>{{_cancelButtonText}}</ui5-button>
+	</div>
+</ui5-responsive-popover>

package/src/BusyIndicator.hbs

@@ -0,0 +1,32 @@
+<div class="{{classes.root}}">
+	{{#if _isBusy}}
+		<div
+			class="ui5-busy-indicator-busy-area"
+			title="{{ariaTitle}}"
+			tabindex="0"
+			role="progressbar"
+			aria-valuemin="0"
+			aria-valuemax="100"
+			aria-valuetext="Busy"
+			aria-labelledby="{{labelId}}"
+			data-sap-focus-ref
+		>
+			<div class="ui5-busy-indicator-circles-wrapper">
+				<div class="ui5-busy-indicator-circle circle-animation-0"></div>
+				<div class="ui5-busy-indicator-circle circle-animation-1"></div>
+				<div class="ui5-busy-indicator-circle circle-animation-2"></div>
+			</div>
+			{{#if text}}
+				<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text" wrapping-type="Normal">
+					{{text}}
+				</ui5-label>
+			{{/if}}
+		</div>
+	{{/if}}
+
+	<slot></slot>
+
+	{{#if _isBusy}}
+		<span data-ui5-focus-redirect tabindex="0" @focusin="{{_redirectFocus}}"></span>
+	{{/if}}
+</div>

package/src/Button.hbs

@@ -0,0 +1,45 @@
+<button
+	type="button"
+	class="ui5-button-root"
+	?disabled="{{disabled}}"
+	data-sap-focus-ref
+	{{> ariaPressed}}
+	@focusout={{_onfocusout}}
+	@focusin={{_onfocusin}}
+	@click={{_onclick}}
+	@mousedown={{_onmousedown}}
+	@mouseup={{_onmouseup}}
+	@keydown={{_onkeydown}}
+	@keyup={{_onkeyup}}
+	@touchstart="{{_ontouchstart}}"
+	@touchend="{{_ontouchend}}"
+	tabindex={{tabIndexValue}}
+	aria-expanded="{{accessibilityAttributes.expanded}}"
+	aria-controls="{{accessibilityAttributes.controls}}"
+	aria-haspopup="{{accessibilityAttributes.hasPopup}}"
+	aria-label="{{ariaLabelText}}"
+	title="{{buttonTitle}}"
+	part="button"
+>
+	{{#if icon}}
+		<ui5-icon
+			class="ui5-button-icon"
+			name="{{icon}}"
+			accessible-role="{{iconRole}}"
+			part="icon"
+			?show-tooltip={{showIconTooltip}}
+		></ui5-icon>
+	{{/if}}
+
+	<span id="{{_id}}-content" class="ui5-button-text">
+		<bdi>
+			<slot></slot>
+		</bdi>
+	</span>
+
+	{{#if hasButtonType}}
+		<span class="ui5-hidden-text">{{buttonTypeText}}</span>
+	{{/if}}
+</button>
+
+{{#*inline "ariaPressed"}}{{/inline}}