@public-ui/components 4.0.0-alpha.0 → 4.0.0-alpha.10

package/dist/types/schema/types/table.d.ts

@@ -2,8 +2,9 @@ export type KoliBriTableRender = <T>(domNode: HTMLElement, cell: KoliBriTableCel
 export type KoliBriTableCellTextAlign = 'center' | 'left' | 'right' | 'justify';
 export type KoliBriSortDirection = 'ASC' | 'DESC' | 'NOS';
 export type KoliBriTableDataType = Record<string, unknown>;
+export type KoliBriTableSelectionKey = string | number;
+export type KoliBriTableSelectionKeys = KoliBriTableSelectionKey[];
 export type KoliBriTableCell = {
-    asTd?: boolean;
     colSpan?: number;
     label: string;
     render?: KoliBriTableRender;
@@ -15,10 +16,15 @@ export type KoliBriTableCell = {
 export type KoliBriTableHeaderCell = KoliBriTableCell & {
     key?: string;
     sortDirection?: KoliBriSortDirection;
+    hidable?: boolean;
+    sortable?: boolean;
+    sortOrder?: number;
+    resizable?: boolean;
 };
 export type KoliBriTableSelection = {
     label: (row: KoliBriTableDataType) => string;
     keyPropertyName?: string;
     multiple?: boolean;
-    selectedKeys?: string[];
+    selectedKeys?: KoliBriTableSelectionKeys;
+    disabledKeys?: KoliBriTableSelectionKeys;
 };

package/dist/types/schema/utils/dev.utils.d.ts

@@ -1,10 +1,13 @@
-type GetModeFn = () => boolean;
 export declare const getWindow: () => Window;
 export declare const setWindow: (value: Window) => void;
 export declare const getDocument: () => Document;
 export declare const setDocument: (value: Document) => void;
-export declare const getDevMode: () => boolean;
-export declare const setDevMode: (mode: boolean) => void;
+declare const MODES: readonly ["development", "production", "test"];
+export type Mode = (typeof MODES)[number];
+export declare const setRuntimeMode: (mode: Mode) => void;
+export declare const isDevMode: () => boolean;
+export declare const isTestMode: () => boolean;
+export declare const isProdMode: () => boolean;
 export declare const getExperimentalMode: () => boolean;
 export declare const setExperimentalMode: (mode: boolean) => void;
 export declare const getColorContrastAnalysis: () => boolean;
@@ -16,8 +19,7 @@ type LogShieldOptions = {
 };
 export declare class Logger {
     private readonly label;
-    private readonly devMode;
-    constructor(label: string, devMode: GetModeFn);
+    constructor(label: string);
     debug(msg: unknown | unknown[], options?: LogShieldOptions): void;
     info(msg: unknown | unknown[], options?: LogShieldOptions): void;
     trace(msg: unknown | unknown[], options?: LogShieldOptions): void;

package/dist/types/schema/utils/prop.validators.d.ts

@@ -1,6 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
 import type { Stringified } from '../types/common';
-import type { StencilUnknown } from '../types/unknown';
 export declare const objectObjectHandler: (value: unknown, cb: () => void) => void;
 export declare const emptyStringByArrayHandler: (value: unknown, cb: () => void) => void;
 export declare const setEventTarget: (event: Event, target?: HTMLElement) => void;
@@ -32,7 +31,6 @@ export declare const watchBoolean: (component: Generic.Element.Component, propNa
 export declare const watchString: (component: Generic.Element.Component, propName: string, value?: string, options?: WatchStringOptions) => void;
 export declare const watchNumber: (component: Generic.Element.Component, propName: string, value?: number, options?: WatchNumberOptions) => void;
 export declare const watchJsonArrayString: <T>(component: Generic.Element.Component, propName: string, itemValidation: (item: T) => boolean, value?: Stringified<T[]>, arrayValidation?: (items: T[]) => boolean, options?: WatchOptions) => void;
-export declare const mapString2Unknown: (value: StencilUnknown) => StencilUnknown;
 export declare const stringifyJson: (value: unknown) => string;
 export declare const parseJson: <T>(value: unknown) => T;
 export declare const mapBoolean2String: (value?: boolean) => string | undefined;

package/dist/types/schema/utils/reuse.d.ts

@@ -1,7 +1,3 @@
-declare const PROCESS_ENVS: readonly ["development", "production", "test"];
-type ProcessEnv = (typeof PROCESS_ENVS)[number];
-export declare let processEnv: ProcessEnv;
 export declare const handleSlotContent: (hostRef: HTMLElement, slotRef: HTMLElement, slotName: string) => void;
 export declare const showExpertSlot: (label: unknown) => label is "";
 export declare const buildBadgeTextString: (accessKey?: string, shortKey?: string) => string;
-export {};

package/dist/types/schema/validators/index.d.ts

@@ -1 +1 @@
-export*from"./alignment";export*from"./common";export*from"./options";export*from"./tab-index";
+export*from"./alignment";export*from"./common";export*from"./options";

package/dist/types/stencil-public-runtime.d.ts

@@ -1,4 +1,6 @@
-declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type MixinInstance<F> = F extends (base: MixedInCtor) => MixedInCtor<infer I> ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -151,7 +153,13 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: string): CustomMethodDecorator<any>;
+    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+}
+export interface PropSerializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
+}
+export interface AttrDeserializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => any>;
 }
 export interface UserBuildConditionals {
     isDev: boolean;
@@ -233,6 +241,14 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
+/**
+ * Decorator to serialize a property to an attribute string.
+ */
+export declare const PropSerialize: PropSerializeDecorator;
+/**
+ * Decorator to deserialize an attribute string to a property.
+ */
+export declare const AttrDeserialize: AttrDeserializeDecorator;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
@@ -260,6 +276,25 @@ export declare function setPlatformHelpers(helpers: {
  * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
+/**
+ * Method to render a virtual DOM tree to a container element.
+ *
+ * @example
+ * ```tsx
+ * import { render } from '@stencil/core';
+ *
+ * const vnode = (
+ *   <div>
+ *     <h1>Hello, world!</h1>
+ *   </div>
+ * );
+ * render(vnode, document.body);
+ * ```
+ *
+ * @param vnode - The virtual DOM tree to render
+ * @param container - The container element to render the virtual DOM tree to
+ */
+export declare function render(vnode: VNode, container: Element): void;
 /**
  * Used to manually set the base path where assets can be found. For lazy-loaded
  * builds the asset path is automatically set and assets copied to the correct
@@ -330,6 +365,37 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+/**
+ * @deprecated - Use `MixedInCtor` instead:
+ * ```ts
+ * import { MixedInCtor } from '@stencil/core';
+ *
+ * const AFactoryFn = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * ```
+ */
+export type MixinFactory = (base: MixedInCtor) => MixedInCtor;
+export type MixedInCtor<T = {}> = new (...args: any[]) => T;
+/**
+ * Compose multiple mixin classes into a single constructor.
+ * The resulting class has the combined instance types of all mixed-in classes.
+ *
+ * Example:
+ * ```ts
+ * import { Mixin, MixedInCtor } from '@stencil/core';
+ *
+ * const AWrap = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * const BWrap = <B extends MixedInCtor>(Base: B) => {class B extends Base { propB = B }; return B;}
+ * const CWrap = <B extends MixedInCtor>(Base: B) => {class C extends Base { propC = C }; return C;}
+ *
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
+ *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
+ * }
+ * ```
+ *
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
+ * @returns a class that is composed from extending each of the provided classes in the order they were provided.
+ */
+export declare function Mixin<const TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<MixinInstance<TMixins[number]>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports
@@ -826,7 +892,8 @@ export declare namespace JSXBase {
     }
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
-        onToggle?: (event: Event) => void;
+        name?: string;
+        onToggle?: (event: ToggleEvent) => void;
     }
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
         cite?: string;
@@ -1015,6 +1082,8 @@ export declare namespace JSXBase {
         autoPlay?: boolean;
         autoplay?: boolean | string;
         controls?: boolean;
+        controlslist?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
+        controlsList?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
         crossOrigin?: string;
         crossorigin?: string;
         loop?: boolean;
@@ -1530,6 +1599,13 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
+    interface ToggleEvent extends Event {
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+        readonly newState: string;
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+        readonly oldState: string;
+    }
     interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
@@ -1546,6 +1622,10 @@ export declare namespace JSXBase {
         onCompositionstartCapture?: (event: CompositionEvent) => void;
         onCompositionupdate?: (event: CompositionEvent) => void;
         onCompositionupdateCapture?: (event: CompositionEvent) => void;
+        onBeforeToggle?: (event: ToggleEvent) => void;
+        onBeforeToggleCapture?: (event: ToggleEvent) => void;
+        onToggle?: (event: ToggleEvent) => void;
+        onToggleCapture?: (event: ToggleEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1575,7 +1655,7 @@ export declare namespace JSXBase {
         onKeyUp?: (event: KeyboardEvent) => void;
         onKeyUpCapture?: (event: KeyboardEvent) => void;
         onAuxClick?: (event: MouseEvent) => void;
-        onClick?: (event: MouseEvent) => void;
+        onClick?: (event: PointerEvent) => void;
         onClickCapture?: (event: MouseEvent) => void;
         onContextMenu?: (event: MouseEvent) => void;
         onContextMenuCapture?: (event: MouseEvent) => void;
@@ -1655,6 +1735,8 @@ export declare namespace JSXBase {
         onTransitionRunCapture?: (event: TransitionEvent) => void;
         onTransitionStart?: (event: TransitionEvent) => void;
         onTransitionStartCapture?: (event: TransitionEvent) => void;
+        [key: `aria-${string}`]: string | boolean | undefined;
+        [key: `aria${string}`]: string | boolean | undefined;
     }
 }
 export interface JSXAttributes<T = Element> {

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

@@ -1,5 +1,22 @@
-type KoliBriEventType = 'blur' | 'change' | 'click' | 'focus' | 'input' | 'toggle' | 'selection-change';
-export declare function stopPropagation(event: Event): void;
-export declare function tryToDispatchKoliBriEvent<T>(type: KoliBriEventType, target?: EventTarget, detail?: T): void;
-export declare function preventDefaultAndStopPropagation(event: Event): void;
-export {};
+declare enum KolEvent {
+    blur = "kolBlur",
+    change = "kolChange",
+    changePage = "kolChangePage",
+    changePageSize = "kolChangePageSize",
+    click = "kolClick",
+    close = "kolClose",
+    create = "kolCreate",
+    focus = "kolFocus",
+    input = "kolInput",
+    keydown = "kolKeydown",
+    mousedown = "kolMousedown",
+    reset = "kolReset",
+    select = "kolSelect",
+    selectionChange = "kolSelectionChange",
+    settingsChange = "settingsChange",
+    sort = "kolSort",
+    submit = "kolSubmit",
+    toggle = "kolToggle"
+}
+declare function dispatchDomEvent<T>(target: HTMLElement, event: KolEvent, detail?: T): void;
+export { KolEvent, dispatchDomEvent };

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

@@ -1 +1 @@
-export*from"./functional-component-rendering";export*from"./snapshot-testing";export*from"./snapshot-input-testing";
+export*from"./functional-component-rendering";export*from"./snapshot-input-testing";export*from"./snapshot-testing";

package/dist/types/utils/tooltip-open-tracking.d.ts

@@ -0,0 +1,4 @@
+export declare const tooltipOpened: () => void;
+export declare const tooltipClosed: () => void;
+export declare const handleCancelOverlay: (event: Event) => void;
+export declare const isTooltipOpen: () => boolean;

package/doc/abbr.md

@@ -7,7 +7,7 @@
 
 | 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` |
+| `_label` | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string \| undefined` | `undefined` |
 
 
 ## Slots

package/doc/accordion.md

@@ -7,28 +7,18 @@
 
 | Property              | Attribute   | Description                                                                                                        | Type                                                                                      | Default     |
 | --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ----------- |
-| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean` \| `undefined`                                                                    | `false`     |
+| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean \| undefined`                                                                    | `false`     |
 | `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                  | `undefined` |
-| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                                            | `1`         |
-| `_on`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, boolean>` \| `undefined; }` | `undefined` |
-| `_open`               | `_open`     | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean` \| `undefined`                                                                    | `false`     |
+| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                            | `0`         |
+| `_on`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \| undefined; }` | `undefined` |
+| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \| undefined`                                                                    | `false`     |
 
 
 ## Methods
 
-### `focus() => Promise<void>`
-
-<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
 ### `kolFocus() => Promise<void>`
 
-
+Sets focus on the internal element.
 
 #### Returns
 

package/doc/alert.md

@@ -7,13 +7,13 @@
 
 | Property     | Attribute     | Description                                                                                                        | Type                                                                    | Default     |
 | ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ----------- |
-| `_alert`     | `_alert`      | Defines whether the screen-readers should read out the notification.                                               | `boolean` \| `undefined`                                                  | `false`     |
-| `_hasCloser` | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean` \| `undefined`                                                  | `false`     |
-| `_label`     | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` \| `undefined`                                                   | `undefined` |
-| `_level`     | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `1`         |
-| `_on`        | --            | Gibt die EventCallback-Function für das Schließen des Alerts an.                                                   | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |
-| `_type`      | `_type`       | Defines either the type of the component or of the components interactive element.                                 | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
-| `_variant`   | `_variant`    | Defines which variant should be used for presentation.                                                             | `"card"` \| `"msg"` \| `undefined`                                          | `'msg'`     |
+| `_alert`     | `_alert`      | Defines whether the screen-readers should read out the notification.                                               | `boolean \| undefined`                                                  | `false`     |
+| `_hasCloser` | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean \| undefined`                                                  | `false`     |
+| `_label`     | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string \| undefined`                                                   | `undefined` |
+| `_level`     | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                          | `0`         |
+| `_on`        | --            | Gibt die EventCallback-Function für das Schließen des Alerts an.                                                   | `undefined \| { onClose?: EventCallback<Event> \| undefined; }`         | `undefined` |
+| `_type`      | `_type`       | Defines either the type of the component or of the components interactive element.                                 | `"default" \| "error" \| "info" \| "success" \| "warning" \| undefined` | `'default'` |
+| `_variant`   | `_variant`    | Defines which variant should be used for presentation.                                                             | `"card" \| "msg" \| undefined`                                          | `'msg'`     |
 
 
 ## Slots

package/doc/avatar.md

@@ -5,10 +5,11 @@
 
 ## Properties
 
-| Property              | Attribute | Description                                                                                                        | Type                  | Default     |
-| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |
-| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`              | `undefined` |
-| `_src`                | `_src`    | Sets the image `src` attribute to the given string.                                                                | `string` \| `undefined` | `undefined` |
+| Property              | Attribute | Description                                                                                                        | Type                                                                                                      | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ----------- |
+| `_color`              | `_color`  | Defines the backgroundColor and foregroundColor.                                                                   | `string \| undefined \| { backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }` | `'#d3d3d3'` |
+| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                  | `undefined` |
+| `_src`                | `_src`    | Sets the image `src` attribute to the given string.                                                                | `string \| undefined`                                                                                     | `undefined` |
 
 
 ----------------------------------------------

package/doc/badge.md

@@ -5,12 +5,25 @@
 
 ## Properties
 
-| Property              | Attribute       | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default     |
-| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_color`              | `_color`        | Defines the backgroundColor and foregroundColor.                                                                   | `string` \| `undefined` \| `{ backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `'#000'`    |
-| `_icons`              | `_icons`        | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                    | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
-| `_label` _(required)_ | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only).                             | `string` \| `undefined` \| `{ _label: string; } & { _tabIndex?: number` \| `undefined; _value?: Stringified<StencilUnknown>; _ariaExpanded?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _role?: "button"` \| `"link"` \| `"tab"` \| `"treeitem"` \| `undefined; _ariaControls?: string` \| `undefined; _ariaDescription?: string` \| `undefined; _ariaSelected?: boolean` \| `undefined; _on?: ButtonCallbacksPropType<StencilUnknown>` \| `undefined; _type?: "button"` \| `"reset"` \| `"submit"` \| `undefined; _variant?: "primary"` \| `"secondary"` \| `"normal"` \| `"tertiary"` \| `"danger"` \| `"ghost"` \| `"custom"` \| `undefined; _customClass?: string` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _icons?: IconsPropType` \| `undefined; _id?: string` \| `undefined; _name?: string` \| `undefined; _shortKey?: string` \| `undefined; _syncValueBySelector?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
+| Property              | Attribute       | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |
+| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_color`              | `_color`        | Defines the backgroundColor and foregroundColor.                                                                   | `string \| undefined \| { backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `'#000'`    |
+| `_icons`              | `_icons`        | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                    | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
+| `_label` _(required)_ | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only).                             | `string \| undefined \| { _label: string; } & { _ariaExpanded?: boolean \| undefined; _tabIndex?: number \| undefined; _value?: StencilUnknown; _accessKey?: string \| undefined; _role?: "tab" \| "treeitem" \| undefined; _ariaControls?: string \| undefined; _ariaDescription?: string \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _inline?: boolean \| undefined; _name?: string \| undefined; _shortKey?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` |
+
+
+## Methods
+
+### `kolFocus() => Promise<void>`
+
+Sets focus on the internal element.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
 
 
 ----------------------------------------------

package/doc/breadcrumb.md

@@ -8,7 +8,7 @@
 | Property              | Attribute | Description                                                                                                        | Type                              | Default     |
 | --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------- | ----------- |
 | `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                          | `undefined` |
-| `_links` _(required)_ | `_links`  | Defines the list of links combined with their labels to render.                                                    | `BreadcrumbLinkProps[]` \| `string` | `undefined` |
+| `_links` _(required)_ | `_links`  | Defines the list of links combined with their labels to render.                                                    | `BreadcrumbLinkProps[] \| string` | `undefined` |
 
 
 ----------------------------------------------

package/doc/button-link.md

@@ -5,53 +5,43 @@
 
 ## Properties
 
-| Property              | Attribute           | Description                                                                                                                                                                      | Type                                                                                                                                                   | Default     |
-| --------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `_accessKey`          | `_access-key`       | Defines the elements access key.                                                                                                                                                 | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                              | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                            | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)          | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
-| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
-| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                           | `boolean` \| `undefined`                                                                                                                                 | `false`     |
-| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                       | `boolean` \| `undefined`                                                                                                                                 | `false`     |
-| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                  | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                 | `undefined` |
-| `_id`                 | `_id`               | Defines the internal ID of the primary component element.                                                                                                                        | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                     | `string`                                                                                                                                               | `undefined` |
-| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                    | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_on`                 | --                  | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                      | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
-| `_role`               | `_role`             | Defines the role of the components primary element.                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `"treeitem"` \| `undefined`                                                                                               | `undefined` |
-| `_shortKey`           | `_short-key`        | Adds a visual short key hint to the component.                                                                                                                                   | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_tabIndex`           | `_tab-index`        | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                 | `number` \| `undefined`                                                                                                                                  | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                        | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                  | `'top'`     |
-| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                               | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                         | `'button'`  |
-| `_value`              | `_value`            | Defines the value that the button emits on click.                                                                                                                                | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                           | `undefined` |
+| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |
+| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
+| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
+| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \| undefined`                                                                                                                                  | `undefined` |
+| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
+| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \| undefined`                                                                                                                                 | `undefined` |
+| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \| undefined`                                                                                                                                 | `undefined` |
+| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \| undefined`                                                                                                                                 | `false`     |
+| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \| undefined`                                                                                                                                 | `false`     |
+| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                                                                                 | `undefined` |
+| `_id`                 | `_id`               | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                            | `string \| undefined`                                                                                                                                  | `undefined` |
+| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \| undefined`                                                                                                                                 | `true`      |
+| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string`                                                                                                                                               | `undefined` |
+| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \| undefined`                                                                                                                                  | `undefined` |
+| `_on`                 | --                  | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }` | `undefined` |
+| `_role`               | `_role`             | <span style="color:red">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `"tab" \| "treeitem" \| undefined`                                                                                                                     | `undefined` |
+| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \| undefined`                                                                                                                                  | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                  | `'top'`     |
+| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `"button" \| "reset" \| "submit" \| undefined`                                                                                                         | `'button'`  |
+| `_value`              | `_value`            | Defines the value that the button emits on click.                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`                                                                                           | `undefined` |
 
 
 ## Methods
 
-### `focus() => Promise<void>`
+### `getValue() => Promise<StencilUnknown>`
 
-<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+Returns the current value.
 
 #### Returns
 
-Type: `Promise<void>`
-
-
-
-### `getValue() => Promise<Stringified<StencilUnknown> | undefined>`
-
-
-
-#### Returns
-
-Type: `Promise<Stringified<StencilUnknown>>`
+Type: `Promise<StencilUnknown>`
 
 
 
 ### `kolFocus() => Promise<void>`
 
-
+Sets focus on the internal element.
 
 #### Returns