@public-ui/components 1.6.0-rc.0 → 1.6.0-rc.10

package/dist/types/i18n.d.ts

@@ -2,7 +2,7 @@ import { Generic } from '@a11y-ui/core';
 import locale_de from './locales/de';
 type ResourcePrefix = 'Kol';
 type ComponentKeys = keyof typeof locale_de;
-export declare const translations: Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, "Kol", "info" | "success" | "warning" | "error" | "of" | "characters" | "message" | "close" | "form-description" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "nav-maximize" | "nav-minimize" | "logo-description" | "open-link-in-tab" | "kolibri-logo">>;
+export declare const translations: Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, "Kol", "info" | "success" | "warning" | "error" | "close" | "of" | "characters" | "message" | "form-description" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "nav-maximize" | "nav-minimize" | "logo-description" | "open-link-in-tab" | "kolibri-logo">>;
 type Options = {
   count?: number;
   placeholders?: {

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

@@ -1131,6 +1131,8 @@ export declare namespace JSXBase {
         summary?: string;
     }
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
+        autoComplete?: string;
+        autocomplete?: string;
         autoFocus?: boolean;
         autofocus?: boolean | string;
         cols?: number;

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

@@ -1,13 +1,12 @@
 import { Generic } from '@a11y-ui/core';
 import { KoliBriButtonCallbacks, LinkTarget } from './button-link';
+import { PropHref } from './props/href';
 import { PropIcon } from './props/icon';
 import { PropLabel } from './props/label';
 type RequiredButtonProps = PropLabel & {
   on: KoliBriButtonCallbacks<unknown>;
 };
-type RequiredLinkProps = PropLabel & {
-  href: string;
-};
+type RequiredLinkProps = PropHref;
 type RequiredTextProps = PropLabel;
 type OptionalButtonOrLinkOrTextProps = PropIcon & {
   active: boolean;
@@ -19,12 +18,12 @@ type OptionalButtonProps = OptionalButtonOrLinkOrTextProps & {
 };
 type OptionalButtonOrLinkOrTextWithChildrenProps = OptionalButtonOrLinkOrTextProps & {
   children: ButtonOrLinkOrTextWithChildrenProps[];
-};
+} & PropLabel;
 type OptionalButtonWithChildrenProps = OptionalButtonProps & {
   children: ButtonOrLinkOrTextWithChildrenProps[];
 };
 export type ButtonWithChildrenProps = Generic.Element.Members<RequiredButtonProps, OptionalButtonWithChildrenProps>;
 export type LinkWithChildrenProps = Generic.Element.Members<RequiredLinkProps, OptionalButtonOrLinkOrTextWithChildrenProps>;
-type TextWithChildrenProps = Generic.Element.Members<RequiredTextProps, OptionalButtonOrLinkOrTextWithChildrenProps>;
+export type TextWithChildrenProps = Generic.Element.Members<RequiredTextProps, OptionalButtonOrLinkOrTextWithChildrenProps>;
 export type ButtonOrLinkOrTextWithChildrenProps = ButtonWithChildrenProps | LinkWithChildrenProps | TextWithChildrenProps;
 export {};

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

@@ -3,34 +3,40 @@ import { Events } from '../enums/events';
 import { EventCallback, EventValueOrEventCallback } from './callbacks';
 import { Stringified } from './common';
 import { KoliBriAllIcon, KoliBriIconProp } from './icon';
-import { Alignment, PropAriaCurrent, PropAriaExpanded, PropAriaSelected, PropDisabled, PropDownload, PropLabel, PropStealth } from './props';
+import { Align } from './props/align';
+import { PropAriaCurrent } from './props/aria-current';
+import { PropAriaExpanded } from './props/aria-expanded';
+import { PropAriaLabel } from './props/aria-label';
+import { PropAriaSelected } from './props/aria-selected';
+import { PropDisabled } from './props/disabled';
+import { PropDownload } from './props/download';
+import { PropHideLabel } from './props/hide-label';
+import { PropHref } from './props/href';
+import { PropLabelWithExpertSlot } from './props/label';
+import { PropStealth } from './props/stealth';
 export type AlternativButtonLinkRole = 'button' | 'link' | 'tab';
-type RequiredButtonAndLinkProps = PropLabel;
 type OptionalButtonAndLinkProps = {
   ariaControls: string;
-  ariaLabel: string;
   icon: Stringified<KoliBriIconProp>;
-  iconAlign: Alignment;
+  iconAlign: Align;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
-  tooltipAlign: Alignment;
-} & PropAriaCurrent & PropAriaExpanded & PropAriaSelected & PropDisabled;
+  tooltipAlign: Align;
+} & PropAriaCurrent & PropAriaExpanded & PropAriaLabel & PropAriaSelected & PropDisabled & PropHideLabel;
 type RequiredButtonAndLinkStates = {
   icon: KoliBriAllIcon;
-  label: string;
 };
 type OptionalButtonAndLinkStates = {
-  ariaLabel: string;
   ariaControls: string;
-  iconAlign: Alignment;
+  iconAlign: Align;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
-  tooltipAlign: Alignment;
-} & PropAriaCurrent & PropAriaExpanded & PropAriaSelected & PropDisabled;
+  tooltipAlign: Align;
+} & PropAriaCurrent & PropAriaExpanded & PropAriaSelected & PropDisabled & PropHideLabel;
 export type KoliBriButtonType = 'button' | 'reset' | 'submit';
