@public-ui/components 1.5.0-rc.13 → 1.5.0-rc.14

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { Alignment, AriaCurrent } from "./types/props";
+import { AriaCurrent, PropAlignment } from "./types/props";
 import { HeadingLevel } from "./types/heading-level";
 import { KoliBriAccordionCallbacks } from "./components/accordion/types";
 import { AlertType, AlertVariant, KoliBriAlertEventCallbacks } from "./components/alert/types";
@@ -38,7 +38,7 @@ import { KoliBriDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } fro
 import { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/component";
 import { CSSResize } from "./components/textarea/types";
 import { KoliBriToastEventCallbacks } from "./types/toast";
-export { Alignment, AriaCurrent } from "./types/props";
+export { AriaCurrent, PropAlignment } from "./types/props";
 export { HeadingLevel } from "./types/heading-level";
 export { KoliBriAccordionCallbacks } from "./components/accordion/types";
 export { AlertType, AlertVariant, KoliBriAlertEventCallbacks } from "./components/alert/types";
@@ -80,7 +80,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
     }
     interface KolAccordion {
         /**
@@ -203,7 +203,7 @@ export namespace Components {
           * Gibt an, ob das Icon links oder rechts dargestellt werden soll.
           * @deprecated
          */
-        "_iconAlign"?: Alignment;
+        "_iconAlign"?: PropAlignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -231,7 +231,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Gibt an, welche Typ der Button hat.
          */
@@ -309,7 +309,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Gibt an, welche Typ der Button hat.
          */
@@ -360,7 +360,7 @@ export namespace Components {
           * Gibt an, ob das Icon links oder rechts dargestellt werden soll.
           * @deprecated
          */
-        "_iconAlign"?: Alignment;
+        "_iconAlign"?: PropAlignment;
         /**
           * Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.
          */
@@ -388,7 +388,7 @@ export namespace Components {
         /**
           * Setzt die gewünschte Ausrichtung des Tooltips (`_icon-only`).
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Setzt den Typ der Schaltfläche.
          */
@@ -1529,7 +1529,7 @@ export namespace Components {
           * Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.
           * @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.
          */
-        "_iconAlign"?: Alignment;
+        "_iconAlign"?: PropAlignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -1572,7 +1572,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Gibt den Verwendungsfall des Links an.
           * @deprecated Das Styling sollte stets über CSS erfolgen.
@@ -1648,7 +1648,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Gibt an, welche Ausprägung der Link-Button hat.
          */
@@ -1723,7 +1723,7 @@ export namespace Components {
           * Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.
           * @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.
          */
-        "_iconAlign"?: Alignment;
+        "_iconAlign"?: PropAlignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -1766,7 +1766,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Gibt den Verwendungsfall des Links an.
           * @deprecated Das Styling sollte stets über CSS erfolgen.
@@ -1833,7 +1833,7 @@ export namespace Components {
          */
         "_orientation"?: Orientation;
         /**
-          * Setzt zusätzliche Klassen an das das <nav> umschließende <div>. (müssen im Theme existieren)
+          * Stellt verschiedene Varianten der Navigation zur Verfügung.
           * @deprecated This property is deprecated and will be removed in the next major version.
          */
         "_variant"?: KoliBriNavVariant;
@@ -1874,7 +1874,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Setzt die Gesamtanzahl der Seiten.
          */
@@ -1884,16 +1884,6 @@ export namespace Components {
          */
         "_variant"?: KoliBriButtonVariant;
     }
-    interface KolPopover {
-        /**
-          * Setzt die Ausrichtung des Popovers in Relation zum Triggerelement.
-         */
-        "_alignment"?: Alignment;
-        /**
-          * Öffnet/schließt das Popover.
-         */
-        "_open"?: boolean;
-    }
     interface KolProgress {
         /**
           * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.
@@ -2101,7 +2091,7 @@ export namespace Components {
         /**
           * Setzt die Position der Registrierkarten.
          */
-        "_tabsAlign"?: Alignment;
+        "_tabsAlign"?: PropAlignment;
     }
     interface KolTextarea {
         /**
@@ -2223,7 +2213,7 @@ export namespace Components {
         /**
           * Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.
          */
-        "_align"?: Alignment;
+        "_align"?: PropAlignment;
         /**
           * Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird.
          */
@@ -2505,12 +2495,6 @@ declare global {
         prototype: HTMLKolPaginationElement;
         new (): HTMLKolPaginationElement;
     };
-    interface HTMLKolPopoverElement extends Components.KolPopover, HTMLStencilElement {
-    }
-    var HTMLKolPopoverElement: {
-        prototype: HTMLKolPopoverElement;
-        new (): HTMLKolPopoverElement;
-    };
     interface HTMLKolProgressElement extends Components.KolProgress, HTMLStencilElement {
     }
     var HTMLKolProgressElement: {
@@ -2638,7 +2622,6 @@ declare global {
         "kol-modal": HTMLKolModalElement;
         "kol-nav": HTMLKolNavElement;
         "kol-pagination": HTMLKolPaginationElement;
-        "kol-popover": HTMLKolPopoverElement;
         "kol-progress": HTMLKolProgressElement;
         "kol-quote": HTMLKolQuoteElement;
         "kol-select": HTMLKolSelectElement;
@@ -2664,7 +2647,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
     }
     interface KolAccordion {
         /**
@@ -2787,7 +2770,7 @@ declare namespace LocalJSX {
           * Gibt an, ob das Icon links oder rechts dargestellt werden soll.
           * @deprecated
          */
-        "_iconAlign"?: Alignment;
+        "_iconAlign"?: PropAlignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -2815,7 +2798,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Gibt an, welche Typ der Button hat.
          */
@@ -2893,7 +2876,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Gibt an, welche Typ der Button hat.
          */
@@ -2944,7 +2927,7 @@ declare namespace LocalJSX {
           * Gibt an, ob das Icon links oder rechts dargestellt werden soll.
           * @deprecated
          */
-        "_iconAlign"?: Alignment;
+        "_iconAlign"?: PropAlignment;
         /**
           * Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.
          */
@@ -2972,7 +2955,7 @@ declare namespace LocalJSX {
         /**
           * Setzt die gewünschte Ausrichtung des Tooltips (`_icon-only`).
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Setzt den Typ der Schaltfläche.
          */
@@ -4113,7 +4096,7 @@ declare namespace LocalJSX {
           * Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.
           * @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.
          */
-        "_iconAlign"?: Alignment;
+        "_iconAlign"?: PropAlignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -4156,7 +4139,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Gibt den Verwendungsfall des Links an.
           * @deprecated Das Styling sollte stets über CSS erfolgen.
@@ -4232,7 +4215,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Gibt an, welche Ausprägung der Link-Button hat.
          */
@@ -4307,7 +4290,7 @@ declare namespace LocalJSX {
           * Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.
           * @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.
          */
-        "_iconAlign"?: Alignment;
+        "_iconAlign"?: PropAlignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -4350,7 +4333,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Gibt den Verwendungsfall des Links an.
           * @deprecated Das Styling sollte stets über CSS erfolgen.
@@ -4417,7 +4400,7 @@ declare namespace LocalJSX {
          */
         "_orientation"?: Orientation;
         /**
-          * Setzt zusätzliche Klassen an das das <nav> umschließende <div>. (müssen im Theme existieren)
+          * Stellt verschiedene Varianten der Navigation zur Verfügung.
           * @deprecated This property is deprecated and will be removed in the next major version.
          */
         "_variant"?: KoliBriNavVariant;
@@ -4458,7 +4441,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden.
          */
-        "_tooltipAlign"?: Alignment;
+        "_tooltipAlign"?: PropAlignment;
         /**
           * Setzt die Gesamtanzahl der Seiten.
          */
@@ -4468,16 +4451,6 @@ declare namespace LocalJSX {
          */
         "_variant"?: KoliBriButtonVariant;
     }
-    interface KolPopover {
-        /**
-          * Setzt die Ausrichtung des Popovers in Relation zum Triggerelement.
-         */
-        "_alignment"?: Alignment;
-        /**
-          * Öffnet/schließt das Popover.
-         */
-        "_open"?: boolean;
-    }
     interface KolProgress {
         /**
           * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.
@@ -4685,7 +4658,7 @@ declare namespace LocalJSX {
         /**
           * Setzt die Position der Registrierkarten.
          */
-        "_tabsAlign"?: Alignment;
+        "_tabsAlign"?: PropAlignment;
     }
     interface KolTextarea {
         /**
@@ -4807,7 +4780,7 @@ declare namespace LocalJSX {
         /**
           * Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.
          */
-        "_align"?: Alignment;
+        "_align"?: PropAlignment;
         /**
           * Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird.
          */
@@ -4866,7 +4839,6 @@ declare namespace LocalJSX {
         "kol-modal": KolModal;
         "kol-nav": KolNav;
         "kol-pagination": KolPagination;
-        "kol-popover": KolPopover;
         "kol-progress": KolProgress;
         "kol-quote": KolQuote;
         "kol-select": KolSelect;
@@ -4941,7 +4913,6 @@ declare module "@stencil/core" {
             "kol-modal": LocalJSX.KolModal & JSXBase.HTMLAttributes<HTMLKolModalElement>;
             "kol-nav": LocalJSX.KolNav & JSXBase.HTMLAttributes<HTMLKolNavElement>;
             "kol-pagination": LocalJSX.KolPagination & JSXBase.HTMLAttributes<HTMLKolPaginationElement>;
-            "kol-popover": LocalJSX.KolPopover & JSXBase.HTMLAttributes<HTMLKolPopoverElement>;
             "kol-progress": LocalJSX.KolProgress & JSXBase.HTMLAttributes<HTMLKolProgressElement>;
             "kol-quote": LocalJSX.KolQuote & JSXBase.HTMLAttributes<HTMLKolQuoteElement>;
             "kol-select": LocalJSX.KolSelect & JSXBase.HTMLAttributes<HTMLKolSelectElement>;

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

@@ -3,7 +3,7 @@ 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, PropStealth } from './props';
+import { PropAlignment, PropAriaCurrent, PropAriaExpanded, PropAriaSelected, PropDisabled, PropStealth } from './props';
 import { PropLabel } from './props/label';
 export type AlternativButtonLinkRole = 'button' | 'link' | 'tab';
 type RequiredButtonAndLinkProps = PropLabel;
@@ -11,11 +11,11 @@ type OptionalButtonAndLinkProps = {
   ariaControls: string;
   ariaLabel: string;
   icon: Stringified<KoliBriIconProp>;
-  iconAlign: Alignment;
+  iconAlign: PropAlignment;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
-  tooltipAlign: Alignment;
+  tooltipAlign: PropAlignment;
 } & PropAriaCurrent & PropAriaExpanded & PropAriaSelected & PropDisabled;
 type RequiredButtonAndLinkStates = {
   icon: KoliBriAllIcon;
@@ -24,11 +24,11 @@ type RequiredButtonAndLinkStates = {
 type OptionalButtonAndLinkStates = {
   ariaLabel: string;
   ariaControls: string;
-  iconAlign: Alignment;
+  iconAlign: PropAlignment;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
-  tooltipAlign: Alignment;
+  tooltipAlign: PropAlignment;
 } & PropAriaCurrent & PropAriaExpanded & PropAriaSelected & PropDisabled;
 export type KoliBriButtonType = 'button' | 'reset' | 'submit';
 export type KoliBriButtonVariant = 'primary' | 'secondary' | 'normal' | 'danger' | 'ghost' | 'custom';
@@ -98,5 +98,5 @@ export type OptionalLinkStates = OptionalButtonAndLinkStates & {
 export type LinkStates = Generic.Element.Members<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?: PropAlignment) => void;
 export {};

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

@@ -1,9 +1,4 @@
-import { Generic } from '@a11y-ui/core';
 type HorizontalAlignment = 'left' | 'right';
 type VerticalAlignment = 'top' | 'bottom';
-export type Alignment = HorizontalAlignment | VerticalAlignment;
-export type PropAlignment = {
-  alignment: Alignment;
-};
-export declare const validateAlignment: (component: Generic.Element.Component, value?: Alignment) => void;
+export type PropAlignment = HorizontalAlignment | VerticalAlignment;
 export {};

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 { PropAlignment } from '.';
 import { Stringified } from '../common';
 export type PropIcon = {
   icon: Stringified<KoliBriIconProp>;
 };
-export declare const mapIconProp2State: (icon: KoliBriIconProp, iconAlign?: Alignment) => KoliBriIconState;
+export declare const mapIconProp2State: (icon: KoliBriIconProp, iconAlign?: PropAlignment) => 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?: PropAlignment) => void;

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

@@ -1 +1 @@
-export{PropAdjustHeight,validateAdjustHeight}from"./adjust-height";export{PropAlert,validateAlert}from"./alert";export{Alignment,PropAlignment,validateAlignment}from"./alignment";export{PropChecked,validateChecked}from"./checked";export{AriaCurrent,PropAriaCurrent,validateAriaCurrent}from"./aria-current";export{PropAriaExpanded,validateAriaExpanded}from"./aria-expanded";export{PropAriaSelected,validateAriaSelected}from"./aria-selected";export{PropCollapsible,validateCollapsible}from"./collapsible";export{PropCompact,validateCompact}from"./compact";export{PropDisabled,validateDisabled}from"./disabled";export{PropHasCloser,validateHasCloser}from"./has-closer";export{PropHasCompactButton,validateHasCompactButton}from"./has-compact-button";export{PropHasCounter,validateHasCounter}from"./has-counter";export{PropHasFooter,validateHasFooter}from"./has-footer";export{PropHideLabel,validateHideLabel}from"./hide-label";export{PropIndeterminate,validateIndeterminate}from"./indeterminate";export{PropMultiple,validateMultiple}from"./multiple";export{PropOpen,validateOpen}from"./open";export{PropReadOnly,validateReadOnly}from"./read-only";export{PropRequired,validateRequired}from"./required";export{PropShow,validateShow}from"./show";export{PropStealth,validateStealth}from"./stealth";export{PropTouched,validateTouched}from"./touched";
+export{PropAdjustHeight,validateAdjustHeight}from"./adjust-height";export{PropAlert,validateAlert}from"./alert";export{PropAlignment}from"./alignment";export{PropChecked,validateChecked}from"./checked";export{AriaCurrent,PropAriaCurrent,validateAriaCurrent}from"./aria-current";export{PropAriaExpanded,validateAriaExpanded}from"./aria-expanded";export{PropAriaSelected,validateAriaSelected}from"./aria-selected";export{PropCollapsible,validateCollapsible}from"./collapsible";export{PropCompact,validateCompact}from"./compact";export{PropDisabled,validateDisabled}from"./disabled";export{PropHasCloser,validateHasCloser}from"./has-closer";export{PropHasCompactButton,validateHasCompactButton}from"./has-compact-button";export{PropHasCounter,validateHasCounter}from"./has-counter";export{PropHasFooter,validateHasFooter}from"./has-footer";export{PropHideLabel,validateHideLabel}from"./hide-label";export{PropIndeterminate,validateIndeterminate}from"./indeterminate";export{PropMultiple,validateMultiple}from"./multiple";export{PropOpen,validateOpen}from"./open";export{PropReadOnly,validateReadOnly}from"./read-only";export{PropRequired,validateRequired}from"./required";export{PropShow,validateShow}from"./show";export{PropStealth,validateStealth}from"./stealth";export{PropTouched,validateTouched}from"./touched";

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 { PropAlignment } from '../../types/props';
+export declare const validateAlignment: (component: Generic.Element.Component, propName: string, value?: PropAlignment) => void;

package/doc/badge.md

@@ -38,7 +38,7 @@ Ein Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objek
 Als String übergeben Sie die Iconklasse (z.B.: `_icon="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="Übersicht Codicons"></kol-lik>
+<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Übersicht Codicons"></kol-link>
 
 ### Nur Icon anzeigen
 
@@ -89,13 +89,13 @@ 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'`    |
+| `_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?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| 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` |
 
 
 ## 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="Codicons"></kol-lik> 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" _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.
 - **`_label`** übergibt den Text, der für dieses Element angezeigt werden soll.
 

package/doc/button.md

@@ -7,42 +7,33 @@
 ### Code
 
 ```html
-<kol-button class="clickme" _label="Primary" _variant="primary"></kol-button>
-<kol-button class="clickme" _label="Secondary" _variant="secondary"></kol-button>
-<kol-button class="clickme" _label="Normal" _variant="normal"></kol-button>
-<kol-button class="clickme" _label="Danger" _variant="danger"></kol-button>
-<kol-button class="clickme" _label="Ghost" _variant="ghost"></kol-button>
-<kol-button class="clickme" _label="Custom" _variant="custom" _custom-class="myClass"></kol-button>
-<script>
-	document.querySelectorAll('.clickme').forEach((b) => (b._on = { onClick: console.log }));
-</script>
+<kol-button _label="Primary" _variant="primary"></kol-button>
+<kol-button _label="Secondary" _variant="secondary"></kol-button>
+<kol-button _label="Normal" _variant="normal"></kol-button>
+<kol-button _label="Danger" _variant="danger"></kol-button>
+<kol-button _label="Ghost" _variant="ghost"></kol-button>
 ```
 
 ### Beispiel
 
 Default
 
-<div class="flex gap-2">
-  <kol-button class="clickme" _label="Primary" _variant="primary"></kol-button>
-  <kol-button class="clickme" _label="Secondary" _variant="secondary"></kol-button>
-  <kol-button class="clickme" _label="Normal" _variant="normal"></kol-button>
-  <kol-button class="clickme" _label="Danger" _variant="danger"></kol-button>
-  <kol-button class="clickme" _label="Ghost" _variant="ghost"></kol-button>
-  <kol-button class="clickme" _label="Custom" _variant="custom" _custom-class="myClass"></kol-button>
+<div class="flex flex-wrap gap-2">
+  <kol-button _label="Primary" _variant="primary"></kol-button>
+  <kol-button _label="Secondary" _variant="secondary"></kol-button>
+  <kol-button _label="Normal" _variant="normal"></kol-button>
+  <kol-button _label="Danger" _variant="danger"></kol-button>
+  <kol-button _label="Ghost" _variant="ghost"></kol-button>
 </div>
-<script>
-  document.querySelectorAll('.clickme').forEach(b => b._on = { onClick: console.log });
-</script>
 
 Disabled
 
-<div class="flex gap-2">
+<div class="flex flex-wrap gap-2">
   <kol-button _label="Primary" _variant="primary" _disabled></kol-button>
   <kol-button _label="Secondary" _variant="secondary" _disabled></kol-button>
   <kol-button _label="Normal" _variant="normal" _disabled></kol-button>
   <kol-button _label="Danger" _variant="danger" _disabled></kol-button>
   <kol-button _label="Ghost" _variant="ghost" _disabled></kol-button>
-  <kol-button _label="Custom" _variant="custom" _custom-class="myClass" _disabled></kol-button>
 </div>
 
 ## Verwendung

package/doc/icon.md

@@ -2,7 +2,7 @@
 
 Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut **`_icon`** gesteuert werden und erfolgt durch das Attribut **`_aria-label`** barrierefrei. Die Ausgabe erfolgt standardmäßig als _`inline`_-Element.
 
-Aktuell werden die Icons von <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Codicons"></kol-lik> unterstützt.
+Aktuell werden die Icons von <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Codicons"></kol-link> unterstützt.
 
 <kol-alert _heading="Hinweis" _type="info">Es ist wichtig, dass in der Rahmenseite (`index.html`) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.</kol-alert>