@six-group/ui-library 0.0.0-insider.98c4058 → 0.0.0-insider.99e1a07

package/dist/types/components/six-date/components/month-selection.d.ts

@@ -0,0 +1,7 @@
+import { IsoDate } from '../iso-date';
+import { Language } from '../../../utils/error-messages';
+export declare const MonthSelection: (props: {
+    language: Language;
+    selected: IsoDate | "";
+    monthClicked: (month: number) => void;
+}) => any;

package/dist/types/components/six-date/components/year-selection.d.ts

@@ -0,0 +1,7 @@
+import { IsoDate } from '../iso-date';
+export declare const YearSelection: (props: {
+    selected: IsoDate | "";
+    pointerYear: number;
+    yearCount: number;
+    yearClicked: (year: number) => void;
+}) => any;

package/dist/types/components/six-date/iso-date.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Represent an iso date string like `2021-01-08`.
+ */
+export type IsoDate = string;
+export interface PointerDate {
+    year: number;
+    month: number;
+    day: number;
+}
+/**
+ * Validates a date string against a given format and returns an IsoDate if valid.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param dateString - The date string to validate.
+ * @param dateFormat - The expected format of the date string (e.g., "yyyy-MM-dd").
+ * @returns An IsoDate if the date string is valid, otherwise undefined.
+ */
+export declare function fromFormattedString(dateString: string, dateFormat: string): IsoDate | undefined;
+/**
+ * Formats a given ISO date string into a specified format.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param {IsoDate} isoDate - The ISO date string to be formatted.
+ * @param {string} dateFormat - The desired date format string.
+ * @return {string} A string representing the formatted date.
+ */
+export declare function formatDate(isoDate: IsoDate, dateFormat: string): string;
+export declare function fromDate(date: Date): IsoDate;
+export declare function today(): IsoDate;
+export declare function isValidIsoDate(isoDate: string): isoDate is IsoDate;
+export declare function getMonth(isoDate: IsoDate): number;
+export declare function getYear(isoDate: IsoDate): number;
+export declare function toPointerDate(isoDate: IsoDate): PointerDate;
+export declare function nextPointerDate(selectionMode: 'day' | 'month' | 'year', pointerDate: PointerDate): PointerDate;
+export declare function previousPointerDate(selectionMode: 'day' | 'month' | 'year', pointerDate: PointerDate): PointerDate;
+export declare function todayAsPointerDate(): PointerDate;
+export declare function cleanupValue(value: unknown): {
+    value: IsoDate | '';
+    pointerDate: PointerDate;
+    warning?: string;
+};

package/dist/types/components/six-date/six-date.d.ts

