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

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

@@ -0,0 +1,57 @@
+import type { Option, Optgroup } from 'slim-select/dist/store';
+import type { DsLanguage } from "../../global/index";
+import { SelectOption, SelectOptionGroup } from './select.interfaces';
+export declare function buildSlimData(options: SelectOption[], optionGroups: SelectOptionGroup[], placeholder: string, value: string | string[] | null): (Partial<Option> | Partial<Optgroup>)[];
+export interface SelectPickerConfig {
+    selectEl: HTMLSelectElement;
+    popupEl: HTMLDivElement;
+    shadowRoot: ShadowRoot;
+    triggerId: string;
+    language: DsLanguage;
+    placeholder: string;
+    searchable: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    multiple: boolean;
+    clearable: boolean;
+    data: (Partial<Option> | Partial<Optgroup>)[];
+    onChange: (selected: Option[]) => void;
+    onOpen: () => void;
+    onClose: () => void;
+}
+export declare class SelectPickerController {
+    private slimSelect;
+    private config;
+    private typeAheadBuffer;
+    private typeAheadLastTime;
+    constructor(config: SelectPickerConfig);
+    /**
+     * PUBLIC API
+     * ------------------------------------------------------
+     */
+    open(): void;
+    close(): void;
+    focus(): void;
+    blur(): void;
+    setData(data: (Partial<Option> | Partial<Optgroup>)[]): void;
+    setSelected(value: string | string[]): void;
+    setDisabled(disabled: boolean): void;
+    updateSearchPlaceholder(language: DsLanguage): void;
+    destroy(): void;
+    /**
+     * PRIVATE
+     * ------------------------------------------------------
+     */
+    private get trigger();
+    private init;
+    private highlightFirstOption;
+    private fixSearchListener;
+    private fixKeyboardOpen;
+    private fixOptionFocus;
+    private fixTypeAhead;
+    private handleTypeAhead;
+    private findNextTypeAheadMatch;
+    private optionText;
+    private setHighlightedOption;
+    private connectLabelToTrigger;
+}

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

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

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

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

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

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

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

@@ -14,7 +14,7 @@ export declare class Shape implements DsComponentInterface {
     el: HTMLStencilElement;
     /**
      * PUBLIC PROPERTY API
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * The shape color
@@ -28,14 +28,9 @@ export declare class Shape implements DsComponentInterface {
      * The shape variation
      */
     readonly variation: ShapeVariation;
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback(): void;
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render(): any;
 }

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

