@public-ui/components 4.1.2-rc.7 → 4.1.2-rc.9

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonTypePropType, ButtonVariantPropType, ColorPair, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, FixedColsPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, InternalButtonProps, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, VariantClassNamePropType } from "./schema";
+import { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonTypePropType, ButtonVariantPropType, ColorPair, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, FixedColsPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, InternalButtonProps, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, VariantClassNamePropType } from "./schema";
 import { AriaHasPopupPropType } from "./schema/props/aria-has-popup";
 import { ModalVariantPropType } from "./schema/props/variant/modal";
 import { LoadingType, OrientationPropType as OrientationPropType1, ProgressVariantType } from "./internal/props";
@@ -13,8 +13,9 @@ import { InputCheckboxVariantPropType } from "./schema/props/variant-input-check
 import { PasswordVariantPropType } from "./schema/props/variant/password-variant";
 import { OrientationPropType } from "./schema/props/orientation";
 import { QuoteVariantType } from "./internal/props/variant-quote";
+import { SpinVariantType } from "./internal/props/variant-spin";
 import { HasCreateButtonPropType } from "./schema/props/has-create-button";
-export { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonTypePropType, ButtonVariantPropType, ColorPair, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, FixedColsPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, InternalButtonProps, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, VariantClassNamePropType } from "./schema";
+export { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonTypePropType, ButtonVariantPropType, ColorPair, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, FixedColsPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, InternalButtonProps, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, VariantClassNamePropType } from "./schema";
 export { AriaHasPopupPropType } from "./schema/props/aria-has-popup";
 export { ModalVariantPropType } from "./schema/props/variant/modal";
 export { LoadingType, OrientationPropType as OrientationPropType1, ProgressVariantType } from "./internal/props";
@@ -22,6 +23,7 @@ export { InputCheckboxVariantPropType } from "./schema/props/variant-input-check
 export { PasswordVariantPropType } from "./schema/props/variant/password-variant";
 export { OrientationPropType } from "./schema/props/orientation";
 export { QuoteVariantType } from "./internal/props/variant-quote";
+export { SpinVariantType } from "./internal/props/variant-spin";
 export { HasCreateButtonPropType } from "./schema/props/has-create-button";
 export namespace Components {
     /**
@@ -3202,25 +3204,19 @@ export namespace Components {
          */
         "focus": () => Promise<void>;
     }
-    /**
-     * The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation.
-     */
     interface KolSpin {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
-        "_label"?: LabelPropType;
+        "_label"?: string;
         /**
           * Makes the element show up.
-          * @TODO : Change type back to `ShowPropType` after Stencil#4663 has been resolved.
-          * @default false
          */
         "_show"?: boolean;
         /**
           * Defines which variant should be used for presentation.
-          * @default 'dot'
          */
-        "_variant"?: SpinVariantPropType;
+        "_variant"?: SpinVariantType;
     }
     /**
      * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for
@@ -3671,6 +3667,9 @@ export namespace Components {
          */
         "focus": () => Promise<void>;
     }
