@public-ui/components 1.7.3 → 2.0.0-rc.1

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" | "close" | "of" | "characters" | "message" | "form-description" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "pagination" | "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" | "sort-descending" | "sort-ascending" | "sort-none" | "table-pagination-label" | "avatar-alt" | "toast-close-all">>;
+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" | "pagination" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "logo-description" | "open-link-in-tab" | "kolibri-logo" | "sort-descending" | "sort-ascending" | "sort-none" | "table-pagination-label" | "avatar-alt" | "toast-close-all">>;
 type Options = {
   count?: number;
   placeholders?: {

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

@@ -22,8 +22,6 @@ declare const _default: {
   'page-current': string;
   'page-selected': string;
   'page-per-site': string;
-  'nav-maximize': string;
-  'nav-minimize': string;
   'logo-description': string;
   'open-link-in-tab': string;
   'kolibri-logo': string;

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

@@ -22,8 +22,6 @@ declare const _default: {
   'page-current': string;
   'page-selected': string;
   'page-per-site': string;
-  'nav-maximize': string;
-  'nav-minimize': string;
   'logo-description': string;
   'open-link-in-tab': string;
   'kolibri-logo': string;

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

@@ -3,6 +3,16 @@ export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
 export interface ComponentOptions {
+    /**
+     * When set to `true` this component will be form-associated. See
+     * https://stenciljs.com/docs/next/form-associated documentation on how to
+     * build form-associated Stencil components that integrate into forms like
+     * native browser elements such as `<input>` and `<textarea>`.
+     *
+     * The {@link AttachInternals} decorator allows for access to the
+     * `ElementInternals` object to modify the associated form.
+     */
+    formAssociated?: boolean;
     /**
      * Tag name of the web component. Ideally, the tag name must be globally unique,
      * so it's recommended to choose an unique prefix for all your components within the same collection.
@@ -107,6 +117,9 @@ export interface EventOptions {
      */
     composed?: boolean;
 }
+export interface AttachInternalsDecorator {
+    (): PropertyDecorator;
+}
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
@@ -175,6 +188,12 @@ export declare const Element: ElementDecorator;
  * https://stenciljs.com/docs/events
  */
 export declare const Event: EventDecorator;
+/**
+ * If the `formAssociated` option is set in options passed to the
+ * `@Component()` decorator then this decorator may be used to get access to the
+ * `ElementInternals` instance associated with the component.
+ */
+export declare const AttachInternals: AttachInternalsDecorator;
 /**
  * The `Listen()` decorator is for listening DOM events, including the ones
  * dispatched from `@Events()`.

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

@@ -1,7 +1,7 @@
 import { Generic } from '@a11y-ui/core';
 import { PropHideLabel } from './props/hide-label';
 import { PropHref } from './props/href';
-import { IconsPropType, PropIcons } from './props/icons';
+import { PropIcons } from './props/icons';
 import { PropLabel } from './props/label';
 import { StencilUnknown } from './unknown';
 import { PropButtonCallbacks } from './props/button-callbacks';
@@ -12,7 +12,6 @@ type RequiredTextProps = PropLabel;
 type OptionalButtonOrLinkOrTextProps = PropHideLabel & {
   active: boolean;
   targetDescription: string;
-  icon: IconsPropType;
 } & PropIcons & PropLinkTarget;
 type OptionalButtonProps = OptionalButtonOrLinkOrTextProps & {
   disabled: boolean;

package/dist/types/types/input/control/number.d.ts

@@ -12,9 +12,7 @@ export type OptionalInputProps<T> = {
   error: string;
   hideLabel: boolean;
   hint: string;
-  icon: Stringified<KoliBriHorizontalIcons>;
   icons: Stringified<KoliBriHorizontalIcons>;
-  list: Stringified<string[]>;
   max: T;
   min: T;
   name: string;

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

@@ -10,11 +10,7 @@ export type ColorPair = {
   backgroundColor: string;
   foregroundColor: Stringified<CharacteristicColors>;
 };
-type DeprecatedColorPair = {
-  backgroundColor: string;
-  color: string;
-};
-export type PropColor = ColorPair | DeprecatedColorPair;
+export type PropColor = ColorPair;
 export declare const validateColor: (component: Generic.Element.Component, value?: Stringified<PropColor>, options?: WatchOptions) => void;
 export declare const handleColorChange: (value: unknown) => ColorPair;
 export {};

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

@@ -1,12 +1,10 @@
 import { Generic } from '@a11y-ui/core';
 import { Stringified } from '../common';
 import { KoliBriIconsProp, KoliBriIconsState } from '../icons';
-import { AlignPropType } from './align';
 export type IconsPropType = Stringified<KoliBriIconsProp>;
 export type PropIcons = {
   icons: IconsPropType;
 };
-export declare const mapIconProp2State: (icon: KoliBriIconsProp, iconAlign?: AlignPropType) => KoliBriIconsState;
+export declare const mapIconProp2State: (icon: KoliBriIconsProp) => KoliBriIconsState;
 export declare const isIcon: (value?: unknown) => boolean;
 export declare const validateIcons: (component: Generic.Element.Component, value?: IconsPropType) => void;
-export declare const watchIconAlign: (component: Generic.Element.Component, value?: AlignPropType) => void;

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

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

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

@@ -51,7 +51,6 @@ interface A11yColorContrast {
 }
 export declare const koliBriA11yColorContrast: (domNode: HTMLElement, a11yColorContrast?: A11yColorContrast) => A11yColorContrast;
 export declare const koliBriQuerySelectorColors: (selector: string, a11yColorContrast?: A11yColorContrast) => A11yColorContrast;
-export declare const scrollBySelector: (selector: string, document?: Document | HTMLElement | ShadowRoot) => void;
 export declare class KoliBriUtils {
   private static executionLock;
   private static cache;
@@ -62,13 +61,9 @@ type AriaCurrentEventType = {
 } & PropHref;
 export declare const ariaCurrentSubject: Subject<AriaCurrentEventType>;
 export declare class KoliBriDevHelper {
-  static readonly ariaCurrentSubject: Subject<AriaCurrentEventType>;
   static readonly patchTheme: (name: string, map: Generic.Theming.Map<string, string>) => string;
-  static readonly patchThemeTag: (themeName: string, tagName: "GLOBAL" | "PROPERTIES" | `${Uppercase<string>}-${Uppercase<string>}`, css: string) => void;
   static readonly querySelector: <T extends Element>(selector: string, node?: HTMLElement | ShadowRoot | Document | undefined) => T | null;
   static readonly querySelectorAll: <T extends Element>(selector: string, node?: HTMLElement | ShadowRoot | Document | undefined) => T[];
-  static readonly scrollByHTMLElement: (element: HTMLElement, parentElement?: HTMLElement | Window) => void;
-  static readonly scrollBySelector: (selector: string, document?: HTMLElement | ShadowRoot | Document | undefined) => void;
   static readonly stringifyJson: (value: unknown) => string;
 }
 export {};

package/doc/abbr.md

@@ -38,18 +38,17 @@ Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert sein
 
 ## Links und Referenzen
 
-- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _label="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property        | Attribute        | Description                                                                                                                                               | Type                                                  | Default     |
-| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------- |
-| `_label`        | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                        | `string` \| `undefined`                                 | `undefined` |
-| `_title`        | `_title`         | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an. | `string` \| `undefined`                                 | `undefined` |
-| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                 | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
+| Property              | Attribute        | Description                                                                                                        | Type                                                  | Default     |
+| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | ----------- |
+| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                              | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                          | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
 
 
 ## Slots

package/doc/accordion.md

@@ -11,7 +11,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 ```html
 <div class="grid gap-2">
 	<kol-accordion _label="Element 1">
-		<div slot="content">
+		<div>
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
 			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -19,7 +19,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 		</div>
 	</kol-accordion>
 	<kol-accordion _label="Element 2">
-		<div slot="content">
+		<div>
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
 			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -33,7 +33,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 
 <div class="grid gap-2">
 	<kol-accordion _label="Element 1">
-		<div slot="content">
+		<div>
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
 			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -41,7 +41,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 		</div>
 	</kol-accordion>
 	<kol-accordion _label="Element 2">
-		<div slot="content">
+		<div>
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
 			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -62,9 +62,9 @@ Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglic
 
 ### Inhalt des Accordion
 
-Der Hauptinhalt des Accordions wird über einen eigenen Slot übergeben.
+Der Hauptinhalt des Accordions wird über deb Slot übergeben.
 
-**`<div slot="content">Inhalt im Kopfbereich</div>`**
+**`<kol-accordion _label="Element 1">Accordion-Inhalt</kol-accordion>`**
 
 ### Accordion geöffnet anzeigen
 
@@ -103,29 +103,26 @@ Standardansicht gelegt.
 
 ## Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#accordion" _label="https://www.w3.org/TR/wai-aria-practices/#accordion" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#accordion" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                                               | Type                                                                                 | Default     |
-| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- |
-| `_heading` | `_heading` | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Gibt die Beschriftung der Komponente an. | `string` \| `undefined`                                                                | `undefined` |
-| `_label`   | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).        | `string` \| `undefined`                                                                | `undefined` |
-| `_level`   | `_level`   | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                         | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                                       | `1`         |
-| `_on`      | --         | Gibt die EventCallback-Funktionen an.                                                                                     | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, boolean>` \| `undefined; }` | `undefined` |
-| `_open`    | `_open`    | If set (to true) opens/expands the element, closes if not set (or set to false).                                          | `boolean` \| `undefined`                                                               | `false`     |
+| Property              | Attribute | Description                                                                                                        | Type                                                                                 | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | ----------- |
+| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                             | `undefined` |
+| `_level`              | `_level`  | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                                       | `1`         |
+| `_on`                 | --        | Gibt die EventCallback-Funktionen an.                                                                              | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, boolean>` \| `undefined; }` | `undefined` |
+| `_open`               | `_open`   | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean` \| `undefined`                                                               | `false`     |
 
 
 ## Slots
 
-| Slot        | Description                                                                                            |
-| ----------- | ------------------------------------------------------------------------------------------------------ |
-|             | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.                        |
-| `"content"` | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.                        |
-| `"header"`  | Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions. |
+| Slot | Description                                                                     |
+| ---- | ------------------------------------------------------------------------------- |
+|      | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions. |
 
 
 ## Dependencies

package/doc/alert.md

@@ -73,7 +73,7 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 
 ## Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#alert" _label="https://www.w3.org/TR/wai-aria-practices/#alert" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#alert" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 

package/doc/badge.md

@@ -32,17 +32,13 @@ Die Angabe der gewünschten Hintergrundfarbe erfolgt in hexadezimaler Schreibwei
 
 Die Textfarbe wird automatisch als Kontrastfarbe zur gewählten Hintergrundfarbe errechnet.
 
-### Icon
+### Icons
 
 Ein Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objekt.
 Als String übergeben Sie die Iconklasse (z.B.: `_icons="codicon codicon-home`), das Icon wird links vom Text angezeigt.
 Das Objekt ist vom Typ `KoliBriAllIcon`, kann also einen oder mehrere der Schlüssel `top`, `right`, `bottom` und `left` besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ `KoliBriCustomIcon`, welches aus `icon` (String, siehe oben) und `style` (optional, Styleobjekt) besteht.
 
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
-
-### Nur Icon anzeigen
-
-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.
+<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
 
 ### Schriftschnitt
 
@@ -87,15 +83,12 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 
 ## Properties
 
-| Property              | Attribute       | Description                                                                                                                                                                                                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Default     |
-| --------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_color`              | `_color`        | Defines the backgroundColor and foregroundColor.                                                                                                                                                                                                                                                                                             | `string` \| `undefined` \| `{ backgroundColor: string; color: string; }` \| `{ backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `'#000'`    |
-| `_hideLabel`          | `_hide-label`   | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Deprecated: ⚠️ We do not support the `_hide-label` property for the `kol-badge` element,   since it would not be accessible without visible labeling. A separate tooltip   is not planed, because a badge is not an interactive element. | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `false`     |
-| `_icon`               | `_icon`         | <span style="color:red">**[DEPRECATED]**</span> Use _icons.<br/><br/>                                                                                                                                                                                                                                                                        | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |
-| `_iconOnly`           | `_icon-only`    | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Deprecated: Hides the label and shows the description in a Tooltip instead.                                                                                                                                                                                         | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |
-| `_icons`              | `_icons`        | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                                                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |
-| `_label` _(required)_ | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
-| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                                                                                                                                                                                                       | `string` \| `undefined` \| `{ _label: string; } & { _tabIndex?: number` \| `undefined; _value?: Stringified<StencilUnknown>; _accessKey?: string` \| `undefined; _iconAlign?: AlignPropType` \| `undefined; _iconOnly?: boolean` \| `undefined; _icon?: IconsPropType` \| `undefined; _role?: AlternativeButtonLinkRolePropType` \| `undefined; _ariaControls?: string` \| `undefined; _ariaCurrent?: AriaCurrentPropType` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaLabel?: string` \| `undefined; _ariaSelected?: boolean` \| `undefined; _on?: ButtonCallbacksPropType<StencilUnknown>` \| `undefined; _type?: ButtonTypePropType` \| `undefined; _variant?: ButtonVariantPropType` \| `undefined; _customClass?: string` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _icons?: IconsPropType` \| `undefined; _id?: string` \| `undefined; _name?: string` \| `undefined; _syncValueBySelector?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
+| Property              | Attribute       | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default     |
+| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_color`              | `_color`        | Defines the backgroundColor and foregroundColor.                                                                   | `string` \| `undefined` \| `{ backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `'#000'`    |
+| `_icons`              | `_icons`        | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                    | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
+| `_label` _(required)_ | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only).                             | `string` \| `undefined` \| `{ _label: string; } & { _tabIndex?: number` \| `undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType` \| `undefined; _ariaControls?: string` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _on?: ButtonCallbacksPropType<StencilUnknown>` \| `undefined; _type?: ButtonTypePropType` \| `undefined; _variant?: ButtonVariantPropType` \| `undefined; _customClass?: string` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _icons?: IconsPropType` \| `undefined; _id?: string` \| `undefined; _name?: string` \| `undefined; _syncValueBySelector?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
 
 
 ## Dependencies

package/doc/breadcrumb.md

@@ -36,7 +36,7 @@ Das gesamte JSON-Objekt muss in eckigen Klammern an das Attribut **`_links`** ü
 <b>Folgende Eigenschaften stehen zur Verfügung:</b>
 
 - **`_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="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> zur Verfügung
+- **`_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" _target="_blank" _label="Codicons"></kol-link> zur Verfügung
 - **`_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.
 
@@ -44,13 +44,13 @@ Beispiel für ein JSON-Objekt, das an das Attribut **`_links`** übergeben wird:
 
 ```JSON
 [
-  { '_label': 'Startseite', '_href': '#/', '_icon': 'codicon codicon-home', '_hide-label': true },
+  { '_label': 'Startseite', '_href': '#/', '_icons': '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","hide-label": "true"},{"_label":"1. Unterseite","_href":"#/1_unterseite"},{"_label":"2. Unterseite","_href":"#/2_unterseite"}]'></kol-breadcrumb>
+<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/","_icons":"codicon codicon-home","hide-label": "true"},{"_label":"1. Unterseite","_href":"#/1_unterseite"},{"_label":"2. Unterseite","_href":"#/2_unterseite"}]'></kol-breadcrumb>
 
 ### Best practices
 
@@ -81,18 +81,17 @@ Beachten Sie, dass auch das letzte Element in der Breadcrumb-Komponente per Tab-
 
 ## Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _label="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute     | Description                                                                                                                                | Type                              | Default     |
-| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- | ----------- |
-| `_ariaLabel`          | `_aria-label` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Deprecated: Setzt die semantische Beschriftung der Komponente. | `string` \| `undefined`             | `undefined` |
-| `_label`              | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                         | `string` \| `undefined`             | `undefined` |
-| `_links` _(required)_ | `_links`      | Defines the list of links combined with their labels to render.                                                                            | `BreadcrumbLinkProps[]` \| `string` | `undefined` |
+| Property              | Attribute | Description                                                                                                        | Type                              | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------- | ----------- |
+| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                          | `undefined` |
+| `_links` _(required)_ | `_links`  | Defines the list of links combined with their labels to render.                                                    | `BreadcrumbLinkProps[]` \| `string` | `undefined` |
 
 
 ## Dependencies

package/doc/button-group.md

@@ -43,7 +43,7 @@ Im einfachsten Fall besteht die **ButtonGroup**-Komponente aus einer Liste besch
 
 Über das Attribut **`_icons="xxx"`** wird festgelegt, ob und welches Icon verwendet werden soll.
 
-Eine Übersicht über die zur Verfügung stehenden Icons in KoliBri finden Sie <kol-link _href="https://icofont.com/icons" _label="https://icofont.com/icons" _target="_blank" _label="hier"></kol-link>.
+Eine Übersicht über die zur Verfügung stehenden Icons in KoliBri finden Sie <kol-link _href="https://icofont.com/icons" _target="_blank" _label="hier"></kol-link>.
 
 Über das Attribut **`_hide-label`** legen Sie fest, ob nur das Icon angezeigt werden soll. Der Inhalt des Attributs **`_label`** wird nicht mehr angezeigt.
 
@@ -82,7 +82,7 @@ Bei Verwendung der **ButtonGroup**-Komponente sind keine besonderen Maßnahmen i
 
 ## Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#button" _label="https://www.w3.org/TR/wai-aria-practices/#button" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#button" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 

package/doc/button-link.md

@@ -29,28 +29,23 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                                                                                                                                                                                                                                                          | Type                                                                                                                                                   | Default     |
-| --------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `_accessKey`          | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                                                                                                                                                                                                                                              | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_ariaControls`       | `_aria-controls` | Defines which elements are controlled by this component. (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/>Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: `date`` \| ``location`` \| ``page`` \| ``step`` \| ``time`` \| ``true`. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`                                                                           | `undefined` |
-| `_ariaExpanded`       | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (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/>Deprecated: Setzt die semantische Beschriftung der Komponente.                                                                                                                                                                                                                                                           | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_ariaSelected`       | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                                                                                                                                                                                     | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
-| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                                                                                                                               | `boolean` \| `undefined`                                                                                                                                 | `false`     |
-| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                                                                                                                           | `boolean` \| `undefined`                                                                                                                                 | `false`     |
-| `_icon`               | `_icon`          | <span style="color:red">**[DEPRECATED]**</span> Use _icons.<br/><br/>                                                                                                                                                                                                                                                                                                                                | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                 | `undefined` |
-| `_iconOnly`           | `_icon-only`     | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Deprecated: Hides the label and shows the description in a Tooltip instead.                                                                                                                                                                                                                                                 | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
-| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                                                                                                                                                                                      | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                 | `undefined` |
-| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                                                                                                                                                                                                                                                            | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                                                                                                         | `string`                                                                                                                                               | `undefined` |
-| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                                                                                                                                                                                                                                        | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                                                                                                                                                                                          | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
-| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                                                                                                                                                                                                                                                  | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                             | `undefined` |
-| `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                                                                                                                     | `number` \| `undefined`                                                                                                                                  | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                                                                                                                            | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                  | `'top'`     |
-| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                                                                                                                                                                                                                                                                   | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                         | `'button'`  |
-| `_value`              | `_value`         | Defines the value that the button emits on click.                                                                                                                                                                                                                                                                                                                                                    | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                           | `undefined` |
+| Property              | Attribute        | Description                                                                                                                                                                      | Type                                                                                                                                                   | Default     |
+| --------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
+| `_ariaControls`       | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                              | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_ariaExpanded`       | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)          | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
+| `_ariaSelected`       | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
+| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                           | `boolean` \| `undefined`                                                                                                                                 | `false`     |
+| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                       | `boolean` \| `undefined`                                                                                                                                 | `false`     |
+| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                  | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                 | `undefined` |
+| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                                        | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                     | `string`                                                                                                                                               | `undefined` |
+| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                    | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                      | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
+| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                             | `undefined` |
+| `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                 | `number` \| `undefined`                                                                                                                                  | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                        | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                  | `'top'`     |
+| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                                               | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                         | `'button'`  |
+| `_value`              | `_value`         | Defines the value that the button emits on click.                                                                                                                                | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                           | `undefined` |
 
 
 ## Dependencies