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

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;
     /**

package/dist/types/components.d.ts

@@ -191,9 +191,8 @@ export namespace Components {
         "animated": boolean;
         /**
           * Defines the container size constraint for the alert layout.
-          * @default ''
          */
-        "container": AlertContainerSize;
+        "container"?: AlertContainerSize;
         /**
           * Removes the alert with the given ID.
          */
@@ -225,6 +224,9 @@ export namespace Components {
           * @default false
          */
         "ready": boolean;
+        /**
+          * Sets focus on the given elements using the app's focus-visible handling.
+         */
         "setFocus": (elements: HTMLElement[]) => Promise<void>;
     }
     /**
@@ -233,19 +235,17 @@ export namespace Components {
     interface DsBadge {
         /**
           * Define the color for the badge.
-          * @default ''
          */
-        "color": BadgeColor;
+        "color"?: BadgeColor;
         /**
           * Name of the icon to show. If an icon is present, text should be hidden.
           * @default ''
          */
         "icon": string;
         /**
-          * If `true` the badge is added to the top right corner of the card.
-          * @default ''
+          * Defines where the badge is positioned relative to its host, e.g. the top right corner of a card.
          */
-        "position": BadgePosition;
+        "position"?: BadgePosition;
         /**
           * If `true` the badge is added to the top right corner of the card.
           * @default false
@@ -253,9 +253,8 @@ export namespace Components {
         "pulse": boolean;
         /**
           * Define the size of badge. Small is recommended for tabs.
-          * @default ''
          */
-        "size": BadgeSize;
+        "size"?: BadgeSize;
     }
     /**
      * Button provides a clickable element for triggering actions, submitting forms, or navigating — supporting text, icons, or both.
@@ -531,9 +530,8 @@ export namespace Components {
         "bold": boolean;
         /**
           * If `true` the card text color becomes white.
-          * @default ''
          */
-        "color": HeadingColor;
+        "color"?: HeadingColor;
         /**
           * If `true` the card text color becomes white.
           * @default false
@@ -556,9 +554,8 @@ export namespace Components {
         "level": HeadingLevel;
         /**
           * Make the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup.
-          * @default ''
          */
-        "visualLevel": HeadingVisualLevel;
+        "visualLevel"?: HeadingVisualLevel;
     }
     /**
      * Carousel coordinates ds-carousel-item children into a scrollable, accessible slide interface. Supports an image slider and a product tile strip.
@@ -833,9 +830,8 @@ export namespace Components {
         "button": boolean;
         /**
           * Defines the color of the button variant. Only applicable if `button` is `true`.
-          * @default ''
          */
-        "buttonColor": ButtonColor;
+        "buttonColor"?: ButtonColor;
         "configChanged": (state: DsConfigState) => Promise<void>;
         /**
           * If `true` the close component will be disabled and not interactive.
@@ -849,9 +845,8 @@ export namespace Components {
         "inverted": boolean;
         /**
           * Define the size of badge. Small is recommended for tabs.
-          * @default ''
          */
-        "size": CloseSize;
+        "size"?: CloseSize;
     }
     /**
      * Content arranges content with flexible layout, alignment, and spacing options for structural layouts.
@@ -859,33 +854,25 @@ export namespace Components {
     interface DsContent {
         /**
           * Defines the positioning like center, end or default to start.
-          * @default ''
-         */
-        "align": ContentAlignment;
-        /**
-          * @default ''
          */
-        "alignment": StackAlignment;
+        "align"?: ContentAlignment;
+        "alignment"?: StackAlignment;
         /**
           * Defines the direction of the child elements. Default is column.
-          * @default ''
          */
-        "direction": StackDirection;
+        "direction"?: StackDirection;
         /**
           * **Deprecated:** Use direction instead.
-          * @default ''
          */
-        "layout": StackLayout;
+        "layout"?: StackLayout;
         /**
           * Defines the space between the child elements. Default is xx-small.
-          * @default ''
          */
-        "space": ContentSpace;
+        "space"?: ContentSpace;
         /**
           * Defines the text positioning like center, right or default to left.
-          * @default ''
          */
-        "textAlign": ContentTextAlignment;
+        "textAlign"?: ContentTextAlignment;
     }
     /**
      * Data displays a list of label-value pairs in a organized, accessible format.
@@ -1286,14 +1273,12 @@ export namespace Components {
     interface DsHeading {
         /**
           * The actual heading level used in the HTML markup.
-          * @default ''
          */
-        "autoLevel": HeadingVisualLevel;
+        "autoLevel"?: HeadingVisualLevel;
         /**
           * The theme type of the toast.
-          * @default ''
          */