+    /**
+     * @deprecated The tooltip component is deprecated and will be removed in the next major release
+     */
     interface KolTooltipWc {
         /**
           * Defines the alignment of the tooltip, popover or tabs in relation to the element.
@@ -3683,6 +3682,7 @@ export namespace Components {
         "_badgeText"?: BadgeTextPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in next major release. The ID is now generated internally and cannot be set via props.
          */
         "_id"?: IdPropType;
         /**
@@ -4437,9 +4437,6 @@ declare global {
         prototype: HTMLKolSkipNavElement;
         new (): HTMLKolSkipNavElement;
     };
-    /**
-     * The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation.
-     */
     interface HTMLKolSpinElement extends Components.KolSpin, HTMLStencilElement {
     }
     var HTMLKolSpinElement: {
@@ -4548,6 +4545,9 @@ declare global {
         prototype: HTMLKolToolbarElement;
         new (): HTMLKolToolbarElement;
     };
+    /**
+     * @deprecated The tooltip component is deprecated and will be removed in the next major release
+     */
     interface HTMLKolTooltipWcElement extends Components.KolTooltipWc, HTMLStencilElement {
     }
     var HTMLKolTooltipWcElement: {
@@ -7423,25 +7423,19 @@ declare namespace LocalJSX {
          */
         "_links": Stringified<LinkProps[]>;
     }
-    /**
-     * The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation.
-     */
     interface KolSpin {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
-        "_label"?: LabelPropType;
+        "_label"?: string;
         /**
           * Makes the element show up.
-          * @TODO : Change type back to `ShowPropType` after Stencil#4663 has been resolved.
-          * @default false
          */
         "_show"?: boolean;
         /**
           * Defines which variant should be used for presentation.
-          * @default 'dot'
          */
-        "_variant"?: SpinVariantPropType;
+        "_variant"?: SpinVariantType;
     }
     /**
      * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for
@@ -7828,6 +7822,9 @@ declare namespace LocalJSX {
          */
         "_orientation"?: OrientationPropType;
     }
+    /**
+     * @deprecated The tooltip component is deprecated and will be removed in the next major release
+     */
     interface KolTooltipWc {
         /**
           * Defines the alignment of the tooltip, popover or tabs in relation to the element.
@@ -8136,9 +8133,6 @@ declare module "@stencil/core" {
              * The **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key.
              */
             "kol-skip-nav": LocalJSX.KolSkipNav & JSXBase.HTMLAttributes<HTMLKolSkipNavElement>;
-            /**
-             * The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation.
-             */
             "kol-spin": LocalJSX.KolSpin & JSXBase.HTMLAttributes<HTMLKolSpinElement>;
             /**
              * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for
@@ -8165,6 +8159,9 @@ declare module "@stencil/core" {
              */
             "kol-toast-container": LocalJSX.KolToastContainer & JSXBase.HTMLAttributes<HTMLKolToastContainerElement>;
             "kol-toolbar": LocalJSX.KolToolbar & JSXBase.HTMLAttributes<HTMLKolToolbarElement>;
+            /**
+             * @deprecated The tooltip component is deprecated and will be removed in the next major release
+             */
             "kol-tooltip-wc": LocalJSX.KolTooltipWc & JSXBase.HTMLAttributes<HTMLKolTooltipWcElement>;
             "kol-tree": LocalJSX.KolTree & JSXBase.HTMLAttributes<HTMLKolTreeElement>;
             "kol-tree-item": LocalJSX.KolTreeItem & JSXBase.HTMLAttributes<HTMLKolTreeItemElement>;

package/dist/types/functional-components/FieldControl/FieldControl.d.ts

@@ -16,6 +16,8 @@ export type FieldControlProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'>
     required?: boolean;
     readonly?: boolean;
     showTooltip?: boolean;
+    tooltipFloatingRef?: (el?: HTMLDivElement) => void;
+    tooltipArrowRef?: (el?: HTMLDivElement) => void;
     renderNoLabel?: boolean;
     renderNoHint?: boolean;
     renderNoTooltip?: boolean;

package/dist/types/functional-components/FormField/FormField.d.ts

@@ -1,14 +1,13 @@
 import type { JSX } from '../../stencil-public-runtime';
 import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
 import type { JSXBase } from '../../stencil-public-runtime';
-import type { AlignPropType, MaxLengthBehaviorPropType, MsgPropType, Stringified } from '../../schema';
+import type { MaxLengthBehaviorPropType, MsgPropType, Stringified, TooltipAlignPropType } from '../../schema';
 export type FormFieldProps = JSXBase.HTMLAttributes<HTMLElement> & {
     component?: 'div' | 'fieldset';
     id: string;
     alert?: boolean;
     disabled?: boolean;
     msg?: Stringified<MsgPropType>;
-    tooltipAlign?: AlignPropType;
     hint?: string;
     label: string;
     hideLabel?: boolean;
@@ -31,6 +30,9 @@ export type FormFieldProps = JSXBase.HTMLAttributes<HTMLElement> & {
     anotherChildren?: JSX.Element | JSX.Element[];
     maxLength?: number;
     showBadge?: boolean;
+    tooltipAlign?: TooltipAlignPropType;
+    tooltipFloatingRef?: (el?: HTMLDivElement) => void;
+    tooltipArrowRef?: (el?: HTMLDivElement) => void;
     formFieldLabelProps?: JSXBase.HTMLAttributes<Omit<HTMLLabelElement | HTMLLegendElement, 'id' | 'hidden' | 'htmlFor'>> & {
         component?: 'label' | 'legend';
     };

package/dist/types/index.d.ts

@@ -5,7 +5,7 @@ export { bootstrap, isInitialized, register } from './core/bootstrap';
 export * from './enums/bund';
 export * from './kolibri';
 export { KoliBri, KoliBriDevHelper } from './schema';
-export type { EventValueOrEventCallback, FocusableElement, KoliBriTableCell, KoliBriTableHeaderCell, KoliBriTableHeaderCellWithLogic, KoliBriTableSelection, Optgroup, Option, SelectOption, Toast, ToasterOptions, W3CInputValue, } from './schema';
+export type { EventValueOrEventCallback, FocusableElement, KoliBriTableCell, KoliBriTableHeaderCell, KoliBriTableHeaderCellWithLogic, KoliBriTableSelection, Optgroup, Option, RadioOption, SelectOption, Toast, ToasterOptions, W3CInputValue, } from './schema';
 export { BEM } from './schema/bem-registry';
 export { KolEvent } from './utils/events';
 export { isTooltipOpen } from './utils/tooltip-open-tracking';

package/dist/types/internal/functional-components/avatar/controller.d.ts

@@ -1,9 +1,9 @@
 import type { ColorPair } from '../../../schema';
 import { BaseController } from '../base-controller';
-import type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';
+import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
 import type { AvatarApi } from './api';
 export declare class AvatarController extends BaseController<AvatarApi> implements ControllerInterface<AvatarApi> {
-    constructor(setState: SetStateFn<AvatarApi>, getState: GetStateFn<AvatarApi>);
+    constructor(stateAccess: StateAccess<AvatarApi>);
     componentWillLoad(props: ResolvedInputProps<AvatarApi>): void;
     watchColor(value?: string | ColorPair): void;
     watchLabel(value?: string): void;

package/dist/types/internal/functional-components/base-controller.d.ts

@@ -1,10 +1,10 @@
-import type { ComponentApi, GetStateFn, PropsConfigShape, ResolvedInputProps, ResolvedProps, SetStateFn, StrictFields } from './generic-types';
+import type { ComponentApi, GetStateFn, PropsConfigShape, ResolvedInputProps, ResolvedProps, SetStateFn, StateAccess, StrictFields } from './generic-types';
 export declare abstract class BaseController<Api extends ComponentApi> {
-    protected readonly setState: SetStateFn<Api>;
-    protected readonly getState: GetStateFn<Api>;
     private readonly rawProps;
     private readonly renderProps;
-    constructor(propsConfig: PropsConfigShape, setState: SetStateFn<Api>, getState: GetStateFn<Api>);
+    protected readonly setState: SetStateFn<Api>;
+    protected readonly getState: GetStateFn<Api>;
+    protected constructor(stateAccess: StateAccess<Api>, propsConfig: PropsConfigShape);
     protected setRawProp<K extends keyof ResolvedInputProps<Api>>(key: K, value: ResolvedInputProps<Api>[K] | undefined): void;
     protected getRawProp<K extends keyof ResolvedInputProps<Api>>(key: K): ResolvedInputProps<Api>[K] | undefined;
     protected setRenderProp<K extends keyof ResolvedProps<Api>>(key: K, value: StrictFields<ResolvedProps<Api>>[K]): void;

package/dist/types/internal/functional-components/base-web-component.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentApi, GetStateFn, SetStateFn } from './generic-types';
+import type { ComponentApi, StateAccess } from './generic-types';
 export declare abstract class BaseWebComponent<Api extends ComponentApi> {
-    setState: SetStateFn<Api>;
-    getState: GetStateFn<Api>;
+    static readonly stateLess: StateAccess<never>;
+    protected readonly stateAccess: StateAccess<Api>;
 }

package/dist/types/internal/functional-components/click-button/controller.d.ts

@@ -1,9 +1,9 @@
 import { BaseController } from '../base-controller';
-import type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';
+import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
 import type { ClickButtonApi } from './api';
 export declare class ClickButtonController extends BaseController<ClickButtonApi> implements ControllerInterface<ClickButtonApi> {
     private buttonRef?;
-    constructor(setState: SetStateFn<ClickButtonApi>, getState: GetStateFn<ClickButtonApi>);
+    constructor(stateAccess: StateAccess<ClickButtonApi>);
     componentWillLoad(props: ResolvedInputProps<ClickButtonApi>): void;
     watchLabel(value?: string): void;
     handleClick: () => void;

package/dist/types/internal/functional-components/generic-types.d.ts

@@ -64,6 +64,10 @@ type InternalProps<T extends ComponentApi> = InternalOf<AllProps<T>>;
 type ExternalProps<T extends ComponentApi> = ExternalOf<AllProps<T>>;
 export type SetStateFn<Api extends ComponentApi> = <K extends keyof InternalOf<NonNullable<Api['States']>>>(key: K, value: InternalOf<NonNullable<Api['States']>>[K]) => void;
 export type GetStateFn<Api extends ComponentApi> = <K extends keyof InternalOf<NonNullable<Api['States']>>>(key: K) => InternalOf<NonNullable<Api['States']>>[K];
+export type StateAccess<Api extends ComponentApi> = {
+    setState: SetStateFn<Api>;
+    getState: GetStateFn<Api>;
+};
 type PromiseMethod<Methods> = {
     [K in keyof Methods]: Methods[K] extends (...args: infer A) => infer R ? (...args: A) => Promise<Awaited<R>> : Methods[K];
 };

package/dist/types/internal/functional-components/heading/controller.d.ts

@@ -1,8 +1,8 @@
 import { BaseController } from '../base-controller';
-import type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';
+import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
 import type { HeadingApi } from './api';
 export declare class HeadingController extends BaseController<HeadingApi> implements ControllerInterface<HeadingApi> {
-    constructor(setState: SetStateFn<HeadingApi>, getState: GetStateFn<HeadingApi>);
+    constructor(stateAccess: StateAccess<HeadingApi>);
     componentWillLoad(props: ResolvedInputProps<HeadingApi>): void;
     watchLabel(value?: string): void;
     watchLevel(value?: number): void;

package/dist/types/internal/functional-components/icon/controller.d.ts

@@ -1,8 +1,8 @@
 import { BaseController } from '../base-controller';
-import type { ControllerInterface, GetStateFn, ResolvedProps, SetStateFn } from '../generic-types';
+import type { ControllerInterface, ResolvedProps, StateAccess } from '../generic-types';
 import type { IconApi } from './api';
 export declare class IconController extends BaseController<IconApi> implements ControllerInterface<IconApi> {
-    constructor(setState: SetStateFn<IconApi>, getState: GetStateFn<IconApi>);
+    constructor(stateAccess: StateAccess<IconApi>);
     componentWillLoad(props: ResolvedProps<IconApi>): void;
     watchIcons(value?: string): void;
     watchLabel(value?: string): void;

package/dist/types/internal/functional-components/image/controller.d.ts

@@ -1,9 +1,9 @@
 import type { LoadingType } from '../../props';
 import { BaseController } from '../base-controller';
-import type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';
+import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
 import type { ImageApi } from './api';
 export declare class ImageController extends BaseController<ImageApi> implements ControllerInterface<ImageApi> {
-    constructor(setState: SetStateFn<ImageApi>, getState: GetStateFn<ImageApi>);
+    constructor(stateAccess: StateAccess<ImageApi>);
     componentWillLoad(props: ResolvedInputProps<ImageApi>): void;
     watchAlt(value?: string): void;
     watchLoading(value?: LoadingType): void;

package/dist/types/internal/functional-components/meter/controller.d.ts

@@ -1,5 +1,5 @@
 import { BaseController } from '../base-controller';
-import type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';
+import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
 import type { MeterApi } from './api';
 type MeterData = {
     high: number | undefined;
@@ -9,7 +9,7 @@ type MeterData = {
 export declare class MeterController extends BaseController<MeterApi> implements ControllerInterface<MeterApi> {
     private interval?;
     private meterData;
-    constructor(setState: SetStateFn<MeterApi>, getState: GetStateFn<MeterApi>);
+    constructor(stateAccess: StateAccess<MeterApi>);
     componentWillLoad(props: ResolvedInputProps<MeterApi>): void;
     destroy(): void;
     getMeterData(): MeterData;

package/dist/types/internal/functional-components/progress/controller.d.ts

@@ -1,9 +1,9 @@
 import { BaseController } from '../base-controller';
-import type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';
+import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
 import type { ProgressApi } from './api';
 export declare class ProgressController extends BaseController<ProgressApi> implements ControllerInterface<ProgressApi> {
     private interval?;
-    constructor(setState: SetStateFn<ProgressApi>, getState: GetStateFn<ProgressApi>);
+    constructor(stateAccess: StateAccess<ProgressApi>);
     componentWillLoad(props: ResolvedInputProps<ProgressApi>): void;
     watchLabel(value?: string): void;
     watchMax(value?: number): void;

package/dist/types/internal/functional-components/quote/controller.d.ts

@@ -1,8 +1,8 @@
 import { BaseController } from '../base-controller';
-import type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';
+import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
 import type { QuoteApi } from './api';
 export declare class QuoteController extends BaseController<QuoteApi> implements ControllerInterface<QuoteApi> {
-    constructor(setState: SetStateFn<QuoteApi>, getState: GetStateFn<QuoteApi>);
+    constructor(stateAccess: StateAccess<QuoteApi>);
     componentWillLoad(props: ResolvedInputProps<QuoteApi>): void;
     watchHref(value?: string): void;
     watchLabel(value?: string): void;

package/dist/types/internal/functional-components/skeleton/controller.d.ts

@@ -1,10 +1,10 @@
 import { BaseController } from '../base-controller';
-import type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';
+import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
 import type { SkeletonApi } from './api';
 export declare class SkeletonController extends BaseController<SkeletonApi> implements ControllerInterface<SkeletonApi> {
     private readonly clickButtonCtrl;
     private intervalId?;
-    constructor(setState: SetStateFn<SkeletonApi>, getState: GetStateFn<SkeletonApi>);
+    constructor(stateAccess: StateAccess<SkeletonApi>);
     componentWillLoad(props: ResolvedInputProps<SkeletonApi>): void;
     watchName(value?: string): void;
     toggle(): void;

package/dist/types/internal/functional-components/spin/api.d.ts

@@ -0,0 +1,13 @@
+import type { ApiFromConfig } from '../generic-types';
+export declare const spinPropsConfig: {
+    readonly optional: readonly [import("../../props").PropDefinition<string, import("../../props").LabelProp>, import("../../props").PropDefinition<import("../../props").InternalPropValue<import("../../props").ShowProp>, import("../../props").ShowProp>, import("../../props").PropDefinition<import("../../props").InternalPropValue<import("../../props").VariantSpinProp>, import("../../props").VariantSpinProp>];
+};
+export type SpinApi = ApiFromConfig<typeof spinPropsConfig, {
+    States: {
+        showToggled: boolean;
+    };
+    Callbacks: {
+        getTranslateActionRunning: () => string;
+        getTranslateActionDone: () => string;
+    };
+}>;

package/dist/types/internal/functional-components/spin/component.d.ts

@@ -0,0 +1,4 @@
+import type { FunctionalComponent as FC } from '../../../stencil-public-runtime';
+import type { FunctionalComponentProps } from '../generic-types';
+import type { SpinApi } from './api';
+export declare const SpinFC: FC<FunctionalComponentProps<SpinApi>>;

package/dist/types/internal/functional-components/spin/controller.d.ts

@@ -0,0 +1,14 @@
+import { BaseController } from '../base-controller';
+import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
+import type { SpinApi } from './api';
+export declare class SpinController extends BaseController<SpinApi> implements ControllerInterface<SpinApi> {
+    private readonly translateActionRunning;
+    private readonly translateActionDone;
+    constructor(stateAccess: StateAccess<SpinApi>);
+    componentWillLoad(props: ResolvedInputProps<SpinApi>): void;
+    watchShow(value?: boolean): void;
+    watchLabel(value?: string): void;
+    watchVariant(value?: unknown): void;
+    handleGetTranslateActionRunning: () => string;
+    handleGetTranslateActionDone: () => string;
+}

package/dist/types/internal/functional-components/tooltip/api.d.ts

@@ -0,0 +1,10 @@
+import type { ApiFromConfig } from '../generic-types';
+export declare const tooltipPropsConfig: {
+    readonly required: readonly [import("../../props").PropDefinition<string, import("../../props").LabelProp>];
+    readonly optional: readonly [import("../../props").PropDefinition<import("../../props").InternalPropValue<import("../../props").AlignProp>, import("../../props").AlignProp>, import("../../props").PropDefinition<string, import("../../props").BadgeTextProp>, import("../../props").PropDefinition<string, import("../../props").IdProp>];
+};
+export type TooltipApi = ApiFromConfig<typeof tooltipPropsConfig, {
+    Methods: {
+        hideTooltip: () => void;
+    };
+}>;

package/dist/types/internal/functional-components/tooltip/component.d.ts

@@ -0,0 +1,12 @@
+import type { FunctionalComponent as FC } from '../../../stencil-public-runtime';
+import type { TooltipAlignPropType } from '../../../schema';
+import type { FunctionalComponentProps } from '../generic-types';
+import type { TooltipApi } from './api';
+type TooltipFCProps = Pick<FunctionalComponentProps<TooltipApi>, 'label'> & {
+    badgeText?: string;
+    id?: string;
+    align?: TooltipAlignPropType;
+    refFloating: (el?: HTMLDivElement) => void;
+};
+export declare const TooltipFC: FC<TooltipFCProps>;
+export {};

package/dist/types/internal/functional-components/tooltip/controller.d.ts

@@ -0,0 +1,36 @@
+import { BaseController } from '../base-controller';
+import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
+import type { TooltipApi } from './api';
+export declare class TooltipController extends BaseController<TooltipApi> implements ControllerInterface<TooltipApi> {
+    private previousSibling?;
+    private tooltipElement?;
+    private hasFocusIn;
+    private hasMouseIn;
+    private isHiddenForCurrentVisit;
+    private overFocusTimeout?;
+    private cleanupAutoPositioning?;
+    constructor(stateAccess: StateAccess<TooltipApi>);
+    componentWillLoad(props: ResolvedInputProps<TooltipApi>): void;
+    watchLabel(value?: string): void;
+    watchAlign(value?: string): void;
+    watchBadgeText(value?: string): void;
+    watchId(value?: string): void;
+    initContext(previousSibling: HTMLElement | undefined): void;
+    syncListeners(last?: HTMLElement | null, next?: HTMLElement | null, replacePreviousSibling?: boolean): void;
+    handleEventListeners(host: HTMLElement): void;
+    hideTooltip(): void;
+    setTooltipElementRef: (el?: HTMLElement) => void;
+    destroy(): void;
+    private isNewVisit;
+    private resetHideFlag;
+    private alignTooltip;
+    private showTooltip;
+    private showOrHideTooltip;
+    private hideTooltipByEscape;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleFocusIn;
+    private handleFocusOut;
+    private addListeners;
+    private removeListeners;
+}

package/dist/types/internal/props/id.d.ts

@@ -0,0 +1,3 @@
+import type { SimpleProp } from './helpers/factory';
+export type IdProp = SimpleProp<'id', string>;
+export declare const idProp: import("./helpers/factory").PropDefinition<string, IdProp>;

package/dist/types/internal/props/index.d.ts

@@ -1 +1 @@
-export*from"./align";export*from"./allow-markdown";export*from"./alt";export*from"./badge-text";export*from"./color";export*from"./helpers/factory";export*from"./hide-label";export*from"./high";export*from"./href";export*from"./icons";export*from"./label";export*from"./label-with-expert-slot";export*from"./level";export*from"./loading";export*from"./low";export*from"./max";export*from"./min";export*from"./name";export*from"./optimum";export*from"./orientation";export*from"./quote";export*from"./secondary-headline";export*from"./show";export*from"./sizes";export*from"./span-icons";export*from"./src";export*from"./srcset";export*from"./unit";export*from"./value-number";export*from"./value-number-clamped";export*from"./variant-progress";export*from"./variant-quote";
+export*from"./align";export*from"./allow-markdown";export*from"./alt";export*from"./badge-text";export*from"./color";export*from"./helpers/factory";export*from"./hide-label";export*from"./high";export*from"./href";export*from"./icons";export*from"./id";export*from"./label";export*from"./label-with-expert-slot";export*from"./level";export*from"./loading";export*from"./low";export*from"./max";export*from"./min";export*from"./name";export*from"./optimum";export*from"./orientation";export*from"./quote";export*from"./secondary-headline";export*from"./show";export*from"./sizes";export*from"./span-icons";export*from"./src";export*from"./srcset";export*from"./unit";export*from"./value-number";export*from"./value-number-clamped";export*from"./variant-progress";export*from"./variant-quote";export*from"./variant-spin";

package/dist/types/internal/props/variant-spin.d.ts

@@ -0,0 +1,5 @@
+import type { SimpleProp } from './helpers/factory';
+export declare const spinVariantOptions: readonly ["dot", "cycle", "none"];
+export type SpinVariantType = (typeof spinVariantOptions)[number];
+export type VariantSpinProp = SimpleProp<'variant', SpinVariantType>;
+export declare const variantSpinProp: import("./helpers/factory").PropDefinition<import("./helpers/factory").InternalPropValue<VariantSpinProp>, VariantSpinProp>;

package/dist/types/schema/bem-registry.d.ts

@@ -129,6 +129,20 @@ type KoliBriComponentsBemSchema = {
         };
         modifiers: Set<'has-badge' | 'hide-label'>;
     };
+    'kol-spin': {
+        elements: {
+            spinner: {
+                modifiers: Set<'cycle' | 'dot' | 'none'>;
+            };
+            'spinner-element': {
+                modifiers: Set<'1' | '2' | '3' | 'neutral'>;
+            };
+            loader: {
+                modifiers: null;
+            };
+        };
+        modifiers: null;
+    };
 };
 export declare const bem: {
     <BlockName extends keyof KoliBriComponentsBemSchema, ElementName extends keyof NonNullable<KoliBriComponentsBemSchema[BlockName]["elements"]>>(blockName: BlockName, blockModifiersOrElementName?: ElementName | ((KoliBriComponentsBemSchema[BlockName]["modifiers"] extends infer T ? T extends KoliBriComponentsBemSchema[BlockName]["modifiers"] ? T extends Set<infer U> ? U : never : never : never) extends never ? undefined : Partial<Record<KoliBriComponentsBemSchema[BlockName]["modifiers"] extends infer T_1 ? T_1 extends KoliBriComponentsBemSchema[BlockName]["modifiers"] ? T_1 extends Set<infer U> ? U : never : never : never, boolean>>) | undefined, elementModifiers?: ((NonNullable<KoliBriComponentsBemSchema[BlockName]["elements"]>[ElementName]["modifiers"] extends infer T_2 ? T_2 extends NonNullable<KoliBriComponentsBemSchema[BlockName]["elements"]>[ElementName]["modifiers"] ? T_2 extends Set<infer U> ? U : never : never : never) extends never ? undefined : Partial<Record<NonNullable<KoliBriComponentsBemSchema[BlockName]["elements"]>[ElementName]["modifiers"] extends infer T_3 ? T_3 extends NonNullable<KoliBriComponentsBemSchema[BlockName]["elements"]>[ElementName]["modifiers"] ? T_3 extends Set<infer U> ? U : never : never : never, boolean>>) | undefined): string;

package/doc/spin.md

@@ -3,24 +3,13 @@
 <!-- Auto Generated Below -->
 
 
-## Overview
-
-The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation.
-
 ## Properties
 
 | Property   | Attribute  | Description                                                                                                        | Type                                      | Default     |
 | ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------- | ----------- |
 | `_label`   | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string \| undefined`                     | `undefined` |
-| `_show`    | `_show`    | Makes the element show up.                                                                                         | `boolean \| undefined`                    | `false`     |
-| `_variant` | `_variant` | Defines which variant should be used for presentation.                                                             | `"cycle" \| "dot" \| "none" \| undefined` | `'dot'`     |
-
-
-## Slots
-
-| Slot       | Description                                                 |
-| ---------- | ----------------------------------------------------------- |
-| `"expert"` | Custom content displayed when the variant is set to `none`. |
+| `_show`    | `_show`    | Makes the element show up.                                                                                         | `boolean \| undefined`                    | `undefined` |
+| `_variant` | `_variant` | Defines which variant should be used for presentation.                                                             | `"cycle" \| "dot" \| "none" \| undefined` | `undefined` |
 
 
 ----------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "4.1.2-rc.7",
+  "version": "4.1.2-rc.9",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -71,7 +71,7 @@
     "@floating-ui/dom": "1.7.6",
     "color-convert": "3.1.3",
     "color-rgba": "2.4.0",
-    "lodash-es": "4.17.23",
+    "lodash-es": "4.18.1",
     "markdown-it": "14.1.1",
     "rgba-convert": "0.3.0",
     "typed-bem": "1.0.2",
@@ -80,7 +80,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "3.3.5",
     "@eslint/js": "9.39.4",
-    "@playwright/test": "1.58.2",
+    "@playwright/test": "1.59.1",
     "@public-ui/stencil-angular-output-target": "0.9.0",
     "@public-ui/stencil-react-output-target": "0.6.0",
     "@public-ui/stencil-solid-output-target": "0.2.0",
@@ -92,22 +92,23 @@
     "@stencil/playwright": "0.2.3",
     "@stencil/sass": "3.2.3",
     "@types/color-convert": "2.0.4",
-    "@types/jest": "26.0.24",
+    "@types/jest": "29.5.14",
     "@types/lodash-es": "4.17.12",
     "@types/markdown-it": "14.1.2",
     "@types/mustache": "4.2.6",
     "@types/pug": "2.0.10",
     "@types/twig": "1.12.17",
     "@types/wcag-contrast": "3.0.3",
-    "@typescript-eslint/eslint-plugin": "8.57.2",
-    "@typescript-eslint/parser": "8.57.2",
+    "@typescript-eslint/eslint-plugin": "8.58.0",
+    "@typescript-eslint/parser": "8.58.0",
     "adopted-style-sheets": "1.1.9-rc.21",
     "autoprefixer": "10.4.27",
     "cross-env": "10.1.0",
-    "cssnano": "7.1.3",
+    "cssnano": "7.1.4",
     "eslint": "9.39.4",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "jest": "26.6.3",
+    "jest": "29.7.0",
+    "jest-cli": "^29.7.0",
     "knip": "5.88.1",
     "mustache": "4.2.0",
     "postcss": "8.5.8",

package/vscode-custom-data.json

@@ -2926,7 +2926,7 @@
       "name": "kol-spin",
       "description": {
         "kind": "markdown",
-        "value": "The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation."
+        "value": ""
       },
       "attributes": [
         {

package/dist/cjs/FieldControlStateWrapper-fuU7vCSF.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";var tslib_es6=require("./tslib.es6-7DbU_BSw.js"),index=require("./index-DT9bjXlJ.js");require("./common-CyOOsddt.js");var component=require("./component-_osv0u4g.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-DFDKYGXF.js"),clsx=require("./clsx-Bm_HQUnh.js");const InputContainer=(e,l)=>{var{class:o}=e,r=tslib_es6.__rest(e,["class"]);return index.h("div",Object.assign({class:clsx.clsx("kol-field-control__input",o)},r),l)},KolFieldControlFc=(e,l)=>{const{class:o,id:r,disabled:i,label:t,hideLabel:n,labelAlign:s,renderNoTooltip:d,hint:a,renderNoHint:c,tooltipAlign:p,accessKey:b,shortKey:u,msg:F,touched:h,required:_,readonly:g,fieldControlInputProps:m,fieldControlLabelProps:x,fieldControlTooltipProps:f,fieldControlHintProps:y}=e,C=tslib_es6.__rest(e,["class","id","disabled","label","hideLabel","labelAlign","renderNoTooltip","hint","renderNoHint","tooltipAlign","accessKey","shortKey","msg","touched","required","readonly","fieldControlInputProps","fieldControlLabelProps","fieldControlTooltipProps","fieldControlHintProps"]),K=!c,j=!d,S=component.showExpertSlot(t),k=j&&!S&&n,q=component.buildBadgeTextString(b,u),B=[index.h(index.Fragment,null,index.h(InputContainer,Object.assign({},m),l),k&&index.h(FormFieldStateWrapper.FormFieldTooltipFc,Object.assign({},f||{},{id:r,label:t,align:p,badgeText:q}))),index.h(FormFieldStateWrapper.KolFormFieldLabelFc,Object.assign({},x||{},{id:r,baseClassName:"kol-field-control",class:clsx.clsx(null==x?void 0:x.class,{"kol-field-control__label--visually-hidden":Boolean(n)}),hasExpertSlot:S,label:t,accessKey:b,shortKey:u}))];"left"===s&&B.reverse();const O={"kol-field-control--disabled":Boolean(i),"kol-field-control--required":Boolean(_),"kol-field-control--touched":Boolean(h),"kol-field-control--hide-label":Boolean(n),"kol-field-control--read-only":Boolean(g),[`kol-field-control--${FormFieldStateWrapper.getMsgType(F)}`]:Boolean(FormFieldStateWrapper.isMsgDefinedAndInputTouched(F,h)),[`kol-field-control--label-align-${s}`]:Boolean(s)};return index.h("div",Object.assign({class:clsx.clsx("kol-field-control",O,o)},C),B,K&&index.h(FormFieldStateWrapper.KolFormFieldHintFc,Object.assign({},y||{},{baseClassName:"kol-field-control",id:r,hint:a})))};function getFieldControlProps(e){const l={id:e._id,disabled:e._disabled,msg:e._msg,hint:e._hint,label:e._label,hideLabel:e._hideLabel,touched:e._touched};return"_required"in e&&(l.required=e._required),"_readOnly"in e&&(l.readonly=e._readOnly),"_labelAlign"in e&&(l.labelAlign=e._labelAlign),"_accessKey"in e&&(l.accessKey=e._accessKey),"_shortKey"in e&&(l.shortKey=e._shortKey),l}const FieldControlStateWrapper=(e,l)=>{var{state:o}=e,r=tslib_es6.__rest(e,["state"]);return index.h(KolFieldControlFc,Object.assign({},getFieldControlProps(o),r),l)};exports.FieldControlStateWrapper=FieldControlStateWrapper;