@public-ui/components 2.1.0 → 2.1.1

package/dist/types/core/component-names.d.ts

@@ -56,6 +56,7 @@ export declare let KolTableTag: "kol-table";
 export declare let KolTabsTag: "kol-tabs";
 export declare let KolTextareaTag: "kol-textarea";
 export declare let KolToastContainerTag: "kol-toast-container";
+export declare let KolToolbarTag: "kol-toolbar";
 export declare let KolTooltipWcTag: "kol-tooltip-wc";
 export declare let KolTreeItemTag: "kol-tree-item";
 export declare let KolTreeItemWcTag: "kol-tree-item-wc";

package/dist/types/core/i18n.d.ts

@@ -1,4 +1,7 @@
 import type { Generic } from 'adopted-style-sheets';
+import locale_de from '../locales/de';
+export type ResourcePrefix = 'Kol';
+export type ComponentKeys = keyof typeof locale_de;
 interface ITranslationOptions {
     placeholders?: {
         [K: string]: string;
@@ -13,5 +16,5 @@ export declare class I18nService {
     translate(key: string, options?: ITranslationOptions): string;
 }
 export declare const getI18nInstance: () => I18nService;
-export declare const initializeI18n: (lng: Generic.I18n.Locale.ISO_639_1, translations?: Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string> | Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string>[] | Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string>>) => void;
+export declare const initializeI18n: (lng: Generic.I18n.Locale.ISO_639_1, translations?: Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string> | Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string>[] | Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string>>) => I18nService;
 export {};

package/dist/types/i18n.d.ts

@@ -1,6 +1,4 @@
-import locale_de from './locales/de';
-type ResourcePrefix = 'Kol';
-type ComponentKeys = keyof typeof locale_de;
+import type { ComponentKeys, ResourcePrefix } from './core/i18n';
 type Options = {
     count?: number;
     placeholders?: {

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export { KoliBriDevHelper, Optgroup, Option, SelectOption } from './schema';
-export type { Toast, ToasterOptions } from './schema';
+export type { Toast, ToasterOptions, KoliBriTableSelection, KoliBriTableCell } from './schema';
 export { KoliBri } from './schema';
 export * from './components.d';
 export { setCurrentLocation } from './components/link/ariaCurrentService';

package/dist/types/locales/de.d.ts

@@ -37,5 +37,8 @@ declare const _default: {
     'error-list-message': string;
     version: string;
     'table-visible-range': string;
+    dropdown: string;
+    'nav-label-open': string;
+    'nav-label-close': string;
 };
 export default _default;

package/dist/types/locales/en.d.ts

@@ -37,5 +37,8 @@ declare const _default: {
     'error-list-message': string;
     version: string;
     'table-visible-range': string;
+    dropdown: string;
+    'nav-label-open': string;
+    'nav-label-close': string;
 };
 export default _default;

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

@@ -0,0 +1,32 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { PropDisabled, PropHideError, PropHideLabel, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropRequired, PropSyncValueBySelector, PropTouched, PropSuggestions } from '../props';
+import type { InputTypeOnDefault, KoliBriHorizontalIcons, Stringified, W3CInputValue } from '../types';
+type RequiredProps = PropSuggestions;
+type OptionalProps = {
+    accessKey: string;
+    hint: string;
+    icons: Stringified<KoliBriHorizontalIcons>;
+    on: InputTypeOnDefault;
+    tabIndex: number;
+    value: string;
+    placeholder: string;
+} & PropDisabled & PropHideError & PropHideLabel & PropLabelWithExpertSlot & PropMsg & PropName & PropRequired & PropSyncValueBySelector & PropTouched;
+type RequiredStates = {
+    hasValue: boolean;
+    suggestions: W3CInputValue[];
+    value: string;
+} & PropId & PropHideError & PropLabelWithExpertSlot;
+type OptionalStates = {
+    accessKey: string;
+    alert: boolean;
+    hint: string;
+    icons: KoliBriHorizontalIcons;
+    on: InputTypeOnDefault;
+    tabIndex: number;
+    placeholder: string;
+} & PropDisabled & PropHideLabel & PropId & PropName & PropRequired & PropMsg & PropTouched;
+export type ComboboxProps = Generic.Element.Members<RequiredProps, OptionalProps>;
+export type ComboboxStates = Generic.Element.Members<RequiredStates, OptionalStates>;
+export type ComboboxWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;
+export type ComboboxAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
+export {};

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

@@ -1 +1 @@
-export*from"./abbr";export*from"./accordion";export*from"./alert";export*from"./avatar";export*from"./badge";export*from"./breadcrumb";export*from"./button";export*from"./button-group";export*from"./button-link";export*from"./card";export*from"./details";export*from"./form";export*from"./heading";export*from"./icon";export*from"./image";export*from"./indented-text";export*from"./input";export*from"./input-checkbox";export*from"./input-color";export*from"./input-date";export*from"./input-email";export*from"./input-file";export*from"./input-number";export*from"./input-password";export*from"./input-radio";export*from"./input-range";export*from"./input-text";export*from"./kolibri";export*from"./link";export*from"./link-button";export*from"./link-group";export*from"./modal";export*from"./nav";export*from"./pagination";export*from"./popover";export*from"./progress";export*from"./quote";export*from"./select";export*from"./skip-nav";export*from"./span";export*from"./spin";export*from"./split-button";export*from"./symbol";export*from"./table";export*from"./tableStateless";export*from"./tabs";export*from"./textarea";export*from"./toaster";export*from"./tooltip";export*from"./tree";export*from"./tree-item";export*from"./version";
+export*from"./abbr";export*from"./accordion";export*from"./alert";export*from"./avatar";export*from"./badge";export*from"./breadcrumb";export*from"./button";export*from"./button-group";export*from"./button-link";export*from"./card";export*from"./details";export*from"./form";export*from"./heading";export*from"./icon";export*from"./image";export*from"./indented-text";export*from"./input";export*from"./input-checkbox";export*from"./input-color";export*from"./input-date";export*from"./input-email";export*from"./input-file";export*from"./input-number";export*from"./input-password";export*from"./input-radio";export*from"./input-range";export*from"./input-text";export*from"./kolibri";export*from"./link";export*from"./link-button";export*from"./link-group";export*from"./modal";export*from"./nav";export*from"./pagination";export*from"./popover";export*from"./progress";export*from"./quote";export*from"./select";export*from"./skip-nav";export*from"./span";export*from"./spin";export*from"./split-button";export*from"./symbol";export*from"./table";export*from"./tableStateless";export*from"./tabs";export*from"./textarea";export*from"./toaster";export*from"./toolbar";export*from"./tooltip";export*from"./tree";export*from"./tree-item";export*from"./version";export*from"./combobox";

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

@@ -1,7 +1,7 @@
 import type { Generic } from 'adopted-style-sheets';
 import type { PropDisabled, PropHideError, PropHideLabel, PropId, PropLabelWithExpertSlot, PropMsg, PropMultiple, PropName, PropOptionsWithOptgroup, PropRequired, PropRows, PropSyncValueBySelector, PropTouched } from '../props';
 import type { InputTypeOnDefault, KoliBriHorizontalIcons, SelectOption, Stringified, W3CInputValue } from '../types';
-type RequiredProps = NonNullable<unknown>;
+type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
     accessKey: string;
     alert: boolean;
@@ -11,7 +11,7 @@ type OptionalProps = {
     on: InputTypeOnDefault;
     tabIndex: number;
     value: Stringified<W3CInputValue[]>;
-} & PropDisabled & PropHideError & PropHideLabel & PropLabelWithExpertSlot & PropMsg & PropMultiple & PropName & PropOptionsWithOptgroup & PropRequired & PropRows & PropSyncValueBySelector & PropTouched;
+} & PropDisabled & PropHideError & PropHideLabel & PropMsg & PropMultiple & PropName & PropOptionsWithOptgroup & PropRequired & PropRows & PropSyncValueBySelector & PropTouched;
 type RequiredStates = {
     hasValue: boolean;
     options: SelectOption<W3CInputValue>[];

package/dist/types/schema/components/split-button.d.ts

@@ -1,10 +1,10 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { ButtonCallbacksPropType, PropAlternativeButtonLinkRole, PropButtonVariant, PropIcons, PropLabel, PropShow, PropTooltipAlign } from '../props';
+import type { ButtonCallbacksPropType, PropAlternativeButtonLinkRole, PropButtonVariant, PropDisabled, PropHideLabel, PropIcons, PropLabel, PropName, PropShow, PropTooltipAlign } from '../props';
 import type { StencilUnknown } from '../types';
 type RequiredProps = PropLabel;
 type OptionalProps = {
     on?: ButtonCallbacksPropType<StencilUnknown>;
-} & PropAlternativeButtonLinkRole & PropIcons & PropTooltipAlign & PropButtonVariant;
+} & PropDisabled & PropHideLabel & PropAlternativeButtonLinkRole & PropIcons & PropTooltipAlign & PropButtonVariant & PropName;
 type RequiredStates = PropShow;
 type OptionalStates = NonNullable<unknown>;
 export type SplitButtonProps = Generic.Element.Members<RequiredProps, OptionalProps>;

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

@@ -20,9 +20,6 @@ export type KoliBriTableHeaders = {
     horizontal?: KoliBriTableHeaderCellWithLogic[][];
     vertical?: KoliBriTableHeaderCellWithLogic[][];
 };
-export type KoliBriTableHeaderCellAndData = KoliBriTableHeaderCellWithLogic & {
-    data: KoliBriTableDataType;
-};
 export type KoliBriTablePaginationProps = Generic.Element.Members<{
     page: number;
 }, KoliBriPaginationProps>;

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

@@ -1,11 +1,11 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropLabel, PropTableCallbacks, PropTableData, PropTableDataFoot, TableHeaderCells } from '../props';
-import type { KoliBriTableDataType } from '../types';
+import type { PropLabel, PropTableCallbacks, PropTableData, PropTableDataFoot, PropTableSelection, TableHeaderCells } from '../props';
+import type { KoliBriTableDataType, KoliBriTableSelection } from '../types';
 import type { PropTableHeaderCells } from '../props/table-header-cells';
 type RequiredProps = PropLabel & PropTableData & PropTableHeaderCells;
 type OptionalProps = {
     minWidth: string;
-} & PropTableDataFoot & PropTableCallbacks;
+} & PropTableCallbacks & PropTableDataFoot & PropTableSelection;
 type RequiredStates = {
     headerCells: TableHeaderCells;
     data: KoliBriTableDataType[];
@@ -13,6 +13,7 @@ type RequiredStates = {
 type OptionalStates = {
     minWidth: string;
     dataFoot: KoliBriTableDataType[];
+    selection: KoliBriTableSelection;
 } & PropTableCallbacks;
 export type TableStatelessProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type TableStatelessStates = Generic.Element.Members<RequiredStates, OptionalStates>;

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

@@ -3,7 +3,7 @@ import type { PropAdjustHeight, PropDisabled, PropHasCounter, PropHideError, Pro
 import type { InputTypeOnDefault } from '../types';
 export declare const cssResizeOptions: readonly ["both", "horizontal", "vertical", "none"];
 export type CSSResize = (typeof cssResizeOptions)[number];
-type RequiredProps = NonNullable<unknown>;
+type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
     accessKey: string;
     alert: boolean;
@@ -15,7 +15,7 @@ type OptionalProps = {
     resize: CSSResize;
     tabIndex: number;
     value: string;
-} & PropAdjustHeight & PropDisabled & PropHasCounter & PropHideError & PropHideLabel & PropLabelWithExpertSlot & PropMsg & PropName & PropReadOnly & PropRequired & PropRows & PropSyncValueBySelector & PropTouched;
+} & PropAdjustHeight & PropDisabled & PropHasCounter & PropHideError & PropHideLabel & PropMsg & PropName & PropReadOnly & PropRequired & PropRows & PropSyncValueBySelector & PropTouched;
 type RequiredStates = {
     adjustHeight: boolean;
     currentLength: number;

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

@@ -0,0 +1,10 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { PropLabel, PropToolbarItems } from '../props';
+type RequiredProps = PropLabel & PropToolbarItems;
+type OptionalProps = unknown;
+type RequiredStates = RequiredProps;
+type OptionalStates = OptionalProps;
+export type ToolbarProps = Generic.Element.Members<RequiredProps, OptionalProps>;
+export type ToolbarStates = Generic.Element.Members<RequiredStates, OptionalStates>;
+export type ToolbarAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
+export {};

package/dist/types/schema/enums/events.d.ts

@@ -16,5 +16,6 @@ export declare enum Events {
     onReset = "onReset",
     onSelect = "onSelect",
     onSort = "onSort",
+    onSelectionChange = "onSelectionChange",
     onSubmit = "onSubmit"
 }

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

@@ -1,5 +1,5 @@
 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" | "details" | "abbr" | "button" | "form" | "link" | "nav" | "progress" | "select" | "table" | "textarea" | "image" | "icon" | "alert" | "card" | "accordion" | "accordion-group" | "avatar" | "badge" | "breadcrumb" | "button-group" | "button-link" | "heading" | "indented-text" | "input-checkbox" | "input-color" | "input-date" | "input-email" | "input-file" | "input-number" | "input-password" | "input-radio" | "input-range" | "input-text" | "kolibri" | "link-button" | "link-group" | "logo" | "modal" | "pagination" | "separator" | "skip-nav" | "spin" | "split-button" | "table-stateless" | "table-stateful" | "tabs" | "toast-container" | "toolbar" | "tooltip" | "tree" | "tree-item">;
+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" | "details" | "abbr" | "button" | "form" | "link" | "nav" | "progress" | "select" | "table" | "textarea" | "image" | "icon" | "alert" | "card" | "accordion" | "accordion-group" | "avatar" | "badge" | "breadcrumb" | "button-group" | "button-link" | "combobox" | "heading" | "indented-text" | "input-checkbox" | "input-color" | "input-date" | "input-email" | "input-file" | "input-number" | "input-password" | "input-radio" | "input-range" | "input-text" | "kolibri" | "link-button" | "link-group" | "logo" | "modal" | "pagination" | "separator" | "skip-nav" | "spin" | "split-button" | "table-stateless" | "table-stateful" | "tabs" | "toast-container" | "toolbar" | "tooltip" | "tree" | "tree-item">;
 export * from './components';
 export * from './props';
 export * from './types';

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

@@ -1 +1 @@
-export*from"./access-key";export*from"./active";export*from"./adjust-height";export*from"./alert";export*from"./align";export*from"./alternative-button-link-role";export*from"./aria-controls";export*from"./aria-current-value";export*from"./aria-expanded";export*from"./aria-selected";export*from"./button-callbacks";export*from"./button-type";export*from"./button-variant";export*from"./checked";export*from"./collapsible";export*from"./color";export*from"./custom-class";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"./heading-variant";export*from"./hide-error";export*from"./hide-label";export*from"./href";export*from"./icons";export*from"./id";export*from"./image-source";export*from"./indeterminate";export*from"./label";export*from"./link-on-callbacks";export*from"./link-target";export*from"./loading";export*from"./max";export*from"./msg";export*from"./multiple";export*from"./name";export*from"./open";export*from"./options";export*from"./pagination-position";export*from"./read-only";export*from"./required";export*from"./rows";export*from"./show";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-header-cells";export*from"./tooltip-align";export*from"./touched";export*from"./variant/spin";
+export*from"./access-key";export*from"./active";export*from"./adjust-height";export*from"./alert";export*from"./align";export*from"./alternative-button-link-role";export*from"./aria-controls";export*from"./aria-current-value";export*from"./aria-expanded";export*from"./aria-selected";export*from"./button-callbacks";export*from"./button-type";export*from"./button-variant";export*from"./checked";export*from"./collapsible";export*from"./color";export*from"./custom-class";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"./heading-variant";export*from"./hide-error";export*from"./hide-label";export*from"./href";export*from"./icons";export*from"./id";export*from"./image-source";export*from"./indeterminate";export*from"./label";export*from"./link-on-callbacks";export*from"./link-target";export*from"./loading";export*from"./max";export*from"./msg";export*from"./multiple";export*from"./name";export*from"./open";export*from"./options";export*from"./pagination-position";export*from"./read-only";export*from"./required";export*from"./rows";export*from"./show";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-header-cells";export*from"./table-selection";export*from"./tooltip-align";export*from"./toolbar-items";export*from"./touched";export*from"./variant/spin";

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

@@ -6,8 +6,10 @@ export type SortEventPayload = {
     key: string;
     currentSortDirection: KoliBriSortDirection;
 };
+export type SelectionChangeEventPayload = string[];
 export type TableCallbacksPropType = {
     [Events.onSort]?: EventValueOrEventCallback<MouseEvent, SortEventPayload>;
+    [Events.onSelectionChange]?: EventValueOrEventCallback<Event, SelectionChangeEventPayload>;
 };
 export type PropTableCallbacks = {
     on: TableCallbacksPropType;

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

@@ -0,0 +1,7 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { KoliBriTableSelection, Stringified } from '../types';
+export type TableSelectionPropType = Stringified<KoliBriTableSelection>;
+export type PropTableSelection = {
+    selection: TableSelectionPropType;
+};
+export declare const validateTableSelection: (component: Generic.Element.Component, value?: TableSelectionPropType) => void;

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

@@ -0,0 +1,8 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { ButtonProps, LinkProps } from '../../schema';
+export type ToolbarItemPropType = ButtonProps | LinkProps;
+export type ToolbarItemsPropType = ToolbarItemPropType[];
+export type PropToolbarItems = {
+    items: ToolbarItemsPropType;
+};
+export declare const validateToolbarItems: (component: Generic.Element.Component, value?: ToolbarItemsPropType) => void;

package/dist/types/schema/tag-names.d.ts

@@ -10,45 +10,46 @@ export declare enum TagEnum {
     'button-group' = 8,
     'button-link' = 9,
     'card' = 10,
-    'details' = 11,
-    'form' = 12,
-    'heading' = 13,
-    'icon' = 14,
-    'image' = 15,
-    'indented-text' = 16,
-    'input-checkbox' = 17,
-    'input-color' = 18,
-    'input-date' = 19,
-    'input-email' = 20,
-    'input-file' = 21,
-    'input-number' = 22,
-    'input-password' = 23,
-    'input-radio' = 24,
-    'input-range' = 25,
-    'input-text' = 26,
-    'kolibri' = 27,
-    'link' = 28,
-    'link-button' = 29,
-    'link-group' = 30,
-    'logo' = 31,
-    'modal' = 32,
-    'nav' = 33,
-    'pagination' = 34,
-    'progress' = 35,
-    'select' = 36,
-    'separator' = 37,
-    'skip-nav' = 38,
-    'spin' = 39,
-    'split-button' = 40,
-    'symbol' = 41,
-    'table' = 42,
-    'table-stateless' = 43,
-    'table-stateful' = 44,
-    'tabs' = 45,
-    'textarea' = 46,
-    'toast-container' = 47,
-    'toolbar' = 48,
-    'tooltip' = 49,
-    'tree' = 50,
-    'tree-item' = 51
+    'combobox' = 11,
+    'details' = 12,
+    'form' = 13,
+    'heading' = 14,
+    'icon' = 15,
+    'image' = 16,
+    'indented-text' = 17,
+    'input-checkbox' = 18,
+    'input-color' = 19,
+    'input-date' = 20,
+    'input-email' = 21,
+    'input-file' = 22,
+    'input-number' = 23,
+    'input-password' = 24,
+    'input-radio' = 25,
+    'input-range' = 26,
+    'input-text' = 27,
+    'kolibri' = 28,
+    'link' = 29,
+    'link-button' = 30,
+    'link-group' = 31,
+    'logo' = 32,
+    'modal' = 33,
+    'nav' = 34,
+    'pagination' = 35,
+    'progress' = 36,
+    'select' = 37,
+    'separator' = 38,
+    'skip-nav' = 39,
+    'spin' = 40,
+    'split-button' = 41,
+    'symbol' = 42,
+    'table' = 43,
+    'table-stateless' = 44,
+    'table-stateful' = 45,
+    'tabs' = 46,
+    'textarea' = 47,
+    'toast-container' = 48,
+    'toolbar' = 49,
+    'tooltip' = 50,
+    'tree' = 51,
+    'tree-item' = 52
 }

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

@@ -10,8 +10,14 @@ export type KoliBriTableCell = {
     rowSpan?: number;
     textAlign?: KoliBriTableCellTextAlign;
     width?: string;
+    data?: KoliBriTableDataType;
 };
 export type KoliBriTableHeaderCell = KoliBriTableCell & {
     key?: string;
     sortDirection?: KoliBriSortDirection;
 };
+export type KoliBriTableSelection = {
+    label: (row: KoliBriTableDataType) => string;
+    keyPropertyName?: string;
+    selectedKeys?: string[];
+};

package/dist/types/schema/utils/a11y.tipps.d.ts

@@ -3,6 +3,7 @@ type HintOptions = {
     force?: boolean;
 };
 export declare const a11yHint: (msg: string, options?: HintOptions) => void;
+export declare const deprecatedHint: (msg: string, options?: HintOptions) => void;
 export declare const devHint: (msg: string, options?: HintOptions) => void;
 export declare const devWarning: (msg: string, options?: HintOptions) => void;
 export declare const featureHint: (msg: string, done?: boolean, options?: HintOptions) => void;

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

@@ -1,4 +1,4 @@
-type KoliBriEventType = 'blur' | 'change' | 'click' | 'focus' | 'input' | 'toggle';
+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;

package/doc/button-link.md

@@ -18,6 +18,29 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 <kol-button-link _on="" _label="Schalter sieht wie ein Link aus"></kol-button-link>
 ```
 
+### Events
+
+Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
+
+```js
+kolibriElement._on = {
+	onFocus: (event) => {
+		/* Do something on focus */
+	},
+	onClick: (event, value) => {
+		/* Do something with value or event */
+	},
+	// ...
+};
+```
+
+| Event       | Auslöser                                                       | Value                |
+| ----------- | -------------------------------------------------------------- | -------------------- |
+| onFocus     | Element wird fokussiert                                        | -                    |
+| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | -                    |
+| onClick     | Element wird angeklickt (entspricht nativem `click`-Event)     | Definierter `_value` |
+| onBlur      | Element verliert Fokus                                         | -                    |
+
 ### Beispiel
 
 <div class="flex gap-2">

package/doc/button.md

@@ -14,6 +14,29 @@
 <kol-button _label="Ghost" _variant="ghost"></kol-button>
 ```
 
+### Events
+
+Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
+
+```js
+kolibriElement._on = {
+	onFocus: (event) => {
+		/* Do something on focus */
+	},
+	onClick: (event, value) => {
+		/* Do something with value or event */
+	},
+	// ...
+};
+```
+
+| Event       | Auslöser                                                       | Value                |
+| ----------- | -------------------------------------------------------------- | -------------------- |
+| onFocus     | Element wird fokussiert                                        | -                    |
+| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | -                    |
+| onClick     | Element wird angeklickt (entspricht nativem `click`-Event)     | Definierter `_value` |
+| onBlur      | Element verliert Fokus                                         | -                    |
+
 ### Beispiel
 
 Default

package/doc/combobox.md

@@ -0,0 +1,100 @@
+# Combobox `preview`
+
+<kol-alert _type="warning">
+  Komponente ist ein Entwurf - Vorläufig nicht in Produktion verwenden.
+</kol-alert>
+
+Die **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit einer darunter angezeigten Liste von auswählbaren Optionen kombiniert.
+
+## Konstruktion
+
+### Code
+
+```html
+<kol-combobox _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
+```
+
+### Beispiel
+
+<kol-combobox  _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
+
+## Verwendung
+
+Die Auswahlmöglichkeiten werden über das Attribut **`_suggestions`** als JSON-Array an die Komponente übergeben.
+
+Beispiel für die Konstruktion des JSON-Array:
+
+```json
+["Herr", "Frau", "Firma"]
+```
+
+<!--### Best practices-->
+
+<!-- ## Barrierefreiheit -->
+
+### Tastatursteuerung
+
+| Taste                          | Funktion                                                                                                                                                                                            |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab`                          | Fokussiert das Auswahlfeld.                                                                                                                                                                         |
+| `Enter`                        | Wenn die Listbox geöffnet ist und eine Option fokussiert ist, wählt diese Funktion die fokussierte Option aus und schließt die Listbox. Wenn keine Optionfokussiert ist, öffnet es nur die Listbox. |
+| `Pfeil nach unten (ArrowDown)` | Öffnet die Listbox, wenn sie geschlossen ist, und bewegt den visuellen Fokus um eine Option nach unten, wenn die Listbox geöffnet ist.                                                              |
+| `Pfeil nach oben (ArrowUp)`    | Öffnet die Listbox, wenn sie geschlossen ist, und bewegt den visuellen Fokus um eine Option nach oben, wenn die Listbox geöffnet ist.                                                               |
+| `Escape (Esc)`                 | Schlißt die Listbox und entfernt den visuellen Fokus von der Combobox, ohne eine Auswahl zu treffen.                                                                                                |
+| `Home`                         | Bewegt den visuellen Fokus auf die erste Option in der Listbox.                                                                                                                                     |
+| `End`                          | Bewegt den visuellen Fokus auf die letzte Option in der Listbox.                                                                                                                                    |
+| `Seite mach oben(PageUp)`      | Springt zehn Optionen nach oben in der Listbox und fokussiert die entsprechende Option.                                                                                                             |
+| `Seite mach unten(PageDown)`   | Springt zehn Optionen nach unten in der Listbox und fokussiert die entsprechende Option.                                                                                                            |
+| `Druckbare Zeichen`            | Fokussiert die erste Option, die mit dem gedrückten Zeichen beginnt.                                                                                                                                |
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                    | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                              | Default     |
+| --------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`                | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_alert`                    | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                         | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `true`      |
+| `_disabled`                 | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_hideError`                | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `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`     |
+| `_hint`                     | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `''`        |
+| `_icons`                    | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `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` |
+| `_msg`                      | --               | Defines the properties for a message rendered as Alert component.                                                                                            | `undefined` \| `{} & { _level?: 0` \| `2` \| `1` \| `4` \| `3` \| `5` \| `6` \| `undefined; _on?: KoliBriAlertEventCallbacks` \| `undefined; _type?: "default"` \| `"info"` \| `"success"` \| `"warning"` \| `"error"` \| `undefined; _variant?: "card"` \| `"msg"` \| `undefined; _label?: string` \| `undefined; _alert?: boolean` \| `undefined; _hasCloser?: boolean` \| `undefined; } & { _description: string; }` | `undefined` |
+| `_name`                     | `_name`          | Defines the technical name of an input field.                                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_on`                       | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput` \| `undefined`                                                                                                                                                                                                                                                                       | `undefined` |
+| `_placeholder`              | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_required`                 | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_suggestions` _(required)_ | --               | Suggestions the user can choose from.                                                                                                                        | `string[]`                                                                                                                                                                                                                                                                                                                                                                        | `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'`     |
+| `_touched`                  | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_value`                    | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+
+
+## Methods
+
+### `getValue() => Promise<string | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<string | undefined>`
+
+
+
+
+## Slots
+
+| Slot | Description                         |
+| ---- | ----------------------------------- |
+|      | Die Beschriftung des Eingabefeldes. |
+
+
+----------------------------------------------
+
+

package/doc/input-checkbox.md

@@ -20,6 +20,29 @@ Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken
 <kol-input-checkbox _variant="button" _label="Schalter aktiviert" _checked></kol-input-checkbox>
 <kol-input-checkbox _variant="button" _label="Schalter deaktiviert"></kol-input-checkbox>
 
+### Events
+
+Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
+
+```js
+kolibriElement._on = {
+	onFocus: (event) => {
+		/* Do something on focus */
+	},
+	onInput: (event, value) => {
+		/* Do something with value or event */
+	},
+	// ...
+};
+```
+
+| Event    | Auslöser                                                            | Value                                               |
+| -------- | ------------------------------------------------------------------- | --------------------------------------------------- |
+| onFocus  | Element wird fokussiert                                             | -                                                   |
+| onInput  | Checkbox wird an- oder abgehakt (entspricht nativem `input`-Event)  | Definierter `_value` wenn aktiv, andernfalls `null` |
+| onChange | Checkbox wird an- oder abgehakt (entspricht nativem `change`-Event) | Definierter `_value` wenn aktiv, andernfalls `null` |
+| onBlur   | Element verliert Fokus                                              | -                                                   |
+
 ## Verwendung
 
 Checkboxen werden als Einzelelement oder als Liste beliebig vieler Checkboxen verwendet. Sie ermöglichen den Nutzer:innen, aus einer vordefinierten Anzahl von Möglichkeiten eine oder mehrere auszuwählen.