-        "color": HeadingColor;
+        "color"?: HeadingColor;
         /**
           * If `true` the color gets inverted for dark backgrounds
           * @default false
@@ -1316,9 +1301,8 @@ export namespace Components {
         "shadow": boolean;
         /**
           * Defines at which position the heading has spacing.
-          * @default ''
          */
-        "space": HeadingSpace;
+        "space"?: HeadingSpace;
         /**
           * If `true` the heading gets displayed slimmer.
           * @default false
@@ -1326,9 +1310,8 @@ export namespace Components {
         "subtitle": boolean;
         /**
           * Make the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup.
-          * @default ''
          */
-        "visualLevel": HeadingVisualLevel;
+        "visualLevel"?: HeadingVisualLevel;
     }
     /**
      * Hint displays contextual help via an info-circle trigger button.
@@ -1998,9 +1981,8 @@ export namespace Components {
         "closeHandler": () => void;
         /**
           * Defines the color of the element Color type primary is deprecated, please use info instead.
-          * @default ''
          */
-        "color": NotificationColor;
+        "color"?: NotificationColor;
         /**
           * Defines the heading of the notification.
           * @default ''
@@ -2880,9 +2862,8 @@ export namespace Components {
         "labelPosition": SpinnerLabelPosition;
         /**
           * Defines the size of the spinner. If `sm` the spinner is smaller.
-          * @default ''
          */
-        "size": SpinnerSize;
+        "size"?: SpinnerSize;
         /**
           * **Deprecated:** Use size="sm" instead.
           * @default false
@@ -2900,18 +2881,13 @@ export namespace Components {
     interface DsStack {
         /**
           * Defines the text positioning like center, right or default to start.
-          * @default ''
-         */
-        "align": StackAlignment;
-        /**
-          * @default ''
          */
-        "alignment": StackAlignment;
+        "align"?: StackAlignment;
+        "alignment"?: StackAlignment;
         /**
           * Defines the direction of the child elements. Default is column.
-          * @default ''
          */
-        "direction": StackDirection;
+        "direction"?: StackDirection;
         /**
           * Defines the width of the stack to be exactly the width of the content.
           * @default false
@@ -5030,7 +5006,6 @@ declare namespace LocalJSX {
         "animated"?: boolean;
         /**
           * Defines the container size constraint for the alert layout.
-          * @default ''
          */
         "container"?: AlertContainerSize;
         /**
@@ -5059,7 +5034,6 @@ declare namespace LocalJSX {
     interface DsBadge {
         /**
           * Define the color for the badge.
-          * @default ''
          */
         "color"?: BadgeColor;
         /**
@@ -5068,8 +5042,7 @@ declare namespace LocalJSX {
          */
         "icon"?: string;
         /**
-          * If `true` the badge is added to the top right corner of the card.
-          * @default ''
+          * Defines where the badge is positioned relative to its host, e.g. the top right corner of a card.
          */
         "position"?: BadgePosition;
         /**
@@ -5079,7 +5052,6 @@ declare namespace LocalJSX {
         "pulse"?: boolean;
         /**
           * Define the size of badge. Small is recommended for tabs.
-          * @default ''
          */
         "size"?: BadgeSize;
     }
@@ -5381,7 +5353,6 @@ declare namespace LocalJSX {
         "bold"?: boolean;
         /**
           * If `true` the card text color becomes white.
-          * @default ''
          */
         "color"?: HeadingColor;
         /**
@@ -5406,7 +5377,6 @@ declare namespace LocalJSX {
         "level"?: HeadingLevel;
         /**
           * Make the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup.
-          * @default ''
          */
         "visualLevel"?: HeadingVisualLevel;
     }
@@ -5699,7 +5669,6 @@ declare namespace LocalJSX {
         "button"?: boolean;
         /**
           * Defines the color of the button variant. Only applicable if `button` is `true`.
-          * @default ''
          */
         "buttonColor"?: ButtonColor;
         /**
@@ -5714,7 +5683,6 @@ declare namespace LocalJSX {
         "inverted"?: boolean;
         /**
           * Define the size of badge. Small is recommended for tabs.
-          * @default ''
          */
         "size"?: CloseSize;
     }
