@public-ui/components 1.6.0-rc.2 → 1.6.0-rc.20

package/dist/types/i18n.d.ts

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

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

@@ -26,5 +26,9 @@ declare const _default: {
   'logo-description': string;
   'open-link-in-tab': string;
   'kolibri-logo': string;
+  'sort-descending': string;
+  'sort-ascending': string;
+  'sort-none': string;
+  'avatar-alt': string;
 };
 export default _default;

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

@@ -26,5 +26,9 @@ declare const _default: {
   'logo-description': string;
   'open-link-in-tab': string;
   'kolibri-logo': string;
+  'sort-descending': string;
+  'sort-ascending': string;
+  'sort-none': string;
+  'avatar-alt': string;
 };
 export default _default;

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

@@ -1131,6 +1131,8 @@ export declare namespace JSXBase {
         summary?: string;
     }
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
+        autoComplete?: string;
+        autocomplete?: string;
         autoFocus?: boolean;
         autofocus?: boolean | string;
         cols?: number;
@@ -1287,7 +1289,7 @@ export declare namespace JSXBase {
         clipPathUnits?: number | string;
         'clip-rule'?: number | string;
         'color-interpolation'?: number | string;
-        'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit';
+        'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB';
         'color-profile'?: number | string;
         'color-rendering'?: number | string;
         contentScriptType?: number | string;

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

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

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

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

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

@@ -20,7 +20,7 @@ export type OptionalInputProps<T> = {
   on: InputTypeOnDefault;
   readOnly: boolean;
   required: boolean;
-  smartButton: ButtonProps;
+  smartButton: Stringified<ButtonProps>;
   step: number;
   tabIndex: number;
   touched: boolean;

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

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

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

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

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

@@ -3,4 +3,8 @@ export type AriaCurrent = 'date' | 'location' | 'page' | 'step' | 'time' | boole
 export type PropAriaCurrent = {
   ariaCurrent: AriaCurrent;
 };
+export type PropListenAriaCurrent = {
+  listenAriaCurrent: AriaCurrent;
+};
 export declare const validateAriaCurrent: (component: Generic.Element.Component, value?: AriaCurrent) => void;
+export declare const validateListenAriaCurrent: (component: Generic.Element.Component, value?: AriaCurrent) => void;

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

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

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

@@ -1,5 +1,3 @@
-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/hide-label.d.ts

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

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

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

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

@@ -1,7 +1,7 @@
 import { Generic } from '@a11y-ui/core';
-import { KoliBriIconProp, KoliBriIconState } from '../icon';
-import { Align } from '.';
 import { Stringified } from '../common';
+import { KoliBriIconProp, KoliBriIconState } from '../icon';
+import { Align } from './align';
 export type PropIcon = {
   icon: Stringified<KoliBriIconProp>;
 };

package/dist/types/types/props/image-source.d.ts

@@ -0,0 +1,4 @@
+import { Generic } from '@a11y-ui/core';
+import { WatchStringOptions } from '../../utils/prop.validators';
+export type ImageSourcePropType = string;
+export declare const validateImageSource: (component: Generic.Element.Component, value?: ImageSourcePropType, options?: WatchStringOptions) => void;

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

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

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

@@ -0,0 +1,15 @@
+import { Generic } from '@a11y-ui/core';
+import { WatchOptions } from '../../utils/prop.validators';
+import { Stringified } from '../common';
+import { Optgroup, Option } from '../input/types';
+import { W3CInputValue } from '../w3c';
+export type OptionsPropType = Stringified<Option<W3CInputValue>[]>;
+export type OptionsWithOptgroupPropType = Stringified<(Option<W3CInputValue> | Optgroup<W3CInputValue>)[]>;
+export type PropOptions = {
+  options: OptionsPropType;
+};
+export type PropOptionsWithOptgroup = {
+  options: OptionsWithOptgroupPropType;
+};
+export declare const validateOptions: (component: Generic.Element.Component, value: OptionsPropType | undefined, options?: WatchOptions) => void;
+export declare const validateOptionsWithOptgroup: (component: Generic.Element.Component, value: OptionsWithOptgroupPropType | undefined, options?: WatchOptions) => void;

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

@@ -0,0 +1,6 @@
+import { Generic } from '@a11y-ui/core';
+export type RowsPropType = number;
+export type PropRows = {
+  rows: RowsPropType;
+};
+export declare const validateRows: (component: Generic.Element.Component, value?: RowsPropType) => void;

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

@@ -0,0 +1,8 @@
+import { Generic } from '@a11y-ui/core';
+import { Stringified } from '../common';
+import { W3CInputValue } from '../w3c';
+export type SuggestionsPropType = Stringified<W3CInputValue[]>;
+export type PropSuggestions = {
+  suggestions: SuggestionsPropType;
+};
+export declare const validateSuggestions: (component: Generic.Element.Component, value?: SuggestionsPropType) => void;

package/dist/types/types/unknown.d.ts

@@ -0,0 +1 @@
+export type StencilUnknown = object | string | number | boolean | null | undefined;

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

@@ -1,9 +1,14 @@
-export declare const a11yHint: (msg: string) => void;
-export declare const deprecatedHint: (msg: string) => void;
-export declare const devHint: (msg: string) => void;
-export declare const devWarning: (msg: string) => void;
-export declare const featureHint: (msg: string, done?: boolean) => void;
-export declare const uiUxHint: (msg: string) => void;
+type HintOptions = {
+  details?: unknown[];
+  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;
+export declare const uiUxHint: (msg: string, options?: HintOptions) => void;
 export declare const a11yHintDisabled: () => void;
 export declare const a11yHintLabelingLandmarks: (value: unknown) => void;
 export declare const uiUxHintMillerscheZahl: (className: string, length?: number) => void;
+export {};

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

@@ -2,7 +2,7 @@ export declare const configKoliBri: (window: Window) => void;
 export declare const getWindow: () => Window;
 export declare const getDocument: () => Document;
 export declare const getDevMode: () => boolean;
-export declare const getExperimalMode: () => boolean;
+export declare const getExperimentalMode: () => boolean;
 export declare const getColorContrastAnalysis: () => boolean;
 type LogShieldOptions = {
   classifier?: string;

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

@@ -0,0 +1 @@
+export declare function dispatchKoliBriEvent<T>(target: EventTarget, type: string, detail?: T): boolean;

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

@@ -1,5 +1,8 @@
+import { Subject } from 'rxjs';
 import { Generic } from '@a11y-ui/core';
 import { Stringified } from '../types/common';
+import { AriaCurrent } from '../types/props/aria-current';
+import { PropHref } from '../types/props/href';
 export declare const objectObjectHandler: (value: unknown, cb: () => void) => void;
 export declare const emptyStringByArrayHandler: (value: unknown, cb: () => void) => void;
 export declare const setEventTarget: (event: Event, target?: HTMLElement) => void;
@@ -53,7 +56,12 @@ export declare class KoliBriUtils {
   private static cache;
   static queryHtmlElementColors(targetNode: HTMLElement, a11yColorContrast: A11yColorContrast, recursion?: boolean, log?: boolean): A11yColorContrast | null;
 }
+type AriaCurrentEventType = {
+  ariaCurrent: AriaCurrent;
+} & 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;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { SelectOption } from '../../types/input/types';
+export declare const validateInputSelectOptions: <T>(option: SelectOption<T>) => boolean;

package/doc/abbr.md

@@ -8,33 +8,29 @@ Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Kompone
 ### Code
 
 ```html
-<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>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
 ```
 
 ### Beispiel
 
-<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>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
 
 ## Verwendung
 
 ### Angabe der Beschreibung zur Abkürzung
 
-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.
+Der Begriff bzw. die Erklärung wird über das Attribut **`_label`** übergeben, die Abkürzung bzw. der erklärungswürdige Begriff kommt zwischen die Tags im HTML.
 
 ### Ausrichtung des Tooltip
 
 Über das Attribut **`_tooltip-align`** wird die Positionierung des ToolTip, relativ zur Abkürzung, festgelegt.
 
-<!--### Best practices
-
-### Anwendungsfälle-->
-
 ## Barrierefreiheit
 
 Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist.
@@ -42,17 +38,18 @@ Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert sein
 
 ## Links und Referenzen
 
-- https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr
+- <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>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                      | Type                                                  | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | ----------- |
-| `_title` _(required)_ | `_title`         | Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.                         | `string`                                              | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
+| Property        | Attribute        | Description                                                                                                                                   | Type                                                  | Default     |
+| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------- |
+| `_label`        | `_label`         | Defines the abbreviation title and tooltip content                                                                                            | `string` \| `undefined`                                 | `undefined` |
+| `_title`        | `_title`         | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an. | `string` \| `undefined`                                 | `undefined` |
+| `_tooltipAlign` | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                              | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
 
 
 ## Slots

package/doc/accordion.md

@@ -10,7 +10,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 
 ```html
 <div class="grid gap-2">
-	<kol-accordion _heading="Element 1">
+	<kol-accordion _label="Element 1">
 		<div slot="content">
 			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.
@@ -19,7 +19,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 		</div>
 		<div slot="header">Inhalt eines Header</div>
 	</kol-accordion>
-	<kol-accordion _heading="Element 2">
+	<kol-accordion _label="Element 2">
 		<div slot="header">Inhalt im Header</div>
 		<div slot="content">
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -35,7 +35,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 ### Beispiel
 
 <div class="grid gap-2">
-	<kol-accordion _heading="Element 1">
+	<kol-accordion _label="Element 1">
 		<div slot="content">
 			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.
@@ -44,7 +44,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 		</div>
 		<div slot="header">Inhalt eines Header</div>
 	</kol-accordion>
-	<kol-accordion _heading="Element 2">
+	<kol-accordion _label="Element 2">
 		<div slot="header">Inhalt im Header</div>
 		<div slot="content">
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -60,7 +60,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 
 ### Überschrift im Accordion-Tab
 
-Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut **`_heading`** übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten.
+Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut **`_label`** übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten.
 
 ### Überschriftenebene
 
@@ -115,19 +115,20 @@ Standardansicht gelegt.
 
 ## Links und Referenzen
 
-- https://www.w3.org/TR/wai-aria-practices/#accordion
+- <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>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property                | Attribute  | Description                                                                                                                                           | Type                                                                                 | Default     |
-| ----------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- |
-| `_heading` _(required)_ | `_heading` | Gibt die Beschriftung der Komponente an.                                                                                                              | `string`                                                                             | `undefined` |
-| `_level`                | `_level`   | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll. | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                                       | `1`         |
-| `_on`                   | --         | Gibt die EventCallback-Funktionen an.                                                                                                                 | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, boolean>` \| `undefined; }` | `undefined` |
-| `_open`                 | `_open`    | Gibt an, ob die Komponente entweder geöffnet oder geschlossen ist.                                                                                    | `boolean` \| `undefined`                                                               | `false`     |
+| Property   | Attribute  | Description                                                                                                                                           | Type                                                                                 | Default     |
+| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- |
+| `_heading` | `_heading` | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Gibt die Beschriftung der Komponente an.                                         | `string` \| `undefined`                                                                | `undefined` |
+| `_label`   | `_label`   | Defines the button label                                                                                                                              | `string` \| `undefined`                                                                | `undefined` |
+| `_level`   | `_level`   | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll. | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                                       | `1`         |
+| `_on`      | --         | Gibt die EventCallback-Funktionen an.                                                                                                                 | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, boolean>` \| `undefined; }` | `undefined` |
+| `_open`    | `_open`    | Gibt an, ob die Komponente entweder geöffnet oder geschlossen ist.                                                                                    | `boolean` \| `undefined`                                                               | `false`     |
 
 
 ## Slots