@public-ui/components 1.6.0-rc.25 → 1.6.0-rc.27

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

@@ -1,5 +1,5 @@
 import { JSX } from '../../stencil-public-runtime';
-import { Props as LinkProps } from '../link/types';
+import { LinkProps } from '../link/types';
 import { Stringified } from '../../types/common';
 import { HeadingLevel } from '../../types/heading-level';
 import { Orientation } from '../../types/orientation';

package/dist/types/components/link-group/types.d.ts

@@ -1,5 +1,5 @@
 import { Generic } from '@a11y-ui/core';
-import { Props as LinkProps } from '../link/types';
+import { LinkProps } from '../link/types';
 import { Stringified } from '../../types/common';
 import { HeadingLevel } from '../../types/heading-level';
 import { Orientation } from '../../types/orientation';

package/dist/types/components/skip-nav/component.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from '../../stencil-public-runtime';
-import { Props as LinkProps } from '../link/types';
+import { LinkProps } from '../link/types';
 import { Stringified } from '../../types/common';
 import { LabelPropType } from '../../types/props/label';
 import { API, States } from './types';

package/dist/types/components/skip-nav/types.d.ts

@@ -1,5 +1,5 @@
 import { Generic } from '@a11y-ui/core';
-import { Props as LinkProps } from '../link/types';
+import { LinkProps } from '../link/types';
 import { Stringified } from '../../types/common';
 import { PropAriaLabel } from '../../types/props/aria-label';
 import { PropLabel } from '../../types/props/label';

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

@@ -1,19 +1,21 @@
 import { JSX } from '../../stencil-public-runtime';
 import { Stringified } from '../../types/common';
