@public-ui/components 1.6.0-rc.22 → 1.6.0-rc.24

package/dist/types/index.d.ts

@@ -1 +1,11 @@
-export{register}from"./core";export*from"./components.d";export*from"./enums/bund";export*from"./kolibri";export{configKoliBri}from"./utils/dev.utils";export{Optgroup,Option,SelectOption}from"./types/input/types";export{KoliBriDevHelper}from"./utils/prop.validators";export{ToasterService}from"./components/toast/toaster";export{translations}from"./i18n";
+import { ToasterService as ToasterServiceInternal } from './components/toast/toaster';
+export { register } from './core';
+export * from './components.d';
+export * from './enums/bund';
+export * from './kolibri';
+export { configKoliBri } from './utils/dev.utils';
+export { Optgroup, Option, SelectOption } from './types/input/types';
+export { KoliBriDevHelper } from './utils/prop.validators';
+export { Toaster } from './components/toast/toaster';
+export { translations } from './i18n';
+export declare const ToasterService: typeof ToasterServiceInternal;

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

@@ -432,7 +432,7 @@ export interface QueueApi {
 /**
  * Host
  */
-interface HostAttributes {
+export interface HostAttributes {
     class?: string | {
         [className: string]: boolean;
     };
@@ -930,6 +930,8 @@ export declare namespace JSXBase {
         minlength?: number | string;
         multiple?: boolean;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         pattern?: string;
         placeholder?: string;
         readOnly?: boolean;
@@ -1143,6 +1145,8 @@ export declare namespace JSXBase {
         minLength?: number;
         minlength?: number | string;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         placeholder?: string;
         readOnly?: boolean;
         readonly?: boolean | string;
@@ -1619,8 +1623,14 @@ export declare namespace JSXBase {
         onAnimationEndCapture?: (event: AnimationEvent) => void;
         onAnimationIteration?: (event: AnimationEvent) => void;
         onAnimationIterationCapture?: (event: AnimationEvent) => void;
+        onTransitionCancel?: (event: TransitionEvent) => void;
+        onTransitionCancelCapture?: (event: TransitionEvent) => void;
         onTransitionEnd?: (event: TransitionEvent) => void;
         onTransitionEndCapture?: (event: TransitionEvent) => void;
+        onTransitionRun?: (event: TransitionEvent) => void;
+        onTransitionRunCapture?: (event: TransitionEvent) => void;
+        onTransitionStart?: (event: TransitionEvent) => void;
+        onTransitionStartCapture?: (event: TransitionEvent) => void;
     }
 }
 export interface JSXAttributes<T = Element> {

package/dist/types/types/button-link.d.ts

@@ -3,10 +3,10 @@ import { Events } from '../enums/events';
 import { EventCallback, EventValueOrEventCallback } from './callbacks';
 import { Stringified } from './common';
 import { KoliBriAllIcon, KoliBriIconProp } from './icon';
-import { Align } from './props/align';
+import { AlignPropType } from './props/align';
 import { PropAriaControls } from './props/aria-controls';
 import { PropAriaCurrent, PropListenAriaCurrent } from './props/aria-current';
-import { PropAriaExpanded } from './props/aria-expanded';
+import { AriaExpandedPropType, PropAriaExpanded } from './props/aria-expanded';
 import { PropAriaLabel } from './props/aria-label';
 import { PropAriaSelected } from './props/aria-selected';
 import { PropDisabled } from './props/disabled';
@@ -21,29 +21,29 @@ import { StencilUnknown } from './unknown';
 export type AlternativButtonLinkRole = 'button' | 'link' | 'tab';
 type OptionalButtonAndLinkProps = {
   ariaControls: string;
-  ariaExpanded: boolean;
+  ariaExpanded: AriaExpandedPropType;
   ariaSelected: boolean;
   disabled: boolean;
   icon: Stringified<KoliBriIconProp>;
-  iconAlign: Align;
+  iconAlign: AlignPropType;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
-  tooltipAlign: Align;
+  tooltipAlign: AlignPropType;
 } & PropAriaCurrent & PropAriaLabel & PropHideLabel;
 type RequiredButtonAndLinkStates = {
   icon: KoliBriAllIcon;
 };
 type OptionalButtonAndLinkStates = {
   ariaControls: string;
-  ariaExpanded: boolean;
+  ariaExpanded: AriaExpandedPropType;
   ariaSelected: boolean;
   disabled: boolean;
-  iconAlign: Align;
+  iconAlign: AlignPropType;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
-  tooltipAlign: Align;
+  tooltipAlign: AlignPropType;
 } & PropAriaCurrent & PropHideLabel;
 export type KoliBriButtonType = 'button' | 'reset' | 'submit';
 export type KoliBriButtonVariant = 'primary' | 'secondary' | 'normal' | 'tertiary' | 'danger' | 'ghost' | 'custom';
@@ -65,6 +65,7 @@ export type OptionalButtonLinkProps = OptionalButtonAndLinkProps & {
   type: KoliBriButtonType;
   value: Stringified<StencilUnknown>;
 } & PropDisabled & PropId & PropLabelWithExpertSlot & PropName;
+export type ButtonLinkProps = Generic.Element.Members<RequiredButtonProps, OptionalButtonProps>;
 type RequiredButtonLinkStates = RequiredButtonAndLinkStates & PropLabelWithExpertSlot & KoliBriButtonVariantPropState & {
   type: KoliBriButtonType;
 };
@@ -74,6 +75,7 @@ type OptionalButtonLinkStates = OptionalButtonAndLinkStates & KoliBriButtonCusto
   syncValueBySelector: string;
   value: StencilUnknown;
 } & PropDisabled & PropId & PropName;
+export type ButtonLinkStates = Generic.Element.Members<RequiredButtonStates, OptionalButtonStates>;
 export type RequiredButtonProps = RequiredButtonLinkProps & PropLabelWithExpertSlot;
 export type OptionalButtonProps = OptionalButtonLinkProps & PropAriaControls & PropAriaExpanded & PropAriaSelected & PropDisabled & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;
 export type ButtonProps = Generic.Element.Members<RequiredButtonProps, OptionalButtonProps>;
@@ -104,5 +106,5 @@ type OptionalLinkStates = OptionalButtonAndLinkStates & {
 } & PropDownload & PropListenAriaCurrent & PropStealth;
 export type LinkStates = Generic.Element.Members<RequiredLinkStates, OptionalLinkStates>;
 export type KoliBriLinkAPI = Generic.Element.ComponentApi<RequiredLinkProps, OptionalLinkProps, RequiredLinkStates, OptionalLinkStates>;
-export declare const watchTooltipAlignment: (component: Generic.Element.Component, propName: string, value?: Align) => void;
+export declare const watchTooltipAlignment: (component: Generic.Element.Component, propName: string, value?: AlignPropType) => void;
 export {};

package/dist/types/types/props/adjust-height.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type AdjustHeightPropType = boolean;
 export type PropAdjustHeight = {
-  adjustHeight: boolean;
+  adjustHeight: AdjustHeightPropType;
 };
-export declare const validateAdjustHeight: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateAdjustHeight: (component: Generic.Element.Component, value?: AdjustHeightPropType) => void;

package/dist/types/types/props/alert.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type AlertPropType = boolean;
 export type PropAlert = {
-  alert: boolean;
+  alert: AlertPropType;
 };
-export declare const validateAlert: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateAlert: (component: Generic.Element.Component, value?: AlertPropType) => void;

package/dist/types/types/props/align.d.ts

@@ -1,9 +1,9 @@
 import { Generic } from '@a11y-ui/core';
 type HorizontalAlign = 'left' | 'right';
 type VerticalAlign = 'top' | 'bottom';
-export type Align = HorizontalAlign | VerticalAlign;
+export type AlignPropType = HorizontalAlign | VerticalAlign;
 export type PropAlign = {
-  align: Align;
+  align: AlignPropType;
 };
-export declare const validateAlign: (component: Generic.Element.Component, value?: Align) => void;
+export declare const validateAlign: (component: Generic.Element.Component, value?: AlignPropType) => void;
 export {};

package/dist/types/types/props/aria-controls.d.ts

@@ -1,5 +1,7 @@
 import { Generic } from '@a11y-ui/core';
+type AriaControlsPropType = string;
 export type PropAriaControls = {
-  ariaControls: string;
+  ariaControls: AriaControlsPropType;
 };
-export declare const validateAriaControls: (component: Generic.Element.Component, value?: string) => void;
+export declare const validateAriaControls: (component: Generic.Element.Component, value?: AriaControlsPropType) => void;
+export {};

package/dist/types/types/props/aria-current.d.ts

@@ -1,10 +1,10 @@
 import { Generic } from '@a11y-ui/core';
-export type AriaCurrent = 'date' | 'location' | 'page' | 'step' | 'time' | boolean;
+export type AriaCurrentPropType = 'date' | 'location' | 'page' | 'step' | 'time' | boolean;
 export type PropAriaCurrent = {
-  ariaCurrent: AriaCurrent;
+  ariaCurrent: AriaCurrentPropType;
 };
 export type PropListenAriaCurrent = {
-  listenAriaCurrent: AriaCurrent;
+  listenAriaCurrent: AriaCurrentPropType;
 };
-export declare const validateAriaCurrent: (component: Generic.Element.Component, value?: AriaCurrent) => void;
-export declare const validateListenAriaCurrent: (component: Generic.Element.Component, value?: AriaCurrent) => void;
+export declare const validateAriaCurrent: (component: Generic.Element.Component, value?: AriaCurrentPropType) => void;
+export declare const validateListenAriaCurrent: (component: Generic.Element.Component, value?: AriaCurrentPropType) => void;

package/dist/types/types/props/aria-expanded.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type AriaExpandedPropType = boolean;
 export type PropAriaExpanded = {
-  ariaExpanded: boolean;
+  ariaExpanded: AriaExpandedPropType;
 };
-export declare const validateAriaExpanded: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateAriaExpanded: (component: Generic.Element.Component, value?: AriaExpandedPropType) => void;

package/dist/types/types/props/checked.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type CheckedPropType = boolean;
 export type PropChecked = {
-  checked: boolean;
+  checked: CheckedPropType;
 };
-export declare const validateChecked: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateChecked: (component: Generic.Element.Component, value?: CheckedPropType) => void;

package/dist/types/types/props/collapsible.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type CollapsiblePropType = boolean;
 export type PropCollapsible = {
-  collapsible: boolean;
+  collapsible: CollapsiblePropType;
 };
-export declare const validateCollapsible: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateCollapsible: (component: Generic.Element.Component, value?: CollapsiblePropType) => void;

package/dist/types/types/props/disabled.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type DisabledPropType = boolean;
 export type PropDisabled = {
-  disabled: boolean;
+  disabled: DisabledPropType;
 };
-export declare const validateDisabled: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateDisabled: (component: Generic.Element.Component, value?: DisabledPropType) => void;

package/dist/types/types/props/download.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type DownloadPropType = boolean | string;
 export type PropDownload = {
-  download?: boolean | string;
+  download?: DownloadPropType;
 };
-export declare const validateDownload: (component: Generic.Element.Component, value?: boolean | string) => void;
+export declare const validateDownload: (component: Generic.Element.Component, value?: DownloadPropType) => void;

package/dist/types/types/props/has-closer.d.ts

@@ -3,4 +3,4 @@ export type HasCloserPropType = boolean;
 export type PropHasCloser = {
   hasCloser: HasCloserPropType;
 };
-export declare const validateHasCloser: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateHasCloser: (component: Generic.Element.Component, value?: HasCloserPropType) => void;

package/dist/types/types/props/has-compact-button.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type HasCompactButtonPropType = boolean;
 export type PropHasCompactButton = {
-  hasCompactButton: boolean;
+  hasCompactButton: HasCompactButtonPropType;
 };
-export declare const validateHasCompactButton: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateHasCompactButton: (component: Generic.Element.Component, value?: HasCompactButtonPropType) => void;

package/dist/types/types/props/has-counter.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type HasCounterPropType = boolean;
 export type PropHasCounter = {
-  hasCounter: boolean;
+  hasCounter: HasCounterPropType;
 };
-export declare const validateHasCounter: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateHasCounter: (component: Generic.Element.Component, value?: HasCounterPropType) => void;

package/dist/types/types/props/has-footer.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type HasFooterPropType = boolean;
 export type PropHasFooter = {
-  hasFooter: boolean;
+  hasFooter: HasFooterPropType;
 };
-export declare const validateHasFooter: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateHasFooter: (component: Generic.Element.Component, value?: HasFooterPropType) => void;

package/dist/types/types/props/hide-label.d.ts

@@ -3,4 +3,4 @@ export type HideLabelPropType = boolean;
 export type PropHideLabel = {
   hideLabel: HideLabelPropType;
 };
-export declare const validateHideLabel: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateHideLabel: (component: Generic.Element.Component, value?: HideLabelPropType) => void;

package/dist/types/types/props/href.d.ts

@@ -1,7 +1,8 @@
 import { Generic } from '@a11y-ui/core';
 import { WatchStringOptions } from '../../utils/prop.validators';
+export type HrefPropType = string;
 export type PropHref = {
-  href: string;
+  href: HrefPropType;
 };
 export type HrefProp = Generic.Element.Members<PropHref, unknown>;
-export declare const validateHref: (component: Generic.Element.Component, value?: string, options?: WatchStringOptions) => void;
+export declare const validateHref: (component: Generic.Element.Component, value?: HrefPropType, options?: WatchStringOptions) => void;

package/dist/types/types/props/icon.d.ts

@@ -1,11 +1,13 @@
 import { Generic } from '@a11y-ui/core';
 import { Stringified } from '../common';
 import { KoliBriIconProp, KoliBriIconState } from '../icon';
-import { Align } from './align';
+import { AlignPropType } from './align';
+type IconPropType = Stringified<KoliBriIconProp>;
 export type PropIcon = {
-  icon: Stringified<KoliBriIconProp>;
+  icon: IconPropType;
 };
-export declare const mapIconProp2State: (icon: KoliBriIconProp, iconAlign?: Align) => KoliBriIconState;
+export declare const mapIconProp2State: (icon: KoliBriIconProp, iconAlign?: AlignPropType) => KoliBriIconState;
 export declare const isIcon: (value?: unknown) => boolean;
-export declare const validateIcon: (component: Generic.Element.Component, value?: KoliBriIconProp) => void;
-export declare const watchIconAlign: (component: Generic.Element.Component, value?: Align) => void;
+export declare const validateIcon: (component: Generic.Element.Component, value?: IconPropType) => void;
+export declare const watchIconAlign: (component: Generic.Element.Component, value?: AlignPropType) => void;
+export {};

package/dist/types/types/props/image-source.d.ts

@@ -1,4 +1,7 @@
 import { Generic } from '@a11y-ui/core';
 import { WatchStringOptions } from '../../utils/prop.validators';
 export type ImageSourcePropType = string;
+export type PropImageSource = {
+  src: ImageSourcePropType;
+};
 export declare const validateImageSource: (component: Generic.Element.Component, value?: ImageSourcePropType, options?: WatchStringOptions) => void;

package/dist/types/types/props/indeterminate.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type IndeterminatePropType = boolean;
 export type PropIndeterminate = {
-  indeterminate: boolean;
+  indeterminate: IndeterminatePropType;
 };
-export declare const validateIndeterminate: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateIndeterminate: (component: Generic.Element.Component, value?: IndeterminatePropType) => void;

package/dist/types/types/props/multiple.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type MultiplePropType = boolean;
 export type PropMultiple = {
-  multiple: boolean;
+  multiple: MultiplePropType;
 };
-export declare const validateMultiple: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateMultiple: (component: Generic.Element.Component, value?: MultiplePropType) => void;

package/dist/types/types/props/name.d.ts

@@ -1,8 +1,7 @@
 import { Generic } from '@a11y-ui/core';
 import { WatchStringOptions } from '../../utils/prop.validators';
-type NamePropType = string;
+export type NamePropType = string;
 export type PropName = {
   name: NamePropType;
 };
 export declare const validateName: (component: Generic.Element.Component, value?: NamePropType, options?: WatchStringOptions) => void;
-export {};

package/dist/types/types/props/open.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type OpenPropType = boolean;
 export type PropOpen = {
-  open: boolean;
+  open: OpenPropType;
 };
-export declare const validateOpen: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateOpen: (component: Generic.Element.Component, value?: OpenPropType) => void;

package/dist/types/types/props/read-only.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type ReadOnlyPropType = boolean;
 export type PropReadOnly = {
-  readOnly: boolean;
+  readOnly: ReadOnlyPropType;
 };
-export declare const validateReadOnly: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateReadOnly: (component: Generic.Element.Component, value?: ReadOnlyPropType) => void;

package/dist/types/types/props/required.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type RequiredPropType = boolean;
 export type PropRequired = {
-  required: boolean;
+  required: RequiredPropType;
 };
-export declare const validateRequired: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateRequired: (component: Generic.Element.Component, value?: RequiredPropType) => void;

package/dist/types/types/props/show.d.ts

@@ -1,6 +1,7 @@
 import { Generic } from '@a11y-ui/core';
 import { WatchBooleanOptions } from '../../utils/prop.validators';
+export type ShowPropType = boolean;
 export type PropShow = {
-  show: boolean;
+  show: ShowPropType;
 };
-export declare const validateShow: (component: Generic.Element.Component, value?: boolean, hooks?: WatchBooleanOptions) => void;
+export declare const validateShow: (component: Generic.Element.Component, value?: ShowPropType, hooks?: WatchBooleanOptions) => void;

package/dist/types/types/props/touched.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type TouchedPropType = boolean;
 export type PropTouched = {
-  touched: boolean;
+  touched: TouchedPropType;
 };
-export declare const validateTouched: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateTouched: (component: Generic.Element.Component, value?: TouchedPropType) => void;

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

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
-export type SpinVariant = 'cycle' | 'dot' | 'none';
+export type SpinVariantPropType = 'cycle' | 'dot' | 'none';
 export type PropSpinVariant = {
-  variant: SpinVariant;
+  variant: SpinVariantPropType;
 };
-export declare const validateSpinVariant: (component: Generic.Element.Component, value?: SpinVariant) => void;
+export declare const validateSpinVariant: (component: Generic.Element.Component, value?: SpinVariantPropType) => void;

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

@@ -1,2 +1,4 @@
-export declare function preventEvent(event: Event): void;
-export declare function tryToDispatchKoliBriEvent<T>(type: string, target?: EventTarget, detail?: T): void;
+type KoliBriEventType = 'blur' | 'change' | 'click' | 'focus';
+export declare function stopPropagation(event: Event): void;
+export declare function tryToDispatchKoliBriEvent<T>(type: KoliBriEventType, target?: EventTarget, detail?: T): void;
+export {};

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

@@ -1,7 +1,7 @@
 import { Subject } from 'rxjs';
 import { Generic } from '@a11y-ui/core';
 import { Stringified } from '../types/common';
-import { AriaCurrent } from '../types/props/aria-current';
+import { AriaCurrentPropType } from '../types/props/aria-current';
 import { PropHref } from '../types/props/href';
 import { StencilUnknown } from '../types/unknown';
 export declare const objectObjectHandler: (value: unknown, cb: () => void) => void;
@@ -58,7 +58,7 @@ export declare class KoliBriUtils {
   static queryHtmlElementColors(targetNode: HTMLElement, a11yColorContrast: A11yColorContrast, recursion?: boolean, log?: boolean): A11yColorContrast | null;
 }
 type AriaCurrentEventType = {
-  ariaCurrent: AriaCurrent;
+  ariaCurrent: AriaCurrentPropType;
 } & PropHref;
 export declare const ariaCurrentSubject: Subject<AriaCurrentEventType>;
 export declare class KoliBriDevHelper {

package/dist/types/utils/validators/alignment.d.ts

@@ -1,3 +1,3 @@
 import { Generic } from '@a11y-ui/core';
-import { Align } from '../../types/props/align';
-export declare const validateAlignment: (component: Generic.Element.Component, propName: string, value?: Align) => void;
+import { AlignPropType } from '../../types/props/align';
+export declare const validateAlignment: (component: Generic.Element.Component, propName: string, value?: AlignPropType) => void;

package/doc/abbr.md

@@ -49,7 +49,7 @@ Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert sein
 | --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------- |
 | `_label`        | `_label`         | Defines the abbreviation title and tooltip content                                                                                            | `string` \| `undefined`                                 | `undefined` |
 | `_title`        | `_title`         | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an. | `string` \| `undefined`                                 | `undefined` |
-| `_tooltipAlign` | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                              | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
+| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                     | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
 
 
 ## Slots

package/doc/accordion.md

@@ -128,7 +128,7 @@ Standardansicht gelegt.
 | `_label`   | `_label`   | Defines the button label                                                                                                                              | `string` \| `undefined`                                                                | `undefined` |
 | `_level`   | `_level`   | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll. | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                                       | `1`         |
 | `_on`      | --         | Gibt die EventCallback-Funktionen an.                                                                                                                 | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, boolean>` \| `undefined; }` | `undefined` |
-| `_open`    | `_open`    | Gibt an, ob die Komponente entweder geöffnet oder geschlossen ist.                                                                                    | `boolean` \| `undefined`                                                               | `false`     |
+| `_open`    | `_open`    | If set (to true) opens/expands the element, closes if not set (or set to false).                                                                      | `boolean` \| `undefined`                                                               | `false`     |
 
 
 ## Slots

package/doc/alert.md

@@ -83,7 +83,7 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 | Property     | Attribute     | Description                                                                                                                                           | Type                                                                    | Default     |
 | ------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- |
 | `_alert`     | `_alert`      | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                         | `boolean` \| `undefined`                                                  | `false`     |
-| `_hasCloser` | `_has-closer` | Gibt an, ob die Komponente einen Schließen-Schalter hat.                                                                                              | `boolean` \| `undefined`                                                  | `false`     |
+| `_hasCloser` | `_has-closer` | Defines whether the element can be closed.                                                                                                            | `boolean` \| `undefined`                                                  | `false`     |
 | `_label`     | `_label`      | Defines the description of the component.                                                                                                             | `string` \| `undefined`                                                   | `undefined` |
 | `_level`     | `_level`      | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll. | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `1`         |
 | `_on`        | --            | Gibt die EventCallback-Function für das Schließen des Alerts an.                                                                                      | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |

package/doc/badge.md

@@ -87,14 +87,14 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 
 ## Properties
 
-| Property              | Attribute       | Description                                                                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default     |
-| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `_color`              | `_color`        | Setzt die Hintergrundfarbe.                                                                                                                                        | `string` \| `undefined` \| `{ backgroundColor: string; color: string; }` \| `{ backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `'#000'`    |
-| `_hideLabel`          | `_hide-label`   | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                          | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `false`     |
-| `_icon`               | `_icon`         | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                        | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |
-| `_iconOnly`           | `_icon-only`    | <span class="text-red-500">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an. | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
-| `_label` _(required)_ | `_label`        | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
-| `_smartButton`        | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur _hide-label).                                                         | `string` \| `undefined` \| `{ _label: LabelWithExpertSlotPropType; } & { _ariaControls?: string` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Align` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Align` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaLabel?: string` \| `undefined; _hideLabel?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _on?: KoliBriButtonCallbacks<StencilUnknown>` \| `undefined; _syncValueBySelector?: string` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: Stringified<StencilUnknown>; _id?: string` \| `undefined; _label?: LabelWithExpertSlotPropType` \| `undefined; _name?: string` \| `undefined; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
+| Property              | Attribute       | Description                                                                                                                                                                                                                                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default     |
+| --------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
+| `_color`              | `_color`        | Setzt die Hintergrundfarbe.                                                                                                                                                                                                                                                                                                        | `string` \| `undefined` \| `{ backgroundColor: string; color: string; }` \| `{ backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `'#000'`    |
+| `_hideLabel`          | `_hide-label`   | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>⚠️ We does not support the `_hide-label` property for the `kol-badge` element,   since it would not be accessible without visible labeling. A separate tooltip   is not planed, because a badge is not an interactive element. | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `false`     |
+| `_icon`               | `_icon`         | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                                                                                                                                                        | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_iconOnly`           | `_icon-only`    | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                                                                                 | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_label` _(required)_ | `_label`        | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_smartButton`        | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur _hide-label).                                                                                                                                                                                                                         | `string` \| `undefined` \| `{ _label: LabelWithExpertSlotPropType; } & { _ariaControls?: string` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: AlignPropType` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; _ariaCurrent?: AriaCurrentPropType` \| `undefined; _ariaLabel?: string` \| `undefined; _hideLabel?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _on?: KoliBriButtonCallbacks<StencilUnknown>` \| `undefined; _syncValueBySelector?: string` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: Stringified<StencilUnknown>; _id?: string` \| `undefined; _label?: LabelWithExpertSlotPropType` \| `undefined; _name?: string` \| `undefined; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
 
 
 ## Dependencies
@@ -105,17 +105,17 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 
 ### Depends on
 
-- kol-span-wc
 - kol-button-wc
+- kol-span-wc
 
 ### Graph
 ```mermaid
 graph TD;
-  kol-badge --> kol-span-wc
   kol-badge --> kol-button-wc
-  kol-span-wc --> kol-icon
+  kol-badge --> kol-span-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
   kol-version --> kol-badge
   style kol-badge fill:#f9f,stroke:#333,stroke-width:4px

package/doc/button-link.md

@@ -41,13 +41,13 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 | `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                                                                                                                                        | `boolean` \| `undefined`                                                                                                                                 | `false`     |
 | `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                                                                                                                                      | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                                                                   | `undefined` |
 | `_iconOnly`           | `_icon-only`     | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                                                               | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
-| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                                                                                                                                                                                  | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                                                                                                                                                                        | `string` \| `undefined`                                                                                                                                  | `undefined` |
 | `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                                                                                                                                      | `boolean` \| `string`                                                                                                                                    | `undefined` |
 | `_name`               | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                                                                                                                                                                                 | `string` \| `undefined`                                                                                                                                  | `undefined` |
 | `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                                                                                                      | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
 | `_role`               | `_role`          | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                                                                                                                                       | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                             | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                             | `number` \| `undefined`                                                                                                                                  | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                                                                                                                                 | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                  | `'top'`     |
+| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                                        | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                  | `'top'`     |
 | `_type`               | `_type`          | Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.                                                                                                                                                                                                                                | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                         | `'button'`  |
 | `_value`              | `_value`         | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                                                                                                                                 | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                           | `undefined` |