@fundamental-ngx/ui5-webcomponents 0.58.0-rc.6 → 0.58.0-rc.60

package/avatar/index.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { AfterViewInit, ElementRef, Injector } from '@angular/core';
 import _Avatar, { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';
+export { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';
 import { UI5CustomEvent } from '@ui5/webcomponents-base';
 
 declare class Avatar implements AfterViewInit {
@@ -90,6 +91,40 @@ declare class Avatar implements AfterViewInit {
   property is set to `true`.
      */
     ui5Click: _angular_core.OutputEmitterRef<UI5CustomEvent<_Avatar, "click">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Receives the desired `<img>` tag
+  
+  **Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>
+  `ui5-avatar:not(:defined) {`<br/>
+  &nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>
+  `}`
+     * - **badge**: Defines the optional badge that will be used for visual affordance.
+  
+  **Note:** While the slot allows for custom badges, to achieve
+  the Fiori design, you can use the `ui5-tag` with `ui5-icon`
+  in the corresponding `icon` slot, without text nodes.
+     *
+     * @example
+     * ```html
+     * <ui5-avatar>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-avatar>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+        since: string;
+    }[];
     elementRef: ElementRef<_Avatar>;
     injector: Injector;
     get element(): _Avatar;

package/avatar-group/index.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { AfterViewInit, ElementRef, Injector } from '@angular/core';
 import _AvatarGroup, { AvatarGroupAccessibilityAttributes, IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';
+export { AvatarGroupAccessibilityAttributes, IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';
 import { UI5CustomEvent } from '@ui5/webcomponents-base';
 import AvatarColorScheme from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';
 
@@ -47,6 +48,44 @@ declare class AvatarGroup implements AfterViewInit {
   component has changed
      */
     ui5Overflow: _angular_core.OutputEmitterRef<UI5CustomEvent<_AvatarGroup, "overflow">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the items of the component. Use the `ui5-avatar` component as an item.
+  
+  **Note:** The UX guidelines recommends using avatars with "Circle" shape.
+  
+  Moreover, if you use avatars with "Square" shape, there will be visual inconsistency
+  as the built-in overflow action has "Circle" shape.
+     * - **overflowButton**: Defines the overflow button of the component.
+  
+  **Note:** We recommend using the `ui5-button` component.
+  
+  **Note:** If this slot is not used, the component will display the built-in overflow button.
+     *
+     * @example
+     * ```html
+     * <ui5-avatar-group>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-avatar-group>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: ({
+        name: string;
+        description: string;
+        since?: undefined;
+    } | {
+        name: string;
+        description: string;
+        since: string;
+    })[];
     elementRef: ElementRef<_AvatarGroup>;
     injector: Injector;
     get element(): _AvatarGroup;

package/bar/index.d.ts

@@ -17,6 +17,31 @@ declare class Bar implements AfterViewInit {
   - If there is only one or no active element, it is recommended to avoid using the "toolbar" role, as it implies a grouping of multiple interactive controls.
      */
     accessibleRole: _angular_core.InputSignal<"Toolbar" | "None" | undefined>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **startContent**: Defines the content at the start of the bar.
+     * - **(default)**: Defines the content in the middle of the bar.
+     * - **endContent**: Defines the content at the end of the bar.
+     *
+     * @example
+     * ```html
+     * <ui5-bar>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-bar>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_Bar>;
     injector: Injector;
     get element(): _Bar;

package/breadcrumbs/index.d.ts

@@ -22,6 +22,31 @@ declare class Breadcrumbs implements AfterViewInit {
   **Note:** You can prevent browser location change by calling `event.preventDefault()`.
      */
     ui5ItemClick: _angular_core.OutputEmitterRef<UI5CustomEvent<_Breadcrumbs, "item-click">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the component items.
+  
+  **Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.
+     *
+     * @example
+     * ```html
+     * <ui5-breadcrumbs>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-breadcrumbs>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_Breadcrumbs>;
     injector: Injector;
     get element(): _Breadcrumbs;

package/breadcrumbs-item/index.d.ts

@@ -27,6 +27,31 @@ declare class BreadcrumbsItem implements AfterViewInit {
      * Defines the accessible ARIA name of the item.
      */
     accessibleName: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the text of the component.
+  
+  **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+     *
+     * @example
+     * ```html
+     * <ui5-breadcrumbs-item>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-breadcrumbs-item>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_BreadcrumbsItem>;
     injector: Injector;
     get element(): _BreadcrumbsItem;

package/busy-indicator/index.d.ts

@@ -23,6 +23,29 @@ declare class BusyIndicator implements AfterViewInit {
      * Defines the placement of the text.
      */
     textPlacement: _angular_core.InputSignal<"Top" | "Bottom" | undefined>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Determines the content over which the component will appear.
+     *
+     * @example
+     * ```html
+     * <ui5-busy-indicator>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-busy-indicator>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_BusyIndicator>;
     injector: Injector;
     get element(): _BusyIndicator;

package/button/index.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { AfterViewInit, ElementRef, Injector } from '@angular/core';
 import _Button, { ButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/Button.js';
+export { ButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/Button.js';
 import { UI5CustomEvent } from '@ui5/webcomponents-base';
 
 declare class Button implements AfterViewInit {
@@ -106,6 +107,37 @@ declare class Button implements AfterViewInit {
   **Note:** The event will not be fired if the `disabled` property is set to `true`.
      */
     ui5Click: _angular_core.OutputEmitterRef<UI5CustomEvent<_Button, "click">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the text of the component.
+  
+  **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+     * - **badge**: Adds a badge to the button.
+     *
+     * @example
+     * ```html
+     * <ui5-button>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-button>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: ({
+        name: string;
+        description: string;
+        since?: undefined;
+    } | {
+        name: string;
+        description: string;
+        since: string;
+    })[];
     elementRef: ElementRef<_Button>;
     injector: Injector;
     get element(): _Button;

package/calendar/index.d.ts

@@ -66,6 +66,38 @@ declare class Calendar implements AfterViewInit {
   create instances of `ui5-date` for the newly selected dates. In that case you should do this manually.
      */
     ui5SelectionChange: _angular_core.OutputEmitterRef<UI5CustomEvent<_Calendar, "selection-change">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **calendarLegend**: Defines the calendar legend of the component.
+     * - **(default)**: Defines the selected date or dates (depending on the `selectionMode` property)
+  for this calendar as instances of `ui5-date` or `ui5-date-range`.
+  Use `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.
+     * - **specialDates**: Defines the special dates, visually emphasized in the calendar.
+     *
+     * @example
+     * ```html
+     * <ui5-calendar>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-calendar>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: ({
+        name: string;
+        description: string;
+        since: string;
+    } | {
+        name: string;
+        description: string;
+        since?: undefined;
+    })[];
     elementRef: ElementRef<_Calendar>;
     injector: Injector;
     get element(): _Calendar;

package/calendar-legend/index.d.ts

@@ -19,6 +19,29 @@ declare class CalendarLegend implements AfterViewInit {
      * Hides the Working day item in the legend.
      */
     hideWorkingDay: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the items of the component.
+     *
+     * @example
+     * ```html
+     * <ui5-calendar-legend>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-calendar-legend>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_CalendarLegend>;
     injector: Injector;
     get element(): _CalendarLegend;

package/card/index.d.ts

@@ -21,6 +21,37 @@ declare class Card implements AfterViewInit {
      * Defines the delay in milliseconds, after which the loading indicator will show up for this card.
      */
     loadingDelay: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the content of the component.
+     * - **header**: Defines the header of the component.
+  
+  **Note:** Use `ui5-card-header` for the intended design.
+     *
+     * @example
+     * ```html
+     * <ui5-card>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-card>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: ({
+        name: string;
+        description: string;
+        since?: undefined;
+    } | {
+        name: string;
+        description: string;
+        since: string;
+    })[];
     elementRef: ElementRef<_Card>;
     injector: Injector;
     get element(): _Card;

package/card-header/index.d.ts

@@ -27,6 +27,30 @@ declare class CardHeader implements AfterViewInit {
   **Note:** The event would be fired only if the `interactive` property is set to true.
      */
     ui5Click: _angular_core.OutputEmitterRef<UI5CustomEvent<_CardHeader, "click">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **avatar**: Defines an avatar image, displayed in the left most part of the header.
+     * - **action**: Defines an action, displayed in the right most part of the header.
+     *
+     * @example
+     * ```html
+     * <ui5-card-header>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-card-header>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_CardHeader>;
     injector: Injector;
     get element(): _CardHeader;

package/carousel/index.d.ts

@@ -77,6 +77,32 @@ declare class Carousel implements AfterViewInit {
   based on the `items-per-page` property.
      */
     ui5Navigate: _angular_core.OutputEmitterRef<UI5CustomEvent<_Carousel, "navigate">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the content of the component.
+  
+  **Note:** Items with the `hidden` attribute will be automatically excluded from carousel navigation and page calculations.
+  They will not be displayed or accessible via keyboard navigation. See [sample](./#carousel-with-hidden-items).
+     *
+     * @example
+     * ```html
+     * <ui5-carousel>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-carousel>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_Carousel>;
     injector: Injector;
     get element(): _Carousel;

package/color-palette/index.d.ts

@@ -8,6 +8,29 @@ declare class ColorPalette implements AfterViewInit {
      * Fired when the user selects a color.
      */
     ui5ItemClick: i0.OutputEmitterRef<UI5CustomEvent<_ColorPalette, "item-click">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the `ui5-color-palette-item` elements.
+     *
+     * @example
+     * ```html
+     * <ui5-color-palette>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-color-palette>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_ColorPalette>;
     injector: Injector;
     get element(): _ColorPalette;

package/color-palette-popover/index.d.ts

@@ -40,6 +40,29 @@ declare class ColorPalettePopover implements AfterViewInit {
      * Fired when the `ui5-color-palette-popover` is closed due to user interaction.
      */
     ui5Close: _angular_core.OutputEmitterRef<UI5CustomEvent<_ColorPalettePopover, "close">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the content of the component.
+     *
+     * @example
+     * ```html
+     * <ui5-color-palette-popover>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-color-palette-popover>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_ColorPalettePopover>;
     injector: Injector;
     get element(): _ColorPalettePopover;

package/combo-box/index.d.ts

@@ -91,6 +91,42 @@ declare class ComboBox implements AfterViewInit {
      * Fired when selection is changed by user interaction
      */
     ui5SelectionChange: _angular_core.OutputEmitterRef<UI5CustomEvent<_ComboBox, "selection-change">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the component items.
+     * - **valueStateMessage**: Defines the value state message that will be displayed as pop up under the component.
+  The value state message slot should contain only one root element.
+  
+  **Note:** If not specified, a default text (in the respective language) will be displayed.
+  
+  **Note:** The `valueStateMessage` would be displayed,
+  when the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.
+     * - **icon**: Defines the icon to be displayed in the input field.
+     *
+     * @example
+     * ```html
+     * <ui5-combobox>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-combobox>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: ({
+        name: string;
+        description: string;
+        since?: undefined;
+    } | {
+        name: string;
+        description: string;
+        since: string;
+    })[];
     elementRef: ElementRef<_ComboBox>;
     injector: Injector;
     get element(): _ComboBox;

package/combo-box-item-group/index.d.ts

@@ -38,6 +38,32 @@ declare class ComboBoxItemGroup implements AfterViewInit {
   **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
      */
     ui5Move: _angular_core.OutputEmitterRef<UI5CustomEvent<_ComboBoxItemGroup, "move">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the items of the <code>ui5-cb-item-group</code>.
+     * - **header**: Defines the header of the component.
+  
+  **Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.
+     *
+     * @example
+     * ```html
+     * <ui5-cb-item-group>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-cb-item-group>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_ComboBoxItemGroup>;
     injector: Injector;
     get element(): _ComboBoxItemGroup;

package/date-picker/index.d.ts

@@ -132,6 +132,35 @@ declare class DatePicker implements AfterViewInit {
      * Fired after the component's picker is closed.
      */
     ui5Close: _angular_core.OutputEmitterRef<UI5CustomEvent<_DatePicker, "close">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **valueStateMessage**: Defines the value state message that will be displayed as pop up under the component.
+  
+  **Note:** If not specified, a default text (in the respective language) will be displayed.
+  
+  **Note:** The `valueStateMessage` would be displayed,
+  when the component is in `Information`, `Critical` or `Negative` value state.
+     *
+     * @example
+     * ```html
+     * <ui5-date-picker>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-date-picker>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+        since: string;
+    }[];
     elementRef: ElementRef<_DatePicker>;
     injector: Injector;
     get element(): _DatePicker;

package/date-range-picker/index.d.ts

@@ -152,6 +152,35 @@ declare class DateRangePicker implements AfterViewInit {
      * Fired after the component's picker is closed.
      */
     ui5Close: _angular_core.OutputEmitterRef<UI5CustomEvent<_DateRangePicker, "close">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **valueStateMessage**: Defines the value state message that will be displayed as pop up under the component.
+  
+  **Note:** If not specified, a default text (in the respective language) will be displayed.
+  
+  **Note:** The `valueStateMessage` would be displayed,
+  when the component is in `Information`, `Critical` or `Negative` value state.
+     *
+     * @example
+     * ```html
+     * <ui5-daterange-picker>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-daterange-picker>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+        since: string;
+    }[];
     elementRef: ElementRef<_DateRangePicker>;
     injector: Injector;
     get element(): _DateRangePicker;