@@ -43,7 +43,6 @@ export declare class Spinner implements DsComponentInterface, DsConfigObserver {
      * **Deprecated:** Use size="sm" instead.
      */
     readonly small: boolean;
-    smallChanged(newValue: boolean, oldValue: boolean): void;
     /**
      * Visible label rendered next to the spinner. When omitted a translated aria-label is applied automatically.
      */
@@ -61,7 +60,6 @@ export declare class Spinner implements DsComponentInterface, DsConfigObserver {
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     /**

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

@@ -1,7 +1,7 @@
 import { HTMLStencilElement } from '../../stencil-public-runtime';
 import { type LogInstance } from "../../utils/index";
 import { DsComponentInterface } from "../../global/index";
-import { type StackLayout, type StackSpace, type StackPadding, type StackAlignment, type StackDirection } from './stack.interfaces';
+import { type StackSpace, type StackPadding, type StackAlignment, type StackDirection } from './stack.interfaces';
 /**
  * Stack arranges child elements in a vertical or horizontal layout with customizable spacing and alignment options.
  *
@@ -32,41 +32,30 @@ export declare class Stack implements DsComponentInterface {
      * Defines the width of the stack to be exactly the width of the content.
      */
     readonly fitContent: boolean;
-    /**
-     * **Deprecated:** Use direction instead.
-     */
-    readonly layout: StackLayout;
-    layoutChanged(newValue: StackLayout): void;
     /**
      * Defines the padding of the stack element.
      */
-    p?: StackPadding;
-    pChanged(newValue?: StackPadding): void;
+    readonly p?: StackPadding;
     /**
      * Defines the horizontal padding left and right of the stack element.
      */
-    px?: StackPadding;
-    pxChanged(newValue?: StackPadding): void;
+    readonly px?: StackPadding;
     /**
      * Defines the vertical padding top and bottom of the stack element.
      */
-    py?: StackPadding;
-    pyChanged(newValue?: StackPadding): void;
+    readonly py?: StackPadding;
     /**
      * Defines the space between the child elements.
      */
-    space: StackSpace;
-    spaceChanged(newValue: StackSpace): void;
+    readonly space: StackSpace;
     /**
      * Defines the column space between the child elements.
      */
-    spaceColumn?: StackSpace;
-    spaceColumnChanged(newValue?: StackSpace): void;
+    readonly spaceColumn?: StackSpace;
     /**
      * Defines the row space between the child elements.
      */
-    spaceRow?: StackSpace;
-    spaceRowChanged(newValue?: StackSpace): void;
+    readonly spaceRow?: StackSpace;
     /**
      * Defines if the child elements will wrap to the next line if there is not enough space left.
      */
@@ -75,7 +64,6 @@ export declare class Stack implements DsComponentInterface {
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback(): void;
     /**
      * RENDER
      * ------------------------------------------------------

package/dist/types/components/steps/step/step.d.ts

@@ -0,0 +1,89 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { DsComponentInterface } from "../../../global/index";
+import { type LogInstance } from "../../../utils/index";
+/**
+ * Step renders a single step button inside a ds-steps group, showing a numbered circle, label, and connector line.
+ *
+ * @slot - An `<a>` element in navigation mode.
+ */
+export declare class Step implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * Index of the active step. Used to determine connector fill state.
+     * Set by the parent ds-steps.
+     * @internal
+     */
+    activeIndex: number;
+    /**
+     * If `true`, the step cannot be selected.
+     */
+    readonly disabled: boolean;
+    /**
+     * If `true`, the step is completed. Shows a checkmark icon in the circle.
+     */
+    readonly done: boolean;
+    /**
+     * If `true`, the step is hidden from the layout.
+     */
+    readonly hidden: boolean;
+    /**
+     * 1-based position index. Set by the parent ds-steps.
+     * @internal
+     */
+    index: number;
+    /**
+     * If `true`, the step has an error. Shows an exclamation mark in the circle.
+     */
+    readonly invalid: boolean;
+    /**
+     * Visible text label displayed below the circle.
+     */
+    readonly label: string;
+    /**
+     * Unique name that links this step to a ds-step-panel[for] of the same value.
+     */
+    readonly name: string;
+    /**
+     * Set by ds-steps. When true, renders in navigation mode (slotted <a>).
+     * @internal
+     */
+    navigation: boolean;
+    /**
+     * If `true`, this step is currently selected. Set by the parent ds-steps.
+     * @internal
+     */
+    selected: boolean;
+    /**
+     * Set by ds-steps. When true, renders in vertical layout.
+     * @internal
+     */
+    vertical: boolean;
+    /**
+     * Emitted when the user clicks this step (panels mode only).
+     */
+    dsStepSelect: EventEmitter<{
+        name: string;
+    }>;
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * EVENT HANDLERS
+     * ------------------------------------------------------
+     */
+    private handleClick;
+    private handleKeyDown;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

package/dist/types/components/steps/step-panel/step-panel.d.ts

@@ -0,0 +1,34 @@
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { DsComponentInterface } from "../../../global/index";
+import { type LogInstance } from "../../../utils/index";
+/**
+ * Step Panel displays the content area associated with a ds-step, visible when its controlling step is selected.
+ *
+ * @slot - The panel content.
+ */
+export declare class StepPanel implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * Matches the `name` of the ds-step that controls this panel.
+     */
+    readonly for: string;
+    /**
+     * If `true`, the panel is visible. Managed by the parent ds-steps.
+     */
+    readonly selected: boolean;
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,77 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { type LogInstance } from "../../../utils/index";
+import { DsComponentInterface } from "../../../global/index";
+import { StepsColor, StepsChangeDetail } from '../steps.interfaces';
+/**
+ * Steps coordinates ds-step and ds-step-panel children into an accessible stepped interface, supporting panels and navigation variants.
+ *
+ * @slot - ds-step-panel children (panels variant).
+ * @slot step - ds-step children; managed automatically by ds-steps.
+ * @part steplist - The steplist container.
+ */
+export declare class Steps implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * Accent color applied to inactive circles and connector lines.
+     */
+    readonly color: StepsColor;
+    /**
+     * Accessible label for the navigation landmark (navigation variant only).
+     */
+    readonly label: string;
+    /**
+     * The `name` of the currently selected ds-step (panels variant).
+     */
+    value?: string | null;
+    /**
+     * If `true`, the steplist is displayed vertically.
+     */
+    readonly vertical: boolean;
+    /**
+     * Emitted when the selected step changes (panels variant only).
+     */
+    dsChange: EventEmitter<StepsChangeDetail>;
+    private steplistEl?;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToDsStepSelect(ev: CustomEvent<{
+        name: string;
+    }>): void;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private getSteps;
+    private getPanels;
+    private isNavigation;
+    private setup;
+    private updateChildren;
+    private activateStep;
+    private focusSelectedStep;
+    /**
+     * EVENT HANDLERS
+     * ------------------------------------------------------
+     */
+    private handleKeyDown;
+    private handleSlotChange;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,10 @@
+export declare const STEPS_COLORS: readonly ["", "purple", "green", "red", "yellow"];
+export type StepsColor = (typeof STEPS_COLORS)[number];
+export interface StepsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsStepsElement;
+}
+export type StepsChangeDetail = {
+    value: string;
+};
+export type StepsChange = StepsCustomEvent<StepsChangeDetail>;

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

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

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

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

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

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

package/dist/types/components/tabs/tab/tab.d.ts

@@ -0,0 +1,67 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { DsComponentInterface } from "../../../global/index";
+import { type LogInstance } from "../../../utils/index";
+/**
+ * Tab renders a single tab button inside a ds-tabs group, supporting both the panels and navigation variants.
+ *
+ * @slot - The tab label, or an <a> element in navigation mode.
+ */
+export declare class Tab implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * Set by ds-tabs. When true, the tab expands to fill available width.
+     * @internal
+     */
+    readonly fullwidth: boolean;
+    /**
+     * Set by ds-tabs. When true, the tab renders in inverted (dark background) mode.
+     * @internal
+     */
+    readonly inverted: boolean;
+    /**
+     * Unique name that links this tab to a ds-tab-panel[for] of the same value in panels mode.
+     */
+    readonly name: string;
+    /**
+     * Set by ds-tabs. When true, renders as a slot wrapper for navigation mode.
+     * @internal
+     */
+    readonly navigation: boolean;
+    /**
+     * If `true`, this tab is currently selected. Set by the parent ds-tabs.
+     */
+    readonly selected: boolean;
+    /**
+     * Set by ds-tabs. When true, renders in vertical layout.
+     * @internal
+     */
+    readonly vertical: boolean;
+    /**
+     * Emitted when the user clicks this tab (panels mode only).
+     */
+    dsTabSelect: EventEmitter<{
+        name: string;
+    }>;
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * EVENT HANDLERS
+     * ------------------------------------------------------
+     */
+    private handleClick;
+    private handleKeyDown;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

package/dist/types/components/tabs/tab-panel/tab-panel.d.ts

@@ -0,0 +1,34 @@
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { DsComponentInterface } from "../../../global/index";
+import { type LogInstance } from "../../../utils/index";
+/**
+ * Tab Panel displays the content area associated with a ds-tab, visible when its controlling tab is selected.
+ *
+ * @slot - The panel content.
+ */
+export declare class TabPanel implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * Matches the `name` of the ds-tab that controls this panel.
+     */
+    readonly for: string;
+    /**
+     * If `true`, the panel is visible. Managed by the parent ds-tabs.
+     */
+    readonly selected: boolean;
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,97 @@
+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 { TabsColor, TabsChangeDetail, TabsVerticalColSize } from '../tabs.interfaces';
+/**
+ * Tabs coordinates ds-tab and ds-tab-panel children into an accessible tabbed interface, supporting panels and navigation variants.
+ *
+ * @slot - ds-tab-panel children (panels variant).
+ * @slot tab - ds-tab children; managed automatically by ds-tabs.
+ * @part tablist - The tablist container.
+ */
+export declare class Tabs implements DsComponentInterface, DsConfigObserver {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    language: DsLanguage;
+    region: DsRegion;
+    /**
+     * Accent color applied to the bottom border track and selected indicator.
+     */
+    readonly color: TabsColor;
+    /**
+     * If `true`, tab buttons expand to fill the available width equally.
+     */
+    readonly fullwidth: boolean;
+    /**
+     * If `true`, the component adapts for use on a dark (primary) background — all labels and the indicator become white.
+     */
+    readonly inverted: boolean;
+    /**
+     * Accessible label for the navigation landmark (navigation variant only).
+     */
+    readonly label: string;
+    /**
+     * The `name` of the currently selected ds-tab (panels variant).
+     */
+    value?: string | null;
+    /**
+     * If `true`, the tablist is displayed vertically on the left side.
+     */
+    readonly vertical: boolean;
+    /**
+     * The col size of the tablist in vertical mode.
+     */
+    readonly verticalColSize: TabsVerticalColSize;
+    /**
+     * Emitted when the selected tab changes (panels variant only).
+     */
+    dsChange: EventEmitter<TabsChangeDetail>;
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    private canScrollLeft;
+    private canScrollRight;
+    private tablistEl?;
+    private indicatorEl?;
+    private resizeObserver?;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToDsTabSelect(ev: CustomEvent<{
+        name: string;
+    }>): void;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private getTabs;
+    private getPanels;
+    private isNavigation;
+    private setup;
+    private updateChildren;
+    private activateTab;
+    private focusSelectedTab;
+    private initCarousel;
+    private checkOverflow;
+    private moveIndicator;
+    private scrollPrev;
+    private scrollNext;
+    private handleKeyDown;
+    private handleSlotChange;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,7 @@
+import { I18n } from '../../../interfaces';
+interface I18nDsTabs {
+    scrollLeft: string;
+    scrollRight: string;
+}
+export declare const i18nDsTabs: I18n<I18nDsTabs>;
+export {};

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

@@ -0,0 +1,12 @@
+export declare const TABS_COLORS: readonly ["", "purple", "green", "red", "yellow"];
+export type TabsColor = (typeof TABS_COLORS)[number];
+export declare const TABS_VERTICAL_COL_SIZES: readonly ["full", "half", "one-quarter", "one-third", "three-quarters", "two-thirds"];
+export type TabsVerticalColSize = (typeof TABS_VERTICAL_COL_SIZES)[number];
+export interface TabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTabsElement;
+}
+export type TabsChangeDetail = {
+    value: string;
+};
+export type TabsChange = TabsCustomEvent<TabsChangeDetail>;

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

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

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

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

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

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

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

@@ -45,8 +45,7 @@ export declare class Tag implements DsComponentInterface {
     /**
      * The size of the tag element
      */
-    size: TagSize;
-    sizeChanged(newValue: TagSize): void;
+    readonly size: TagSize;
     /**
      * Emitted when the input got clicked.
      */
@@ -55,7 +54,6 @@ export declare class Tag implements DsComponentInterface {
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback(): void;
     componentWillLoad(): void;
     /**
      * RENDER

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

@@ -1,5 +1,5 @@
 import { HTMLStencilElement } from '../../stencil-public-runtime';
-import { ElementStateInfo, type LogInstance } from "../../utils/index";
+import { type LogInstance } from "../../utils/index";
 import { DsComponentInterface } from "../../global/index";
 import { TextSize, TextColor, TextSpace, TextAlign } from './text.interfaces';
 /**
@@ -8,7 +8,7 @@ import { TextSize, TextColor, TextSpace, TextAlign } from './text.interfaces';
  * @slot - The text content.
  * @part text - The text container element.
  */
-export declare class Text implements DsComponentInterface, ElementStateInfo {
+export declare class Text implements DsComponentInterface {
     log: LogInstance;
     createLogger(log: LogInstance): void;
     el: HTMLStencilElement;
@@ -78,11 +78,6 @@ export declare class Text implements DsComponentInterface, ElementStateInfo {
      * If `true` the text has subtitle font family
      */
     readonly subtitle: boolean;
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback(): void;
     /**
      * PRIVATE METHODS
      * ------------------------------------------------------

package/dist/types/components/time-input/test/time-input.visual.play.d.ts

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