@@ -0,0 +1,143 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Language } from '../../utils/error-messages';
+/**
+ * A date picker component that allows users to select dates via a calendar popup or direct input.
+ *
+ * @since 5.0
+ * @status beta
+ *
+ * @slot label - The date's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes the usage.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text property.
+ */
+export declare class SixDate {
+    private eventListeners;
+    private inputElement?;
+    private popoverHelper?;
+    private panel?;
+    private positioner?;
+    host: HTMLSixDateElement;
+    /**
+     * Current state of the date picker for day, month, or year selection.
+     * Independent of the currently selected date value.
+     */
+    pointerDate: import("./iso-date").PointerDate;
+    selectionMode: 'day' | 'month' | 'year';
+    /**
+     * The language used to render the weekdays and months.
+     */
+    language: Language;
+    /**
+     * If `true` the user can only select a date via the component in the popup but not directly edit the input field.
+     */
+    readonly: boolean;
+    /**
+     * If `true` the component is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Callback to determine which dates in the picker should be selectable.
+     */
+    allowedDates: (date: string) => boolean;
+    /**
+     * The minimum allowed selectable date in ISO format (yyyy-MM-dd).
+     * Dates before this value will be disabled in the date picker.
+     * Example: '2024-01-01'
+     */
+    min?: string;
+    /**
+     * The maximum allowed selectable date in ISO format (yyyy-MM-dd).
+     * Dates after this value will be disabled in the date picker.
+     * Example: '2025-01-01'
+     */
+    max?: string;
+    /**
+     * The size of the date input field.
+     */
+    size: 'small' | 'medium' | 'large';
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /**
+     * The placeholder defines what text to be shown on the input element
+     */
+    placeholder?: string;
+    /**
+     * The value of the form field in ISO 8601 date format (yyyy-MM-dd).
+     * Example: '2024-01-01'.
+     *
+     * When an invalid date is provided, it will be replaced with an empty string (''),
+     * matching the behavior of native HTML <input type="date">.
+     *
+     * The displayed format can be customized using the dateFormat property, but the underlying
+     * value will always be stored in ISO format.
+     */
+    value: string | '';
+    /** Defines the format pattern for displaying dates and how dates can be entered via keyboard.
+     *
+     * The parser accepts flexible input that doesn't strictly match the format pattern.
+     * Input with missing leading zeros or incomplete years will be automatically normalized.
+     * For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and
+     * "1.1.225" becomes "01.01.0225".
+     *
+     * Defaults to "dd.MM.yyyy".
+     *
+     * Available patterns:
+     * - Year: "yyyy" (e.g., "2021")
+     * - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January)
+     * - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th)
+     *
+     * Examples:
+     * - "dd.MM.yyyy" -> "31.01.2024"
+     * - "yyyy-MM-dd" -> "2024-01-31"
+     * - "d.M.yyyy" -> "31.1.2024"
+     * */
+    dateFormat: string;
+    /** The label text. */
+    label: string;
+    /** The input's help text. Alternatively, you can use the help-text slot. */
+    helpText: string;
+    /** The error message shown, if `invalid` is set to true.  */
+    errorText: string | string[];
+    /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */
+    errorTextCount?: number;
+    /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+    invalid: boolean;
+    /** The input's name attribute. */
+    name: string;
+    /** Set to true to add a clear button when the input is populated. */
+    clearable: boolean;
+    valueChanged(): void;
+    /**
+     * Emitted when the control's value changes.
+     * Event detail contains the new date value in ISO format (yyyy-MM-dd) or an empty string if cleared.
+     */
+    sixChange: EventEmitter<string | ''>;
+    /**
+     * Emitted when the control loses focus or the date picker popup is closed.
+     * Does not contain event details.
+     */
+    sixBlur: EventEmitter;
+    /** Sets focus on the input. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    private panelHideInProgress;
+    private updateValueAndPointerDate;
+    private getSixInputBaseElement;
+    private show;
+    private hide;
+    private initPopover;
+    private handlePreviousClick;
+    private handleNextClick;
+    private handleDocumentMouseDown;
+    private handleDayClick;
+    private handleMonthClicked;
+    private handleYearClicked;
+    private handleInputChange;
+    private handleInputBlur;
+    private handleInputClearClick;
+    private handleInputKeyDown;
+    private updateInputElementValue;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/six-date/translations.d.ts

@@ -0,0 +1,37 @@
+import { Language } from '../../utils/error-messages';
+export declare const i18nDate: {
+    en: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    de: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    fr: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    it: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    es: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+};
+export declare function translateMonth(month: number, language: Language): string;
+export declare function translateMonthShort(month: number, language: Language): string;
+export declare function translateWeekday(day: number, language: Language): string;
+export declare function translateFormatHelp(language: Language, pattern: string): string;

package/dist/types/components/six-datepicker/six-datepicker.d.ts

@@ -19,7 +19,7 @@ declare enum SelectionMode {
 }
 /**
  * @since 1.0
- * @status stable
+ * @status deprecated. Use six-date instead.
  *
  * @slot - Used to define a footer for the date picker.
  * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.

package/dist/types/components/six-dialog/six-dialog.d.ts

@@ -1,5 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
+export interface SixDialogRequestClose {
+    source: 'close-button' | 'keyboard' | 'overlay';
+}
 /**
  * @since 1.0
  * @status stable
@@ -56,8 +59,12 @@ export declare class SixDialog {
      * allow you to set it on a different element in the dialog, such as an input or button.
      */
     sixInitialFocus: EventEmitter<EmptyPayload>;
-    /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */
-    sixOverlayDismiss: EventEmitter<EmptyPayload>;
+    /**
+     * Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or
+     * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing
+     * the drawer will result in destructive behavior such as data loss.
+     */
+    sixRequestClose: EventEmitter<SixDialogRequestClose>;
     connectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
@@ -69,6 +76,7 @@ export declare class SixDialog {
     private handleCloseClick;
     private handleKeyDown;
     private handleOverlayClick;
+    private preventClose;
     private handleSlotChange;
     private handleTransitionEnd;
     render(): any;

package/dist/types/components/six-drawer/six-drawer.d.ts

@@ -1,5 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
+export interface SixDrawerRequestClose {
+    source: 'close-button' | 'keyboard' | 'overlay';
+}
 /**
  * @since 1.0
  * @status stable
@@ -62,8 +65,12 @@ export declare class SixDrawer {
      * allow you to set it on a different element in the drawer, such as an input or button.
      */
     sixInitialFocus: EventEmitter<EmptyPayload>;
-    /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */
-    sixOverlayDismiss: EventEmitter<EmptyPayload>;
+    /**
+     * Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or
+     * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing
+     * the drawer will result in destructive behavior such as data loss.
+     */
+    sixRequestClose: EventEmitter<SixDrawerRequestClose>;
     connectedCallback(): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;
@@ -74,6 +81,7 @@ export declare class SixDrawer {
     private handleCloseClick;
     private handleKeyDown;
     private handleOverlayClick;
+    private preventClose;
     private handleSlotChange;
     private handleTransitionEnd;
     private resetTransitionVariables;

package/dist/types/components/six-dropdown/six-dropdown.d.ts

@@ -34,7 +34,7 @@ export declare class SixDropdown {
     private scrollPanel?;
     private panelSlot?;
     private positioner?;
-    private popover?;
+    private popoverHelper?;
     private trigger?;
     private triggerSlot?;
     private resizeObserver;

package/dist/types/components/six-file-upload/six-file-upload.d.ts

@@ -1,13 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-interface ISingleFile {
-    file: File;
-}
-interface IMultipleFiles {
+export interface SixFileUploadSuccessPayload {
     files: FileList;
 }
-export type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;
 export interface SixFileUploadFailurePayload {
     reason: string;
+    code: 'ONLY_ONE_FILE_ALLOWED' | 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE' | 'INVALID_MIME_TYPE' | 'ONE_OR_MULTIPLE_FILES_TOO_BIG' | 'FILE_TOO_BIG';
 }
 /**
  * @since 2.0.0
@@ -56,4 +53,3 @@ export declare class SixFileUpload {
     private renderLabel;
     render(): any;
 }
-export {};

package/dist/types/components/six-icon/six-icon.d.ts

@@ -1,3 +1,4 @@
+import { IconLibrary } from '../../utils/icon';
 /**
  * @since 1.0
  * @status stable
@@ -9,5 +10,20 @@ export declare class SixIcon {
     size: 'inherit' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
     /** If set to true the default material outlined icons are not used. */
     filled: boolean;
+    /**
+     * Icon library to use when no `library` prop is provided.
+     * By default, all `<six-icon>` instances fall back to the globally configured
+     * default library (via `setDefaultIconLibrary()` / `getDefaultIconLibrary()`),
+     * which is `"material-icons"` unless changed at runtime.
+     *
+     * This allows teams to switch the default across an entire project without
+     * having to set the `library` prop on every `<six-icon>` instance.
+     *
+     * Icon library for this instance. Overrides the global default.
+     * - "material-icons"  → Material Icons
+     * - "material-symbols"  → Material Symbols
+     */
+    library?: IconLibrary;
+    private isSymbols;
     render(): any;
 }

package/dist/types/components/six-picto/six-picto.d.ts

@@ -10,7 +10,5 @@ export declare class SixPicto {
      * Defines the size of the icon.
      */
     size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl';
-    svgContent: string | null;
-    componentWillLoad(): Promise<void>;
     render(): any;
 }

package/dist/types/components/six-rating/six-rating.d.ts

@@ -0,0 +1,52 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+export declare class SixRating {
+    el: HTMLSixRatingElement;
+    /** The rating's name attribute. */
+    name: string;
+    /** The rating's value attribute. */
+    value: number;
+    /** Set to true to disable the rating. */
+    disabled: boolean;
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /** The label text. */
+    label: string;
+    /** The error message shown, if `invalid` is set to true.  */
+    errorText: string | string[];
+    /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */
+    errorTextCount?: number;
+    /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+    invalid: boolean;
+    /** Maximum number of stars. Default is 5 */
+    max: number;
+    /** Size of the stars */
+    size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
+    /** If its readonly */
+    readonly: boolean;
+    /** The rating's help text. Alternatively, you can use the help-text slot. */
+    helpText: string;
+    /** Emitted when the control loses focus. */
+    sixBlur: EventEmitter<number>;
+    /** Emitted when the control's checked state changes. */
+    sixChange: EventEmitter<number>;
+    /** Emitted when the control gains focus. */
+    sixFocus: EventEmitter<EmptyPayload>;
+    hasFocus: boolean;
+    hasLabelSlot: boolean;
+    hasErrorSlot: boolean;
+    hoveredValue: number;
+    private static id;
+    private ratingId;
+    private labelId;
+    private errorTextId;
+    handleValueChange(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleSlotChange;
+    private handleBlur;
+    private handleFocus;
+    private handleKeyDown;
+    private renderStars;
+    render(): any;
+}

package/dist/types/components/six-select/six-select.d.ts

@@ -130,6 +130,7 @@ export declare class SixSelect {
     /** Sets focus on the select. */
     setFocus(options?: FocusOptions): Promise<void>;
     private getItemLabel;
+    private getSlottedItem;
     private getItems;
     private getVisibleItems;
     private getSelectionContainerItems;

package/dist/types/components/six-sidebar-item/six-sidebar-item.d.ts

@@ -11,6 +11,8 @@ export declare class SixSidebarItem {
     selected: boolean;
     /** Set to true to draw the sidebar item in a disabled state. */
     disabled: boolean;
+    /** Icon of the item */
+    icon: string;
     /**
      * Provide if the item should be rendered as anchor tag.
      * Note, that the href is added automatically when using routerLink in Angular.

package/dist/types/components/six-sidebar-item-group/six-sidebar-item-group.d.ts

@@ -28,6 +28,8 @@ export declare class SixSidebarItemGroup {
     private handleSlotChange;
     private isSubgroup;
     private renderAsHref;
+    private handleDetailsShow;
+    private handleDetailsHide;
     private provideSlot;
     render(): any;
 }

package/dist/types/components/six-tooltip/six-tooltip.d.ts

@@ -14,7 +14,7 @@ import { EmptyPayload } from '../../utils/types';
 export declare class SixTooltip {
     private componentId;
     private isVisible;
-    private popover?;
+    private popoverHelper?;
     private tooltipPositioner?;
     private target?;
     private tooltip?;