@public-ui/components 4.0.0-alpha.1 → 4.0.0-alpha.11

package/dist/types/schema/components/single-select.d.ts

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { MsgPropType, PropAccessKey, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropOptions, PropRequired, PropShortKey, PropSyncValueBySelector, PropTouched, PropRows } from '../props';
+import type { MsgPropType, PropAccessKey, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropOptions, PropRequired, PropRows, PropShortKey, PropSyncValueBySelector, PropTouched } from '../props';
 import type { InputTypeOnDefault, KoliBriHIcons, Option, StencilUnknown, Stringified } from '../types';
 type RequiredProps = PropLabelWithExpertSlot & PropOptions;
 type OptionalProps = {
@@ -7,7 +7,7 @@ type OptionalProps = {
     on: InputTypeOnDefault;
     placeholder: string;
     value: StencilUnknown;
-    hideClearButton: boolean;
+    hasClearButton: boolean;
 } & PropAccessKey & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropName & PropRequired & PropRows & PropSyncValueBySelector & PropShortKey & PropTouched;
 type RequiredStates = {
     options: Option<StencilUnknown>[];
@@ -15,7 +15,7 @@ type RequiredStates = {
 type OptionalStates = {
     on: InputTypeOnDefault;
     placeholder: string;
-    hideClearButton: boolean;
+    hasClearButton: boolean;
 } & PropAccessKey & PropDisabled & PropHideLabel & KoliBriHIcons & PropHint & PropId & PropName & PropRequired & PropRows & PropMsg & PropShortKey & PropTouched;
 export type SingleSelectProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type SingleSelectStates = Generic.Element.Members<RequiredStates, OptionalStates>;

package/dist/types/schema/components/span.d.ts

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropHideLabel, PropLabelWithExpertSlot, PropBadgeText } from '../props';
+import type { PropBadgeText, PropHideLabel, PropLabelWithExpertSlot } from '../props';
 import type { KoliBriCustomIcon, KoliBriIconsProp, Stringified } from '../types';
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {

package/dist/types/schema/components/spin.d.ts

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropShow, PropSpinVariant, PropLabel } from '../props';
+import type { PropLabel, PropShow, PropSpinVariant } from '../props';
 type RequiredProps = NonNullable<unknown>;
 type OptionalProps = PropSpinVariant & PropShow & PropLabel;
 type RequiredStates = PropSpinVariant;

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

@@ -2,10 +2,15 @@ import type { Generic } from 'adopted-style-sheets';
 import type { PropHasSettingsMenu, PropLabel, PropTableData, PropTableDataFoot, PropTableSelection, StatefulPropTableCallbacks } from '../props';
 import type { PropMinWidth } from '../props/min-width';
 import type { PropPaginationPosition } from '../props/pagination-position';
+import type { PropTableSettings } from '../props/table-settings';
 import type { KoliBriSortDirection, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableSelection, Stringified } from '../types';
 import type { KoliBriPaginationProps } from './pagination';
-import type { PropTableSettings } from '../props/table-settings';
-export type KoliBriDataCompareFn = (a: KoliBriTableDataType, b: KoliBriTableDataType) => number;
+export type KoliBriTableSelectedHead = {
+    key: string;
+    label: string;
+    sortDirection: KoliBriSortDirection;
+};
+export type KoliBriDataCompareFn = (a: KoliBriTableDataType, b: KoliBriTableDataType, sortDirection?: KoliBriSortDirection) => number;
 export type KoliBriTableHeaderCellWithLogic = KoliBriTableHeaderCell & {
     compareFn?: KoliBriDataCompareFn;
     sortDirection?: KoliBriSortDirection;

package/dist/types/schema/components/tableStateless.d.ts

@@ -1,10 +1,10 @@
 import type { Generic } from 'adopted-style-sheets';
 import type { PropLabel, PropTableCallbacks, PropTableData, PropTableDataFoot, PropTableSelection, TableHeaderCells } from '../props';
+import type { PropHasSettingsMenu } from '../props/has-settings-menu';
 import type { PropMinWidth } from '../props/min-width';
 import type { PropTableHeaderCells } from '../props/table-header-cells';
-import type { KoliBriTableDataType, KoliBriTableSelection } from '../types';
 import type { PropTableSettings } from '../props/table-settings';
-import type { PropHasSettingsMenu } from '../props/has-settings-menu';
+import type { KoliBriTableDataType, KoliBriTableSelection } from '../types';
 type RequiredProps = PropLabel & PropMinWidth & PropTableData & PropTableHeaderCells;
 type OptionalProps = PropTableCallbacks & PropTableDataFoot & PropTableSelection & PropTableSettings & PropHasSettingsMenu;
 type RequiredStates = {

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

@@ -1,8 +1,8 @@
 import type { Generic } from 'adopted-style-sheets';
 import type { Callback } from '../enums';
 import type { PropAlign, PropDisabled, PropHideLabel, PropLabel, PropTabBehavior, PropTooltipAlign } from '../props';
-import type { EventCallback, EventValueOrEventCallback, KoliBriIconsProp, Stringified } from '../types';
 import type { PropHasCreateButton } from '../props/has-create-button';
+import type { EventCallback, EventValueOrEventCallback, KoliBriIconsProp, Stringified } from '../types';
 export type KoliBriTabsCallbacks = {
     onCreate?: EventCallback<Event>;
 } & {

package/dist/types/schema/components/toaster.d.ts

@@ -1,6 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { LabelPropType } from '../props';
-import type { AlertTypePropType } from '../props';
+import type { AlertTypePropType, LabelPropType } from '../props';
 declare const toastStatusOptions: readonly ["adding", "settled", "removing"];
 type ToastStatus = (typeof toastStatusOptions)[number];
 export type ToastRenderFunction = (nodeRef: HTMLElement, options: {

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

@@ -1,8 +1,8 @@
 import { Theme } from 'adopted-style-sheets';
 export declare const KoliBri: Theme<"kol", "info" | "success" | "warning" | "error" | "message" | "close" | "form-description" | "of" | "characters" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "logo-description" | "open-link-in-tab" | "kolibri-logo", "symbol" | "abbr" | "button" | "details" | "form" | "link" | "nav" | "progress" | "select" | "table" | "textarea" | "image" | "icon" | "alert" | "card" | "accordion" | "avatar" | "badge" | "breadcrumb" | "button-link" | "combobox" | "drawer" | "heading" | "input-checkbox" | "input-color" | "input-date" | "input-email" | "input-file" | "input-number" | "input-password" | "input-radio" | "input-range" | "input-text" | "kolibri" | "link-button" | "logo" | "modal" | "pagination" | "popover-button" | "quote" | "single-select" | "skip-nav" | "spin" | "split-button" | "table-stateful" | "table-stateless" | "tabs" | "toast-container" | "toolbar" | "tooltip" | "tree" | "tree-item">;
 export * from './components';
+export * from './interfaces';
 export * from './props';
 export * from './types';
 export * from './utils';
 export * from './validators';
-export * from './interfaces';

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

@@ -1 +1 @@
-export*from"./access-key";export*from"./accept";export*from"./accordion-callbacks";export*from"./active";export*from"./adjust-height";export*from"./alert";export*from"./alert-type";export*from"./alt";export*from"./align";export*from"./allow-multi-sort";export*from"./alternative-button-link-role";export*from"./aria-controls";export*from"./aria-current-value";export*from"./aria-description";export*from"./aria-expanded";export*from"./aria-owns";export*from"./aria-selected";export*from"./auto-complete";export*from"./badge-text";export*from"./button-callbacks";export*from"./button-type";export*from"./button-variant";export*from"./checked";export*from"./collapsible";export*from"./color";export*from"./current-length";export*from"./custom-class";export*from"./details-callbacks";export*from"./disabled";export*from"./download";export*from"./error-list";export*from"./has-closer";export*from"./has-compact-button";export*from"./has-counter";export*from"./has-icons-when-expanded";export*from"./has-settings-menu";export*from"./has-value";export*from"./hide-label";export*from"./hide-msg";export*from"./hint";export*from"./href";export*from"./icons";export*from"./icons-input-checkbox";export*from"./id";export*from"./image-source";export*from"./image-sizes";export*from"./image-srcset";export*from"./indeterminate";export*from"./label";export*from"./level";export*from"./label-align";export*from"./link-on-callbacks";export*from"./link-target";export*from"./link-variant";export*from"./loading";export*from"./max-length";export*from"./max";export*from"./max-length-behavior";export*from"./modal";export*from"./msg";export*from"./multiple";export*from"./name";export*from"./open";export*from"./options";export*from"./pagination-position";export*from"./pattern";export*from"./placeholder";export*from"./popover-align";export*from"./popover-callbacks";export*from"./quote";export*from"./read-only";export*from"./required";export*from"./resize-textarea";export*from"./rows";export*from"./short-key";export*from"./show";export*from"./spell-check";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./tab-behavior";export*from"./tab-index";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-header-cells";export*from"./table-selection";export*from"./toolbar-items";export*from"./tooltip-align";export*from"./touched";export*from"./type-input-date";export*from"./type-input-text";export*from"./unit";export*from"./variant-alert";export*from"./variant-input-checkbox";export*from"./variant-progress";export*from"./variant-quote";export*from"./variant/spin";export*from"./width";
+export*from"./accept";export*from"./access-key";export*from"./accordion-callbacks";export*from"./active";export*from"./adjust-height";export*from"./alert";export*from"./alert-type";export*from"./align";export*from"./allow-multi-sort";export*from"./alt";export*from"./alternative-button-link-role";export*from"./aria-controls";export*from"./aria-current-value";export*from"./aria-description";export*from"./aria-expanded";export*from"./aria-owns";export*from"./aria-selected";export*from"./auto-complete";export*from"./badge-text";export*from"./button-callbacks";export*from"./button-type";export*from"./button-variant";export*from"./checked";export*from"./collapsible";export*from"./color";export*from"./current-length";export*from"./custom-class";export*from"./details-callbacks";export*from"./disabled";export*from"./download";export*from"./error-list";export*from"./has-closer";export*from"./has-compact-button";export*from"./has-counter";export*from"./has-icons-when-expanded";export*from"./has-settings-menu";export*from"./has-value";export*from"./hide-label";export*from"./hide-msg";export*from"./hint";export*from"./href";export*from"./icons";export*from"./icons-input-checkbox";export*from"./id";export*from"./image-sizes";export*from"./image-source";export*from"./image-srcset";export*from"./indeterminate";export*from"./inline";export*from"./label";export*from"./label-align";export*from"./level";export*from"./link-on-callbacks";export*from"./link-target";export*from"./loading";export*from"./max";export*from"./max-length";export*from"./max-length-behavior";export*from"./modal";export*from"./msg";export*from"./multiple";export*from"./name";export*from"./open";export*from"./options";export*from"./pagination-position";export*from"./pattern";export*from"./placeholder";export*from"./popover-align";export*from"./popover-callbacks";export*from"./quote";export*from"./read-only";export*from"./required";export*from"./resize-textarea";export*from"./rows";export*from"./short-key";export*from"./show";export*from"./spell-check";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./tab-behavior";export*from"./tab-index";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-header-cells";export*from"./table-selection";export*from"./toolbar-items";export*from"./tooltip-align";export*from"./touched";export*from"./type-input-date";export*from"./type-input-text";export*from"./unit";export*from"./variant-alert";export*from"./variant-input-checkbox";export*from"./variant-progress";export*from"./variant-quote";export*from"./variant/spin";export*from"./width";

package/dist/types/schema/props/inline.d.ts

@@ -0,0 +1,7 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { WatchBooleanOptions } from '../utils';
+export type InlinePropType = boolean;
+export type PropInline = {
+    inline: InlinePropType;
+};
+export declare const validateInline: (component: Generic.Element.Component, value?: InlinePropType, options?: WatchBooleanOptions) => void;

package/dist/types/schema/props/msg.d.ts

@@ -1,12 +1,14 @@
 import type { Generic } from 'adopted-style-sheets';
 import type { AlertProps } from '../components';
 import type { Stringified } from '../types';
-export type MsgPropType = Omit<AlertProps, '_label' | '_variant'> & {
+export type MsgPropType = Omit<AlertProps, '_level' | '_on' | '_label' | '_hasCloser' | '_variant'> & {
     _description: string;
 };
 export type PropMsg = {
     msg: Stringified<MsgPropType>;
 };
 export declare const validateMsg: (component: Generic.Element.Component, value?: Stringified<MsgPropType>) => void;
-export declare function checkHasMsg(msg?: Stringified<MsgPropType>, touched?: boolean): boolean;
+export declare function isMsgDefinedAndInputTouched(msg?: Stringified<MsgPropType>, touched?: boolean): boolean;
+export declare const checkHasMsg: typeof isMsgDefinedAndInputTouched;
 export declare function normalizeMsg(msg?: Stringified<MsgPropType>): MsgPropType | undefined;
+export declare function getMsgType(msg?: Stringified<MsgPropType>): MsgPropType['_type'] | 'error';

package/dist/types/schema/props/options.d.ts

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { RadioOption, Optgroup, Option, StencilUnknown } from '../types';
+import type { Optgroup, Option, RadioOption, StencilUnknown } from '../types';
 import type { Stringified } from '../types/common';
 import type { WatchOptions } from '../utils';
 export type OptionsPropType = Stringified<Option<StencilUnknown>[]>;

package/dist/types/schema/props/popover-callbacks.d.ts

@@ -1,8 +1,9 @@
 import type { Generic } from 'adopted-style-sheets';
 import type { Callback } from '../enums';
 import type { EventCallback } from '../types/callbacks';
+export type PopoverCloseEvent = MouseEvent | KeyboardEvent | ToggleEvent;
 export type PopoverCallbacksPropType = {
-    [Callback.onClose]?: EventCallback<MouseEvent | KeyboardEvent>;
+    [Callback.onClose]?: EventCallback<PopoverCloseEvent>;
 };
 export type PropPopoverCallbacks = {
     on: PopoverCallbacksPropType;

package/dist/types/schema/props/table-callbacks.d.ts

@@ -1,13 +1,13 @@
 import type { Callback } from '../enums';
 import type { EventValueOrEventCallback } from '../types/callbacks';
 import type { Generic } from 'adopted-style-sheets';
-import type { KoliBriSortDirection, KoliBriTableDataType } from '../types';
+import type { KoliBriSortDirection, KoliBriTableDataType, KoliBriTableSelectionKeys } from '../types';
 export type SortEventPayload = {
     key: string;
     currentSortDirection: KoliBriSortDirection;
 };
-export type SelectionChangeEventPayload = string[] | string;
-export type StatefulSelectionChangeEventPayload = KoliBriTableDataType[] | KoliBriTableDataType | null;
+export type SelectionChangeEventPayload = KoliBriTableSelectionKeys;
+export type StatefulSelectionChangeEventPayload = KoliBriTableDataType[] | null;
 export type TableCallbacksPropType = {
     [Callback.onSort]?: EventValueOrEventCallback<MouseEvent, SortEventPayload>;
     [Callback.onSelectionChange]?: EventValueOrEventCallback<Event, SelectionChangeEventPayload>;

package/dist/types/schema/props/table-data-foot.d.ts

@@ -1,6 +1,6 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { SetStateHooks } from '../utils';
 import type { KoliBriTableDataType, Stringified } from '../types';
+import type { SetStateHooks } from '../utils';
 export type TableDataFootPropType = Stringified<KoliBriTableDataType[]>;
 export type PropTableDataFoot = {
     dataFoot: TableDataFootPropType;

package/dist/types/schema/props/table-data.d.ts

@@ -1,6 +1,6 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { SetStateHooks } from '../utils';
 import type { KoliBriTableDataType, Stringified } from '../types';
+import type { SetStateHooks } from '../utils';
 export type TableDataPropType = Stringified<KoliBriTableDataType[]>;
 export type PropTableData = {
     data: TableDataPropType;

package/dist/types/schema/props/toolbar-items.d.ts

@@ -1,6 +1,10 @@
 import type { Generic } from 'adopted-style-sheets';
 import type { ButtonProps, LinkProps } from '../../schema';
-export type ToolbarItemPropType = ButtonProps | LinkProps;
+export type ToolbarItemPropType = ({
+    type: 'button';
+} & ButtonProps) | ({
+    type: 'link';
+} & LinkProps);
 export type ToolbarItemsPropType = ToolbarItemPropType[];
 export type PropToolbarItems = {
     items: ToolbarItemsPropType;

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

@@ -1,5 +1,5 @@
-import type { EventCallback, EventValueOrEventCallback } from '../callbacks';
 import type { Callback } from '../../enums';
+import type { EventCallback, EventValueOrEventCallback } from '../callbacks';
 type InputTypeOnBlur = {
     [Callback.onBlur]?: EventCallback<Event>;
 };
@@ -15,6 +15,9 @@ type InputTypeOnFocus = {
 type InputTypeOnInput = {
     [Callback.onInput]?: EventValueOrEventCallback<Event, unknown>;
 };
+type InputTypeOnKeyDown = {
+    [Callback.onKeyDown]?: EventCallback<KeyboardEvent>;
+};
 export type Option<T> = {
     disabled?: boolean;
     label: string | number;
@@ -29,5 +32,5 @@ export type Optgroup<T> = {
     options: Option<T>[];
 };
 export type SelectOption<T> = Option<T> | Optgroup<T> | RadioOption<T>;
-export type InputTypeOnDefault = InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput;
+export type InputTypeOnDefault = InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown;
 export {};

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

@@ -2,7 +2,8 @@ export interface ColumnSettings {
     hidable?: boolean;
     key: string;
     label: string;
-    position: number;
+    sortable?: boolean;
+    resizable?: boolean;
     visible: boolean;
     width?: number;
 }

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

@@ -2,6 +2,8 @@ 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 = {
     colSpan?: number;
     label: string;
@@ -15,11 +17,14 @@ 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[];
-    disabledKeys?: string[];
+    selectedKeys?: KoliBriTableSelectionKeys;
+    disabledKeys?: KoliBriTableSelectionKeys;
 };

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

@@ -1,5 +1,6 @@
-declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
-type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
+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;
 }
@@ -152,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;
@@ -234,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;
 /**
@@ -350,18 +365,27 @@ 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;
-export type MixinFactory = <TBase extends new (...args: any[]) => any>(base: TBase) => abstract new (...args: ConstructorParameters<TBase>) => any;
+/**
+ * @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:
- * ```
- * import { Mixin, MixinFactory } from '@stencil/core';
+ * ```ts
+ * import { Mixin, MixedInCtor } from '@stencil/core';
  *
- * const AWrap: MixinFactory = (Base) => {class A extends Base { propA = A }; return A;}
- * const BWrap: MixinFactory = (Base) => {class B extends Base { propB = B }; return B;}
- * const CWrap: MixinFactory = (Base) => {class C extends Base { propC = C }; return C;}
+ * 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>; }
@@ -369,9 +393,9 @@ export type MixinFactory = <TBase extends new (...args: any[]) => any>(base: TBa
  * ```
  *
  * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
- * @returns a class that that is composed from extending each of the provided classes in the order they were provided.
+ * @returns a class that is composed from extending each of the provided classes in the order they were provided.
  */
-export declare function Mixin<TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<InstanceType<ReturnType<TMixins[number]>>>;
+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

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

@@ -8,6 +8,7 @@ declare enum KolEvent {
     create = "kolCreate",
     focus = "kolFocus",
     input = "kolInput",
+    keydown = "kolKeydown",
     mousedown = "kolMousedown",
     reset = "kolReset",
     select = "kolSelect",

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/doc/accordion.md

@@ -10,7 +10,7 @@
 | `_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`                                            | `0`         |
-| `_on`                 | `_on`       | Gibt die EventCallback-Funktionen an.                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \| undefined; }` | `undefined` |
+| `_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`     |
 
 

package/doc/alert.md

@@ -11,7 +11,7 @@
 | `_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`        | `_on`         | Gibt die EventCallback-Function für das Schließen des Alerts an.                                                   | `undefined \| { onClose?: EventCallback<Event> \| undefined; }`         | `undefined` |
+| `_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'`     |
 

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?: StencilUnknown; _ariaExpanded?: boolean \| undefined; _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; _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/button-link.md

@@ -7,7 +7,7 @@
 
 | 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` |
+| `_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` |
@@ -16,15 +16,15 @@
 | `_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`                 | `_on`               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| 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` |
-| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `"inline" \| "standalone" \| undefined`                                                                                                                | `'inline'`  |
+| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`                                                                                           | `undefined` |
 
 
 ## Methods

package/doc/button.md

@@ -7,7 +7,7 @@
 
 | 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` |
+| `_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` |
@@ -17,14 +17,15 @@
 | `_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`                                                                                                                                 | `false`     |
 | `_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`                 | `_on`               | Defines the callback functions for button events.                                                                                                                                                                                        | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }` | `undefined` |
+| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                                                                        | `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` |
+| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`                                                                                           | `undefined` |
 | `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| "tertiary" \| undefined`                                                   | `'normal'`  |
 
 

package/doc/card.md

@@ -10,7 +10,7 @@
 | `_hasCloser`          | `_has-closer` | Defines whether the element can be closed.                                                                         | `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`                  | `0`         |
-| `_on`                 | `_on`         | Defines the event callback functions for the component.                                                            | `undefined \| { onClose?: EventCallback<Event> \| undefined; }` | `undefined` |
+| `_on`                 | --            | Defines the event callback functions for the component.                                                            | `undefined \| { onClose?: EventCallback<Event> \| undefined; }` | `undefined` |
 
 
 ## Slots