@baloise/ds-core 20.0.0-next.7 → 20.0.0-next.8

package/dist/types/components/close/close.d.ts

@@ -14,10 +14,14 @@ export declare class Close implements DsComponentInterface, DsConfigObserver {
     el: HTMLStencilElement;
     language: DsLanguage;
     region: DsRegion;
+    /**
+     * PUBLIC PROPERTY API
+     * ─────────────────────────────────────────────────────
+     */
     /**
      * Define the size of badge. Small is recommended for tabs.
      */
-    readonly size: CloseSize;
+    readonly size?: CloseSize;
     /**
      * If `true` it supports dark backgrounds.
      */
@@ -34,10 +38,18 @@ export declare class Close implements DsComponentInterface, DsConfigObserver {
     /**
      * Defines the color of the button variant. Only applicable if `button` is `true`.
      */
-    readonly buttonColor: ButtonColor;
+    readonly buttonColor?: ButtonColor;
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
     /**
      * @internal define config for the component
      */
     configChanged(state: DsConfigState): Promise<void>;
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
     render(): any;
 }

package/dist/types/components/close/close.interfaces.d.ts

@@ -1,2 +1,2 @@
-export declare const CLOSE_SIZES: readonly ["", "sm", "md", "small", "medium"];
+export declare const CLOSE_SIZES: readonly ["sm", "md", "small", "medium"];
 export type CloseSize = (typeof CLOSE_SIZES)[number];

package/dist/types/components/content/content.d.ts

@@ -20,30 +20,30 @@ export declare class Content implements DsComponentInterface {
     /**
      * **Deprecated:** Use direction instead.
      */
-    readonly layout: StackLayout;
+    readonly layout?: StackLayout;
     /**
      * Defines the direction of the child elements. Default is column.
      */
-    readonly direction: StackDirection;
+    readonly direction?: StackDirection;
     /**
      * Defines the positioning like center, end or
      * default to start.
      */
-    readonly align: ContentAlignment;
+    readonly align?: ContentAlignment;
     /**
      * Defines the text positioning like center, right or
      * default to left.
      */
-    readonly textAlign: ContentTextAlignment;
+    readonly textAlign?: ContentTextAlignment;
     /**
      * Defines the space between the child elements. Default is xx-small.
      */
-    readonly space: ContentSpace;
+    readonly space?: ContentSpace;
     /**
      * @internal
      * Please use align instead.
      */
-    readonly alignment: StackAlignment;
+    readonly alignment?: StackAlignment;
     /**
      * RENDER
      * ------------------------------------------------------

package/dist/types/components/content/content.interfaces.d.ts

@@ -1,7 +1,7 @@
 export declare const CONTENT_LAYOUTS: readonly ["", "horizontal", "vertical"];
-export declare const CONTENT_DIRECTIONS: readonly ["", "column", "row"];
-export declare const CONTENT_SPACES: readonly ["", "none", "3xs", "2xs", "xs", "sm", "base", "xxx-small", "xx-small", "x-small", "small", "normal"];
-export declare const CONTENT_ALIGNMENTS: readonly ["", "start", "center", "end"];
+export declare const CONTENT_DIRECTIONS: readonly ["column", "row"];
+export declare const CONTENT_SPACES: readonly ["none", "3xs", "2xs", "xs", "sm", "base", "xxx-small", "xx-small", "x-small", "small", "normal"];
+export declare const CONTENT_ALIGNMENTS: readonly ["start", "center", "end"];
 export declare const CONTENT_TEXT_ALIGNMENTS: readonly ["", "left", "center", "right"];
 export type ContentLayout = (typeof CONTENT_LAYOUTS)[number];
 export type ContentDirection = (typeof CONTENT_DIRECTIONS)[number];

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

@@ -9,6 +9,7 @@ import { DateColor, DateBlurDetail, DateKeyPressDetail, DateFocusDetail, DateCli
 /**
  * Date renders a masked date input field with an interactive calendar popup for date selection.
  *
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part input - The native HTML input element.
  * @part clear - The clear button that removes the selected date.
  * @part trigger - The calendar icon button that opens the date picker popup.
@@ -30,6 +31,8 @@ export declare class DsDate implements DsComponentInterface, FieldInterface, For
     language: DsLanguage;
     region: DsRegion;
     isOpen: boolean;
+    hasInvalidTextSlotContent: boolean;
+    private disconnectInvalidTextSlotWatcher?;
     protected isOpenChanged(open: boolean): void;
     internals: ElementInternals;
     /**

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

@@ -9,6 +9,7 @@ import { type FileUploadChangeDetail, type FileUploadFilesAddedDetail, type File
 /**
  * FileUpload renders a drag-drop file upload area with optional file list, validation, and form field integration.
  *
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part drop-zone - The main drop area where users drag files or click to select.
  * @part file-list - The list of selected files below the drop zone.
  */
@@ -25,6 +26,8 @@ export declare class FileUpload implements DsComponentInterface, FieldInterface
     isDragOver: boolean;
     language: DsLanguage;
     region: DsRegion;
+    hasInvalidTextSlotContent: boolean;
+    private disconnectInvalidTextSlotWatcher?;
     /**
      * PUBLIC PROPERTY API
      * ------------------------------------------------------

package/dist/types/components/heading/heading.d.ts

@@ -17,7 +17,7 @@ export declare class Heading implements DsComponentInterface {
     autoFontSize?: HeadingSize;
     /**
      * PUBLIC PROPERTY API
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * The actual heading level used in the HTML markup.
@@ -29,12 +29,12 @@ export declare class Heading implements DsComponentInterface {
      * This option allows you to make e.g. h1 visually look like h3,
      * but still keep it h1 in the markup.
      */
-    readonly visualLevel: HeadingVisualLevel;
+    readonly visualLevel?: HeadingVisualLevel;
     visualLevelChanged(): void;
     /**
      * The actual heading level used in the HTML markup.
      */
-    readonly autoLevel: HeadingVisualLevel;
+    readonly autoLevel?: HeadingVisualLevel;
     autoLevelChanged(): void;
     /**
      * When true, the text will be truncated with a text overflow ellipsis instead of wrapping.
@@ -49,11 +49,11 @@ export declare class Heading implements DsComponentInterface {
     /**
      * Defines at which position the heading has spacing.
      */
-    readonly space: HeadingSpace;
+    readonly space?: HeadingSpace;
     /**
      * The theme type of the toast.
      */
-    readonly color: HeadingColor;
+    readonly color?: HeadingColor;
     /**
      * If `true` the color gets inverted for dark backgrounds
      */
@@ -64,14 +64,14 @@ export declare class Heading implements DsComponentInterface {
     readonly shadow: boolean;
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
-    connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidRender(): void;
     private updateAutoFontSize;
     /**
-     * GETTERS
-     * ------------------------------------------------------
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
      */
     private get rows();
     private get fontColor();
@@ -79,7 +79,7 @@ export declare class Heading implements DsComponentInterface {
     private get tag();
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render(): any;
 }

package/dist/types/components/heading/heading.interfaces.d.ts

@@ -1,8 +1,8 @@
-export declare const HEADING_VISUAL_LEVELS: readonly ["display", "display-2", "h1", "h2", "h3", "h4", "h5", "5xl", "4xl", "3xl", "2xl", "xl", "lg", "md", "base", ""];
-export declare const HEADING_COLORS: readonly ["primary", "info", "success", "warning", "danger", "blue", "white", ""];
+export declare const HEADING_VISUAL_LEVELS: readonly ["display", "display-2", "h1", "h2", "h3", "h4", "h5", "5xl", "4xl", "3xl", "2xl", "xl", "lg", "md", "base"];
+export declare const HEADING_COLORS: readonly ["primary", "info", "success", "warning", "danger", "blue", "white"];
 export declare const HEADING_TAGS: readonly ["h1", "h2", "h3", "h4", "h5", "span", "p"];
 export declare const HEADING_LEVELS: readonly ["display", "display-2", "h1", "h2", "h3", "h4", "h5", "span", "p", ""];
-export declare const HEADING_SPACES: readonly ["none", "bottom", "top", "all", ""];
+export declare const HEADING_SPACES: readonly ["none", "bottom", "top", "all"];
 export type HeadingVisualLevel = (typeof HEADING_VISUAL_LEVELS)[number];
 export type HeadingTag = (typeof HEADING_TAGS)[number];
 export type HeadingLevel = (typeof HEADING_LEVELS)[number];

package/dist/types/components/input/input.d.ts

@@ -8,6 +8,7 @@ import { InputColor, InputInputType, InputAutocomplete, InputAutocorrect, InputI
 /**
  * Input renders a text input field with validation, masking, autocomplete, and optional help/error messaging.
  *
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part input - The native HTML input element.
  * @part prefix - The prefix wrapper (if used).
  * @part suffix - The suffix wrapper (if used).
@@ -23,6 +24,8 @@ export declare class Input implements DsComponentInterface, FieldInterface, Form
     focused: boolean;
     language: DsLanguage;
     region: DsRegion;
+    hasInvalidTextSlotContent: boolean;
+    private disconnectInvalidTextSlotWatcher?;
     internals: ElementInternals;
     /**
      * PUBLIC PROPERTY API
@@ -202,6 +205,7 @@ export declare class Input implements DsComponentInterface, FieldInterface, Form
      * ------------------------------------------------------
      */
     connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     /**

package/dist/types/components/input-slider/input-slider.d.ts

@@ -8,6 +8,7 @@ import { InputSliderBrandColor, InputSliderInputDetail, InputSliderChangeDetail,
 /**
  * Input slider renders a noUiSlider-backed slider with validation and label/description messaging.
  *
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part slider - The noUiSlider target element.
  */
 export declare class InputSlider implements DsComponentInterface, FieldInterface {
@@ -23,6 +24,8 @@ export declare class InputSlider implements DsComponentInterface, FieldInterface
     focused: boolean;
     language: DsLanguage;
     region: DsRegion;
+    hasInvalidTextSlotContent: boolean;
+    private disconnectInvalidTextSlotWatcher?;
     /**
      * PUBLIC PROPERTY API
      * ------------------------------------------------------
@@ -124,7 +127,7 @@ export declare class InputSlider implements DsComponentInterface, FieldInterface
     dsClick: EventEmitter<InputSliderClickDetail>;
     /**
      * Emitted when the value is committed (noUiSlider `change`, not `blur` — see
-     * ADR-0006/ADR-0007). Fires once per discrete drag/step, independent of focus.
+     * ADR-0010/ADR-0007). Fires once per discrete drag/step, independent of focus.
      */
     dsChange: EventEmitter<InputSliderChangeDetail>;
     /**

package/dist/types/components/number-input/number-input.d.ts

@@ -9,6 +9,7 @@ import { NumberInputInputDetail, NumberInputChangeDetail, NumberInputBlurDetail,
  * Number input renders a specialized text input for numeric values with increment/decrement buttons, formatting, and validation.
  *
  * @slot - The number input field content and surrounding elements.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part input - The native HTML input element.
  * @part prefix - The prefix wrapper (if used).
  * @part suffix - The suffix wrapper (if used).
@@ -20,12 +21,14 @@ export declare class NumberInput implements DsComponentInterface, FieldInterface
     private inheritedAttributes;
     private selectTimeout?;
     private control;
+    private disconnectInvalidTextSlotWatcher?;
     private lastValue;
     log: LogInstance;
     createLogger(log: LogInstance): void;
     el: HTMLStencilElement;
     internals: ElementInternals;
     focused: boolean;
+    hasInvalidTextSlotContent: boolean;
     language: DsLanguage;
     region: DsRegion;
     nativeInputValue: string;
@@ -141,6 +144,7 @@ export declare class NumberInput implements DsComponentInterface, FieldInterface
      * ------------------------------------------------------
      */
     connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     /**

package/dist/types/components/radio/radio-group/radio-group.d.ts

@@ -9,6 +9,7 @@ import { HTMLStencilElement } from '../../../stencil-public-runtime';
  * Radio Group groups multiple radio inputs so only one option can be selected at a time within a form field.
  *
  * @slot - The radio items to display inside the group.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  */
 export declare class RadioGroup implements DsComponentInterface, FieldInterface {
     log: LogInstance;
@@ -17,6 +18,8 @@ export declare class RadioGroup implements DsComponentInterface, FieldInterface
     internals: ElementInternals;
     language: DsLanguage;
     region: DsRegion;
+    hasInvalidTextSlotContent: boolean;
+    private disconnectInvalidTextSlotWatcher?;
     inputId: string;
     private initialValue?;
     /**
@@ -121,6 +124,7 @@ export declare class RadioGroup implements DsComponentInterface, FieldInterface
      * ------------------------------------------------------
      */
     connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentWillUpdate(): void;
     componentDidLoad(): void;

package/dist/types/components/segment/segment/segment.d.ts

@@ -9,6 +9,7 @@ import { HTMLStencilElement } from '../../../stencil-public-runtime';
  * Segment renders a group of button-like controls for selecting a single option from multiple choices with toggle behavior.
  *
  * @slot - One or more ds-segment-item elements.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part segment - The segment container element.
  */
 export declare class Segment implements DsComponentInterface, Omit<FieldInterface, 'color'> {
@@ -21,6 +22,8 @@ export declare class Segment implements DsComponentInterface, Omit<FieldInterfac
     region: DsRegion;
     items: SegmentItemInterface[];
     autoVertical: boolean;
+    hasInvalidTextSlotContent: boolean;
+    private disconnectInvalidTextSlotWatcher?;
     private initialValue?;
     private resizeObserver?;
     private lastNaturalWidth;

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

@@ -12,6 +12,7 @@ import { SelectOption, SelectOptionGroup, SelectChangeDetail, SelectFocusDetail,
  *
  * @slot - Optional ds-select-option / ds-select-optgroup elements, as an HTML-only alternative
  * to the options / optionGroups props. Ignored whenever options or optionGroups is non-empty.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part inner - The inner wrapper element containing label, control, and description.
  * @part label - The label element.
  * @part control - The control container wrapping the slim-select trigger.
@@ -31,6 +32,8 @@ export declare class DsSelect implements DsComponentInterface, FieldInterface {
     language: DsLanguage;
     region: DsRegion;
     slottedOptions: SelectOption[];
+    hasInvalidTextSlotContent: boolean;
+    private disconnectInvalidTextSlotWatcher?;
     slottedOptionGroups: SelectOptionGroup[];
     internals: ElementInternals;
     /**

package/dist/types/components/spinner/spinner.d.ts

@@ -6,6 +6,7 @@ import { SpinnerColor, SpinnerLabelPosition, SpinnerSize, SpinnerVariation } fro
  * Spinner displays an animated loading indicator with customizable color, size, and variation.
  *
  * @part inner - The spinner animation container element.
+ * @part label - The visible label rendered next to the spinner.
  */
 export declare class Spinner implements DsComponentInterface, DsConfigObserver {
     log: LogInstance;
@@ -20,7 +21,7 @@ export declare class Spinner implements DsComponentInterface, DsConfigObserver {
     private innerEl;
     /**
      * PUBLIC PROPERTY API
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * **Deprecated:** Use inverted="true" for white spinner instead.
@@ -38,7 +39,7 @@ export declare class Spinner implements DsComponentInterface, DsConfigObserver {
     /**
      * Defines the size of the spinner. If `sm` the spinner is smaller.
      */
-    size: SpinnerSize;
+    size?: SpinnerSize;
     /**
      * **Deprecated:** Use size="sm" instead.
      */
@@ -58,13 +59,13 @@ export declare class Spinner implements DsComponentInterface, DsConfigObserver {
     variationChanged(newValue: SpinnerVariation, oldValue: SpinnerVariation): void;
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     componentDidLoad(): void;
     disconnectedCallback(): void;
     /**
-     * PUBLIC LISTENERS
-     * ------------------------------------------------------
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
      */
     /**
      * @internal define config for the component
@@ -72,7 +73,7 @@ export declare class Spinner implements DsComponentInterface, DsConfigObserver {
     configChanged(state: DsConfigState): Promise<void>;
     /**
      * PRIVATE METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     private animate;
     private destroy;
@@ -81,7 +82,7 @@ export declare class Spinner implements DsComponentInterface, DsConfigObserver {
     private getColor;
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render(): any;
 }

package/dist/types/components/spinner/spinner.interfaces.d.ts

@@ -1,6 +1,6 @@
 export declare const SPINNER_COLORS: readonly ["blue", "white"];
 export declare const SPINNER_VARIATIONS: readonly ["logo", "circle"];
-export declare const SPINNER_SIZES: readonly ["sm", ""];
+export declare const SPINNER_SIZES: readonly ["sm"];
 export declare const SPINNER_LABEL_POSITIONS: readonly ["right", "bottom"];
 export type SpinnerColor = (typeof SPINNER_COLORS)[number];
 export type SpinnerVariation = (typeof SPINNER_VARIATIONS)[number];

package/dist/types/components/stack/stack.d.ts

@@ -18,16 +18,16 @@ export declare class Stack implements DsComponentInterface {
     /**
      * Defines the text positioning like center, right or default to start.
      */
-    readonly align: StackAlignment;
+    readonly align?: StackAlignment;
     /**
      * @internal
      * Please use align instead.
      */
-    readonly alignment: StackAlignment;
+    readonly alignment?: StackAlignment;
     /**
      * Defines the direction of the child elements. Default is column.
      */
-    direction: StackDirection;
+    direction?: StackDirection;
     /**
      * Defines the width of the stack to be exactly the width of the content.
      */

package/dist/types/components/stack/stack.interfaces.d.ts

@@ -1,8 +1,8 @@
 export declare const STACK_LAYOUTS: readonly ["", "horizontal", "vertical", "horizontal-reverse", "vertical-reverse"];
 export declare const STACK_SPACES: readonly ["", "auto", "none", "2xs", "xs", "sm", "base", "md", "lg", "xl", "xxl", "xx-small", "x-small", "small", "normal", "medium", "large", "x-large", "xx-large"];
 export declare const STACK_PADDINGS: readonly ["", "none", "2xs", "xs", "sm", "base", "md", "lg", "xl", "xxl", "xx-small", "x-small", "small", "normal", "medium", "large", "x-large", "xx-large"];
-export declare const STACK_ALIGNMENTS: readonly ["", "top start", "top center", "top end", "start", "center", "end", "bottom start", "bottom center", "bottom end"];
-export declare const STACK_DIRECTIONS: readonly ["", "row", "column", "row-reverse", "column-reverse"];
+export declare const STACK_ALIGNMENTS: readonly ["top start", "top center", "top end", "start", "center", "end", "bottom start", "bottom center", "bottom end"];
+export declare const STACK_DIRECTIONS: readonly ["row", "column", "row-reverse", "column-reverse"];
 export type StackLayout = (typeof STACK_LAYOUTS)[number];
 export type StackSpace = (typeof STACK_SPACES)[number];
 export type StackPadding = (typeof STACK_PADDINGS)[number];

package/dist/types/components/textarea/textarea.d.ts

@@ -9,6 +9,7 @@ import { TextareaWrap, TextareaInputMode, TextareaBlurDetail, TextareaKeyPressDe
  * Textarea renders a multi-line text input field with validation, resizing, and optional help/error messaging.
  *
  * @slot - The textarea field content and surrounding elements.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part textarea - The native HTML textarea element.
  * @part prefix - The prefix wrapper (if used).
  * @part suffix - The suffix wrapper (if used).
@@ -17,11 +18,13 @@ export declare class Textarea implements DsComponentInterface, FieldInterface, F
     inputId: string;
     private inheritedAttributes;
     private control;
+    private disconnectInvalidTextSlotWatcher?;
     log: LogInstance;
     createLogger(log: LogInstance): void;
     el: HTMLStencilElement;
     internals: ElementInternals;
     focused: boolean;
+    hasInvalidTextSlotContent: boolean;
     language: DsLanguage;
     region: DsRegion;
     /**
@@ -146,6 +149,7 @@ export declare class Textarea implements DsComponentInterface, FieldInterface, F
      * ------------------------------------------------------
      */
     connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     /**