@@ -5724,27 +5692,22 @@ declare namespace LocalJSX {
     interface DsContent {
         /**
           * Defines the positioning like center, end or default to start.
-          * @default ''
          */
         "align"?: ContentAlignment;
         /**
           * Defines the direction of the child elements. Default is column.
-          * @default ''
          */
         "direction"?: StackDirection;
         /**
           * **Deprecated:** Use direction instead.
-          * @default ''
          */
         "layout"?: StackLayout;
         /**
           * Defines the space between the child elements. Default is xx-small.
-          * @default ''
          */
         "space"?: ContentSpace;
         /**
           * Defines the text positioning like center, right or default to left.
-          * @default ''
          */
         "textAlign"?: ContentTextAlignment;
     }
@@ -6190,12 +6153,10 @@ declare namespace LocalJSX {
     interface DsHeading {
         /**
           * The actual heading level used in the HTML markup.
-          * @default ''
          */
         "autoLevel"?: HeadingVisualLevel;
         /**
           * The theme type of the toast.
-          * @default ''
          */
         "color"?: HeadingColor;
         /**
@@ -6220,7 +6181,6 @@ declare namespace LocalJSX {
         "shadow"?: boolean;
         /**
           * Defines at which position the heading has spacing.
-          * @default ''
          */
         "space"?: HeadingSpace;
         /**
@@ -6230,7 +6190,6 @@ declare namespace LocalJSX {
         "subtitle"?: boolean;
         /**
           * Make the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup.
-          * @default ''
          */
         "visualLevel"?: HeadingVisualLevel;
     }
@@ -6603,7 +6562,7 @@ declare namespace LocalJSX {
          */
         "onDsBlur"?: (event: DsInputSliderCustomEvent<InputSliderBlurDetail>) => void;
         /**
-          * Emitted when the value is committed (noUiSlider `change`, not `blur` — see ADR-0006/ADR-0007). Fires once per discrete drag/step, independent of focus.
+          * Emitted when the value is committed (noUiSlider `change`, not `blur` — see ADR-0010/ADR-0007). Fires once per discrete drag/step, independent of focus.
          */
         "onDsChange"?: (event: DsInputSliderCustomEvent<InputSliderChangeDetail>) => void;
         /**
@@ -6921,7 +6880,6 @@ declare namespace LocalJSX {
         "closable"?: boolean;
         /**
           * Defines the color of the element Color type primary is deprecated, please use info instead.
-          * @default ''
          */
         "color"?: NotificationColor;
         /**
@@ -7850,7 +7808,6 @@ declare namespace LocalJSX {
         "labelPosition"?: SpinnerLabelPosition;
         /**
           * Defines the size of the spinner. If `sm` the spinner is smaller.
-          * @default ''
          */
         "size"?: SpinnerSize;
         /**
@@ -7870,12 +7827,10 @@ declare namespace LocalJSX {
     interface DsStack {
         /**
           * Defines the text positioning like center, right or default to start.
-          * @default ''
          */
         "align"?: StackAlignment;
         /**
           * Defines the direction of the child elements. Default is column.
-          * @default ''
          */
         "direction"?: StackDirection;
         /**

package/dist/types/global/token-preview.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Live token preview: applies token changes posted by an embedding parent window (Toky's live
+ * preview sidebar) directly to `document.documentElement.style`, so a component's rendered
+ * output reflects in-progress token edits without a rebuild. No-ops outside an iframe, so it
+ * never activates during normal component consumption or Playwright visual-regression runs.
+ * No origin allowlist yet - MVP is localhost-only (see packages/core/CONTEXT.md).
+ */
+export declare const initializeTokenPreview: (win?: Window) => void;

package/dist/types/global/token-preview.types.d.ts

@@ -0,0 +1,20 @@
+/** See ADR-0021 and docs/plans/toky-live-token-preview-plan.md for the full contract. */
+export type TokenPreviewMessage = {
+    source: 'ds-token-preview';
+    type: 'set-tokens';
+    tokens: {
+        name: string;
+        value: string | null;
+    }[];
+} | {
+    source: 'ds-token-preview';
+    type: 'set-brand';
+    brand: string | null;
+} | {
+    source: 'ds-token-preview';
+    type: 'reset';
+};
+export type TokenPreviewReadyMessage = {
+    source: 'ds-token-preview';
+    type: 'ready';
+};

package/dist/types/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './form-control';
 export * from './has-value';
 export * from './helpers';
 export * from './is-iso-date';
+export * from './invalid-text-slot';
 export * from './is-value-empty';
 export * from './log';
 export * from './number';

package/dist/types/utils/invalid-text-slot.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Watches the host's `slot="invalid-text"` light-DOM child for content, calling
+ * `onChange` whenever "has non-empty content" flips. Covers both the node being
+ * added/removed/replaced and its text being mutated in place (e.g. AEM writing a
+ * validation message into an otherwise-empty node it owns).
+ *
+ * Returns a disconnect function to call from `disconnectedCallback`.
+ */
+export declare function watchInvalidTextSlot(el: HTMLElement, onChange: (hasContent: boolean) => void): () => void;