-import { AriaCurrentPropType } from '../../types/props/aria-current';
-import { DisabledPropType } from '../../types/props/disabled';
-import { LabelPropType } from '../../types/props/label';
-import { StencilUnknown } from '../../types/unknown';
-import { API, KoliBriSplitButtonCallback, States } from './types';
 import { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';
-import { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';
-import { TooltipAlignPropType } from '../../types/props/tooltip-align';
+import { ButtonCallbacksPropType } from '../../types/props/button-callbacks';
 import { ButtonTypePropType } from '../../types/props/button-type';
 import { ButtonVariantPropType } from '../../types/props/button-variant';
+import { CustomClassPropType } from '../../types/props/custom-class';
+import { IconPropType } from '../../types/props/icon';
+import { LabelPropType } from '../../types/props/label';
+import { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';
+import { TooltipAlignPropType } from '../../types/props/tooltip-align';
+import { StencilUnknown } from '../../types/unknown';
+import { API, States } from './types';
 export declare class KolSplitButton implements API {
   private dropdown;
   private dropdownContent;
-  private readonly clickHandler;
+  private readonly clickButtonHandler;
+  private readonly clickToggleHandler;
   private readonly openDropdown;
   private readonly closeDropdown;
   private readonly toggleDropdown;
@@ -23,20 +25,17 @@ export declare class KolSplitButton implements API {
   render(): JSX.Element;
   _accessKey?: string;
   _ariaControls?: string;
-  _ariaCurrent?: AriaCurrentPropType;
   _ariaExpanded?: boolean;
   _ariaLabel?: string;
   _ariaSelected?: boolean;
-  _customClass?: string;
+  _customClass?: CustomClassPropType;
   _disabled?: boolean;
   _hideLabel?: boolean;
-  _icon?: string;
-  _iconOnly?: boolean;
+  _icon?: IconPropType;
+  _id?: string;
   _label: LabelPropType;
   _name?: string;
-  _on?: {
-    onClick: KoliBriSplitButtonCallback;
-  };
+  _on?: ButtonCallbacksPropType<StencilUnknown>;
   _role?: AlternativeButtonLinkRolePropType;
   _syncValueBySelector?: SyncValueBySelectorPropType;
   _showDropdown?: boolean;
@@ -46,27 +45,6 @@ export declare class KolSplitButton implements API {
   _value?: Stringified<StencilUnknown>;
   _variant?: ButtonVariantPropType;
   state: States;
-  validateAccessKey(value?: string): void;
-  validateAriaControls(value?: string): void;
-  validateAriaCurrent(value?: AriaCurrentPropType): void;
-  validateAriaExpanded(value?: boolean): void;
-  validateAriaLabel(value?: string): void;
-  validateAriaSelected(value?: boolean): void;
-  validateCustomClass(value?: string): void;
-  validateDisabled(value?: DisabledPropType): void;
-  validateHideLabel(value?: boolean): void;
-  validateIcon(value?: string): void;
-  validateIconOnly(value?: boolean): void;
-  validateLabel(value?: LabelPropType): void;
-  validateOn(value?: {
-    onClick: KoliBriSplitButtonCallback;
-  }): void;
-  validateRole(value?: AlternativeButtonLinkRolePropType): void;
   validateShowDropdown(value?: boolean): void;
-  validateTabIndex(value?: number): void;
-  validateTooltipAlign(value?: TooltipAlignPropType): void;
-  validateType(value?: ButtonTypePropType): void;
-  validateValue(value?: Stringified<StencilUnknown>): void;
-  validateVariant(value?: ButtonVariantPropType): void;
   componentWillLoad(): void;
 }

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

@@ -1,26 +1,24 @@
 import { Generic } from '@a11y-ui/core';
-import { PropLabel } from '../../types/props/label';
+import { StencilUnknown } from '../../components';
 import { PropAlternativeButtonLinkRole } from '../../types/props/alternative-button-link-role';
-import { PropTooltipAlign } from '../../types/props/tooltip-align';
+import { ButtonCallbacksPropType } from '../../types/props/button-callbacks';
 import { PropButtonVariant } from '../../types/props/button-variant';
-export type KoliBriSplitButtonCallback = (e: Event) => void;
+import { PropIcon } from '../../types/props/icon';
+import { PropLabel } from '../../types/props/label';
+import { PropTooltipAlign } from '../../types/props/tooltip-align';
 type RequiredProps = PropLabel;
 type OptionalProps = {
-  icon: string;
-  on?: {
-    onClick: KoliBriSplitButtonCallback;
-  };
+  on?: ButtonCallbacksPropType<StencilUnknown>;
   showDropdown: boolean;
-} & PropAlternativeButtonLinkRole & PropTooltipAlign & PropButtonVariant;
-type RequiredStates = PropLabel & {
+} & PropAlternativeButtonLinkRole & PropIcon & PropTooltipAlign & PropButtonVariant;
+type RequiredStates = {
   showDropdown: boolean;
-  on: {
-    onClick?: KoliBriSplitButtonCallback;
-  };
-};
-type OptionalStates = {
-  icon: string;
 };
+type OptionalStates = NonNullable<unknown>;
+type RequiredWatchers = RequiredStates;
+type OptionalWatchers = OptionalStates;
 export type States = Generic.Element.Members<RequiredStates, OptionalStates>;
-export type API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
+export type API = Generic.Element.Component & Generic.Element.Members<RequiredProps, OptionalProps> & Generic.Element.Watchers<RequiredWatchers, OptionalWatchers> & {
+  readonly state: Generic.Element.Members<RequiredStates, OptionalStates>;
+};
 export {};

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

@@ -15,5 +15,4 @@ export declare class ToasterService {
   enqueue(data: Toast): void;
   private showToast;
 }
-export declare const Toaster: ToasterService;
 export {};

package/dist/types/components.d.ts

@@ -57,7 +57,6 @@ import { KoliBriProgressVariantType } from "./types/progress";
 import { KoliBriQuoteVariant } from "./components/quote/types";
 import { RowsPropType } from "./types/props/rows";
 import { SpinVariantPropType } from "./types/props/variant/spin";
-import { KoliBriSplitButtonCallback } from "./components/split-button/types";
 import { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./components/table/types";
 import { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types";
 import { CSSResize } from "./components/textarea/types";
@@ -114,7 +113,6 @@ export { KoliBriProgressVariantType } from "./types/progress";
 export { KoliBriQuoteVariant } from "./components/quote/types";
 export { RowsPropType } from "./types/props/rows";
 export { SpinVariantPropType } from "./types/props/variant/spin";
-export { KoliBriSplitButtonCallback } from "./components/split-button/types";
 export { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./components/table/types";
 export { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types";
 export { CSSResize } from "./components/textarea/types";
@@ -486,7 +484,6 @@ export namespace Components {
     interface KolButtonWc {
         /**
           * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.
-          * @deprecated
          */
         "_accessKey"?: string;
         /**
@@ -2572,11 +2569,6 @@ export namespace Components {
           * Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
          */
         "_ariaControls"?: string;
-        /**
-          * Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-          * @deprecated aria-current is not necessary for buttons. will be removed in version 2.
-         */
-        "_ariaCurrent"?: AriaCurrentPropType;
         /**
           * Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
          */
@@ -2591,11 +2583,11 @@ export namespace Components {
          */
         "_ariaSelected"?: boolean;
         /**
-          * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.
+          * Defines the custom class attribute if _variant="custom" is set.
          */
-        "_customClass"?: string;
+        "_customClass"?: CustomClassPropType;
         /**
-          * Makes the element not focusable and ignore all events. TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved
+          * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.
          */
         "_disabled"?: boolean;
         /**
@@ -2603,14 +2595,13 @@ export namespace Components {
          */
         "_hideLabel"?: boolean;
         /**
-          * Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).
+          * Defines the icon classnames.
          */
-        "_icon"?: string;
+        "_icon"?: IconPropType;
         /**
-          * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.
-          * @deprecated use _hide-label
+          * Gibt die interne ID des primären Elements in der Komponente an.
          */
-        "_iconOnly"?: boolean;
+        "_id"?: string;
         /**
           * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).
          */
@@ -2620,9 +2611,9 @@ export namespace Components {
          */
         "_name"?: string;
         /**
-          * Gibt die EventCallback-Funktionen für die Button-Events an.
+          * Defines the callback functions for button events.
          */
-        "_on"?: { onClick: KoliBriSplitButtonCallback };
+        "_on"?: ButtonCallbacksPropType<StencilUnknown>;
         /**
           * Defines the role of the components primary element.
          */
@@ -3705,7 +3696,6 @@ declare namespace LocalJSX {
     interface KolButtonWc {
         /**
           * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.
-          * @deprecated
          */
         "_accessKey"?: string;
         /**
@@ -5738,11 +5728,6 @@ declare namespace LocalJSX {
           * Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
          */
         "_ariaControls"?: string;
-        /**
-          * Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-          * @deprecated aria-current is not necessary for buttons. will be removed in version 2.
-         */
-        "_ariaCurrent"?: AriaCurrentPropType;
         /**
           * Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
          */
@@ -5757,11 +5742,11 @@ declare namespace LocalJSX {
          */
         "_ariaSelected"?: boolean;
         /**
-          * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.
+          * Defines the custom class attribute if _variant="custom" is set.
          */
-        "_customClass"?: string;
+        "_customClass"?: CustomClassPropType;
         /**
-          * Makes the element not focusable and ignore all events. TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved
+          * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.
          */
         "_disabled"?: boolean;
         /**
@@ -5769,14 +5754,13 @@ declare namespace LocalJSX {
          */
         "_hideLabel"?: boolean;
         /**
-          * Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).
+          * Defines the icon classnames.
          */
-        "_icon"?: string;
+        "_icon"?: IconPropType;
         /**
-          * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.
-          * @deprecated use _hide-label
+          * Gibt die interne ID des primären Elements in der Komponente an.
          */
-        "_iconOnly"?: boolean;
+        "_id"?: string;
         /**
           * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).
          */
@@ -5786,9 +5770,9 @@ declare namespace LocalJSX {
          */
         "_name"?: string;
         /**
-          * Gibt die EventCallback-Funktionen für die Button-Events an.
+          * Defines the callback functions for button events.
          */
-        "_on"?: { onClick: KoliBriSplitButtonCallback };
+        "_on"?: ButtonCallbacksPropType<StencilUnknown>;
         /**
           * Defines the role of the components primary element.
          */

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

@@ -0,0 +1,10 @@
+import type { Generic, ThemeDetails } from '@a11y-ui/core';
+
+declare global {
+	interface Window {
+		A11yUi: {
+			Theme?: ThemeDetails;
+			Themes?: Record<string, Generic.Theming.Map<string, string>>;
+		} & Record<string, unknown>;
+	}
+}

package/dist/types/index.d.ts

@@ -1,11 +1 @@
-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;
+export{ToasterService}from"./components/toast/toaster";export*from"./components.d";export{register}from"./core";export*from"./enums/bund";export{translations}from"./i18n";export*from"./kolibri";export{Optgroup,Option,SelectOption}from"./types/input/types";export{configKoliBri}from"./utils/dev.utils";export{KoliBriDevHelper}from"./utils/prop.validators";

package/doc/link-group.md

@@ -88,7 +88,7 @@ nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum
 | `_heading`            | `_heading`         | Gibt die optionale Überschrift zur Link-Gruppe an.                                                                                                                                                      | `string` \| `undefined`                                                                                                                                                                                                 | `undefined`  |
 | `_label`              | `_label`           | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `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`                                                                                                                                                                        | `undefined`  |
-| `_links` _(required)_ | `_links`           | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                         | `Props[]` \| `string`                                                                                                                                                                                                   | `undefined`  |
+| `_links` _(required)_ | `_links`           | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                         | `LinkProps[]` \| `string`                                                                                                                                                                                               | `undefined`  |
 | `_listStyleType`      | `_list-style-type` | Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet                                                                                            | `"circle"` \| `"decimal"` \| `"decimal-leading-zero"` \| `"disc"` \| `"lower-alpha"` \| `"lower-greek"` \| `"lower-latin"` \| `"lower-roman"` \| `"none"` \| `"square"` \| `"upper-alpha"` \| `"upper-latin"` \| `"upper-roman"` \| `undefined` | `undefined`  |
 | `_ordered`            | `_ordered`         | <span style="color:red">**[DEPRECATED]**</span> Wird mittels der Property _list-style-type automatisch gesteuert.<br/><br/>Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll.    | `boolean` \| `undefined`                                                                                                                                                                                                | `undefined`  |
 | `_orientation`        | `_orientation`     | Gibt die horizontale oder vertikale Ausrichtung der Komponente an.                                                                                                                                      | `"horizontal"` \| `"vertical"` \| `undefined`                                                                                                                                                                             | `'vertical'` |

package/doc/skip-nav.md

@@ -54,11 +54,11 @@ Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Re
 
 ## Properties
 
-| Property              | Attribute     | Description                                                                                                                                                                                             | Type                  | Default     |
-| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
-| `_ariaLabel`          | `_aria-label` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined` | `undefined` |
-| `_label`              | `_label`      | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined` | `undefined` |
-| `_links` _(required)_ | `_links`      | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                         | `Props[]` \| `string`   | `undefined` |
+| Property              | Attribute     | Description                                                                                                                                                                                             | Type                    | Default     |
+| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ----------- |
+| `_ariaLabel`          | `_aria-label` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`   | `undefined` |
+| `_label`              | `_label`      | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined`   | `undefined` |
+| `_links` _(required)_ | `_links`      | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                         | `LinkProps[]` \| `string` | `undefined` |
 
 
 ## Dependencies

package/doc/split-button.md

@@ -32,29 +32,28 @@
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                                                                                                                                                                      | Type                                                                                                 | Default     |
-| --------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                                                                                                                                                                                | `string` \| `undefined`                                                                                | `undefined` |
-| `_ariaControls`       | `_aria-controls` | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                                                                                                         | `string` \| `undefined`                                                                                | `undefined` |
-| `_ariaCurrent`        | `_aria-current`  | <span class="text-red-500">**[DEPRECATED]**</span> aria-current is not necessary for buttons. will be removed in version 2.<br/><br/>Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`                         | `undefined` |
-| `_ariaExpanded`       | `_aria-expanded` | Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                                                                                  | `boolean` \| `undefined`                                                                               | `undefined` |
-| `_ariaLabel`          | `_aria-label`    | <span style="color:red">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                                                          | `string` \| `undefined`                                                                                | `undefined` |
-| `_ariaSelected`       | `_aria-selected` | Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                                                                                                     | `boolean` \| `undefined`                                                                               | `undefined` |
-| `_customClass`        | `_custom-class`  | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.                                                                                                                                                                                                                          | `string` \| `undefined`                                                                                | `undefined` |
-| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events. TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved                                                                                                                                                                         | `boolean` \| `undefined`                                                                               | `false`     |
-| `_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`).                                                                                                                                                                                                                                                      | `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` |
-| `_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: KoliBriSplitButtonCallback; }`                                              | `undefined` |
-| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                                                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                           | `undefined` |
-| `_showDropdown`       | `_show-dropdown` | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                                                                                                                                       | `boolean` \| `undefined`                                                                               | `false`     |
-| `_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` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                                        | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                | `'top'`     |
-| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                                                                                                                                                                               | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                       | `'button'`  |
-| `_value`              | `_value`         | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                                                                                                                                 | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                         | `undefined` |
-| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                                                                                                                                                                           | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined` | `'normal'`  |
+| Property              | Attribute        | Description                                                                                                                                                                                             | Type                                                                                                                                                   | Default     |
+| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
+| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                                                                       | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_ariaControls`       | `_aria-controls` | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_ariaExpanded`       | `_aria-expanded` | Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                         | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
+| `_ariaLabel`          | `_aria-label`    | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_ariaSelected`       | `_aria-selected` | Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                            | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
+| `_customClass`        | `_custom-class`  | Defines the custom class attribute if _variant="custom" is set.                                                                                                                                         | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                                                                         | `boolean` \| `undefined`                                                                                                                                 | `false`     |
+| `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                               | `boolean` \| `undefined`                                                                                                                                 | `false`     |
+| `_icon`               | `_icon`          | Defines the icon classnames.                                                                                                                                                                            | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                                                                   | `undefined` |
+| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                                                                         | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string`                                                                                                                                               | `undefined` |
+| `_name`               | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                                                                        | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_on`                 | --               | Defines the callback functions for button events.                                                                                                                                                       | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
+| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                                                     | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                             | `undefined` |
+| `_showDropdown`       | `_show-dropdown` | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                              | `boolean` \| `undefined`                                                                                                                                 | `false`     |
+| `_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` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                               | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                  | `'top'`     |
+| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                                                                      | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                         | `'button'`  |
+| `_value`              | `_value`         | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                        | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                           | `undefined` |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                                                                  | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                                   | `'normal'`  |
 
 
 ## Slots