@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/CardHeader.js

@@ -13,7 +13,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { isFirefox } from "@ui5/webcomponents-base/dist/Device.js";
+import { isFirefox, isDesktop, } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CardHeaderTemplate from "./generated/templates/CardHeaderTemplate.lit.js";
 import { AVATAR_TOOLTIP, ARIA_ROLEDESCRIPTION_CARD_HEADER, ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER, } from "./generated/i18n/i18n-defaults.js";
@@ -21,30 +21,33 @@ import { AVATAR_TOOLTIP, ARIA_ROLEDESCRIPTION_CARD_HEADER, ARIA_ROLEDESCRIPTION_
 import cardHeaderCss from "./generated/themes/CardHeader.css.js";
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-card-header</code> is a component, meant to be used as a header of the <code>ui5-card</code> component.
- * It displays valuable information, that can be defined with several properties, such as: <code>titleText</code>, <code>subtitleText</code>, <code>status</code>
- * and two slots: <code>avatar</code> and <code>action</code>.
+ * The `ui5-card-header` is a component, meant to be used as a header of the `ui5-card` component.
+ * It displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `additionalText`
+ * and two slots: `avatar` and `action`.
  *
- * <h3>Keyboard handling</h3>
- * In case you enable <code>interactive</code> property, you can press the <code>ui5-card-header</code> by Space and Enter keys.
+ * ### Keyboard handling
+ * In case you enable `interactive` property, you can press the `ui5-card-header` by Space and Enter keys.
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/CardHeader";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/CardHeader";`
  * @constructor
- * @implements {ICardHeader}
  * @extends UI5Element
  * @public
  * @since 1.0.0-rc.15
  * @csspart root - Used to style the root DOM element of the CardHeader
  * @csspart title - Used to style the title of the CardHeader
  * @csspart subtitle - Used to style the subtitle of the CardHeader
- * @csspart status - Used to style the status of the CardHeader
+ * @csspart additional-text - Used to style the additional text of the CardHeader
  */
 let CardHeader = CardHeader_1 = class CardHeader extends UI5Element {
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
     get classes() {
         return {
             root: {
@@ -75,8 +78,8 @@ let CardHeader = CardHeader_1 = class CardHeader extends UI5Element {
         if (this.subtitleText) {
             labels.push(`${this._id}-subtitle`);
         }
-        if (this.status) {
-            labels.push(`${this._id}-status`);
+        if (this.additionalText) {
+            labels.push(`${this._id}-additionalText`);
         }
         if (this.hasAvatar) {
             labels.push(`${this._id}-avatar`);
@@ -139,7 +142,7 @@ __decorate([
 ], CardHeader.prototype, "subtitleText", void 0);
 __decorate([
     property()
-], CardHeader.prototype, "status", void 0);
+], CardHeader.prototype, "additionalText", void 0);
 __decorate([
     property({ type: Boolean })
 ], CardHeader.prototype, "interactive", void 0);
@@ -165,8 +168,8 @@ CardHeader = CardHeader_1 = __decorate([
     })
     /**
      * Fired when the component is activated by mouse/tap or by using the Enter or Space key.
-     * <br><br>
-     * <b>Note:</b> The event would be fired only if the <code>interactive</code> property is set to true.
+     *
+     * **Note:** The event would be fired only if the `interactive` property is set to true.
      * @public
      */
     ,

package/dist/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../src/CardHeader.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isFirefox } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport type { ICardHeader } from \"./Interfaces.js\";\nimport CardHeaderTemplate from \"./generated/templates/CardHeaderTemplate.lit.js\";\n\nimport {\n\tAVATAR_TOOLTIP,\n\tARIA_ROLEDESCRIPTION_CARD_HEADER,\n\tARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport cardHeaderCss from \"./generated/themes/CardHeader.css.js\";\n\n/**\n * @class\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-card-header</code> is a component, meant to be used as a header of the <code>ui5-card</code> component.\n * It displays valuable information, that can be defined with several properties, such as: <code>titleText</code>, <code>subtitleText</code>, <code>status</code>\n * and two slots: <code>avatar</code> and <code>action</code>.\n *\n * <h3>Keyboard handling</h3>\n * In case you enable <code>interactive</code> property, you can press the <code>ui5-card-header</code> by Space and Enter keys.\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/CardHeader\";</code>\n *\n * @constructor\n * @implements {ICardHeader}\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.15\n * @csspart root - Used to style the root DOM element of the CardHeader\n * @csspart title - Used to style the title of the CardHeader\n * @csspart subtitle - Used to style the subtitle of the CardHeader\n * @csspart status - Used to style the status of the CardHeader\n */\n@customElement({\n\ttag: \"ui5-card-header\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: CardHeaderTemplate,\n\tstyles: cardHeaderCss,\n})\n/**\n * Fired when the component is activated by mouse/tap or by using the Enter or Space key.\n * <br><br>\n * <b>Note:</b> The event would be fired only if the <code>interactive</code> property is set to true.\n * @public\n */\n@event(\"click\")\nclass CardHeader extends UI5Element implements ICardHeader {\n\t/**\n\t * Defines the title text.\n\t * @default \"\"\n\t * @public\n\t*/\n\t@property()\n\ttitleText!: string;\n\n\t/**\n\t * Defines the subtitle text.\n\t * @default \"\"\n\t * @public\n\t*/\n\t@property()\n\tsubtitleText!: string;\n\n\t/**\n\t * Defines the status text.\n\t * @default \"\"\n\t * @public\n\t*/\n\t@property()\n\tstatus!: string;\n\n\t/**\n\t * Defines if the component would be interactive,\n\t * e.g gets hover effect, gets focus outline and <code>click</code> event is fired, when pressed.\n\t * @default false\n\t * @public\n\t*/\n\t@property({ type: Boolean })\n\tinteractive!: boolean;\n\n\t/**\n\t * Define the <code>aria-level</code> attribute of the component\n\t * <b>Note: </b> If the interactive property is set, <code>aria-level</code> attribute is not rendered at all.\n\t * @private\n\t * @default 3\n\t*/\n\t@property({ validator: Integer, defaultValue: 3 })\n\t_ariaLevel!: number;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_headerActive!: boolean;\n\n\t/**\n\t * Defines an avatar image, displayed in the left most part of the header.\n\t * @public\n\t*/\n\t@slot()\n\tavatar!: Array<HTMLElement>;\n\n\t/**\n\t * Defines an action, displayed in the right most part of the header.\n\t * @public\n\t*/\n\t@slot()\n\taction!: Array<HTMLElement>;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-card-header\": true,\n\t\t\t\t\"ui5-card-header--interactive\": this.interactive,\n\t\t\t\t\"ui5-card-header--active\": this.interactive && this._headerActive,\n\t\t\t\t\"ui5-card-header-ff\": isFirefox(),\n\t\t\t},\n\t\t};\n\t}\n\n\tget _root() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-card-header\")!;\n\t}\n\n\tget ariaRoleDescription() {\n\t\treturn this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);\n\t}\n\n\tget ariaRoleFocusableElement() {\n\t\treturn this.interactive ? \"button\" : null;\n\t}\n\n\tget ariaCardAvatarLabel() {\n\t\treturn CardHeader.i18nBundle.getText(AVATAR_TOOLTIP);\n\t}\n\n\tget ariaLabelledBy() {\n\t\tconst labels = [];\n\n\t\tif (this.titleText) {\n\t\t\tlabels.push(`${this._id}-title`);\n\t\t}\n\n\t\tif (this.subtitleText) {\n\t\t\tlabels.push(`${this._id}-subtitle`);\n\t\t}\n\n\t\tif (this.status) {\n\t\t\tlabels.push(`${this._id}-status`);\n\t\t}\n\n\t\tif (this.hasAvatar) {\n\t\t\tlabels.push(`${this._id}-avatar`);\n\t\t}\n\n\t\treturn labels.length !== 0 ? labels.join(\" \") : undefined;\n\t}\n\n\tget hasAvatar() {\n\t\treturn !!this.avatar.length;\n\t}\n\n\tget hasAction() {\n\t\treturn !!this.action.length;\n\t}\n\n\tstatic async onDefine() {\n\t\tCardHeader.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\t_actionsFocusin() {\n\t\tthis._root.classList.add(\"ui5-card-header-hide-focus\");\n\t}\n\n\t_actionsFocusout() {\n\t\tthis._root.classList.remove(\"ui5-card-header-hide-focus\");\n\t}\n\n\t_click(e: MouseEvent) {\n\t\t// prevents the native browser \"click\" event from firing\n\t\te.stopImmediatePropagation();\n\n\t\tif (this.interactive && this._root.contains(e.target as HTMLElement)) {\n\t\t\tthis.fireEvent(\"click\");\n\t\t}\n\t}\n\n\t_keydown(e: KeyboardEvent) {\n\t\tif (!this.interactive || !this._root.contains(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst enter = isEnter(e);\n\t\tconst space = isSpace(e);\n\n\t\tthis._headerActive = enter || space;\n\n\t\tif (enter) {\n\t\t\tthis.fireEvent(\"click\");\n\t\t\treturn;\n\t\t}\n\n\t\tif (space) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_keyup(e: KeyboardEvent) {\n\t\tif (!this.interactive || !this._root.contains(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst space = isSpace(e);\n\n\t\tthis._headerActive = false;\n\n\t\tif (space) {\n\t\t\tthis.fireEvent(\"click\");\n\t\t}\n\t}\n}\n\nCardHeader.define();\n\nexport default CardHeader;\nexport type {\n\tICardHeader,\n};\n"]}
+{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../src/CardHeader.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n\tisFirefox,\n\tisDesktop,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport CardHeaderTemplate from \"./generated/templates/CardHeaderTemplate.lit.js\";\n\nimport {\n\tAVATAR_TOOLTIP,\n\tARIA_ROLEDESCRIPTION_CARD_HEADER,\n\tARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport cardHeaderCss from \"./generated/themes/CardHeader.css.js\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-card-header` is a component, meant to be used as a header of the `ui5-card` component.\n * It displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `additionalText`\n * and two slots: `avatar` and `action`.\n *\n * ### Keyboard handling\n * In case you enable `interactive` property, you can press the `ui5-card-header` by Space and Enter keys.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/CardHeader\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.15\n * @csspart root - Used to style the root DOM element of the CardHeader\n * @csspart title - Used to style the title of the CardHeader\n * @csspart subtitle - Used to style the subtitle of the CardHeader\n * @csspart additional-text - Used to style the additional text of the CardHeader\n */\n@customElement({\n\ttag: \"ui5-card-header\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: CardHeaderTemplate,\n\tstyles: cardHeaderCss,\n})\n/**\n * Fired when the component is activated by mouse/tap or by using the Enter or Space key.\n *\n * **Note:** The event would be fired only if the `interactive` property is set to true.\n * @public\n */\n@event(\"click\")\nclass CardHeader extends UI5Element {\n\t/**\n\t * Defines the title text.\n\t * @default \"\"\n\t * @public\n\t*/\n\t@property()\n\ttitleText!: string;\n\n\t/**\n\t * Defines the subtitle text.\n\t * @default \"\"\n\t * @public\n\t*/\n\t@property()\n\tsubtitleText!: string;\n\n\t/**\n\t * Defines the additional text.\n\t * @default \"\"\n\t * @public\n\t*/\n\t@property()\n\tadditionalText!: string;\n\n\t/**\n\t * Defines if the component would be interactive,\n\t * e.g gets hover effect, gets focus outline and `click` event is fired, when pressed.\n\t * @default false\n\t * @public\n\t*/\n\t@property({ type: Boolean })\n\tinteractive!: boolean;\n\n\t/**\n\t * Define the `aria-level` attribute of the component\n\t *\n\t * **Note: ** If the interactive property is set, `aria-level` attribute is not rendered at all.\n\t * @private\n\t * @default 3\n\t*/\n\t@property({ validator: Integer, defaultValue: 3 })\n\t_ariaLevel!: number;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_headerActive!: boolean;\n\n\t/**\n\t * Defines an avatar image, displayed in the left most part of the header.\n\t * @public\n\t*/\n\t@slot()\n\tavatar!: Array<HTMLElement>;\n\n\t/**\n\t * Defines an action, displayed in the right most part of the header.\n\t * @public\n\t*/\n\t@slot()\n\taction!: Array<HTMLElement>;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-card-header\": true,\n\t\t\t\t\"ui5-card-header--interactive\": this.interactive,\n\t\t\t\t\"ui5-card-header--active\": this.interactive && this._headerActive,\n\t\t\t\t\"ui5-card-header-ff\": isFirefox(),\n\t\t\t},\n\t\t};\n\t}\n\n\tget _root() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-card-header\")!;\n\t}\n\n\tget ariaRoleDescription() {\n\t\treturn this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);\n\t}\n\n\tget ariaRoleFocusableElement() {\n\t\treturn this.interactive ? \"button\" : null;\n\t}\n\n\tget ariaCardAvatarLabel() {\n\t\treturn CardHeader.i18nBundle.getText(AVATAR_TOOLTIP);\n\t}\n\n\tget ariaLabelledBy() {\n\t\tconst labels = [];\n\n\t\tif (this.titleText) {\n\t\t\tlabels.push(`${this._id}-title`);\n\t\t}\n\n\t\tif (this.subtitleText) {\n\t\t\tlabels.push(`${this._id}-subtitle`);\n\t\t}\n\n\t\tif (this.additionalText) {\n\t\t\tlabels.push(`${this._id}-additionalText`);\n\t\t}\n\n\t\tif (this.hasAvatar) {\n\t\t\tlabels.push(`${this._id}-avatar`);\n\t\t}\n\n\t\treturn labels.length !== 0 ? labels.join(\" \") : undefined;\n\t}\n\n\tget hasAvatar() {\n\t\treturn !!this.avatar.length;\n\t}\n\n\tget hasAction() {\n\t\treturn !!this.action.length;\n\t}\n\n\tstatic async onDefine() {\n\t\tCardHeader.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\t_actionsFocusin() {\n\t\tthis._root.classList.add(\"ui5-card-header-hide-focus\");\n\t}\n\n\t_actionsFocusout() {\n\t\tthis._root.classList.remove(\"ui5-card-header-hide-focus\");\n\t}\n\n\t_click(e: MouseEvent) {\n\t\t// prevents the native browser \"click\" event from firing\n\t\te.stopImmediatePropagation();\n\n\t\tif (this.interactive && this._root.contains(e.target as HTMLElement)) {\n\t\t\tthis.fireEvent(\"click\");\n\t\t}\n\t}\n\n\t_keydown(e: KeyboardEvent) {\n\t\tif (!this.interactive || !this._root.contains(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst enter = isEnter(e);\n\t\tconst space = isSpace(e);\n\n\t\tthis._headerActive = enter || space;\n\n\t\tif (enter) {\n\t\t\tthis.fireEvent(\"click\");\n\t\t\treturn;\n\t\t}\n\n\t\tif (space) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_keyup(e: KeyboardEvent) {\n\t\tif (!this.interactive || !this._root.contains(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst space = isSpace(e);\n\n\t\tthis._headerActive = false;\n\n\t\tif (space) {\n\t\t\tthis.fireEvent(\"click\");\n\t\t}\n\t}\n}\n\nCardHeader.define();\n\nexport default CardHeader;\n"]}

package/dist/Carousel.d.ts

@@ -4,7 +4,7 @@ import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnable
 import type { ScrollEnablementEventListenerParam } from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import CarouselArrowsPlacement from "./types/CarouselArrowsPlacement.js";
-import CarouselPageIndicatorStyle from "./types/CarouselPageIndicatorStyle.js";
+import CarouselPageIndicatorType from "./types/CarouselPageIndicatorType.js";
 import BackgroundDesign from "./types/BackgroundDesign.js";
 import BorderDesign from "./types/BorderDesign.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
@@ -15,53 +15,45 @@ type CarouselNavigateEventDetail = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  * The Carousel allows the user to browse through a set of items.
  * The component is mostly used for showing a gallery of images, but can hold any other HTML element.
- * <br>
+ *
  * There are several ways to perform navigation:
- * <ul>
- * <li>on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts.</li>
- * <li>on mobile - the user can use swipe gestures.</li>
- * </ul>
  *
- * <h3>Usage</h3>
+ * - on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.
+ * - on mobile - the user can use swipe gestures.
+ *
+ * ### Usage
  *
- * <h4>When to use:</h4>
+ * #### When to use:
  *
- * <ul>
- * <li>The items you want to display are very different from each other.</li>
- * <li>You want to display the items one after the other.</li>
- * </ul>
+ * - The items you want to display are very different from each other.
+ * - You want to display the items one after the other.
  *
- * <h4>When not to use:</h4>
+ * #### When not to use:
  *
- * <ul>
- * <li>The items you want to display need to be visible at the same time.</li>
- * <li>The items you want to display are uniform and very similar.</li>
- * </ul>
+ * - The items you want to display need to be visible at the same time.
+ * - The items you want to display are uniform and very similar.
  *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <h4>Basic Navigation</h4>
- * When the <code>ui5-carousel</code> is focused the user can navigate between the items
+ * #### Basic Navigation
+ * When the `ui5-carousel` is focused the user can navigate between the items
  * with the following keyboard shortcuts:
- * <br>
- * <ul>
- * <li>[UP/DOWN] - Navigates to previous and next item</li>
- * <li>[LEFT/RIGHT] - Navigates to previous and next item</li>
- * </ul>
  *
- * <h3>Fast Navigation</h3>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * - [Up] or [Down] - Navigates to previous and next item
+ * - [Left] or [Right] - Navigates to previous and next item
+ *
+ * ### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
  *
- * <h3>ES6 Module Import</h3>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <code>import "@ui5/webcomponents/dist/Carousel.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Carousel.js";`
  * @constructor
  * @extends UI5Element
  * @since 1.0.0-rc.6
@@ -70,34 +62,43 @@ type CarouselNavigateEventDetail = {
  */
 declare class Carousel extends UI5Element {
     /**
-     * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
-     * @default false
+     * Defines the accessible name of the component.
+     * @default ""
      * @public
+     * @since 1.24
      */
-    cyclic: boolean;
+    accessibleName: string;
     /**
-     * Defines the number of items per page on small size (up to 640px). One item per page shown by default.
-     * @default 1
+     * Defines the IDs of the elements that label the input.
+     * @default ""
      * @public
+     * @since 1.24
      */
-    itemsPerPageS: number;
+    accessibleNameRef: string;
     /**
-     * Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.
-     * @default 1
+     * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
+     * @default false
      * @public
      */
-    itemsPerPageM: number;
+    cyclic: boolean;
     /**
-     * Defines the number of items per page on large size (more than 1024px). One item per page shown by default.
-     * @default 1
+     * Defines the number of items per page depending on the carousel width.
+     *
+     * - 'S' for screens smaller than 600 pixels.
+     * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.
+     * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.
+     * - 'XL' for screens greater than or equal to 1440 pixels.
+     *
+     * One item per page is shown by default.
+     * @default "S1 M1 L1 XL1"
      * @public
      */
-    itemsPerPageL: number;
+    itemsPerPage: string;
     /**
      * Defines the visibility of the navigation arrows.
      * If set to true the navigation arrows will be hidden.
-     * <br><br>
-     * <b>Note:</b> The navigation arrows are never displayed on touch devices.
+     *
+     * **Note:** The navigation arrows are never displayed on touch devices.
      * In this case, the user can swipe to navigate through the items.
      * @since 1.0.0-rc.15
      * @default false
@@ -115,15 +116,14 @@ declare class Carousel extends UI5Element {
     /**
      * Defines the style of the page indicator.
      * Available options are:
-     * <ul>
-     * <li><code>Default</code> - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)</li>
-     * <li><code>Numeric</code> - The page indicator will display the current page and the total number of pages. (e.g. X of Y)</li>
-     * </ul>
+     *
+     * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)
+     * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)
      * @since 1.10
      * @default "Default"
      * @public
      */
-    pageIndicatorStyle: `${CarouselPageIndicatorStyle}`;
+    pageIndicatorType: `${CarouselPageIndicatorType}`;
     /**
      * Defines the carousel's background design.
      * @since 1.14
@@ -153,12 +153,11 @@ declare class Carousel extends UI5Element {
     _selectedIndex: number;
     /**
      * Defines the position of arrows.
-     * <br><br>
+     *
      * Available options are:
-     * <ul>
-     * <li><code>Content</code> - the arrows are placed on the sides of the current page.</li>
-     * <li><code>Navigation</code> - the arrows are placed on the sides of the page indicator.</li>
-     * </ul>
+     *
+     * - `Content` - the arrows are placed on the sides of the current page.
+     * - `Navigation` - the arrows are placed on the sides of the page indicator.
      * @default "Content"
      * @public
      */
@@ -284,6 +283,7 @@ declare class Carousel extends UI5Element {
     get selectedIndexToShow(): number;
     get ofText(): string;
     get ariaActiveDescendant(): string | undefined;
+    get ariaLabelTxt(): string | undefined;
     get nextPageText(): string;
     get previousPageText(): string;
     /**

package/dist/Carousel.js

@@ -20,9 +20,10 @@ import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { CAROUSEL_OF_TEXT, CAROUSEL_DOT_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT, CAROUSEL_NEXT_ARROW_TEXT, } from "./generated/i18n/i18n-defaults.js";
 import CarouselArrowsPlacement from "./types/CarouselArrowsPlacement.js";
-import CarouselPageIndicatorStyle from "./types/CarouselPageIndicatorStyle.js";
+import CarouselPageIndicatorType from "./types/CarouselPageIndicatorType.js";
 import BackgroundDesign from "./types/BackgroundDesign.js";
 import BorderDesign from "./types/BorderDesign.js";
 import CarouselTemplate from "./generated/templates/CarouselTemplate.lit.js";
@@ -35,53 +36,45 @@ import CarouselCss from "./generated/themes/Carousel.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  * The Carousel allows the user to browse through a set of items.
  * The component is mostly used for showing a gallery of images, but can hold any other HTML element.
- * <br>
+ *
  * There are several ways to perform navigation:
- * <ul>
- * <li>on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts.</li>
- * <li>on mobile - the user can use swipe gestures.</li>
- * </ul>
  *
- * <h3>Usage</h3>
+ * - on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.
+ * - on mobile - the user can use swipe gestures.
+ *
+ * ### Usage
  *
- * <h4>When to use:</h4>
+ * #### When to use:
  *
- * <ul>
- * <li>The items you want to display are very different from each other.</li>
- * <li>You want to display the items one after the other.</li>
- * </ul>
+ * - The items you want to display are very different from each other.
+ * - You want to display the items one after the other.
  *
- * <h4>When not to use:</h4>
+ * #### When not to use:
  *
- * <ul>
- * <li>The items you want to display need to be visible at the same time.</li>
- * <li>The items you want to display are uniform and very similar.</li>
- * </ul>
+ * - The items you want to display need to be visible at the same time.
+ * - The items you want to display are uniform and very similar.
  *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <h4>Basic Navigation</h4>
- * When the <code>ui5-carousel</code> is focused the user can navigate between the items
+ * #### Basic Navigation
+ * When the `ui5-carousel` is focused the user can navigate between the items
  * with the following keyboard shortcuts:
- * <br>
- * <ul>
- * <li>[UP/DOWN] - Navigates to previous and next item</li>
- * <li>[LEFT/RIGHT] - Navigates to previous and next item</li>
- * </ul>
  *
- * <h3>Fast Navigation</h3>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * - [Up] or [Down] - Navigates to previous and next item
+ * - [Left] or [Right] - Navigates to previous and next item
+ *
+ * ### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
  *
- * <h3>ES6 Module Import</h3>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <code>import "@ui5/webcomponents/dist/Carousel.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Carousel.js";`
  * @constructor
  * @extends UI5Element
  * @since 1.0.0-rc.6
@@ -115,6 +108,9 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
     }
     onEnterDOM() {
         ResizeHandler.register(this, this._onResizeBound);
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
     }
     onExitDOM() {
         ResizeHandler.deregister(this, this._onResizeBound);
@@ -301,16 +297,35 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         });
     }
     get effectiveItemsPerPage() {
+        const itemsPerPageArray = this.itemsPerPage.split(" ");
+        let itemsPerPageSizeS = 1, itemsPerPageSizeM = 1, itemsPerPageSizeL = 1, itemsPerPageSizeXL = 1;
+        itemsPerPageArray.forEach(element => {
+            if (element.startsWith("S")) {
+                itemsPerPageSizeS = Number(element.slice(1)) || 1;
+            }
+            else if (element.startsWith("M")) {
+                itemsPerPageSizeM = Number(element.slice(1)) || 1;
+            }
+            else if (element.startsWith("L")) {
+                itemsPerPageSizeL = Number(element.slice(1)) || 1;
+            }
+            else if (element.startsWith("XL")) {
+                itemsPerPageSizeXL = Number(element.slice(2)) || 1;
+            }
+        });
         if (!this._width) {
-            return this.itemsPerPageL;
+            return itemsPerPageSizeL;
+        }
+        if (this._width < 600) {
+            return itemsPerPageSizeS;
         }
-        if (this._width <= 640) {
-            return this.itemsPerPageS;
+        if (this._width >= 600 && this._width < 1024) {
+            return itemsPerPageSizeM;
         }
-        if (this._width <= 1024) {
-            return this.itemsPerPageM;
+        if (this._width >= 1024 && this._width < 1440) {
+            return itemsPerPageSizeL;
         }
-        return this.itemsPerPageL;
+        return itemsPerPageSizeXL;
     }
     isItemInViewport(index) {
         return index >= this._selectedIndex && index <= this._selectedIndex + this.effectiveItemsPerPage - 1;
@@ -375,7 +390,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         return items > this.effectiveItemsPerPage ? items - this.effectiveItemsPerPage + 1 : 1;
     }
     get isPageTypeDots() {
-        if (this.pageIndicatorStyle === CarouselPageIndicatorStyle.Numeric) {
+        if (this.pageIndicatorType === CarouselPageIndicatorType.Numeric) {
             return false;
         }
         return this.pagesCount < Carousel_1.pageTypeLimit;
@@ -419,6 +434,9 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
     get ariaActiveDescendant() {
         return this.content.length ? `${this._id}-carousel-item-${this._selectedIndex + 1}` : undefined;
     }
+    get ariaLabelTxt() {
+        return getEffectiveAriaLabelText(this);
+    }
     get nextPageText() {
         return Carousel_1.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);
     }
@@ -445,17 +463,17 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
     }
 };
 __decorate([
-    property({ type: Boolean })
-], Carousel.prototype, "cyclic", void 0);
+    property()
+], Carousel.prototype, "accessibleName", void 0);
 __decorate([
-    property({ validator: Integer, defaultValue: 1 })
-], Carousel.prototype, "itemsPerPageS", void 0);
+    property({ defaultValue: "" })
+], Carousel.prototype, "accessibleNameRef", void 0);
 __decorate([
-    property({ validator: Integer, defaultValue: 1 })
-], Carousel.prototype, "itemsPerPageM", void 0);
+    property({ type: Boolean })
+], Carousel.prototype, "cyclic", void 0);
 __decorate([
-    property({ validator: Integer, defaultValue: 1 })
-], Carousel.prototype, "itemsPerPageL", void 0);
+    property({ type: String, defaultValue: "S1 M1 L1 XL1" })
+], Carousel.prototype, "itemsPerPage", void 0);
 __decorate([
     property({ type: Boolean })
 ], Carousel.prototype, "hideNavigationArrows", void 0);
@@ -463,8 +481,8 @@ __decorate([
     property({ type: Boolean })
 ], Carousel.prototype, "hidePageIndicator", void 0);
 __decorate([
-    property({ type: CarouselPageIndicatorStyle, defaultValue: CarouselPageIndicatorStyle.Default })
-], Carousel.prototype, "pageIndicatorStyle", void 0);
+    property({ type: CarouselPageIndicatorType, defaultValue: CarouselPageIndicatorType.Default })
+], Carousel.prototype, "pageIndicatorType", void 0);
 __decorate([
     property({ type: BackgroundDesign, defaultValue: BackgroundDesign.Translucent })
 ], Carousel.prototype, "backgroundDesign", void 0);
@@ -508,8 +526,7 @@ Carousel = Carousel_1 = __decorate([
     /**
      * Fired whenever the page changes due to user interaction,
      * when the user clicks on the navigation arrows or while resizing,
-     * based on the <code>items-per-page-l</code>, <code>items-per-page-m</code> and <code>items-per-page-s</code> properties.
-     *
+     * based on the `items-per-page` property.
      * @param {Integer} selectedIndex the current selected index
      * @public
      * @since 1.0.0-rc.7