@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/esm/{tslib.es6-tdchDLyb.js → tslib.es6-C9GKXw-5.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { d as dsBrowser } from './index-CuwLeg-T.js';
+import { d as dsBrowser } from './index-C6MVahkC.js';
 
 const defaultLoggerConfig = {
     components: [],

package/dist/esm/type-DzkhLOG_.js

@@ -0,0 +1,31 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { c as createValidatorDecorator, g as getValidationContext } from './create-validator-decorator-DovxquEu.js';
+
+/**
+ * Property decorator that validates the property value is of the specified type.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @param type - The expected type ('boolean', 'number', 'string', 'array', 'object', 'function').
+ */
+function Type(type) {
+    return createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = getValidationContext(component, property);
+            const typeIsArray = type === 'array';
+            const valueIsArray = Array.isArray(value);
+            const isValid = typeIsArray || valueIsArray ? valueIsArray === typeIsArray : typeof value === type;
+            if (!isValid) {
+                showError(`must be of type "${type}"`);
+                return false;
+            }
+            return true;
+        },
+    });
+}
+
+export { Type as T };

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

@@ -101,11 +101,6 @@ export declare class Accordion implements DsComponentInterface, DsConfigObserver
      * Emitted when the accordion is closed.
      */
     dsClosed: EventEmitter<AccordionToggleDetail>;
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback(): void;
     /**
      * LISTENERS
      * ------------------------------------------------------

package/dist/types/components/alert/alert-container.d.ts

@@ -30,11 +30,6 @@ export declare class AlertContainer implements DsComponentInterface {
      * Defines the display type: `toast` (top-right overlay) or `snackbar` (bottom banner).
      */
     readonly type: AlertType;
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback(): void;
     /**
      * PUBLIC METHODS
      * ------------------------------------------------------

package/dist/types/components/alert/snackbar/snackbar.d.ts

@@ -20,8 +20,6 @@ export declare class Snackbar implements DsComponentInterface, AlertComponent, D
     isMobile: boolean;
     mobileOpenState: boolean;
     didLoad: boolean;
-    svgContent?: string;
-    iconName?: string;
     /**
      * Defines the color of the element
      * Color type primary is deprecated, please use info instead.
@@ -43,12 +41,10 @@ export declare class Snackbar implements DsComponentInterface, AlertComponent, D
      * Defines the icon of the notification.
      */
     readonly icon: string;
-    iconChanged(): void;
     /**
      * Defines the svg content of the icon
      */
     readonly svg: string;
-    svgChanged(): void;
     /**
      * Defines the icon of the notification, if not provided it will be derived from the color property
      */
@@ -100,7 +96,6 @@ export declare class Snackbar implements DsComponentInterface, AlertComponent, D
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback(): void;
     componentDidLoad(): void;
     /**
      * LISTENERS

package/dist/types/components/alert/toast/toast.d.ts

@@ -20,8 +20,6 @@ export declare class Toast implements DsComponentInterface, AlertComponent, DsCo
     animated: boolean;
     didLoad: boolean;
     didPause: boolean;
-    svgContent?: string;
-    iconName?: string;
     /**
      * Defines the color of the element
      * Color type primary is deprecated, please use info instead.
@@ -43,12 +41,10 @@ export declare class Toast implements DsComponentInterface, AlertComponent, DsCo
      * Defines the icon of the notification.
      */
     readonly icon: string;
-    iconChanged(): void;
     /**
      * Defines the svg content of the icon
      */
     readonly svg: string;
-    svgChanged(): void;
     /**
      * Defines the icon of the notification, if not provided it will be derived from the color property
      */
@@ -115,7 +111,6 @@ export declare class Toast implements DsComponentInterface, AlertComponent, DsCo
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback(): void;
     componentDidLoad(): void;
     /**
      * PUBLIC METHODS

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

@@ -20,8 +20,7 @@ export declare class Badge implements DsComponentInterface {
     /**
      * Define the size of badge. Small is recommended for tabs.
      */
-    size: BadgeSize;
-    sizeChanged(newValue: BadgeSize): void;
+    readonly size: BadgeSize;
     /**
      * Define the color for the badge.
      */
@@ -34,6 +33,5 @@ export declare class Badge implements DsComponentInterface {
      * If `true` the badge is added to the top right corner of the card.
      */
     readonly pulse: boolean;
-    connectedCallback(): void;
     render(): any;
 }

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

@@ -1,4 +1,4 @@
-export declare const BADGE_SIZES: readonly ["small", "large", ""];
+export declare const BADGE_SIZES: readonly ["sm", "lg", "small", "large", ""];
 export declare const BADGE_COLORS: readonly ["grey", "danger", "warning", "success", "red", "yellow", "green", "purple", ""];
 export declare const BADGE_POSITIONS: readonly ["card", "button", "tabs", ""];
 export type BadgeSize = (typeof BADGE_SIZES)[number];

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

