@public-ui/components 1.6.0-rc.20 → 1.6.0-rc.21

package/dist/kolibri/tab-index-fcb7ecac.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{a}from"./a11y.tipps-5aaa4b49.js";import{e as t}from"./prop.validators-05d07b50.js";const o={hooks:{afterPatch:t=>{-1!==t&&0!==t&&a("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},r=(a,r)=>{t(a,"_tabIndex",r,o)};export{r as v};

package/dist/kolibri/{tab-index-68b5c2de.js.map → tab-index-fcb7ecac.js.map}

@@ -1 +1 @@
-{"version":3,"names":["options","hooks","afterPatch","value","a11yHint","validateTabIndex","component","watchNumber"],"sources":["src/utils/validators/tab-index.ts"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { a11yHint } from '../a11y.tipps';\nimport { watchNumber, WatchNumberOptions } from '../prop.validators';\n\n/**\n * Accessibility hints\n * - https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html\n */\n\nconst options: WatchNumberOptions = {\n\thooks: {\n\t\tafterPatch: (value) => {\n\t\t\tif (value !== -1 && value !== 0) {\n\t\t\t\ta11yHint(`Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html`);\n\t\t\t}\n\t\t},\n\t},\n};\n\n/**\n * Diese Methode validiert das Property und setzt den State, wenn es valide ist.\n */\nexport const validateTabIndex = (component: Generic.Element.Component, value?: number): void => {\n\twatchNumber(component, '_tabIndex', value, options);\n};\n"],"mappings":";;;+FAUA,MAAMA,EAA8B,CACnCC,MAAO,CACNC,WAAaC,IACZ,GAAIA,KAAW,GAAKA,IAAU,EAAG,CAChCC,EAAS,6G,WASAC,EAAmB,CAACC,EAAsCH,KACtEI,EAAYD,EAAW,YAAaH,EAAOH,EAAQ,S"}
+{"version":3,"names":["options","hooks","afterPatch","value","a11yHint","validateTabIndex","component","watchNumber"],"sources":["src/utils/validators/tab-index.ts"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { a11yHint } from '../a11y.tipps';\nimport { watchNumber, WatchNumberOptions } from '../prop.validators';\n\n/**\n * Accessibility hints\n * - https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html\n */\n\nconst options: WatchNumberOptions = {\n\thooks: {\n\t\tafterPatch: (value) => {\n\t\t\tif (value !== -1 && value !== 0) {\n\t\t\t\ta11yHint(`Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html`);\n\t\t\t}\n\t\t},\n\t},\n};\n\n/**\n * Diese Methode validiert das Property und setzt den State, wenn es valide ist.\n */\nexport const validateTabIndex = (component: Generic.Element.Component, value?: number): void => {\n\twatchNumber(component, '_tabIndex', value, options);\n};\n"],"mappings":";;;0FAUA,MAAMA,EAA8B,CACnCC,MAAO,CACNC,WAAaC,IACZ,GAAIA,KAAW,GAAKA,IAAU,EAAG,CAChCC,EAAS,6G,WASAC,EAAmB,CAACC,EAAsCH,KACtEI,EAAYD,EAAW,YAAaH,EAAOH,EAAQ,S"}

package/dist/kolibri/{validation-4d262227.js → validation-77718ded.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{w as e}from"./prop.validators-2d07ec24.js";const r=(r,o)=>{e(r,"_level",(e=>"number"==typeof e&&0<=e&&e<=6),new Set(["Number {0, 1, 2, 3, 4, 5, 6}"]),o,{defaultValue:1,required:!0})};export{r as w};
+import{w as e}from"./prop.validators-05d07b50.js";const r=(r,o)=>{e(r,"_level",(e=>"number"==typeof e&&0<=e&&e<=6),new Set(["Number {0, 1, 2, 3, 4, 5, 6}"]),o,{defaultValue:1,required:!0})};export{r as w};

package/dist/kolibri/validation-82792e37.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{c as o}from"./a11y.tipps-5aaa4b49.js";import{c as t}from"./prop.validators-05d07b50.js";const s=(s,a,p)=>{t(a,"_links",(t=>"object"==typeof t&&("string"==typeof t._href||"string"==typeof t._label)),p),o(s,a.state._links.length)};export{s as w};

package/dist/types/components/@deprecated/input/types.d.ts

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
-import { Stringified } from '../../../components';
 import { ButtonProps } from '../../../types/button-link';
+import { Stringified } from '../../../types/common';
 import { InputTypeOnDefault } from '../../../types/input/types';
 import { PropLabelWithExpertSlot } from '../../../types/props/label';
 type RequiredProps = PropLabelWithExpertSlot;

package/dist/types/components/button/component.d.ts

@@ -6,6 +6,7 @@ import { KoliBriIconProp } from '../../types/icon';
 import { Align } from '../../types/props/align';
 import { AriaCurrent } from '../../types/props/aria-current';
 import { LabelWithExpertSlotPropType } from '../../types/props/label';
+import { StencilUnknown } from '../../types/unknown';
 export declare class KolButtonWc implements Generic.Element.ComponentApi<RequiredButtonProps, OptionalButtonProps, RequiredButtonStates, OptionalButtonStates> {
   private readonly host?;
   private readonly nonce;
@@ -27,12 +28,12 @@ export declare class KolButtonWc implements Generic.Element.ComponentApi<Require
   _iconOnly?: boolean;
   _id?: string;
   _label: LabelWithExpertSlotPropType;
-  _on?: KoliBriButtonCallbacks<unknown>;
+  _on?: KoliBriButtonCallbacks<StencilUnknown>;
   _role?: AlternativButtonLinkRole;
   _tabIndex?: number;
   _tooltipAlign?: Align;
   _type?: KoliBriButtonType;
-  _value?: Stringified<unknown>;
+  _value?: Stringified<StencilUnknown>;
   _variant?: KoliBriButtonVariant;
   state: ButtonStates;
   validateAccessKey(value?: string): void;
@@ -49,12 +50,12 @@ export declare class KolButtonWc implements Generic.Element.ComponentApi<Require
   validateIconOnly(value?: boolean): void;
   validateId(value?: string): void;
   validateLabel(value?: LabelWithExpertSlotPropType): void;
-  validateOn(value?: KoliBriButtonCallbacks<unknown>): void;
+  validateOn(value?: KoliBriButtonCallbacks<StencilUnknown>): void;
   validateRole(value?: AlternativButtonLinkRole): void;
   validateTabIndex(value?: number): void;
   validateTooltipAlign(value?: Align): void;
   validateType(value?: KoliBriButtonType): void;
-  validateValue(value?: Stringified<unknown>): void;
+  validateValue(value?: Stringified<StencilUnknown>): void;
   validateVariant(value?: KoliBriButtonVariant): void;
   componentWillLoad(): void;
 }

package/dist/types/components/button/shadow.d.ts

@@ -6,6 +6,7 @@ import { KoliBriIconProp } from '../../types/icon';
 import { Align } from '../../types/props/align';
 import { AriaCurrent } from '../../types/props/aria-current';
 import { LabelWithExpertSlotPropType } from '../../types/props/label';
+import { StencilUnknown } from '../../types/unknown';
 export declare class KolButton implements Generic.Element.Members<RequiredButtonProps, OptionalButtonProps> {
   private readonly host?;
   private ref?;
@@ -25,11 +26,11 @@ export declare class KolButton implements Generic.Element.Members<RequiredButton
   _iconOnly?: boolean;
   _id?: string;
   _label: LabelWithExpertSlotPropType;
-  _on?: KoliBriButtonCallbacks<unknown>;
+  _on?: KoliBriButtonCallbacks<StencilUnknown>;
   _role?: AlternativButtonLinkRole;
   _tabIndex?: number;
   _tooltipAlign?: Align;
   _type?: KoliBriButtonType;
-  _value?: Stringified<unknown>;
+  _value?: Stringified<StencilUnknown>;
   _variant?: KoliBriButtonVariant;
 }

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

@@ -6,6 +6,7 @@ import { KoliBriIconProp } from '../../types/icon';
 import { Align } from '../../types/props/align';
 import { AriaCurrent } from '../../types/props/aria-current';
 import { LabelWithExpertSlotPropType } from '../../types/props/label';
+import { StencilUnknown } from '../../types/unknown';
 export declare class KolButtonLink implements Generic.Element.Members<RequiredButtonLinkProps, OptionalButtonLinkProps> {
   private readonly host?;
   private ref?;
@@ -23,10 +24,10 @@ export declare class KolButtonLink implements Generic.Element.Members<RequiredBu
   _iconOnly?: boolean;
   _id?: string;
   _label: LabelWithExpertSlotPropType;
-  _on?: KoliBriButtonCallbacks<unknown>;
+  _on?: KoliBriButtonCallbacks<StencilUnknown>;
   _role?: AlternativButtonLinkRole;
   _tabIndex?: number;
   _tooltipAlign?: Align;
   _type?: KoliBriButtonType;
-  _value?: Stringified<unknown>;
+  _value?: Stringified<StencilUnknown>;
 }

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

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
-import { Stringified } from '../../components';
 import { ButtonProps } from '../../types/button-link';
+import { Stringified } from '../../types/common';
 import { KoliBriHorizontalIcon } from '../../types/icon';
 import { PropAlert } from '../../types/props/alert';
 import { PropDisabled } from '../../types/props/disabled';

package/dist/types/components/input-adapter-leanup/controller.d.ts

@@ -1,5 +1,5 @@
 import { Generic } from '@a11y-ui/core';
-import { StencilUnknown } from '../../components';
+import { StencilUnknown } from '../../types/unknown';
 import { Props, Watches } from './types';
 export declare class ControlledInputController implements Watches {
   protected readonly component: Generic.Element.Component & Props;

package/dist/types/components/input-radio/component.d.ts

@@ -5,6 +5,7 @@ import { Orientation } from '../../types/orientation';
 import { Align } from '../../types/props/align';
 import { LabelWithExpertSlotPropType } from '../../types/props/label';
 import { OptionsPropType } from '../../types/props/options';
+import { StencilUnknown } from '../../types/unknown';
 import { W3CInputValue } from '../../types/w3c';
 import { ComponentApi, States } from './types';
 export declare class KolInputRadio implements ComponentApi {
@@ -51,7 +52,7 @@ export declare class KolInputRadio implements ComponentApi {
   validateSyncValueBySelector(value?: string): void;
   validateTabIndex(value?: number): void;
   validateTouched(value?: boolean): void;
-  validateValue(value?: Stringified<unknown>): void;
+  validateValue(value?: Stringified<StencilUnknown>): void;
   componentWillLoad(): void;
   private onChange;
 }

package/dist/types/components/input-radio/controller.d.ts

@@ -4,6 +4,7 @@ import { Option, SelectOption } from '../../types/input/types';
 import { Orientation } from '../../types/orientation';
 import { PropLabelWithExpertSlot } from '../../types/props/label';
 import { OptionsPropType } from '../../types/props/options';
+import { StencilUnknown } from '../../types/unknown';
 import { W3CInputValue } from '../../types/w3c';
 import { InputController } from '../@deprecated/input/controller';
 import { Props, Watches } from './types';
@@ -30,7 +31,7 @@ export declare class InputRadioController extends InputCheckboxRadioController i
   protected readonly beforePatchOptions: (_value: unknown, nextState: Map<string, unknown>) => void;
   validateOrientation(value?: Orientation): void;
   validateOptions(value?: OptionsPropType): void;
-  validateValue(value?: Stringified<unknown>): void;
+  validateValue(value?: Stringified<StencilUnknown>): void;
   componentWillLoad(onChange?: (event: Event) => void): void;
 }
 export {};

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

@@ -4,6 +4,7 @@ import { Stringified } from '../../types/common';
 import { Align } from '../../types/props/align';
 import { AriaCurrent } from '../../types/props/aria-current';
 import { LabelPropType } from '../../types/props/label';
+import { StencilUnknown } from '../../types/unknown';
 import { KoliBriSplitButtonAPI, KoliBriSplitButtonAStates, KoliBriSplitButtonCallback } from './types';
 export declare class KolSplitButton implements KoliBriSplitButtonAPI {
   private dropdown;
@@ -36,7 +37,7 @@ export declare class KolSplitButton implements KoliBriSplitButtonAPI {
   _tabIndex?: number;
   _tooltipAlign?: Align;
   _type?: KoliBriButtonType;
-  _value?: Stringified<unknown>;
+  _value?: Stringified<StencilUnknown>;
   _variant?: KoliBriButtonVariant;
   state: KoliBriSplitButtonAStates;
   validateAccessKey(value?: string): void;
@@ -59,7 +60,7 @@ export declare class KolSplitButton implements KoliBriSplitButtonAPI {
   validateTabIndex(value?: number): void;
   validateTooltipAlign(value?: Align): void;
   validateType(value?: KoliBriButtonType): void;
-  validateValue(value?: Stringified<unknown>): void;
+  validateValue(value?: Stringified<StencilUnknown>): void;
   validateVariant(value?: KoliBriButtonVariant): void;
   componentWillLoad(): void;
 }

package/dist/types/components/tooltip/component.d.ts

@@ -1,5 +1,6 @@
 import { JSX } from '../../stencil-public-runtime';
 import { Align } from '../../types/props/align';
+import { IdPropType } from '../../types/props/id';
 import { LabelPropType } from '../../types/props/label';
 import { KoliBriTooltipAPI, KoliBriTooltipStates } from './types';
 export declare class KolTooltip implements KoliBriTooltipAPI {
@@ -19,11 +20,11 @@ export declare class KolTooltip implements KoliBriTooltipAPI {
   private catchArrowElement;
   render(): JSX.Element;
   _align?: Align;
-  _id: string;
+  _id?: IdPropType;
   _label: LabelPropType;
   state: KoliBriTooltipStates;
   validateAlign(value?: Align): void;
-  validateId(value?: string): void;
+  validateId(value?: IdPropType): void;
   validateLabel(value?: LabelPropType): void;
   private overFocusCount;
   private overFocusTimeout?;

package/dist/types/components/tooltip/types.d.ts

@@ -1,12 +1,11 @@
 import { Generic } from '@a11y-ui/core';
 import { Align } from '../../types/props/align';
+import { PropId } from '../../types/props/id';
 import { PropLabel } from '../../types/props/label';
-type RequiredProps = PropLabel & {
-  id: string;
-};
+type RequiredProps = PropLabel;
 type OptionalProps = {
   align: Align;
-};
+} & PropId;
 export type KoliBriTooltipProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 type RequiredStates = RequiredProps & OptionalProps;
 type OptionalStates = unknown;

package/dist/types/components.d.ts

@@ -17,6 +17,7 @@ import { KoliBriHorizontalIcon, KoliBriIconProp } from "./types/icon";
 import { AlternativButtonLinkRole, ButtonProps, KoliBriButtonCallbacks, KoliBriButtonType, KoliBriButtonVariant, LinkOnCallbacks, LinkProps, LinkTarget, LinkUseCase } from "./types/button-link";
 import { BreadcrumbLinkProps } from "./components/breadcrumb/types";
 import { AriaCurrent } from "./types/props/aria-current";
+import { StencilUnknown } from "./types/unknown";
 import { ButtonOrLinkOrTextWithChildrenProps } from "./types/button-link-text";
 import { KoliBriFormCallbacks } from "./components/form/types";
 import { FontAwesome, FontAwesomeOssPrefix } from "./enums/font-awesome";
@@ -25,7 +26,6 @@ import { Loading } from "./utils/validators/loading";
 import { SuggestionsPropType } from "./types/props/suggestions";
 import { InputCheckboxIcon, InputCheckboxVariant } from "./components/input-checkbox/types";
 import { InputTypeOnDefault, InputTypeOnOff, Option, SelectOption } from "./types/input/types";
-import { StencilUnknown } from "./types/unknown";
 import { Iso8601 } from "./types/input/iso8601";
 import { InputDateType, InputNumberType } from "./types/input/control/number";
 import { W3CInputValue } from "./types/w3c";
@@ -47,6 +47,7 @@ import { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types";
 import { CSSResize } from "./components/textarea/types";
 import { RowsPropType } from "./types/props/rows";
 import { KoliBriToastEventCallbacks } from "./types/toast";
+import { IdPropType } from "./types/props/id";
 export { LabelPropType, LabelWithExpertSlotPropType } from "./types/props/label";
 export { Align } from "./types/props/align";
 export { HeadingLevel } from "./types/heading-level";
@@ -59,6 +60,7 @@ export { KoliBriHorizontalIcon, KoliBriIconProp } from "./types/icon";
 export { AlternativButtonLinkRole, ButtonProps, KoliBriButtonCallbacks, KoliBriButtonType, KoliBriButtonVariant, LinkOnCallbacks, LinkProps, LinkTarget, LinkUseCase } from "./types/button-link";
 export { BreadcrumbLinkProps } from "./components/breadcrumb/types";
 export { AriaCurrent } from "./types/props/aria-current";
+export { StencilUnknown } from "./types/unknown";
 export { ButtonOrLinkOrTextWithChildrenProps } from "./types/button-link-text";
 export { KoliBriFormCallbacks } from "./components/form/types";
 export { FontAwesome, FontAwesomeOssPrefix } from "./enums/font-awesome";
@@ -67,7 +69,6 @@ export { Loading } from "./utils/validators/loading";
 export { SuggestionsPropType } from "./types/props/suggestions";
 export { InputCheckboxIcon, InputCheckboxVariant } from "./components/input-checkbox/types";
 export { InputTypeOnDefault, InputTypeOnOff, Option, SelectOption } from "./types/input/types";
-export { StencilUnknown } from "./types/unknown";
 export { Iso8601 } from "./types/input/iso8601";
 export { InputDateType, InputNumberType } from "./types/input/control/number";
 export { W3CInputValue } from "./types/w3c";
@@ -89,6 +90,7 @@ export { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types";
 export { CSSResize } from "./components/textarea/types";
 export { RowsPropType } from "./types/props/rows";
 export { KoliBriToastEventCallbacks } from "./types/toast";
+export { IdPropType } from "./types/props/id";
 export namespace Components {
     interface KolAbbr {
         /**
@@ -319,7 +321,7 @@ export namespace Components {
         /**
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
-        "_on"?: KoliBriButtonCallbacks<unknown>;
+        "_on"?: KoliBriButtonCallbacks<StencilUnknown>;
         /**
           * Gibt die Rolle des primären Elements in der Komponente an.
          */
@@ -339,7 +341,7 @@ export namespace Components {
         /**
           * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.
          */
-        "_value"?: Stringified<unknown>;
+        "_value"?: Stringified<StencilUnknown>;
         /**
           * Gibt an, welche Variante der Darstellung genutzt werden soll.
          */
@@ -404,7 +406,7 @@ export namespace Components {
         /**
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
-        "_on"?: KoliBriButtonCallbacks<unknown>;
+        "_on"?: KoliBriButtonCallbacks<StencilUnknown>;
         /**
           * Gibt die Rolle des primären Elements in der Komponente an.
          */
@@ -424,7 +426,7 @@ export namespace Components {
         /**
           * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.
          */
-        "_value"?: Stringified<unknown>;
+        "_value"?: Stringified<StencilUnknown>;
     }
     /**
      * Internal component that renders an action or text component like a button or a link.
@@ -499,7 +501,7 @@ export namespace Components {
         /**
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
-        "_on"?: KoliBriButtonCallbacks<unknown>;
+        "_on"?: KoliBriButtonCallbacks<StencilUnknown>;
         /**
           * Gibt die Rolle des primären Elements in der Komponente an.
          */
@@ -519,7 +521,7 @@ export namespace Components {
         /**
           * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.
          */
-        "_value"?: Stringified<unknown>;
+        "_value"?: Stringified<StencilUnknown>;
         /**
           * Gibt an, welche Variante der Darstellung genutzt werden soll.
          */
@@ -2577,7 +2579,7 @@ export namespace Components {
         /**
           * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.
          */
-        "_value"?: Stringified<unknown>;
+        "_value"?: Stringified<StencilUnknown>;
         /**
           * Gibt an, welche Variante der Darstellung genutzt werden soll.
          */
@@ -2800,9 +2802,9 @@ export namespace Components {
          */
         "_align"?: Align;
         /**
-          * Gibt die interne ID des primären Elements in der Komponente an.
+          * Defines the internal ID of the primary component element.
          */
-        "_id": string;
+        "_id"?: IdPropType;
         /**
           * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).
          */
@@ -3503,7 +3505,7 @@ declare namespace LocalJSX {
         /**
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
-        "_on"?: KoliBriButtonCallbacks<unknown>;
+        "_on"?: KoliBriButtonCallbacks<StencilUnknown>;
         /**
           * Gibt die Rolle des primären Elements in der Komponente an.
          */
@@ -3523,7 +3525,7 @@ declare namespace LocalJSX {
         /**
           * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.
          */
-        "_value"?: Stringified<unknown>;
+        "_value"?: Stringified<StencilUnknown>;
         /**
           * Gibt an, welche Variante der Darstellung genutzt werden soll.
          */
@@ -3588,7 +3590,7 @@ declare namespace LocalJSX {
         /**
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
-        "_on"?: KoliBriButtonCallbacks<unknown>;
+        "_on"?: KoliBriButtonCallbacks<StencilUnknown>;
         /**
           * Gibt die Rolle des primären Elements in der Komponente an.
          */
@@ -3608,7 +3610,7 @@ declare namespace LocalJSX {
         /**
           * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.
          */
-        "_value"?: Stringified<unknown>;
+        "_value"?: Stringified<StencilUnknown>;
     }
     /**
      * Internal component that renders an action or text component like a button or a link.
@@ -3683,7 +3685,7 @@ declare namespace LocalJSX {
         /**
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
-        "_on"?: KoliBriButtonCallbacks<unknown>;
+        "_on"?: KoliBriButtonCallbacks<StencilUnknown>;
         /**
           * Gibt die Rolle des primären Elements in der Komponente an.
          */
@@ -3703,7 +3705,7 @@ declare namespace LocalJSX {
         /**
           * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.
          */
-        "_value"?: Stringified<unknown>;
+        "_value"?: Stringified<StencilUnknown>;
         /**
           * Gibt an, welche Variante der Darstellung genutzt werden soll.
          */
@@ -5712,7 +5714,7 @@ declare namespace LocalJSX {
         /**
           * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.
          */
-        "_value"?: Stringified<unknown>;
+        "_value"?: Stringified<StencilUnknown>;
         /**
           * Gibt an, welche Variante der Darstellung genutzt werden soll.
          */
@@ -5931,9 +5933,9 @@ declare namespace LocalJSX {
          */
         "_align"?: Align;
         /**
-          * Gibt die interne ID des primären Elements in der Komponente an.
+          * Defines the internal ID of the primary component element.
          */
-        "_id": string;
+        "_id"?: IdPropType;
         /**
           * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).
          */

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

@@ -4,8 +4,9 @@ import { PropHideLabel } from './props/hide-label';
 import { PropHref } from './props/href';
 import { PropIcon } from './props/icon';
 import { PropLabel } from './props/label';
+import { StencilUnknown } from './unknown';
 type RequiredButtonProps = PropLabel & {
-  on: KoliBriButtonCallbacks<unknown>;
+  on: KoliBriButtonCallbacks<StencilUnknown>;
 };
 type RequiredLinkProps = PropHref;
 type RequiredTextProps = PropLabel;

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

@@ -15,6 +15,7 @@ import { PropHideLabel } from './props/hide-label';
 import { PropHref } from './props/href';
 import { PropLabelWithExpertSlot } from './props/label';
 import { PropStealth } from './props/stealth';
+import { StencilUnknown } from './unknown';
 export type AlternativButtonLinkRole = 'button' | 'link' | 'tab';
 type OptionalButtonAndLinkProps = {
   ariaControls: string;
@@ -59,9 +60,9 @@ export type OptionalButtonLinkProps = OptionalButtonAndLinkProps & {
   accessKey: string;
   disabled: boolean;
   id: string;
-  on: KoliBriButtonCallbacks<unknown>;
+  on: KoliBriButtonCallbacks<StencilUnknown>;
   type: KoliBriButtonType;
-  value: Stringified<unknown>;
+  value: Stringified<StencilUnknown>;
 } & PropLabelWithExpertSlot;
 type RequiredButtonLinkStates = RequiredButtonAndLinkStates & PropLabelWithExpertSlot & KoliBriButtonVariantPropState & {
   type: KoliBriButtonType;
@@ -70,8 +71,8 @@ type OptionalButtonLinkStates = OptionalButtonAndLinkStates & KoliBriButtonCusto
   accessKey: string;
   disabled: boolean;
   id: string;
-  on: KoliBriButtonCallbacks<unknown>;
-  value: unknown;
+  on: KoliBriButtonCallbacks<StencilUnknown>;
+  value: StencilUnknown;
 };
 export type RequiredButtonProps = RequiredButtonLinkProps & PropLabelWithExpertSlot;
 export type OptionalButtonProps = OptionalButtonLinkProps & PropAriaControls & PropAriaExpanded & PropAriaSelected & PropDisabled & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;

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

@@ -0,0 +1,6 @@
+import { Generic } from '@a11y-ui/core';
+export type IdPropType = string;
+export type PropId = {
+  id: IdPropType;
+};
+export declare const validateId: (component: Generic.Element.Component, value?: IdPropType) => void;

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

@@ -3,6 +3,7 @@ import { Generic } from '@a11y-ui/core';
 import { Stringified } from '../types/common';
 import { AriaCurrent } 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;
 export declare const emptyStringByArrayHandler: (value: unknown, cb: () => void) => void;
 export declare const setEventTarget: (event: Event, target?: HTMLElement) => void;
@@ -34,7 +35,7 @@ export declare const watchBoolean: (component: Generic.Element.Component, propNa
 export declare const watchString: (component: Generic.Element.Component, propName: string, value?: string, options?: WatchStringOptions) => void;
 export declare const watchNumber: (component: Generic.Element.Component, propName: string, value?: number, options?: WatchNumberOptions) => void;
 export declare const watchJsonArrayString: <T>(component: Generic.Element.Component, propName: string, itemValidation: (item: T) => boolean, value?: Stringified<T[]> | undefined, arrayValidation?: (items: T[]) => boolean, options?: WatchOptions) => void;
-export declare const mapString2Unknown: (value: unknown) => unknown;
+export declare const mapString2Unknown: (value: StencilUnknown) => StencilUnknown;
 export declare const stringifyJson: (value: unknown) => string;
 export declare const parseJson: <T>(value: unknown) => T;
 export declare const mapBoolean2String: (value?: boolean) => string | undefined;

package/doc/avatar.md

@@ -38,8 +38,7 @@ Verwenden Sie die **Avatar**-Komponente, um das Bild eines Users anzuzeigen.
 
 Bei der **Avatar**-Komponente wurden insbesondere folgende Punkte der Barrierefreiheit betrachtet:
 
-- Die Komponente ist mit dem Namen des Users als aria-label ausgezeichnet.
-- Falls vorhanden, wird das Avatar-Bild mit einem Alternativtext beschrieben.
+- Die Komponente ist mit einem Beschreibungstext, der den Namen des Users beinhaltet, als aria-label ausgezeichnet.
 - Die Initialen, die alternativ zum Avatar-Bild gezeigt werden, werden als rein visuelles, semantisch nicht relevantes Element betrachtet und für Screenreader
   entsprechend versteckt.
 
@@ -60,14 +59,9 @@ Bei der **Avatar**-Komponente wurden insbesondere folgende Punkte der Barrierefr
 
  - [kol-avatar](.)
 
-### Depends on
-
-- [kol-image](../image)
-
 ### Graph
 ```mermaid
 graph TD;
-  kol-avatar-wc --> kol-image
   kol-avatar --> kol-avatar-wc
   style kol-avatar-wc fill:#f9f,stroke:#333,stroke-width:4px
 ```

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; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _label?: LabelWithExpertSlotPropType` \| `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`   | 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; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<StencilUnknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: Stringified<StencilUnknown>; _label?: LabelWithExpertSlotPropType` \| `undefined; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
 
 
 ## Dependencies