@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/CardHeader.d.ts

@@ -1,12 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { ICardHeader } from "./Card.js";
 /**
  * @class
  * ### Overview
  *
  * 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`, `status`
+ * It displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `additionalText`
  * and two slots: `avatar` and `action`.
  *
  * ### Keyboard handling
@@ -16,37 +15,39 @@ import type { ICardHeader } from "./Card.js";
  *
  * `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
  */
-declare class CardHeader extends UI5Element implements ICardHeader {
+declare class CardHeader extends UI5Element {
+    eventDetails: {
+        click: void;
+    };
     /**
      * Defines the title text.
-     * @default ""
+     * @default undefined
      * @public
     */
-    titleText: string;
+    titleText?: string;
     /**
      * Defines the subtitle text.
-     * @default ""
+     * @default undefined
      * @public
     */
-    subtitleText: string;
+    subtitleText?: string;
     /**
-     * Defines the status text.
-     * @default ""
+     * Defines the additional text.
+     * @default undefined
      * @public
     */
-    status: string;
+    additionalText?: string;
     /**
      * Defines if the component would be interactive,
-     * e.g gets hover effect, gets focus outline and `click` event is fired, when pressed.
+     * e.g gets hover effect and `click` event is fired, when pressed.
      * @default false
      * @public
     */
@@ -71,22 +72,14 @@ declare class CardHeader extends UI5Element implements ICardHeader {
     */
     action: Array<HTMLElement>;
     static i18nBundle: I18nBundle;
-    get classes(): {
-        root: {
-            "ui5-card-header": boolean;
-            "ui5-card-header--interactive": boolean;
-            "ui5-card-header--active": boolean;
-            "ui5-card-header-ff": boolean;
-        };
-    };
+    onEnterDOM(): void;
     get _root(): HTMLElement;
     get ariaRoleDescription(): string;
-    get ariaRoleFocusableElement(): "button" | null;
+    get ariaRoleFocusableElement(): "button" | "group";
     get ariaCardAvatarLabel(): string;
     get ariaLabelledBy(): string | undefined;
     get hasAvatar(): boolean;
     get hasAction(): boolean;
-    static onDefine(): Promise<void>;
     _actionsFocusin(): void;
     _actionsFocusout(): void;
     _click(e: MouseEvent): void;
@@ -94,4 +87,3 @@ declare class CardHeader extends UI5Element implements ICardHeader {
     _keyup(e: KeyboardEvent): void;
 }
 export default CardHeader;
-export type { ICardHeader, };

package/dist/CardHeader.js

@@ -9,13 +9,12 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { isFirefox } 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 { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import CardHeaderTemplate from "./CardHeaderTemplate.js";
 import { AVATAR_TOOLTIP, ARIA_ROLEDESCRIPTION_CARD_HEADER, ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import cardHeaderCss from "./generated/themes/CardHeader.css.js";
@@ -24,7 +23,7 @@ import cardHeaderCss from "./generated/themes/CardHeader.css.js";
  * ### Overview
  *
  * 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`, `status`
+ * It displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `additionalText`
  * and two slots: `avatar` and `action`.
  *
  * ### Keyboard handling
@@ -34,25 +33,38 @@ import cardHeaderCss from "./generated/themes/CardHeader.css.js";
  *
  * `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 {
-    get classes() {
-        return {
-            root: {
-                "ui5-card-header": true,
-                "ui5-card-header--interactive": this.interactive,
-                "ui5-card-header--active": this.interactive && this._headerActive,
-                "ui5-card-header-ff": isFirefox(),
-            },
-        };
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines if the component would be interactive,
+         * e.g gets hover effect and `click` event is fired, when pressed.
+         * @default false
+         * @public
+        */
+        this.interactive = false;
+        /**
+         * Define the `aria-level` attribute of the component
+         *
+         * **Note: ** If the interactive property is set, `aria-level` attribute is not rendered at all.
+         * @private
+         * @default 3
+        */
+        this._ariaLevel = 3;
+        this._headerActive = false;
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
     }
     get _root() {
         return this.shadowRoot.querySelector(".ui5-card-header");
@@ -61,7 +73,7 @@ let CardHeader = CardHeader_1 = class CardHeader extends UI5Element {
         return this.interactive ? CardHeader_1.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader_1.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
     }
     get ariaRoleFocusableElement() {
-        return this.interactive ? "button" : null;
+        return this.interactive ? "button" : "group";
     }
     get ariaCardAvatarLabel() {
         return CardHeader_1.i18nBundle.getText(AVATAR_TOOLTIP);
@@ -74,8 +86,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`);
@@ -88,9 +100,6 @@ let CardHeader = CardHeader_1 = class CardHeader extends UI5Element {
     get hasAction() {
         return !!this.action.length;
     }
-    static async onDefine() {
-        CardHeader_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-    }
     _actionsFocusin() {
         this._root.classList.add("ui5-card-header-hide-focus");
     }
@@ -101,7 +110,7 @@ let CardHeader = CardHeader_1 = class CardHeader extends UI5Element {
         // prevents the native browser "click" event from firing
         e.stopImmediatePropagation();
         if (this.interactive && this._root.contains(e.target)) {
-            this.fireEvent("click");
+            this.fireDecoratorEvent("click");
         }
     }
     _keydown(e) {
@@ -112,7 +121,7 @@ let CardHeader = CardHeader_1 = class CardHeader extends UI5Element {
         const space = isSpace(e);
         this._headerActive = enter || space;
         if (enter) {
-            this.fireEvent("click");
+            this.fireDecoratorEvent("click");
             return;
         }
         if (space) {
@@ -126,7 +135,7 @@ let CardHeader = CardHeader_1 = class CardHeader extends UI5Element {
         const space = isSpace(e);
         this._headerActive = false;
         if (space) {
-            this.fireEvent("click");
+            this.fireDecoratorEvent("click");
         }
     }
 };
@@ -138,12 +147,12 @@ __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);
 __decorate([
-    property({ validator: Integer, defaultValue: 3 })
+    property({ type: Number })
 ], CardHeader.prototype, "_ariaLevel", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
@@ -154,11 +163,14 @@ __decorate([
 __decorate([
     slot()
 ], CardHeader.prototype, "action", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], CardHeader, "i18nBundle", void 0);
 CardHeader = CardHeader_1 = __decorate([
     customElement({
         tag: "ui5-card-header",
         languageAware: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: CardHeaderTemplate,
         styles: cardHeaderCss,
     })
@@ -169,7 +181,9 @@ CardHeader = CardHeader_1 = __decorate([
      * @public
      */
     ,
-    event("click")
+    event("click", {
+        bubbles: true,
+    })
 ], CardHeader);
 CardHeader.define();
 export default CardHeader;

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 \"./Card.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`, `status`\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 * @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 *\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 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 `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\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-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport CardHeaderTemplate from \"./CardHeaderTemplate.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: jsxRenderer,\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\", {\n\tbubbles: true,\n})\nclass CardHeader extends UI5Element {\n\teventDetails!: {\n\t\tclick: void\n\t}\n\t/**\n\t * Defines the title text.\n\t * @default undefined\n\t * @public\n\t*/\n\t@property()\n\ttitleText?: string;\n\n\t/**\n\t * Defines the subtitle text.\n\t * @default undefined\n\t * @public\n\t*/\n\t@property()\n\tsubtitleText?: string;\n\n\t/**\n\t * Defines the additional text.\n\t * @default undefined\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 and `click` event is fired, when pressed.\n\t * @default false\n\t * @public\n\t*/\n\t@property({ type: Boolean })\n\tinteractive = false;\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({ type: Number })\n\t_ariaLevel = 3;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_headerActive = false;\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\t@i18n(\"@ui5/webcomponents\")\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 _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\" : \"group\";\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\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.fireDecoratorEvent(\"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.fireDecoratorEvent(\"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.fireDecoratorEvent(\"click\");\n\t\t}\n\t}\n}\n\nCardHeader.define();\n\nexport default CardHeader;\n"]}

package/dist/CardHeaderTemplate.d.ts

@@ -0,0 +1,2 @@
+import type CardHeader from "./CardHeader.js";
+export default function CardHeaderTemplate(this: CardHeader): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/CardHeaderTemplate.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import { isFirefox } from "@ui5/webcomponents-base/dist/Device.js";
+export default function CardHeaderTemplate() {
+    return (_jsxs("div", { id: `${this._id}--header`, class: {
+            "ui5-card-header": true,
+            "ui5-card-header--interactive": this.interactive,
+            "ui5-card-header--active": this.interactive && this._headerActive,
+            "ui5-card-header-ff": isFirefox(),
+        }, part: "root", onClick: this._click, onKeyDown: this._keydown, onKeyUp: this._keyup, children: [_jsxs("div", { class: "ui5-card-header-focusable-element", "aria-labelledby": this.ariaLabelledBy, "aria-roledescription": this.ariaRoleDescription, role: this.ariaRoleFocusableElement, "data-sap-focus-ref": true, tabindex: 0, children: [this.hasAvatar &&
+                        _jsx("div", { id: `${this._id}-avatar`, class: "ui5-card-header-avatar", "aria-label": this.ariaCardAvatarLabel, children: _jsx("slot", { name: "avatar" }) }), _jsxs("div", { class: "ui5-card-header-text", children: [_jsxs("div", { class: "ui5-card-header-first-line", children: [this.titleText &&
+                                        _jsx("div", { id: `${this._id}-title`, class: "ui5-card-header-title", part: "title", role: "heading", "aria-level": 3, children: this.titleText }), this.additionalText &&
+                                        _jsx("div", { class: "ui5-card-header-additionalText", children: _jsx("span", { id: `${this._id}-additionalText`, part: "additional-text", dir: "auto", children: this.additionalText }) })] }), this.subtitleText &&
+                                _jsx("div", { id: `${this._id}-subtitle`, class: "ui5-card-header-subtitle", part: "subtitle", children: this.subtitleText })] })] }), this.hasAction &&
+                _jsx("div", { class: "ui5-card-header-action", onFocusIn: this._actionsFocusin, onFocusOut: this._actionsFocusout, children: _jsx("slot", { name: "action" }) })] }));
+}
+//# sourceMappingURL=CardHeaderTemplate.js.map

package/dist/CardHeaderTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeaderTemplate.js","sourceRoot":"","sources":["../src/CardHeaderTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACzC,OAAO,CACN,eACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EACzB,KAAK,EAAE;YACN,iBAAiB,EAAE,IAAI;YACvB,8BAA8B,EAAE,IAAI,CAAC,WAAW;YAChD,yBAAyB,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa;YACjE,oBAAoB,EAAE,SAAS,EAAE;SACjC,EACD,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,OAAO,EAAE,IAAI,CAAC,MAAM,aAEpB,eACC,KAAK,EAAC,mCAAmC,qBACxB,IAAI,CAAC,cAAc,0BACd,IAAI,CAAC,mBAAmB,EAC9C,IAAI,EAAE,IAAI,CAAC,wBAAwB,8BAEnC,QAAQ,EAAE,CAAC,aAEV,IAAI,CAAC,SAAS;wBACd,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,EAAE,KAAK,EAAC,wBAAwB,gBAAa,IAAI,CAAC,mBAAmB,YACjG,eAAM,IAAI,EAAC,QAAQ,GAAQ,GACtB,EAGP,eAAK,KAAK,EAAC,sBAAsB,aAChC,eAAK,KAAK,EAAC,4BAA4B,aACrC,IAAI,CAAC,SAAS;wCACd,cACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EACvB,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,SAAS,gBACF,CAAC,YACZ,IAAI,CAAC,SAAS,GAAO,EAGvB,IAAI,CAAC,cAAc;wCACnB,cAAK,KAAK,EAAC,gCAAgC,YAC1C,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,iBAAiB,EAAE,IAAI,EAAC,iBAAiB,EAAC,GAAG,EAAC,MAAM,YAAE,IAAI,CAAC,cAAc,GAAQ,GACjG,IAEF,EAEL,IAAI,CAAC,YAAY;gCACjB,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,WAAW,EAAE,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,UAAU,YAAE,IAAI,CAAC,YAAY,GAAO,IAEvG,IACD,EAEL,IAAI,CAAC,SAAS;gBACd,cACC,KAAK,EAAC,wBAAwB,EAC9B,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,UAAU,EAAE,IAAI,CAAC,gBAAgB,YAEjC,eAAM,IAAI,EAAC,QAAQ,GAAQ,GACtB,IAEF,CACN,CAAC;AACH,CAAC","sourcesContent":["import type CardHeader from \"./CardHeader.js\";\nimport { isFirefox } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nexport default function CardHeaderTemplate(this: CardHeader) {\n\treturn (\n\t\t<div\n\t\t\tid={`${this._id}--header`}\n\t\t\tclass={{\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\tpart=\"root\"\n\t\t\tonClick={this._click}\n\t\t\tonKeyDown={this._keydown}\n\t\t\tonKeyUp={this._keyup}\n\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"ui5-card-header-focusable-element\"\n\t\t\t\taria-labelledby={this.ariaLabelledBy}\n\t\t\t\taria-roledescription={this.ariaRoleDescription}\n\t\t\t\trole={this.ariaRoleFocusableElement}\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\ttabindex={0}\n\t\t\t>\n\t\t\t\t{this.hasAvatar &&\n\t\t\t\t\t<div id={`${this._id}-avatar`} class=\"ui5-card-header-avatar\" aria-label={this.ariaCardAvatarLabel}>\n\t\t\t\t\t\t<slot name=\"avatar\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t<div class=\"ui5-card-header-text\">\n\t\t\t\t\t<div class=\"ui5-card-header-first-line\">\n\t\t\t\t\t\t{this.titleText &&\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={`${this._id}-title`}\n\t\t\t\t\t\t\t\tclass=\"ui5-card-header-title\"\n\t\t\t\t\t\t\t\tpart=\"title\"\n\t\t\t\t\t\t\t\trole=\"heading\"\n\t\t\t\t\t\t\t\taria-level={3}\n\t\t\t\t\t\t\t>{this.titleText}</div>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t{this.additionalText &&\n\t\t\t\t\t\t\t<div class=\"ui5-card-header-additionalText\">\n\t\t\t\t\t\t\t\t<span id={`${this._id}-additionalText`} part=\"additional-text\" dir=\"auto\">{this.additionalText}</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.subtitleText &&\n\t\t\t\t\t\t<div id={`${this._id}-subtitle`} class=\"ui5-card-header-subtitle\" part=\"subtitle\">{this.subtitleText}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{this.hasAction &&\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ui5-card-header-action\"\n\t\t\t\t\tonFocusIn={this._actionsFocusin}\n\t\t\t\t\tonFocusOut={this._actionsFocusout}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"action\"></slot>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t);\n}\n"]}

package/dist/CardTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Card from "./Card.js";
+export default function CardTemplate(this: Card): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/CardTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import BusyIndicator from "./BusyIndicator.js";
+export default function CardTemplate() {
+    return (_jsx("div", { part: "root", role: "region", class: {
+            "ui5-card-root": true,
+            "ui5-card--interactive": this._hasHeader && this.header[0].interactive,
+            "ui5-card--nocontent": !this.content.length,
+        }, "aria-label": this._getAriaLabel, children: _jsx(BusyIndicator, { id: `${this._id}-busyIndicator`, delay: this.loadingDelay, active: this.loading, class: "ui5-card-busy-indicator", children: _jsxs("div", { class: "ui5-card-inner", children: [this._hasHeader &&
+                        _jsx("div", { class: "ui5-card-header-root", children: _jsx("slot", { name: "header" }) }), _jsx("div", { role: "group", "aria-label": this._ariaCardContentLabel, part: "content", children: _jsx("slot", {}) })] }) }) }));
+}
+//# sourceMappingURL=CardTemplate.js.map

package/dist/CardTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardTemplate.js","sourceRoot":"","sources":["../src/CardTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,OAAO,CACN,cACC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;YACN,eAAe,EAAE,IAAI;YACrB,uBAAuB,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW;YACtE,qBAAqB,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;SAC3C,gBACW,IAAI,CAAC,aAAa,YAE9B,KAAC,aAAa,IACb,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,gBAAgB,EAC/B,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,KAAK,EAAC,yBAAyB,YAE/B,eAAK,KAAK,EAAC,gBAAgB,aACzB,IAAI,CAAC,UAAU;wBACf,cAAK,KAAK,EAAC,sBAAsB,YAChC,eAAM,IAAI,EAAC,QAAQ,GAAQ,GACtB,EAEP,cAAK,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,qBAAqB,EAAE,IAAI,EAAC,SAAS,YACvE,gBAAa,GACR,IACD,GACS,GACX,CACN,CAAC;AACH,CAAC","sourcesContent":["import type Card from \"./Card.js\";\nimport BusyIndicator from \"./BusyIndicator.js\";\n\nexport default function CardTemplate(this: Card) {\n\treturn (\n\t\t<div\n\t\t\tpart=\"root\"\n\t\t\trole=\"region\"\n\t\t\tclass={{\n\t\t\t\t\"ui5-card-root\": true,\n\t\t\t\t\"ui5-card--interactive\": this._hasHeader && this.header[0].interactive,\n\t\t\t\t\"ui5-card--nocontent\": !this.content.length,\n\t\t\t}}\n\t\t\taria-label={this._getAriaLabel}\n\t\t>\n\t\t\t<BusyIndicator\n\t\t\t\tid={`${this._id}-busyIndicator`}\n\t\t\t\tdelay={this.loadingDelay}\n\t\t\t\tactive={this.loading}\n\t\t\t\tclass=\"ui5-card-busy-indicator\"\n\t\t\t>\n\t\t\t\t<div class=\"ui5-card-inner\">\n\t\t\t\t\t{this._hasHeader &&\n\t\t\t\t\t\t<div class=\"ui5-card-header-root\">\n\t\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div role=\"group\" aria-label={this._ariaCardContentLabel} part=\"content\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</BusyIndicator>\n\t\t</div>\n\t);\n}\n"]}

package/dist/Carousel.d.ts

@@ -1,17 +1,28 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
 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 BackgroundDesign from "./types/BackgroundDesign.js";
-import BorderDesign from "./types/BorderDesign.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import CarouselPageIndicatorType from "./types/CarouselPageIndicatorType.js";
+import type BackgroundDesign from "./types/BackgroundDesign.js";
+import type BorderDesign from "./types/BorderDesign.js";
+import type Button from "./Button.js";
 type CarouselNavigateEventDetail = {
     selectedIndex: number;
 };
+type ItemsInfo = {
+    id: string;
+    item: HTMLElement & {
+        _individualSlot?: string;
+    };
+    tabIndex: number;
+    posinset: number;
+    setsize: number;
+    selected: boolean;
+    _individualSlot?: string;
+};
 /**
  * @class
  *
@@ -21,8 +32,8 @@ type CarouselNavigateEventDetail = {
  *
  * There are several ways to perform navigation:
  *
- * - on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts.
- * - on mobile - the user can use swipe gestures.
+ * - on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.
+ * - on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.
  *
  * ### Usage
  *
@@ -61,20 +72,23 @@ type CarouselNavigateEventDetail = {
  * @csspart content - Used to style the content of the component
  */
 declare class Carousel extends UI5Element {
+    eventDetails: {
+        navigate: CarouselNavigateEventDetail;
+    };
     /**
      * Defines the accessible name of the component.
-     * @default ""
+     * @default undefined
      * @public
      * @since 1.24
      */
-    accessibleName: string;
+    accessibleName?: string;
     /**
      * Defines the IDs of the elements that label the input.
-     * @default ""
+     * @default undefined
      * @public
      * @since 1.24
      */
-    accessibleNameRef: string;
+    accessibleNameRef?: string;
     /**
      * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
      * @default false
@@ -82,29 +96,22 @@ declare class Carousel extends UI5Element {
      */
     cyclic: boolean;
     /**
-     * Defines the number of items per page on small size (up to 640px). One item per page shown by default.
-     * @default 1
-     * @public
-     */
-    itemsPerPageS: number;
-    /**
-     * Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.
-     * @default 1
-     * @public
-     */
-    itemsPerPageM: number;
-    /**
-     * 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.
      *
-     * **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
      * @public
@@ -128,28 +135,28 @@ declare class Carousel extends UI5Element {
      * @default "Default"
      * @public
      */
-    pageIndicatorStyle: `${CarouselPageIndicatorStyle}`;
+    pageIndicatorType: `${CarouselPageIndicatorType}`;
     /**
      * Defines the carousel's background design.
      * @since 1.14
      * @default "Translucent"
      * @public
      */
-    backgroundDesign: BackgroundDesign;
+    backgroundDesign: `${BackgroundDesign}`;
     /**
      * Defines the page indicator background design.
      * @since 1.14
      * @default "Solid"
      * @public
      */
-    pageIndicatorBackgroundDesign: BackgroundDesign;
+    pageIndicatorBackgroundDesign: `${BackgroundDesign}`;
     /**
      * Defines the page indicator border design.
      * @since 1.14
      * @default "Solid"
      * @public
      */
-    pageIndicatorBorderDesign: BorderDesign;
+    pageIndicatorBorderDesign: `${BorderDesign}`;
     /**
      * Defines the index of the initially selected item.
      * @default 0
@@ -212,7 +219,7 @@ declare class Carousel extends UI5Element {
     get _getLastFocusedActivePageIndex(): number;
     navigateLeft(): void;
     navigateRight(): void;
-    _navButtonClick(e: MouseEvent): void;
+    _navButtonClick(e: UI5CustomEvent<Button, "click">): void;
     /**
      * Changes the currently displayed page.
      * @param itemIndex The index of the target page
@@ -224,17 +231,7 @@ declare class Carousel extends UI5Element {
      * Assuming that all items have the same width
      * @private
      */
-    get items(): {
-        id: string;
-        item: HTMLElement;
-        tabIndex: string;
-        posinset: string;
-        setsize: string;
-        styles: {
-            width: string;
-        };
-        classes: string;
-    }[];
+    get items(): Array<ItemsInfo>;
     get effectiveItemsPerPage(): number;
     isItemInViewport(index: number): boolean;
     isIndexInRange(index: number): boolean;
@@ -243,11 +240,6 @@ declare class Carousel extends UI5Element {
      */
     get renderNavigation(): boolean;
     get hasManyPages(): boolean;
-    get styles(): {
-        content: {
-            transform: string;
-        };
-    };
     get classes(): {
         viewport: {
             "ui5-carousel-viewport": boolean;
@@ -264,12 +256,6 @@ declare class Carousel extends UI5Element {
             "ui5-carousel-navigation-wrapper": boolean;
             "ui5-carousel-navigation-with-buttons": boolean;
         };
-        navPrevButton: {
-            "ui5-carousel-navigation-button--hidden": boolean;
-        };
-        navNextButton: {
-            "ui5-carousel-navigation-button--hidden": boolean;
-        };
     };
     get pagesCount(): number;
     get isPageTypeDots(): boolean;
@@ -291,6 +277,7 @@ declare class Carousel extends UI5Element {
     get ariaLabelTxt(): string | undefined;
     get nextPageText(): string;
     get previousPageText(): string;
+    get _roleDescription(): string;
     /**
      * The indices of the currently visible items of the component.
      * @public
@@ -298,7 +285,6 @@ declare class Carousel extends UI5Element {
      * @default []
      */
     get visibleItemsIndices(): Array<number>;
-    static onDefine(): Promise<void>;
 }
 export default Carousel;
 export type { CarouselNavigateEventDetail, };