-export type KoliBriButtonVariant = 'primary' | 'secondary' | 'normal' | 'danger' | 'ghost' | 'custom';
+export type KoliBriButtonVariant = 'primary' | 'secondary' | 'normal' | 'tertiary' | 'danger' | 'ghost' | 'custom';
 export type KoliBriButtonCallbacks<T> = {
   [Events.onClick]?: EventValueOrEventCallback<MouseEvent, T>;
   [Events.onMouseDown]?: EventCallback<MouseEvent>;
@@ -41,7 +47,7 @@ export type KoliBriButtonVariantPropState = {
 export type KoliBriButtonCustomClassPropState = {
   customClass: string;
 };
-export type RequiredButtonLinkProps = RequiredButtonAndLinkProps;
+export type RequiredButtonLinkProps = unknown;
 export type OptionalButtonLinkProps = OptionalButtonAndLinkProps & {
   accessKey: string;
   disabled: boolean;
@@ -49,8 +55,8 @@ export type OptionalButtonLinkProps = OptionalButtonAndLinkProps & {
   on: KoliBriButtonCallbacks<unknown>;
   type: KoliBriButtonType;
   value: Stringified<unknown>;
-};
-type RequiredButtonLinkStates = RequiredButtonAndLinkStates & KoliBriButtonVariantPropState & {
+} & PropLabelWithExpertSlot;
+type RequiredButtonLinkStates = RequiredButtonAndLinkStates & PropLabelWithExpertSlot & KoliBriButtonVariantPropState & {
   type: KoliBriButtonType;
 };
 type OptionalButtonLinkStates = OptionalButtonAndLinkStates & KoliBriButtonCustomClassPropState & {
@@ -60,10 +66,10 @@ type OptionalButtonLinkStates = OptionalButtonAndLinkStates & KoliBriButtonCusto
   on: KoliBriButtonCallbacks<unknown>;
   value: unknown;
 };
-export type RequiredButtonProps = RequiredButtonLinkProps;
+export type RequiredButtonProps = RequiredButtonLinkProps & PropLabelWithExpertSlot;
 export type OptionalButtonProps = OptionalButtonLinkProps & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;
 export type ButtonProps = Generic.Element.Members<RequiredButtonProps, OptionalButtonProps>;
-export type RequiredButtonStates = RequiredButtonLinkStates & KoliBriButtonVariantPropState;
+export type RequiredButtonStates = RequiredButtonLinkStates & KoliBriButtonVariantPropState & PropLabelWithExpertSlot;
 export type OptionalButtonStates = OptionalButtonLinkStates & KoliBriButtonCustomClassPropState;
 export type ButtonStates = Generic.Element.Members<RequiredButtonStates, OptionalButtonStates>;
 export type LinkOnCallbacks = {
@@ -71,9 +77,7 @@ export type LinkOnCallbacks = {
 };
 export type LinkTarget = '_blank' | '_parent' | '_self' | '_top' | string;
 export type LinkUseCase = 'text' | 'image' | 'nav';
-export type RequiredLinkProps = RequiredButtonAndLinkProps & {
-  href: string;
-};
+export type RequiredLinkProps = PropHref;
 export type OptionalLinkProps = OptionalButtonAndLinkProps & {
   disabled: boolean;
   on: LinkOnCallbacks;
@@ -81,12 +85,10 @@ export type OptionalLinkProps = OptionalButtonAndLinkProps & {
   target: LinkTarget;
   targetDescription: string;
   useCase: LinkUseCase;
-} & PropDownload & PropStealth;
+} & PropDownload & PropLabelWithExpertSlot & PropStealth;
 export type LinkProps = Generic.Element.Members<RequiredLinkProps, OptionalLinkProps>;
-export type RequiredLinkStates = RequiredButtonAndLinkStates & {
-  href: string;
-};
-export type OptionalLinkStates = OptionalButtonAndLinkStates & {
+type RequiredLinkStates = RequiredButtonAndLinkStates & PropHref & PropLabelWithExpertSlot;
+type OptionalLinkStates = OptionalButtonAndLinkStates & {
   ariaSelected: boolean;
   on: LinkOnCallbacks;
   selector: string;
@@ -95,7 +97,8 @@ export type OptionalLinkStates = OptionalButtonAndLinkStates & {
   useCase: LinkUseCase;
 } & PropAriaSelected & PropDownload & PropStealth;
 export type LinkStates = Generic.Element.Members<RequiredLinkStates, OptionalLinkStates>;
+export type KoliBriLinkAPI = Generic.Element.ComponentApi<RequiredLinkProps, OptionalLinkProps, RequiredLinkStates, OptionalLinkStates>;
 export type RequiredLinkButtonProps = RequiredLinkProps;
 export type OptionalLinkButtonProps = OptionalLinkProps & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;
-export declare const watchTooltipAlignment: (component: Generic.Element.Component, propName: string, value?: Alignment) => void;
+export declare const watchTooltipAlignment: (component: Generic.Element.Component, propName: string, value?: Align) => void;
 export {};

package/dist/types/types/progress.d.ts

@@ -1 +1,7 @@
-export type KoliBriProgressType = 'bar' | 'cycle';
+export declare enum KoliBriProgressVariantEnum {
+  'bar' = "bar",
+  'cycle' = "cycle",
+  'cycle-value-label' = "cycle-value-label",
+  'cycle-label-value' = "cycle-label-value"
+}
+export type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;

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

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

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

@@ -0,0 +1,3 @@
+export type PropAriaLabel = {
+  ariaLabel: string;
+};

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

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

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

@@ -1,11 +1,11 @@
 import { Generic } from '@a11y-ui/core';
-import { KoliBriIconProp, KoliBriIconState } from '../icon';
-import { Alignment } from '.';
 import { Stringified } from '../common';
+import { KoliBriIconProp, KoliBriIconState } from '../icon';
+import { Align } from './align';
 export type PropIcon = {
   icon: Stringified<KoliBriIconProp>;
 };
-export declare const mapIconProp2State: (icon: KoliBriIconProp, iconAlign?: Alignment) => KoliBriIconState;
+export declare const mapIconProp2State: (icon: KoliBriIconProp, iconAlign?: Align) => 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?: Alignment) => void;
+export declare const watchIconAlign: (component: Generic.Element.Component, value?: Align) => void;

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

@@ -2,10 +2,14 @@ import { Generic } from '@a11y-ui/core';
 import { WatchStringOptions } from '../../utils/prop.validators';
 export declare function hasEnoughReadableChars(str: string, min?: number): boolean;
 export declare function containsOnlyNumbers(str: string): boolean;
+export type LabelPropType = string;
+export type LabelWithExpertSlotPropType = LabelPropType | false;
 export type PropLabel = {
-  label: string;
+  label: LabelPropType;
+};
+export type PropLabelWithExpertSlot = {
+  label: LabelWithExpertSlotPropType;
 };
 export type LabelProp = Generic.Element.Members<PropLabel, unknown>;
-export declare const validateAriaLabelWithLabel: (component: Generic.Element.Component, value?: string) => void;
-export declare const validateLabel: (component: Generic.Element.Component, value?: string, options?: WatchStringOptions) => void;
-export declare const validateLabelWithAriaLabel: (component: Generic.Element.Component, value?: string) => void;
+export declare const validateLabel: (component: Generic.Element.Component, value?: LabelPropType, options?: WatchStringOptions) => void;
+export declare const validateLabelWithExpertSlot: (component: Generic.Element.Component, value?: LabelWithExpertSlotPropType, options?: WatchStringOptions) => void;

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

@@ -1,5 +1,4 @@
 export declare const isObject: (value: unknown) => boolean;
 export declare const isString: (value: unknown, minLength?: number) => boolean;
 export declare const isStyle: (style?: Record<string, string>) => boolean;
-export declare const isEmptyOrPrefixOf: (prefix: string, text: string) => boolean;
 export declare const STATE_CHANGE_EVENT: Event;

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

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

package/doc/abbr.md

@@ -49,10 +49,10 @@ Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert sein
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                            | Type                                                  | Default     |
-| --------------------- | ---------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------- |
-| `_title` _(required)_ | `_title`         | Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.               | `string`                                              | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
+| Property              | Attribute        | Description                                                                                      | Type                                                  | Default     |
+| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | ----------- |
+| `_title` _(required)_ | `_title`         | Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.                         | `string`                                              | `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'`     |
 
 
 ## Slots

package/doc/accordion.md

@@ -122,12 +122,12 @@ Standardansicht gelegt.
 
 ## Properties
 
-| Property                | Attribute  | Description                                      | Type                                                                                 | Default     |
-| ----------------------- | ---------- | ------------------------------------------------ | ------------------------------------------------------------------------------------ | ----------- |
-| `_heading` _(required)_ | `_heading` | Gibt die Überschrift des Accordions an.          | `string`                                                                             | `undefined` |
-| `_level`                | `_level`   | Setzt den H-Level, von 1 bis 6, der Überschrift. | `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 das Accordion geöffnet ist.          | `boolean` \| `undefined`                                                               | `false`     |
+| Property                | Attribute  | Description                                                                                                                                           | Type                                                                                 | Default     |
+| ----------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- |
+| `_heading` _(required)_ | `_heading` | Gibt die Beschriftung der Komponente an.                                                                                                              | `string`                                                                             | `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`     |
 
 
 ## Slots

package/doc/alert.md

@@ -7,14 +7,14 @@ Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie be
 ### Code
 
 ```html
-<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="msg">Textbereich im Alert</kol-alert>
-<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="card">Textbereich im Alert</kol-alert>
+<kol-alert _label="Überschrift im Alert" _level="1" _type="success" _variant="msg">Textbereich im Alert</kol-alert>
+<kol-alert _label="Überschrift im Alert" _level="2" _type="info" _variant="card">Textbereich im Alert</kol-alert>
 ```
 
 ### Beispiel
 
-<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="msg">Textbereich im Alert</kol-alert>
-<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="card">Textbereich im Alert</kol-alert>
+<kol-alert _label="Überschrift im Alert" _level="1" _type="success" _variant="msg">Textbereich im Alert</kol-alert>
+<kol-alert _label="Überschrift im Alert" _level="2" _type="info" _variant="card">Textbereich im Alert</kol-alert>
 
 ## Verwendung
 
@@ -80,15 +80,15 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 
 ## Properties
 
-| Property     | Attribute     | Description                                                                       | Type                                                                    | Default     |
-| ------------ | ------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- |
-| `_alert`     | `_alert`      | Gibt an, ob der Screenreader die Meldung vorlesen soll.                           | `boolean` \| `undefined`                                                  | `false`     |
-| `_hasCloser` | `_has-closer` | Gibt an, ob der Alert ein Schließen-Icon hat.                                     | `boolean` \| `undefined`                                                  | `false`     |
-| `_heading`   | `_heading`    | Gibt den Titel der Meldung an.                                                    | `string` \| `undefined`                                                   | `undefined` |
-| `_level`     | `_level`      | Setzt den H-Level, von 1 bis 6, der Überschrift.                                  | `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` |
-| `_type`      | `_type`       | Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt. | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
-| `_variant`   | `_variant`    | Gibt an, welche Benachrichtigungsvariante dargestellt wird.                       | `"card"` \| `"msg"` \| `undefined`                                          | `'msg'`     |
+| 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`     |
+| `_heading`   | `_heading`    | Gibt die Beschriftung der Komponente an.                                                                                                              | `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` |
+| `_type`      | `_type`       | Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.                                                                     | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
+| `_variant`   | `_variant`    | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                         | `"card"` \| `"msg"` \| `undefined`                                          | `'msg'`     |
 
 
 ## Slots

package/doc/badge.md

@@ -42,7 +42,7 @@ Das Objekt ist vom Typ `KoliBriAllIcon`, kann also einen oder mehrere der Schlü
 
 ### Nur Icon anzeigen
 
-Mit dem Attribut **`_icon-only`** kann festgelegt werden, dass nur das mit dem Attribut **`_icon`** gewählte Icon angezeigt wird. Der Wert im Attribut **`_label`** wird in diesem Fall ignoriert.
+Mit dem Attribut **`_hide-label`** kann festgelegt werden, dass nur das mit dem Attribut **`_icon`** gewählte Icon angezeigt wird. Der Wert im Attribut **`_label`** wird in diesem Fall ignoriert.
 
 ### Schriftschnitt
 
@@ -89,13 +89,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'`    |
-| `_icon`               | `_icon`         | Iconklasse (z.B.: "codicon codicon-home")                                                                | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
-| `_iconOnly`           | `_icon-only`    | Gibt an, ob nur das Icon angezeigt wird.                                                                 | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `false`     |
-| `_label` _(required)_ | `_label`        | Setzt den sichtbaren Text des Elements.                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_smartButton`        | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `string` \| `undefined` \| `{ _label: string; } & { _ariaControls?: string` \| `undefined; _ariaLabel?: string` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Alignment` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Alignment` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _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; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Align` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Align` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaLabel?: string` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `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` |
 
 
 ## Dependencies

package/doc/breadcrumb.md

@@ -37,20 +37,20 @@ Das gesamte JSON-Objekt muss in eckigen Klammern an das Attribut **`_links`** ü
 
 - **`_href`** übergibt den Link, der für dieses Element verwendet werden soll.
 - **`_icon`** (optional) übergibt den Namen des Icon, wenn zusätzlich zum Text des Elements noch ein Icon angezeigt werden soll. Es stehen die <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Codicons"></kol-link> zur Verfügung
-- **`_iconOnly`** (optional). Wenn der Wert auf **true** gesetzt wird, erscheint im Link ausschließlich das Icon, ohne weiteren Text. Die Eigenschaft `_icon` muss gesetzt werden.
+- **`_hide-label`** (optional). Wenn der Wert auf **true** gesetzt wird, erscheint im Link ausschließlich das Icon, ohne weiteren Text. Die Eigenschaft `_icon` muss gesetzt werden.
 - **`_label`** übergibt den Text, der für dieses Element angezeigt werden soll.
 
 Beispiel für ein JSON-Objekt, das an das Attribut **`_links`** übergeben wird:
 
 ```JSON
 [
-  { '_label': 'Startseite', '_href': '#/', '_icon': 'codicon codicon-home', '_iconOnly': true },
+  { '_label': 'Startseite', '_href': '#/', '_icon': 'codicon codicon-home', '_hide-label _': true },
   { '_label': '1. Unterseite', '_href': '/unterseite_eins' },
   { '_label': '2. Unterseite', '_href': '/unterseite_zwei' }
 ]
 ```
 
-<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/","_icon":"codicon codicon-home","_icon-only": "true"},{"_label":"1. Unterseite","_href":"#/1_unterseite"},{"_label":"2. Unterseite","_href":"#/2_unterseite"}]'></kol-breadcrumb>
+<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/","_icon":"codicon codicon-home","hide-label": "true"},{"_label":"1. Unterseite","_href":"#/1_unterseite"},{"_label":"2. Unterseite","_href":"#/2_unterseite"}]'></kol-breadcrumb>
 
 ### Best practices
 
@@ -68,7 +68,7 @@ Eine Breadcrumb-Navigation ist auf einer großen Mehrzahl der aktuellen Webseite
 
 ## Barrierefreiheit
 
-Achten Sie im Sinne der optimalen Barrierefreiheit darauf, das Attribut `_aria-label` korrekt auszuzeichnen. Beachten Sie diesen Hinweis insbesondere dann, wenn Sie die Option `_icon-only` verwenden und so auf einen beschreibenden Text im Link verzichten würden.
+Achten Sie im Sinne der optimalen Barrierefreiheit darauf, das Attribut `_label` korrekt auszuzeichnen. Beachten Sie diesen Hinweis insbesondere dann, wenn Sie die Option `_hide-label` verwenden und so auf einen beschreibenden Text im Link verzichten würden.
 
 Beachten Sie, dass auch das letzte Element in der Breadcrumb-Komponente per Tab-Taste angesprungen werden kann, obwohl dort kein Link hinterlegt ist. Hierdurch kann auch dieses Element von Screenreader erreicht und vorgelesen werden.
 
@@ -88,10 +88,11 @@ Beachten Sie, dass auch das letzte Element in der Breadcrumb-Komponente per Tab-
 
 ## Properties
 
-| Property                  | Attribute     | Description                                                                  | Type                    | Default     |
-| ------------------------- | ------------- | ---------------------------------------------------------------------------- | ----------------------- | ----------- |
-| `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert. | `string`                | `undefined` |
-| `_links` _(required)_     | `_links`      | Setzt die Liste der darzustellenden Links.                                   | `LinkProps[]` \| `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.                                                                                                                                         | `BreadcrumbLinkProps[]` \| `string` | `undefined` |
 
 
 ## Dependencies

package/doc/button-group.md

@@ -45,7 +45,7 @@ Im einfachsten Fall besteht die **ButtonGroup**-Komponente aus einer Liste besch
 
 Eine Übersicht über die zur Verfügung stehenden Icons in KoliBri finden Sie [hier](https://icofont.com/icons).
 
-Über das Attribut **`_icon-only`** legen Sie fest, ob nur das Icon angezeigt werden soll. Der Inhalt des Attributs **`_label`** wird nicht mehr angezeigt.
+Über das Attribut **`_hide-label`** legen Sie fest, ob nur das Icon angezeigt werden soll. Der Inhalt des Attributs **`_label`** wird nicht mehr angezeigt.
 
 ### Ausgabe verschiedener Styles für Buttons in der ButtonGroup
 

package/doc/button-link.md

@@ -29,25 +29,26 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                                                                                                                                           | Type                                                                                                                                            | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man den Button 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`  | Gibt an, welchen aktuellen Auswahlstatus der Button 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 den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                                                                                      | `boolean` \| `undefined`                                                                                                                          | `undefined` |
-| `_ariaLabel`          | `_aria-label`    | Gibt einen beschreibenden Text für den Screenreader an. Damit die Sprachsteuerung von interaktiven Elementen funktioniert, muss der Aria-Label-Text mit dem Label-Text des Buttons beginnen.  - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_ariaSelected`       | `_aria-selected` | Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                                                                                                             | `boolean` \| `undefined`                                                                                                                          | `undefined` |
-| `_disabled`           | `_disabled`      | Gibt an, ob der Button deaktiviert ist.                                                                                                                                                                                                                                               | `boolean` \| `undefined`                                                                                                                          | `false`     |
-| `_icon`               | `_icon`          | Iconklasse (z.B.: "codicon codicon-home")                                                                                                                                                                                                                                             | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                                                            | `undefined` |
-| `_iconOnly`           | `_icon-only`     | Gibt an, ob nur das Icon angezeigt wird.                                                                                                                                                                                                                                              | `boolean` \| `undefined`                                                                                                                          | `false`     |
-| `_id`                 | `_id`            | Gibt die ID der Schaltfläche an. (Selection, Testing)                                                                                                                                                                                                                                 | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_label` _(required)_ | `_label`         | Setzt den sichtbaren Text des Elements.                                                                                                                                                                                                                                               | `string`                                                                                                                                        | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                                                                           | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, unknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
-| `_role`               | `_role`          | Gibt an, welche Role der Schalter hat.                                                                                                                                                                                                                                                | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                      | `undefined` |
-| `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                             | `number` \| `undefined`                                                                                                                           | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.                                                                                                                                                                                                         | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                           | `'top'`     |
-| `_type`               | `_type`          | Gibt an, welche Typ der Button hat.                                                                                                                                                                                                                                                   | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                  | `'button'`  |
-| `_value`              | --               | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                                                                                                      | `unknown`                                                                                                                                       | `undefined` |
+| 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`  | 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 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` |
+| `_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`          | 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` |
+| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `boolean` \| `string`                                                                                                                             | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                             | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, unknown>` \| `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'`     |
+| `_type`               | `_type`          | Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.                                                                                                                       | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                  | `'button'`  |
+| `_value`              | --               | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                        | `unknown`                                                                                                                                       | `undefined` |
 
 
 ## Dependencies