@ui5/create-webcomponents-package 0.0.0-c0e494b02 → 0.0.0-c48b38fdc

package/CHANGELOG.md

@@ -3,6 +3,510 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.24.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.2...v1.24.3) (2024-05-14)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.24.0](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.4...v1.24.0) (2024-04-04)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.24.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.3...v1.24.0-rc.4) (2024-04-04)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.24.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.0...v1.24.0-rc.1) (2024-03-15)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.24.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.23.1...v1.24.0-rc.0) (2024-03-14)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.23.1](https://github.com/SAP/ui5-webcomponents/compare/v1.23.1-rc.0...v1.23.1) (2024-03-08)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.23.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.23.0...v1.23.1-rc.0) (2024-03-07)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.23.0](https://github.com/SAP/ui5-webcomponents/compare/v1.23.0-rc.5...v1.23.0) (2024-03-06)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.23.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.23.0-rc.4...v1.23.0-rc.5) (2024-02-29)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.23.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.23.0-rc.3...v1.23.0-rc.4) (2024-02-26)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.23.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.23.0-rc.2...v1.23.0-rc.3) (2024-02-22)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.23.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.23.0-rc.1...v1.23.0-rc.2) (2024-02-20)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.23.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.23.0-rc.0...v1.23.0-rc.1) (2024-02-19)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.23.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.22.1-rc.0...v1.23.0-rc.0) (2024-02-15)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.22.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.22.0...v1.22.1-rc.0) (2024-02-08)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.22.0](https://github.com/SAP/ui5-webcomponents/compare/v1.22.0-rc.3...v1.22.0) (2024-02-05)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.22.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.22.0-rc.2...v1.22.0-rc.3) (2024-02-01)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.22.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.22.0-rc.1...v1.22.0-rc.2) (2024-01-25)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.22.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.22.0-rc.0...v1.22.0-rc.1) (2024-01-18)
+
+
+### Bug Fixes
+
+* broken test page ([#8097](https://github.com/SAP/ui5-webcomponents/issues/8097)) ([6903367](https://github.com/SAP/ui5-webcomponents/commit/6903367c290b84490c74a6ef56b074aa0a2fc729))
+
+
+
+
+
+# [1.22.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0...v1.22.0-rc.0) (2024-01-11)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.21.0](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.5...v1.21.0) (2024-01-05)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.21.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.4...v1.21.0-rc.5) (2024-01-04)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.21.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.3...v1.21.0-rc.4) (2023-12-28)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.21.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.2...v1.21.0-rc.3) (2023-12-21)
+
+
+### Features
+
+* **tools:** Optimize build by switching css processing to esbuild ([#8008](https://github.com/SAP/ui5-webcomponents/issues/8008)) ([b4d411f](https://github.com/SAP/ui5-webcomponents/commit/b4d411f00f8d74ccecb2d02254126243faf53dfd))
+
+
+
+
+
+# [1.21.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.1...v1.21.0-rc.2) (2023-12-14)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.21.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.21.0-rc.0...v1.21.0-rc.1) (2023-12-08)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.21.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0...v1.21.0-rc.0) (2023-12-07)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.20.0](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.3...v1.20.0) (2023-12-04)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.20.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.2...v1.20.0-rc.3) (2023-11-30)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.20.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.1...v1.20.0-rc.2) (2023-11-23)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.19.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.0...v1.19.0-rc.1) (2023-10-19)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.17.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.2...v1.17.0) (2023-09-01)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.16.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0-rc.4...v1.16.0) (2023-08-03)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.16.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0-rc.3...v1.16.0-rc.4) (2023-08-03)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.16.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0-rc.2...v1.16.0-rc.3) (2023-07-27)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.16.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0-rc.1...v1.16.0-rc.2) (2023-07-20)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.16.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0-rc.0...v1.16.0-rc.1) (2023-07-13)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.16.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.15.1...v1.16.0-rc.0) (2023-07-06)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.15.1](https://github.com/SAP/ui5-webcomponents/compare/v1.15.0...v1.15.1) (2023-06-30)
+
+
+### Bug Fixes
+
+* **framework:** fix links in starting page of new pkg [ci skip] ([475fed5](https://github.com/SAP/ui5-webcomponents/commit/475fed55504f4a15e8b26aaf3c9e4d73b55976ec))
+
+
+
+
+
+# [1.15.0](https://github.com/SAP/ui5-webcomponents/compare/v1.15.0-rc.2...v1.15.0) (2023-06-30)
+
+
+### Bug Fixes
+
+* fix image in `create-webcomponent-package` ([#7253](https://github.com/SAP/ui5-webcomponents/issues/7253)) ([3317e64](https://github.com/SAP/ui5-webcomponents/commit/3317e64b911f992abf34b88a48e6003a723f7b9e))
+
+
+
+
+
+# [1.15.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.15.0-rc.1...v1.15.0-rc.2) (2023-06-22)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.15.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.15.0-rc.0...v1.15.0-rc.1) (2023-06-15)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+
+
+
+
+# [1.15.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.14.0...v1.15.0-rc.0) (2023-06-08)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.14.0](https://github.com/SAP/ui5-webcomponents/compare/v1.14.0-rc.2...v1.14.0) (2023-06-01)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.14.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.14.0-rc.1...v1.14.0-rc.2) (2023-06-01)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
 # [1.14.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.14.0-rc.0...v1.14.0-rc.1) (2023-05-25)
 
 **Note:** Version bump only for package @ui5/create-webcomponents-package

package/README.md

@@ -1,5 +1,6 @@
 ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
 
+
 # UI5 Web Components - Create Package
 
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
@@ -18,8 +19,8 @@ Usage:
 
 Options:
     --name <string>     - defines the package name
-    --componentName <string>      - defines the component class name that will be created in your new package
-    --tag <string>      - defines the tag name of the sample web component that will be created in your new package. The tag will be derived from the component name if not provided. 
+    --component-name <string>      - defines the component class name that will be created in your new package
+    --tag <string>      - defines the tag name of the sample web component that will be created in your new package. The tag will be derived from the component name if not provided.
     --enable-typescript - enables TypeScript support for the package
     --skip              - skips configuration and generates package with a default value for each parameter that wasn't passed
 ```
@@ -34,6 +35,7 @@ Usage:
     yarn create @ui5/webcomponents-package [OPTIONS]
 Options:
     --name <string>     - defines the package name
+    --component-name <string>      - defines the component class name that will be created in your new package
     --tag <string>      - defines the tag name of the sample web component that will be created in your new package
     --enable-typescript - enables TypeScript support for the package
     --skip              - skips configuration and generates package with a default value for each parameter that wasn't passed
@@ -48,7 +50,7 @@ components package.
 - [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
 
 ## Support
-We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).
 
 ## Contribute
 Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).

package/create-package.js

@@ -25,6 +25,9 @@ const isJSRelatedFile = sourcePath => {
 const isGitIgnore = sourcePath => {
 	return sourcePath.includes("gitignore");
 };
+const isLogo = sourcePath => {
+	return sourcePath.includes("logo");
+};
 const isNPMRC = sourcePath => {
 	return sourcePath.includes("npmrc");
 };
@@ -69,6 +72,11 @@ const copyFile = (vars, sourcePath, destPath) => {
 		return;
 	}
 
+	if (isLogo(sourcePath)) {
+		fs.copyFileSync(sourcePath, destPath);
+		return;
+	}
+
 	let content = fs.readFileSync(sourcePath, { encoding: "UTF-8" });
 	content = replaceVarsInFileContent(vars, content);
 	destPath = replaceVarsInFileName(vars, destPath);
@@ -113,7 +121,7 @@ const generateFilesContent = (packageName, componentName, namespace, typescript,
 	};
 
 	const packageContent = {
-		packageName,
+		name: packageName,
 		version: "0.0.1",
 		ui5: {
 			webComponentsPackage: true,
@@ -146,7 +154,7 @@ const generateFilesContent = (packageName, componentName, namespace, typescript,
 	};
 
 	if (typescript) {
-		packageContent.devDependencies.typescript = "^4.9.4";
+		packageContent.devDependencies.typescript = "5.2.2";
 	}
 
 	// Update package.json

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "0.0.0-c0e494b02",
+  "version": "0.0.0-c48b38fdc",
   "description": "UI5 Web Components: create package",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",

package/template/bundle.esm.js

@@ -6,7 +6,6 @@ import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
 import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
 
 // Enable additional themes and i18n texts
@@ -25,7 +24,6 @@ window["sap-ui-webcomponents-bundle"] = {
 		getNoConflict,
 		setNoConflict,
 		getCalendarType,
-		getRTL,
 		getFirstDayOfWeek,
 	},
 };

package/template/src/MyFirstComponent.hbs

@@ -1 +1,6 @@
-<div>This is: INIT_PACKAGE_VAR_TAG. {{pleaseWaitText}}</div>
+<div
+    class="root"
+    @click="{{onClick}}"
+>
+    {{counterText}} :: {{count}}
+</div>

package/template/src/MyFirstComponent.js

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 
 // Template
 import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
@@ -8,14 +9,24 @@ import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACK
 // Styles
 import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
 
-import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
+import { COUNT } from "./generated/i18n/i18n-defaults.js";
 
 /**
  * @public
  */
 const metadata = {
 	tag: "INIT_PACKAGE_VAR_TAG",
-	properties: {
+	properties: /** @lends INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME.prototype */ {
+		/**
+		 * Defines the count of the component.
+		 * @type { sap.ui.webc.base.types.Integer }
+		 * @defaultvalue 0
+		 * @public
+		 */
+		count: {
+			type: Integer,
+			defaultValue: 0,
+		},
 	},
 	slots: {
 	},
@@ -57,8 +68,12 @@ class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
 		INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
 	}
 
-	get pleaseWaitText() {
-		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(PLEASE_WAIT);
+	onClick() {
+		this.count++;
+	}
+
+	get counterText() {
+		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNT);
 	}
 }
 

package/template/src/MyFirstComponent.ts

@@ -1,8 +1,10 @@
 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 
 // Template
 import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
@@ -10,7 +12,7 @@ import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACK
 // Styles
 import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
 
-import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
+import { COUNT } from "./generated/i18n/i18n-defaults.js";
 
 /**
  * @class
@@ -20,9 +22,7 @@ import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
  * The <code>INIT_PACKAGE_VAR_TAG</code> component is a demo component that displays some text.
  *
  * @constructor
- * @alias INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME
- * @extends sap.ui.webc.base.UI5Element
- * @tagname INIT_PACKAGE_VAR_TAG
+ * @extends UI5Element
  * @public
  */
 @customElement({
@@ -38,8 +38,20 @@ class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
 		INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
 	}
 
-	get pleaseWaitText() {
-		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(PLEASE_WAIT);
+	/**
+	 * Defines the component count.
+	 * @default 0
+	 * @public
+	 */
+	@property({ validator: Integer, defaultValue: 0 })
+	count!: number;
+
+	onClick() {
+		this.count++;
+	}
+
+	get counterText() {
+		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNT);
 	}
 }
 

package/template/src/i18n/messagebundle.properties

@@ -1,2 +1,3 @@
-#please wait text for the sample component
-PLEASE_WAIT=wait
+# the "counter" text for the sample component
+COUNT=Count
+

package/template/src/i18n/messagebundle_de.properties

@@ -1 +1 @@
-PLEASE_WAIT=Bitte warten
+COUNT=Zählung

package/template/src/i18n/messagebundle_en.properties

@@ -1 +1 @@
-PLEASE_WAIT=Please wait
+COUNT=Count

package/template/src/i18n/messagebundle_es.properties

@@ -1 +1 @@
-PLEASE_WAIT=Espere
+COUNT=Cuenta

package/template/src/i18n/messagebundle_fr.properties

@@ -1 +1 @@
-PLEASE_WAIT=Patientez.
+COUNT=Comte

package/template/src/themes/MyFirstComponent.css

@@ -1,11 +1,17 @@
-:host {
-    border: 2px solid var(--my-component-border-color);
-    background-color: var(--sapBackgroundColor);
-    color: var(--sapTextColor);
-    display: block;
-    width: 24rem;
-    height: 3rem;
-    text-align: center;
-    vertical-align: middle;
-    line-height: 3rem;
+.root {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	padding: 0 2rem;
+	color: var(--sapAvatar_6_TextColor);
+	background-color: var(--sapAvatar_6_Background);
+	border: 2px solid var(--my-component-border-color);
+	border-radius: 0.5rem;
+	box-shadow: var(--sapContent_Shadow0);
+	text-align: center;
+	line-height: 3rem;
+	font-size: 1.25rem;
+	user-select: none;
+	cursor: pointer;
 }

package/template/src/themes/sap_fiori_3/parameters-bundle.css

@@ -1,3 +1,3 @@
 :root {
-    --my-component-border-color: green;
+    --my-component-border-color: blue;
 }

package/template/src/themes/sap_horizon_dark/parameters-bundle.css

@@ -1,3 +1,3 @@
 :root {
-    --my-component-border-color: blue;
+    --my-component-border-color: darkblue;
 }

package/template/test/pages/css/index.css

@@ -0,0 +1,36 @@
+body {
+	color: var(--sapTextColor);
+	background-color: var(--sapBackgroundColor);
+	font-size: var(--sapFontSize);
+	font-family: var(--sapFontFamily);
+}
+
+h1 {
+	font-size: var(--sapFontHeader2Size);
+	margin-bottom: 0.5rem;
+}
+
+h2 {
+	font-size: var(--sapFontHeader3Size);
+	margin-bottom: 0.5rem;
+}
+
+.app, .app-settings, .app-docs, .app-first-component  {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+.app-first-component {
+	margin-bottom: 3rem;
+}
+
+.app-docs {
+	margin-top: 3rem;
+}
+
+a {
+	margin: 0.25rem;
+	color: var(--sapLinkColor);
+}

package/template/test/pages/index.html

@@ -10,44 +10,48 @@
 
 	<script data-ui5-config type="application/json">
 		{
+			"theme": "sap_horizon_dark",
 			"language": "EN"
 		}
 	</script>
 
+	<link rel="stylesheet" type="text/css" href="./css/index.css">
 	<script src="../../bundle.esm.js" type="module"></script>
-
-    <style>
-        code { color: blue; font-size: small; }
-    </style>
-
 </head>
 
 <body>
-	<ul>
-	    <li><a href="?sap-ui-theme=sap_fiori_3">Fiori 3</a></li>
-		<li><a href="?sap-ui-theme=sap_fiori_3_dark">Fiori 3 Dark</a></li>
-		<li><a href="?sap-ui-theme=sap_fiori_3_hcb">Fiori 3 High Contrast Black</a></li>
-		<li><a href="?sap-ui-theme=sap_fiori_3_hcw">Fiori 3 High Contrast White</a></li>
-		<li><a href="?sap-ui-theme=sap_horizon">Horizon</a></li>
-		<li><a href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a></li>
-		<li><a href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a></li>
-		<li><a href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a></li>
-	</ul>
-    <br>
-    <span>or in the browser console, for example:</span>
-    <code>window['sap-ui-webcomponents-bundle'].configuration.setTheme("sap_horizon_hcb")</code>
-
-    <br><br>
-
-    <a href="?sap-ui-language=en">English</a> |
-    <a href="?sap-ui-language=de">German</a> |
-    <a href="?sap-ui-language=es">Spanish</a> |
-    <a href="?sap-ui-language=fr">French</a>
-
-    <br><br>
-
-    <h1>Test your web components here</h1>
-    <INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
+	<div class="app">
+		<a href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-getting-started-first-steps--docs" target="_blank"><img src="./img/logo.png" alt="logo"/></a>
+
+		<div class="app-first-component">
+			<h1>Hooray! It's Your First Web Component!</h1>
+			<div> <pre>&lt;INIT_PACKAGE_VAR_TAG>&lt;/INIT_PACKAGE_VAR_TAG> </pre></div>
+			<INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
+		</div>
+
+		<div class="app-settings">
+
+			<h2>Switch themes</h2>
+			<div style="display: flex; flex-direction: row;">
+				<a class="link" href="?sap-ui-theme=sap_horizon">Horizon</a>
+				<a class="link" href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a>
+				<a class="link" href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a>
+				<a class="link" href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a>
+			</div>
+
+			<h2>Switch language</h2>
+			<div>
+				<a class="link" href="?sap-ui-language=en">English</a>
+				<a class="link" href="?sap-ui-language=de">German</a>
+				<a class="link" href="?sap-ui-language=es">Spanish</a>
+				<a class="link" href="?sap-ui-language=fr">French</a>
+			</div>
+		</div>
+
+		<div class="app-docs">
+			<h2>Documentation</h2>
+			<a class="link" href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-development-custom-ui5-web-components-packages--docs">Custom Component Development</a>
+		</div>
+	</div>
 </body>
-
 </html>

package/template/test/specs/Demo.spec.js

@@ -6,7 +6,6 @@ describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
 	});
 
 	it("tests if web component is correctly rendered", async () => {
-
 		const innerContent = await browser.$("#myFirstComponent").shadow$("div");
 
 		assert.ok(innerContent, "content rendered");

package/template/tsconfig.json

@@ -2,6 +2,7 @@
     "include": ["src/**/*", "global.d.ts"],
     "compilerOptions": {
       "target": "ES2021",
+      "lib": ["DOM", "DOM.Iterable", "ES2023"],
       // Generate d.ts files
       "declaration": true,
       "outDir": "dist",

package/template/config/postcss.components/postcss.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/postcss.components.js"); // eslint-disable-line

package/template/config/postcss.themes/postcss.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/postcss.themes.js"); // eslint-disable-line

package/template/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: blue;
-}

package/template/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: lightblue;
-}

package/template/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: gray;
-}