@public-ui/components 1.5.0-rc.8 → 1.5.0

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" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "nav-maximize" | "nav-minimize" | "logo-description" | "open-link-in-tab" | "kolibri-logo">>;
+export declare const translations: Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, "Kol", "info" | "success" | "warning" | "error" | "of" | "characters" | "message" | "close" | "form-description" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "nav-maximize" | "nav-minimize" | "logo-description" | "open-link-in-tab" | "kolibri-logo">>;
 type Options = {
   count?: number;
   placeholders?: {

package/dist/types/index.d.ts

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

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

@@ -812,6 +812,7 @@ export declare namespace JSXBase {
         datetime?: string;
     }
     interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
+        onCancel?: (event: Event) => void;
         onClose?: (event: Event) => void;
         open?: boolean;
         returnValue?: string;

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

@@ -1,18 +1,16 @@
 import { Generic } from '@a11y-ui/core';
 import { KoliBriButtonCallbacks, LinkTarget } from './button-link';
-import { Stringified } from './common';
-import { KoliBriIconProp } from './icon';
-import { Label } from './props/label';
-type RequiredButtonProps = Label & {
+import { PropIcon } from './props/icon';
+import { PropLabel } from './props/label';
+type RequiredButtonProps = PropLabel & {
   on: KoliBriButtonCallbacks<unknown>;
 };
-type RequiredLinkProps = Label & {
+type RequiredLinkProps = PropLabel & {
   href: string;
 };
-type RequiredTextProps = Label;
-type OptionalButtonOrLinkOrTextProps = {
+type RequiredTextProps = PropLabel;
+type OptionalButtonOrLinkOrTextProps = PropIcon & {
   active: boolean;
-  icon: Stringified<KoliBriIconProp>;
   target: LinkTarget;
   targetDescription: string;
 };

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

@@ -2,46 +2,33 @@ import { Generic } from '@a11y-ui/core';
 import { Events } from '../enums/events';
 import { EventCallback, EventValueOrEventCallback } from './callbacks';
 import { Stringified } from './common';
-import { KoliBriCustomIcon, KoliBriIconProp } from './icon';
-import { Alignment } from './props/alignment';
-import { Label } from './props/label';
-export type AriaCurrent = boolean | 'page' | 'step' | 'location' | 'date' | 'time';
+import { KoliBriAllIcon, KoliBriIconProp } from './icon';
+import { Alignment, PropAriaCurrent, PropAriaExpanded, PropAriaSelected, PropDisabled, PropDownload, PropLabel, PropStealth } from './props';
 export type AlternativButtonLinkRole = 'button' | 'link' | 'tab';
-type RequiredButtonAndLinkProps = Label;
+type RequiredButtonAndLinkProps = PropLabel;
 type OptionalButtonAndLinkProps = {
   ariaControls: string;
-  ariaCurrent: AriaCurrent;
-  ariaExpanded: boolean;
   ariaLabel: string;
-  ariaSelected: boolean;
   icon: Stringified<KoliBriIconProp>;
   iconAlign: Alignment;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
   tooltipAlign: Alignment;
-};
+} & PropAriaCurrent & PropAriaExpanded & PropAriaSelected & PropDisabled;
 type RequiredButtonAndLinkStates = {
-  icon: {
-    top?: KoliBriCustomIcon;
-    right?: KoliBriCustomIcon;
-    bottom?: KoliBriCustomIcon;
-    left?: KoliBriCustomIcon;
-  };
+  icon: KoliBriAllIcon;
   label: string;
 };
 type OptionalButtonAndLinkStates = {
   ariaLabel: string;
   ariaControls: string;
-  ariaCurrent: AriaCurrent;
-  ariaExpanded: boolean;
-  ariaSelected: boolean;
   iconAlign: Alignment;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
   tooltipAlign: Alignment;
-};
+} & PropAriaCurrent & PropAriaExpanded & PropAriaSelected & PropDisabled;
 export type KoliBriButtonType = 'button' | 'reset' | 'submit';
 export type KoliBriButtonVariant = 'primary' | 'secondary' | 'normal' | 'danger' | 'ghost' | 'custom';
 export type KoliBriButtonCallbacks<T> = {
@@ -91,30 +78,24 @@ export type OptionalLinkProps = OptionalButtonAndLinkProps & {
   disabled: boolean;
   on: LinkOnCallbacks;
   selector: string;
-  stealth: boolean;
   target: LinkTarget;
   targetDescription: string;
   useCase: LinkUseCase;
-};
+} & PropDownload & PropStealth;
 export type LinkProps = Generic.Element.Members<RequiredLinkProps, OptionalLinkProps>;
 export type RequiredLinkStates = RequiredButtonAndLinkStates & {
   href: string;
 };
 export type OptionalLinkStates = OptionalButtonAndLinkStates & {
   ariaSelected: boolean;
-  disabled: boolean;
   on: LinkOnCallbacks;
   selector: string;
-  stealth: boolean;
   target: LinkTarget;
   targetDescription: string;
   useCase: LinkUseCase;
-};
+} & PropAriaSelected & PropDownload & PropStealth;
 export type LinkStates = Generic.Element.Members<RequiredLinkStates, OptionalLinkStates>;
 export type RequiredLinkButtonProps = RequiredLinkProps;
 export type OptionalLinkButtonProps = OptionalLinkProps & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;
-export type RequiredLinkButtonStates = KoliBriButtonVariantPropState;
-export type OptionalLinkButtonStates = KoliBriButtonCustomClassPropState;
-export type LinkButtonStates = Generic.Element.Members<RequiredLinkButtonStates, OptionalLinkButtonStates>;
 export declare const watchTooltipAlignment: (component: Generic.Element.Component, propName: string, value?: Alignment) => void;
 export {};

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

@@ -1,41 +1,18 @@
-export type KoliBriIconProp = AnyIconFontClass | KoliBriAllIcon;
 export type AnyIconFontClass = string;
 export type KoliBriCustomIcon = {
   icon: AnyIconFontClass;
   style?: Record<string, string>;
 };
+type IconOrIconClass = AnyIconFontClass | KoliBriCustomIcon;
 export type KoliBriHorizontalIcon = {
-  right: AnyIconFontClass | KoliBriCustomIcon;
-  left?: AnyIconFontClass | KoliBriCustomIcon;
-} | {
-  right?: AnyIconFontClass | KoliBriCustomIcon;
-  left: AnyIconFontClass | KoliBriCustomIcon;
-};
-type KoliBriAllIcon = {
-  top: AnyIconFontClass | KoliBriCustomIcon;
-  right?: AnyIconFontClass | KoliBriCustomIcon;
-  bottom?: AnyIconFontClass | KoliBriCustomIcon;
-  left?: AnyIconFontClass | KoliBriCustomIcon;
-} | {
-  top?: AnyIconFontClass | KoliBriCustomIcon;
-  right: AnyIconFontClass | KoliBriCustomIcon;
-  bottom?: AnyIconFontClass | KoliBriCustomIcon;
-  left?: AnyIconFontClass | KoliBriCustomIcon;
-} | {
-  top?: AnyIconFontClass | KoliBriCustomIcon;
-  right?: AnyIconFontClass | KoliBriCustomIcon;
-  bottom: AnyIconFontClass | KoliBriCustomIcon;
-  left?: AnyIconFontClass | KoliBriCustomIcon;
-} | {
-  top?: AnyIconFontClass | KoliBriCustomIcon;
-  right?: AnyIconFontClass | KoliBriCustomIcon;
-  bottom?: AnyIconFontClass | KoliBriCustomIcon;
-  left: AnyIconFontClass | KoliBriCustomIcon;
+  right?: IconOrIconClass;
+  left?: IconOrIconClass;
 };
-export type KoliBriIconState = {
-  top?: AnyIconFontClass | KoliBriCustomIcon;
-  right?: AnyIconFontClass | KoliBriCustomIcon;
-  bottom?: AnyIconFontClass | KoliBriCustomIcon;
-  left?: AnyIconFontClass | KoliBriCustomIcon;
+type KoliBriVerticalIcon = {
+  top?: IconOrIconClass;
+  bottom?: IconOrIconClass;
 };
+export type KoliBriAllIcon = KoliBriHorizontalIcon & KoliBriVerticalIcon;
+export type KoliBriIconProp = AnyIconFontClass | KoliBriAllIcon;
+export type KoliBriIconState = KoliBriAllIcon;
 export {};

package/dist/types/types/props/adjust-height.d.ts

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropAdjustHeight = {
+  adjustHeight: boolean;
+};
+export declare const validateAdjustHeight: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropAlert = {
+  alert: boolean;
+};
+export declare const validateAlert: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -1,4 +1,9 @@
+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 {};

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

@@ -0,0 +1,6 @@
+import { Generic } from '@a11y-ui/core';
+export type AriaCurrent = 'date' | 'location' | 'page' | 'step' | 'time' | boolean;
+export type PropAriaCurrent = {
+  ariaCurrent: AriaCurrent;
+};
+export declare const validateAriaCurrent: (component: Generic.Element.Component, value?: AriaCurrent) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropAriaExpanded = {
+  ariaExpanded: boolean;
+};
+export declare const validateAriaExpanded: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropAriaSelected = {
+  ariaSelected: boolean;
+};
+export declare const validateAriaSelected: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropChecked = {
+  checked: boolean;
+};
+export declare const validateChecked: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropCollapsible = {
+  collapsible: boolean;
+};
+export declare const validateCollapsible: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,20 @@
+import { Generic } from '@a11y-ui/core';
+import { WatchOptions } from '../../utils/prop.validators';
+import { Stringified } from '../common';
+type CharacteristicColors = {
+  primary: string;
+  secondary: string;
+  neutral: string;
+};
+export type ColorPair = {
+  backgroundColor: string;
+  foregroundColor: Stringified<CharacteristicColors>;
+};
+type DeprecatedColorPair = {
+  backgroundColor: string;
+  color: string;
+};
+export type PropColor = ColorPair | DeprecatedColorPair;
+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/compact.d.ts

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropCompact = {
+  compact: boolean;
+};
+export declare const validateCompact: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropDisabled = {
+  disabled: boolean;
+};
+export declare const validateDisabled: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropDownload = {
+  download?: boolean | string;
+};
+export declare const validateDownload: (component: Generic.Element.Component, value?: boolean | string) => void;

package/dist/types/types/props/has-closer.d.ts

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropHasCloser = {
+  hasCloser: boolean;
+};
+export declare const validateHasCloser: (component: Generic.Element.Component, value?: boolean) => void;

package/dist/types/types/props/has-compact-button.d.ts

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropHasCompactButton = {
+  hasCompactButton: boolean;
+};
+export declare const validateHasCompactButton: (component: Generic.Element.Component, value?: boolean) => void;

package/dist/types/types/props/has-counter.d.ts

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropHasCounter = {
+  hasCounter: boolean;
+};
+export declare const validateHasCounter: (component: Generic.Element.Component, value?: boolean) => void;

package/dist/types/types/props/has-footer.d.ts

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropHasFooter = {
+  hasFooter: boolean;
+};
+export declare const validateHasFooter: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropHideLabel = {
+  hideLabel: boolean;
+};
+export declare const validateHideLabel: (component: Generic.Element.Component, value?: boolean) => void;

package/dist/types/{utils/validators → types/props}/icon.d.ts

@@ -1,6 +1,10 @@
 import { Generic } from '@a11y-ui/core';
-import { KoliBriIconProp, KoliBriIconState } from '../../types/icon';
-import { Alignment } from '../../types/props/alignment';
+import { KoliBriIconProp, KoliBriIconState } from '../icon';
+import { Alignment } from '.';
+import { Stringified } from '../common';
+export type PropIcon = {
+  icon: Stringified<KoliBriIconProp>;
+};
 export declare const mapIconProp2State: (icon: KoliBriIconProp, iconAlign?: Alignment) => KoliBriIconState;
 export declare const isIcon: (value?: unknown) => boolean;
 export declare const validateIcon: (component: Generic.Element.Component, value?: KoliBriIconProp) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropIndeterminate = {
+  indeterminate: boolean;
+};
+export declare const validateIndeterminate: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1 @@
+export{PropAdjustHeight,validateAdjustHeight}from"./adjust-height";export{PropAlert,validateAlert}from"./alert";export{Alignment,PropAlignment,validateAlignment}from"./alignment";export{AriaCurrent,PropAriaCurrent,validateAriaCurrent}from"./aria-current";export{PropAriaExpanded,validateAriaExpanded}from"./aria-expanded";export{PropAriaSelected,validateAriaSelected}from"./aria-selected";export{PropChecked,validateChecked}from"./checked";export{PropCollapsible,validateCollapsible}from"./collapsible";export{PropCompact,validateCompact}from"./compact";export{PropDisabled,validateDisabled}from"./disabled";export{PropDownload,validateDownload}from"./download";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{PropLabel,validateLabel}from"./label";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/types/props/label.d.ts

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

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropMultiple = {
+  multiple: boolean;
+};
+export declare const validateMultiple: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropOpen = {
+  open: boolean;
+};
+export declare const validateOpen: (component: Generic.Element.Component, value?: boolean) => void;

package/dist/types/types/props/read-only.d.ts

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropReadOnly = {
+  readOnly: boolean;
+};
+export declare const validateReadOnly: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropRequired = {
+  required: boolean;
+};
+export declare const validateRequired: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,6 @@
+import { Generic } from '@a11y-ui/core';
+import { WatchBooleanOptions } from '../../utils/prop.validators';
+export type PropShow = {
+  show: boolean;
+};
+export declare const validateShow: (component: Generic.Element.Component, value?: boolean, hooks?: WatchBooleanOptions) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropStealth = {
+  stealth: boolean;
+};
+export declare const validateStealth: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropTouched = {
+  touched: boolean;
+};
+export declare const validateTouched: (component: Generic.Element.Component, value?: boolean) => void;

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

@@ -8,12 +8,12 @@ type SetStateHooks = {
   beforePatch?: Generic.Element.NextStateHooksCallback;
 };
 export declare const setState: <T>(component: Generic.Element.Component, propName: string, value?: T | null | undefined, hooks?: SetStateHooks) => void;
-type WatchOptions = {
+export type WatchOptions = {
   defaultValue?: unknown;
   hooks?: SetStateHooks;
   required?: boolean;
 };
-type WatchBooleanOptions = WatchOptions & {
+export type WatchBooleanOptions = WatchOptions & {
   defaultValue?: boolean | null;
 };
 export type WatchStringOptions = WatchOptions & {

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

@@ -1,4 +1,4 @@
-export declare const propergateFocus: <H extends HTMLElement, R extends HTMLElement>(host?: H | undefined, ref?: R | undefined) => void;
+export declare const propagateFocus: <H extends HTMLElement, R extends HTMLElement>(host?: H | undefined, ref?: R | undefined) => void;
 export declare const smartSetTimeout: (cb: () => void, delay?: number) => void;
 type ProzessEnv = 'development' | 'production' | 'test';
 export declare let processEnv: ProzessEnv;

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

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

package/doc/abbr.md

@@ -8,7 +8,10 @@ Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Kompone
 ### Code
 
 ```html
-<kol-abbr _title="Abkürzung" _tooltip-align="top"> Abbr </kol-abbr>
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
 ```
 
 ### Beispiel
@@ -22,7 +25,7 @@ Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Kompone
 
 ### Angabe der Beschreibung zur Abkürzung
 
-Die eigentliche Beschreibung wird über das Attribut **`_title`** übergeben.
+Der Begriff bzw. die Erklärung wird über das Attribut **`_title`** übergeben, die Abkürzung bzw. der erklärungswürdige Begriff kommt zwischen die Tags im HTML.
 
 ### Ausrichtung des Tooltip
 
@@ -34,7 +37,8 @@ Die eigentliche Beschreibung wird über das Attribut **`_title`** übergeben.
 
 ## Barrierefreiheit
 
-Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist. Mittels der KoliBri-Komponente zoomt der Tooltip proportional zu seinem Text mit und wird vorgelesen.
+Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist.
+Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert seine Größe beim Zoomen korrekt.
 
 ## Links und Referenzen
 
@@ -48,7 +52,7 @@ Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht
 | Property              | Attribute        | Description                                                                            | Type                                                  | Default     |
 | --------------------- | ---------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------- |
 | `_title` _(required)_ | `_title`         | Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.               | `string`                                              | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'`     |
+| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
 
 
 ## Dependencies
@@ -61,12 +65,8 @@ Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht
 ```mermaid
 graph TD;
   kol-abbr --> kol-tooltip
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
+  kol-tooltip --> kol-span-wc
   kol-span-wc --> kol-icon
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
   style kol-abbr fill:#f9f,stroke:#333,stroke-width:4px
 ```