@@ -33,11 +33,6 @@ export declare class ButtonGroup implements DsComponentInterface {
      * If `true` the buttons will expand to fill the available space on mobile.
      */
     readonly wide: boolean;
-    /**
-     * LIFECYCLE
-     * ─────────────────────────────────────────────────────
-     */
-    connectedCallback(): void;
     /**
      * RENDER
      * ─────────────────────────────────────────────────────

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

@@ -38,8 +38,7 @@ export declare class Button implements DsComponentInterface {
     /**
      * Size of the button
      */
-    size: ButtonSize;
-    sizeChanged(newValue: ButtonSize): void;
+    readonly size: ButtonSize;
     /**
      * Specifies the URL of the page the link goes to
      */
@@ -170,7 +169,6 @@ export declare class Button implements DsComponentInterface {
      * LIFECYCLE
      * ─────────────────────────────────────────────────────
      */
-    connectedCallback(): void;
     componentWillLoad(): void;
     componentDidRender(): void;
     /**

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

@@ -3,7 +3,7 @@ export declare const BUTTON_GROUP_DIRECTIONS: readonly ["auto", "row", "column"]
 export declare const BUTTON_COLORS: readonly ["", "primary", "secondary", "tertiary", "tertiary-purple", "tertiary-red", "tertiary-yellow", "tertiary-green", "link", "light", "success", "warning", "danger", "text", "info", "primary-light", "info-light"];
 export declare const BUTTON_ELEMENT_TYPES: readonly ["button", "reset", "submit"];
 export declare const BUTTON_SIZES: readonly ["sm", "", "lg", "xl", "small"];
-export declare const BUTTON_TARGETS: readonly ["_blank", "_parent", "_self", "_top"];
+export declare const BUTTON_TARGETS: readonly ["_blank", "_parent", "_self", "_top", ""];
 export type ButtonGroupAlignment = (typeof BUTTON_GROUP_ALIGNMENTS)[number];
 export type ButtonGroupDirection = (typeof BUTTON_GROUP_DIRECTIONS)[number];
 export type ButtonColor = (typeof BUTTON_COLORS)[number];

package/dist/types/components/card/card-actions/card-actions.d.ts

@@ -16,6 +16,5 @@ export declare class CardActions implements DsComponentInterface {
      * The value of the button, which is submitted with the form data.
      */
     readonly align: CardActionsAlignment;
-    connectedCallback(): void;
     render(): any;
 }

package/dist/types/components/card/card-subtitle/card-subtitle.d.ts

@@ -24,6 +24,5 @@ export declare class CardSubtitle implements DsComponentInterface {
      * If `true` the card text color becomes white.
      */
     readonly color: HeadingColor;
-    connectedCallback(): void;
     render(): any;
 }

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

@@ -62,13 +62,11 @@ export declare class Card implements DsComponentInterface {
     /**
      * Defines the space of the card content.
      */
-    space?: CardSpace;
-    spaceChanged(newValue: CardSpace): void;
+    readonly space?: CardSpace;
     /**
      * Defines the color of the card.
      */
     readonly color: CardColor;
-    connectedCallback(): void;
     private get colorTypeClass();
     render(): any;
 }

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

@@ -0,0 +1,114 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { type LogInstance } from "../../../utils/index";
+import { DsComponentInterface, DsConfigObserver, DsConfigState, DsLanguage, DsRegion } from "../../../global/index";
+import { CarouselControls, CarouselVariant, CarouselChangeDetail } from '../carousel.interfaces';
+/**
+ * Carousel coordinates ds-carousel-item children into a scrollable, accessible slide interface. Supports an image slider and a product tile strip.
+ *
+ * @slot - ds-carousel-item children.
+ * @part track - The scrollable item track.
+ */
+export declare class Carousel implements DsComponentInterface, DsConfigObserver {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    language: DsLanguage;
+    region: DsRegion;
+    private activeIndex;
+    private itemCount;
+    private canScrollLeft;
+    private canScrollRight;
+    private dragging;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * Control style. `dots` shows dot pagination with prev/next arrows (image variant). `large` shows large side arrows (product variant). `none` hides all controls.
+     */
+    readonly controls: CarouselControls;
+    /**
+     * Visual variant. `slide` uses scroll-snap and shows one slide at a time. `tile` shows multiple items with free scrolling.
+     */
+    readonly variant: CarouselVariant;
+    /**
+     * Number of items visible at once. `auto` sizes items by content. A number divides the container width equally.
+     */
+    readonly itemsPerView: number | 'auto';
+    /**
+     * Accessible label for the carousel region.
+     */
+    readonly label: string;
+    /**
+     * Number of items to advance per arrow click.
+     */
+    readonly steps: number;
+    /**
+     * Name of the currently selected ds-carousel-item.
+     */
+    value?: string | null;
+    /**
+     * Emitted when the selected item changes.
+     */
+    dsChange: EventEmitter<CarouselChangeDetail>;
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    private trackEl?;
+    private resizeObserver?;
+    private intersectionObserver?;
+    private intersectionInitialized;
+    private momentumAnimId;
+    private dragStartX;
+    private dragStartScrollLeft;
+    private velocityHistory;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToDsCarouselItemSelect(ev: CustomEvent<{
+        name: string;
+    }>): void;
+    /**
+     * EVENT HANDLERS
+     * ------------------------------------------------------
+     */
+    private handleKeyDown;
+    private handleSlotChange;
+    private scrollPrev;
+    private scrollNext;
+    private getFirstVisibleIndex;
+    private getFadeWidthPx;
+    private checkOverflow;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private calcVelocity;
+    private applyMomentum;
+    private handlePaginationChange;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private getItems;
+    private setup;
+    private updateChildren;
+    private activateItem;
+    private scrollToActive;
+    private initScroll;
+    private initIntersection;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

package/dist/types/components/carousel/carousel/carousel.i18n.d.ts

@@ -0,0 +1,9 @@
+import { I18n } from '../../../interfaces';
+interface I18nDsCarousel {
+    scrollLeft: string;
+    scrollRight: string;
+    goToSlide: string;
+    slideOf: string;
+}
+export declare const i18nDsCarousel: I18n<I18nDsCarousel>;
+export {};

package/dist/types/components/carousel/carousel-item/carousel-item.d.ts

@@ -0,0 +1,70 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { DsComponentInterface } from "../../../global/index";
+import { type LogInstance } from "../../../utils/index";
+import { CarouselItemColor, CarouselVariant } from '../carousel.interfaces';
+/**
+ * Carousel Item is a single slide or product tile inside a ds-carousel.
+ *
+ * @slot - Slide content (image variant) or label text (product variant).
+ */
+export declare class CarouselItem implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * Background color for product tiles.
+     */
+    readonly color: CarouselItemColor;
+    /**
+     * Set by ds-carousel. The carousel variant this item is part of.
+     * @internal
+     */
+    readonly carouselVariant: CarouselVariant;
+    /**
+     * When `true`, the item renders in navigation mode: the consumer provides an `<a>` in the slot,
+     * which is stretched to cover the full tile and acts as the interactive element.
+     */
+    readonly navigation: boolean;
+    /**
+     * Set by ds-carousel. 1-based position index.
+     * @internal
+     */
+    readonly index: number;
+    /**
+     * Unique identifier for this item, matched by the parent ds-carousel `value` prop.
+     */
+    readonly name: string;
+    /**
+     * If `true`, this item is the currently active slide/tile. Set by the parent ds-carousel.
+     */
+    readonly selected: boolean;
+    /**
+     * Image URL displayed in image-variant slides, or brand icon source for product tiles.
+     */
+    readonly src: string;
+    /**
+     * Emitted when the user clicks this item (product variant).
+     */
+    dsCarouselItemSelect: EventEmitter<{
+        name: string;
+    }>;
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * EVENT HANDLERS
+     * ------------------------------------------------------
+     */
+    private handleClick;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,14 @@
+export declare const CAROUSEL_VARIANTS: readonly ["slide", "tile"];
+export type CarouselVariant = (typeof CAROUSEL_VARIANTS)[number];
+export declare const CAROUSEL_CONTROLS: readonly ["dots", "large", "none"];
+export type CarouselControls = (typeof CAROUSEL_CONTROLS)[number];
+export declare const CAROUSEL_ITEM_COLORS: readonly ["", "purple", "green", "red", "yellow"];
+export type CarouselItemColor = (typeof CAROUSEL_ITEM_COLORS)[number];
+export interface CarouselCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsCarouselElement;
+}
+export type CarouselChangeDetail = {
+    value: string;
+};
+export type CarouselChange = CarouselCustomEvent<CarouselChangeDetail>;

package/dist/types/components/carousel/test/carousel.a11y.play.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/carousel/test/carousel.component.play.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/carousel/test/carousel.visual.play.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -17,8 +17,7 @@ export declare class Close implements DsComponentInterface, DsConfigObserver {
     /**
      * Define the size of badge. Small is recommended for tabs.
      */
-    size: CloseSize;
-    sizeChanged(newValue: CloseSize): void;
+    readonly size: CloseSize;
     /**
      * If `true` it supports dark backgrounds.
      */
@@ -40,6 +39,5 @@ export declare class Close implements DsComponentInterface, DsConfigObserver {
      * @internal define config for the component
      */
     configChanged(state: DsConfigState): Promise<void>;
-    connectedCallback(): void;
     render(): any;
 }

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

@@ -21,11 +21,10 @@ export declare class Content implements DsComponentInterface {
      * **Deprecated:** Use direction instead.
      */
     readonly layout: StackLayout;
-    layoutChanged(newValue?: StackLayout): void;
     /**
      * Defines the direction of the child elements. Default is column.
      */
-    direction: StackDirection;
+    readonly direction: StackDirection;
     /**
      * Defines the positioning like center, end or
      * default to start.
@@ -39,14 +38,12 @@ export declare class Content implements DsComponentInterface {
     /**
      * Defines the space between the child elements. Default is xx-small.
      */
-    space: ContentSpace;
-    spaceChanged(newValue: ContentSpace): void;
+    readonly space: ContentSpace;
     /**
      * @internal
      * Please use align instead.
      */
     readonly alignment: StackAlignment;
-    connectedCallback(): void;
     /**
      * RENDER
      * ------------------------------------------------------

package/dist/types/components/data/data-item.d.ts

@@ -0,0 +1,43 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { DsComponentInterface, DsConfigObserver, DsConfigState, type DsLanguage, type DsRegion } from "../../global/index";
+import { type LogInstance } from "../../utils/index";
+/**
+ * DataItem is a container for label-value pairs within ds-data.
+ * Provides separate slots for label and value for semantic linking.
+ *
+ * @slot label - The label content (ds-data-label or text).
+ * @slot - The value content (ds-data-value or other elements).
+ */
+export declare class DataItem implements DsComponentInterface, DsConfigObserver {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    innerEditLabel: string;
+    language: DsLanguage;
+    region: DsRegion;
+    private labelId;
+    private valueId;
+    private hasCustomLabel;
+    /**
+     * If `true` the item gets a lighter font color.
+     */
+    readonly disabled: boolean;
+    /**
+     * If `true` the text will break and the height of the item increases.
+     */
+    readonly multiline: boolean;
+    /**
+     * If `true` a small button with an edit icon is shown on the right.
+     */
+    readonly editable: boolean;
+    /**
+     * Label for the edit button.
+     * When omitted the label is localised from the language config.
+     */
+    readonly editLabel: string | undefined;
+    connectedCallback(): void;
+    configChanged(state: DsConfigState): Promise<void>;
+    private assignSlotsToComponents;
+    private detectCustomLabel;
+    render(): any;
+}

package/dist/types/components/data/data-item.i18n.d.ts

@@ -0,0 +1,6 @@
+import { I18n } from '../../interfaces';
+interface I18nDsDataItem {
+    editLabel: string;
+}
+export declare const i18nDsDataItem: I18n<I18nDsDataItem>;
+export {};

package/dist/types/components/data/data-item.interfaces.d.ts

@@ -0,0 +1,4 @@
+export interface BalDataItem {
+    border?: boolean;
+    disabled?: boolean;
+}

package/dist/types/components/data/data-label.d.ts

@@ -0,0 +1,19 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { DsComponentInterface } from "../../global/index";
+import { type LogInstance } from "../../utils/index";
+/**
+ * DataLabel is a label element for use within ds-data-item.
+ * It displays a label with optional required indicator.
+ *
+ * @slot - The label text content.
+ */
+export declare class DataLabel implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * If `true` an asterisk is added after the label.
+     */
+    readonly required: boolean;
+    render(): any;
+}

package/dist/types/components/data/data-label.interfaces.d.ts

@@ -0,0 +1,3 @@
+export interface BalDataLabel {
+    required?: boolean;
+}

package/dist/types/components/data/data-value.d.ts

@@ -0,0 +1,15 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { DsComponentInterface } from "../../global/index";
+import { type LogInstance } from "../../utils/index";
+/**
+ * DataValue is a value element for use within ds-data-item.
+ * Pass-through slot container for value content.
+ *
+ * @slot - The value content (text, HTML, or custom elements).
+ */
+export declare class DataValue implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    render(): any;
+}

package/dist/types/components/data/data-value.interfaces.d.ts

@@ -0,0 +1,5 @@
+export interface BalDataValue {
+    disabled?: boolean;
+    editable?: boolean;
+    multiline?: boolean;
+}

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

@@ -0,0 +1,19 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { DsComponentInterface } from "../../global/index";
+import { type LogInstance } from "../../utils/index";
+/**
+ * Data displays a list of label-value pairs in a organized, accessible format.
+ * Supports vertical and horizontal layouts with dividers always shown in vertical layout.
+ *
+ * @slot - The content of the data list (typically ds-data-item elements).
+ */
+export declare class Data implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * If `true` the data list is horizontal instead of vertical.
+     */
+    readonly horizontal: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+export interface BalData {
+    border?: boolean;
+    horizontal?: boolean;
+}

package/dist/types/components/data/test/data.a11y.play.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/data/test/data.component.play.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/data/test/data.visual.play.d.ts

@@ -0,0 +1 @@
+export {};