docs: generate cem

docs/6-contributing/04-writing-samples.md

@@ -110,7 +110,7 @@ The above example includes only the `indeterminate`, `checked` properties in the
 
 
 ## Documentation
-The documentation for each component is automatically produced using the `custom-elements.json` file. Additionally, there is an `argTypes.ts` file located beside each `.stories.ts` file. It is generated during build time and contains extra properties that enhance the documentation beyond what is available in the `custom-elements.json` file. This file should not be edited directly, as it can only be modified by the `packages/playground/build-scripts-storybook/samples-prepare.js` script.
+The documentation for each component is automatically produced using the `custom-elements.json` file. Additionally, there is an `argTypes.ts` file located beside each `.stories.ts` file. It is generated during build time and contains extra properties that enhance the documentation beyond what is available in the `custom-elements.json` file. This file should not be edited directly, as it can only be modified by the `packages/playground/build-scripts-storybook/samples-prepare.ts` script.
 
 ### Docs page
 Every story has a `docs` page in the storybook's sidebar. Usually, this page is generated automatically by storybook but it can be customized by adding a `docs` property to the story parameters. 

packages/base/package-scripts.cjs

@@ -6,7 +6,6 @@ const stylesScript = resolve.sync("@ui5/webcomponents-base/lib/generate-styles/i
 const versionScript = resolve.sync("@ui5/webcomponents-base/lib/generate-version-info/index.js");
 const copyUsedModules = resolve.sync("@ui5/webcomponents-tools/lib/copy-list/index.js");
 const esmAbsToRel = resolve.sync("@ui5/webcomponents-tools/lib/esm-abs-to-rel/index.js");
-const preprocessJSDocScript = resolve.sync("@ui5/webcomponents-tools/lib/jsdoc/preprocess.js");
 
 const LIB = path.join(__dirname, `../tools/lib/`);
 
@@ -43,11 +42,9 @@ const scripts = {
 	generateStyles: `node "${stylesScript}"`,
 	generateTemplates: `mkdirp src/generated/templates && cross-env UI5_BASE=true UI5_TS=true node "${LIB}/hbs2ui5/index.js" -d test/elements -o src/generated/templates`,
 	generateAPI: {
-		default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup",
-		prepare: `copy-and-watch "dist/**/*.js" jsdoc-dist/`,
-		preprocess: `node "${preprocessJSDocScript}" jsdoc-dist/`,
-		jsdoc: `jsdoc -c "${LIB}/jsdoc/configTypescript.json"`,
-		cleanup: "rimraf jsdoc-dist/"
+		default: "nps generateAPI.generateCEM generateAPI.validateCEM",
+		generateCEM: `cem analyze --config  "${LIB}/cem/custom-elements-manifest.config.mjs"`,
+		validateCEM: `node "${LIB}/cem/validate.js"`,
 	},
 	watch: {
 		default: 'concurrently "nps watch.src" "nps watch.styles"',

packages/base/src/MediaRange.ts

@@ -11,8 +11,6 @@ DEAFULT_RANGE_SET.set("XL", [1440, Infinity]);
 /**
  * Enumeration containing the names and settings of predefined screen width media query range sets.
  *
- * @namespace
- * @name MediaRange.RANGESETS
  * @public
  */
  enum RANGESETS {
@@ -27,7 +25,6 @@ DEAFULT_RANGE_SET.set("XL", [1440, Infinity]);
 	 * <li><code>"XL"</code>: For screens greater than or equal to 1440 pixels.</li>
 	 * </ul>
 	 *
-	 * @name MediaRange.RANGESETS.RANGE_4STEPS
 	 * @public
 	 */
 	RANGE_4STEPS = "4Step",
@@ -49,10 +46,9 @@ DEAFULT_RANGE_SET.set("XL", [1440, Infinity]);
  * <li><code>"Large"</code>: For screens greater than or equal to 400 pixels.</li>
  * </ul>
  *
- * @param {string} name The name of the range set to be initialized.
+ * @param name The name of the range set to be initialized.
  * The name must be a valid id and consist only of letters and numeric digits.
- * @param {Range} [range] The given range set.
- * @name MediaRange.initRangeSet
+ * @param range The given range set.
  */
 const initRangeSet = (name: string, range: Range) => {
 	mediaRanges.set(name, range);
@@ -64,13 +60,10 @@ const initRangeSet = (name: string, range: Range) => {
  * If the optional parameter <code>width</code> is given, the active range will be determined for that width,
  * otherwise it is determined for the current window size.
  *
- * @param {string} name The name of the range set. The range set must be initialized beforehand ({@link MediaRange.initRangeSet})
- * @param {number} [width] An optional width, based on which the range should be determined;
+ * @param name The name of the range set. The range set must be initialized beforehand ({@link MediaRange.initRangeSet})
+ * @param [width] An optional width, based on which the range should be determined;
  * If <code>width</code> is not provided, the window size will be used.
- * @returns {string} The name of the current active interval of the range set.
- *
- * @name MediaRange.getCurrentRange
- * @function
+ * @returns The name of the current active interval of the range set.
  * @public
  */
 const getCurrentRange = (name: string, width = window.innerWidth): string => {
@@ -94,11 +87,7 @@ const getCurrentRange = (name: string, width = window.innerWidth): string => {
 
 /**
  * API for screen width changes.
- *
- * @namespace
- * @name MediaRange
  */
-
 const MediaRange = {
 	RANGESETS,
 	initRangeSet,

packages/base/src/StaticAreaItem.ts

@@ -10,9 +10,7 @@ const pureTagName = "ui5-static-area-item";
 const popupIntegrationAttr = "data-sap-ui-integration-popup-content";
 
 /**
- *
  * @class
- * @author SAP SE
  * @private
  */
 class StaticAreaItem extends HTMLElement {
@@ -26,7 +24,7 @@ class StaticAreaItem extends HTMLElement {
 	}
 
 	/**
-	 * @param {UI5Element} ownerElement the UI5Element instance that owns this static area item
+	 * @param ownerElement the UI5Element instance that owns this static area item
 	 */
 	setOwnerElement(ownerElement: UI5Element) {
 		this.ownerElement = ownerElement;
@@ -83,8 +81,8 @@ class StaticAreaItem extends HTMLElement {
 	}
 
 	/**
-	 * @protected
 	 * Returns reference to the DOM element where the current fragment is added.
+	 * @protected
 	 */
 	async getDomRef() {
 		this.updateAdditionalProperties();