@public-ui/components 2.2.1 → 3.0.0-alpha.1

package/dist/types/components.d.ts

@@ -16,11 +16,7 @@ export namespace Components {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
-        "_label": LabelPropType;
-        /**
-          * Defines where to show the Tooltip preferably: top, right, bottom or left.
-         */
-        "_tooltipAlign"?: TooltipAlignPropType;
+        "_label"?: LabelPropType;
     }
     interface KolAccordion {
         /**
@@ -633,24 +629,6 @@ export namespace Components {
          */
         "_variant"?: HeadingVariantPropType;
     }
-    interface KolHeadingWc {
-        /**
-          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
-         */
-        "_label": LabelWithExpertSlotPropType;
-        /**
-          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
-         */
-        "_level"?: HeadingLevel;
-        /**
-          * Setzt den Text einer weiteren Überschrift, einen Level kleiner, unter der Ersten.
-         */
-        "_secondaryHeadline"?: string;
-        /**
-          * Defines which variant should be used for presentation.
-         */
-        "_variant"?: HeadingVariantPropType;
-    }
     interface KolIcon {
         /**
           * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
@@ -2599,29 +2577,6 @@ export namespace Components {
          */
         "_links": Stringified<LinkProps[]>;
     }
-    interface KolSpanWc {
-        /**
-          * Allows to use markdown in the label. Defaults to `false`.
-         */
-        "_allowMarkdown"?: boolean;
-        /**
-          * Defines the elements badge text.
-         */
-        "_badgeText"?: BadgeTextPropType;
-        /**
-          * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.
-          * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.
-         */
-        "_hideLabel"?: boolean;
-        /**
-          * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
-         */
-        "_icons"?: Stringified<KoliBriIconsProp>;
-        /**
-          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
-         */
-        "_label": LabelWithExpertSlotPropType;
-    }
     interface KolSpin {
         /**
           * Makes the element show up.
@@ -3238,12 +3193,6 @@ declare global {
         prototype: HTMLKolHeadingElement;
         new (): HTMLKolHeadingElement;
     };
-    interface HTMLKolHeadingWcElement extends Components.KolHeadingWc, HTMLStencilElement {
-    }
-    var HTMLKolHeadingWcElement: {
-        prototype: HTMLKolHeadingWcElement;
-        new (): HTMLKolHeadingWcElement;
-    };
     interface HTMLKolIconElement extends Components.KolIcon, HTMLStencilElement {
     }
     var HTMLKolIconElement: {
@@ -3436,12 +3385,6 @@ declare global {
         prototype: HTMLKolSkipNavElement;
         new (): HTMLKolSkipNavElement;
     };
-    interface HTMLKolSpanWcElement extends Components.KolSpanWc, HTMLStencilElement {
-    }
-    var HTMLKolSpanWcElement: {
-        prototype: HTMLKolSpanWcElement;
-        new (): HTMLKolSpanWcElement;
-    };
     interface HTMLKolSpinElement extends Components.KolSpin, HTMLStencilElement {
     }
     var HTMLKolSpinElement: {
@@ -3573,7 +3516,6 @@ declare global {
         "kol-drawer": HTMLKolDrawerElement;
         "kol-form": HTMLKolFormElement;
         "kol-heading": HTMLKolHeadingElement;
-        "kol-heading-wc": HTMLKolHeadingWcElement;
         "kol-icon": HTMLKolIconElement;
         "kol-image": HTMLKolImageElement;
         "kol-indented-text": HTMLKolIndentedTextElement;
@@ -3604,7 +3546,6 @@ declare global {
         "kol-select": HTMLKolSelectElement;
         "kol-single-select": HTMLKolSingleSelectElement;
         "kol-skip-nav": HTMLKolSkipNavElement;
-        "kol-span-wc": HTMLKolSpanWcElement;
         "kol-spin": HTMLKolSpinElement;
         "kol-split-button": HTMLKolSplitButtonElement;
         "kol-symbol": HTMLKolSymbolElement;
@@ -3630,11 +3571,7 @@ declare namespace LocalJSX {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
-        "_label": LabelPropType;
-        /**
-          * Defines where to show the Tooltip preferably: top, right, bottom or left.
-         */
-        "_tooltipAlign"?: TooltipAlignPropType;
+        "_label"?: LabelPropType;
     }
     interface KolAccordion {
         /**
@@ -4203,24 +4140,6 @@ declare namespace LocalJSX {
          */
         "_variant"?: HeadingVariantPropType;
     }
-    interface KolHeadingWc {
-        /**
-          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
-         */
-        "_label": LabelWithExpertSlotPropType;
-        /**
-          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
-         */
-        "_level"?: HeadingLevel;
-        /**
-          * Setzt den Text einer weiteren Überschrift, einen Level kleiner, unter der Ersten.
-         */
-        "_secondaryHeadline"?: string;
-        /**
-          * Defines which variant should be used for presentation.
-         */
-        "_variant"?: HeadingVariantPropType;
-    }
     interface KolIcon {
         /**
           * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
@@ -6034,29 +5953,6 @@ declare namespace LocalJSX {
          */
         "_links": Stringified<LinkProps[]>;
     }
-    interface KolSpanWc {
-        /**
-          * Allows to use markdown in the label. Defaults to `false`.
-         */
-        "_allowMarkdown"?: boolean;
-        /**
-          * Defines the elements badge text.
-         */
-        "_badgeText"?: BadgeTextPropType;
-        /**
-          * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.
-          * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.
-         */
-        "_hideLabel"?: boolean;
-        /**
-          * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
-         */
-        "_icons"?: Stringified<KoliBriIconsProp>;
-        /**
-          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
-         */
-        "_label": LabelWithExpertSlotPropType;
-    }
     interface KolSpin {
         /**
           * Makes the element show up.
@@ -6548,7 +6444,6 @@ declare namespace LocalJSX {
         "kol-drawer": KolDrawer;
         "kol-form": KolForm;
         "kol-heading": KolHeading;
-        "kol-heading-wc": KolHeadingWc;
         "kol-icon": KolIcon;
         "kol-image": KolImage;
         "kol-indented-text": KolIndentedText;
@@ -6579,7 +6474,6 @@ declare namespace LocalJSX {
         "kol-select": KolSelect;
         "kol-single-select": KolSingleSelect;
         "kol-skip-nav": KolSkipNav;
-        "kol-span-wc": KolSpanWc;
         "kol-spin": KolSpin;
         "kol-split-button": KolSplitButton;
         "kol-symbol": KolSymbol;
@@ -6626,7 +6520,6 @@ declare module "@stencil/core" {
             "kol-drawer": LocalJSX.KolDrawer & JSXBase.HTMLAttributes<HTMLKolDrawerElement>;
             "kol-form": LocalJSX.KolForm & JSXBase.HTMLAttributes<HTMLKolFormElement>;
             "kol-heading": LocalJSX.KolHeading & JSXBase.HTMLAttributes<HTMLKolHeadingElement>;
-            "kol-heading-wc": LocalJSX.KolHeadingWc & JSXBase.HTMLAttributes<HTMLKolHeadingWcElement>;
             "kol-icon": LocalJSX.KolIcon & JSXBase.HTMLAttributes<HTMLKolIconElement>;
             "kol-image": LocalJSX.KolImage & JSXBase.HTMLAttributes<HTMLKolImageElement>;
             /**
@@ -6669,7 +6562,6 @@ declare module "@stencil/core" {
             "kol-select": LocalJSX.KolSelect & JSXBase.HTMLAttributes<HTMLKolSelectElement>;
             "kol-single-select": LocalJSX.KolSingleSelect & JSXBase.HTMLAttributes<HTMLKolSingleSelectElement>;
             "kol-skip-nav": LocalJSX.KolSkipNav & JSXBase.HTMLAttributes<HTMLKolSkipNavElement>;
-            "kol-span-wc": LocalJSX.KolSpanWc & JSXBase.HTMLAttributes<HTMLKolSpanWcElement>;
             "kol-spin": LocalJSX.KolSpin & JSXBase.HTMLAttributes<HTMLKolSpinElement>;
             "kol-split-button": LocalJSX.KolSplitButton & JSXBase.HTMLAttributes<HTMLKolSplitButtonElement>;
             "kol-symbol": LocalJSX.KolSymbol & JSXBase.HTMLAttributes<HTMLKolSymbolElement>;

package/dist/types/core/component-names.d.ts

@@ -17,7 +17,6 @@ export declare let KolDetailsTag: "kol-details";
 export declare let KolDrawerTag: "kol-drawer";
 export declare let KolFormTag: "kol-form";
 export declare let KolHeadingTag: "kol-heading";
-export declare let KolHeadingWcTag: "kol-heading-wc";
 export declare let KolIconTag: "kol-icon";
 export declare let KolImageTag: "kol-image";
 export declare let KolIndentedTextTag: "kol-indented-text";
@@ -48,7 +47,6 @@ export declare let KolQuoteTag: "kol-quote";
 export declare let KolSelectTag: "kol-select";
 export declare let KolSingleSelectTag: "kol-single-select";
 export declare let KolSkipNavTag: "kol-skip-nav";
-export declare let KolSpanWcTag: "kol-span-wc";
 export declare let KolSpinTag: "kol-spin";
 export declare let KolSplitButtonTag: "kol-split-button";
 export declare let KolSymbolTag: "kol-symbol";

package/dist/types/functional-components/Alert/Alert.d.ts

@@ -1,6 +1,6 @@
 import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
 import type { JSXBase } from '../../stencil-public-runtime';
-import type { InternalAlertProps } from '../../schema';
+import { type InternalAlertProps } from '../../schema';
 export type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> & Partial<Omit<InternalAlertProps, 'on'>> & {
     onCloserClick?: () => void;
     onAlertTimeout?: () => void;

package/dist/types/functional-components/Collapsible/Collapsible.d.ts

@@ -11,7 +11,7 @@ export type CollapsibleProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> &
     level?: HeadingLevel;
     label: string;
     HeadingProps?: {
-        ref?: ((elm?: HTMLKolHeadingWcElement | undefined) => void) | undefined;
+        ref?: ((elm?: HTMLElement | undefined) => void) | undefined;
         class?: ClassType;
     };
     HeadingButtonProps?: {

package/dist/types/functional-components/Heading/Heading.d.ts

@@ -0,0 +1,21 @@
+import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
+import type { JSXBase } from '../../stencil-public-runtime';
+import type { HeadingLevel, HeadingVariantPropType } from '../../schema';
+type HGroupProps = JSXBase.HTMLAttributes<HTMLElement>;
+type BaseProps = JSXBase.HTMLAttributes<HTMLHeadingElement | HTMLElement> & {
+    level?: HeadingLevel;
+};
+type HeadlineProps = BaseProps & {
+    variant?: HeadingVariantPropType;
+};
+export type HeadingProps = HeadlineProps & {
+    secondaryHeadline?: string;
+    HeadingGroupProps?: HGroupProps;
+    SecondaryHeadlineProps?: JSXBase.HTMLAttributes<HTMLHeadingElement | HTMLElement>;
+};
+type HeadlineTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong';
+type SubHeadlineTag = 'span' | HeadlineTag;
+export declare function getHeadlineTag(level: HeadingLevel | number): HeadlineTag;
+export declare function getSubHeadlineTag(level: HeadingLevel | number): SubHeadlineTag;
+declare const KolHeadingFc: FC<HeadingProps>;
+export default KolHeadingFc;

package/dist/types/functional-components/Heading/index.d.ts

@@ -0,0 +1 @@
+export{default}from"./Heading";export*from"./Heading";

package/dist/types/functional-components/Heading/test/Heading.test.d.ts

@@ -0,0 +1 @@
+export{};

package/dist/types/functional-components/Heading/test/snapshot.test.d.ts

@@ -0,0 +1 @@
+export{};

package/dist/types/functional-components/Icon/Icon.d.ts

@@ -0,0 +1,11 @@
+import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
+import type { InternalIconProps } from '../../schema';
+export type IconProps = InternalIconProps & {
+    class?: string;
+    style?: {
+        [key: string]: string;
+    };
+    onClick?: (event: MouseEvent) => void;
+};
+declare const KolIconFc: FC<IconProps>;
+export default KolIconFc;

package/dist/types/functional-components/Icon/index.d.ts

@@ -0,0 +1 @@
+export{default}from"./Icon";export*from"./Icon";

package/dist/types/functional-components/InternalUnderlinedBadgeText/InternalUnderlinedBadgeText.d.ts

@@ -0,0 +1,8 @@
+import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
+import type { BadgeTextPropType } from '../../schema';
+type InternalUnderlinedBadgeTextProps = {
+    badgeText: BadgeTextPropType;
+    label: string;
+};
+declare const KolInternalUnderlinedBadgeTextFc: FC<InternalUnderlinedBadgeTextProps>;
+export default KolInternalUnderlinedBadgeTextFc;

package/dist/types/functional-components/InternalUnderlinedBadgeText/index.d.ts

@@ -0,0 +1 @@
+export{default}from"./InternalUnderlinedBadgeText";export*from"./InternalUnderlinedBadgeText";

package/dist/types/functional-components/Span/IconHelper.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
+import type { KoliBriCustomIcon } from '../../schema';
+declare const IconHelper: FC<KoliBriCustomIcon & {
+    class?: string;
+}>;
+export default IconHelper;

package/dist/types/functional-components/Span/LabelHelper.d.ts

@@ -0,0 +1,9 @@
+import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
+declare const LabelHelper: FC<{
+    label: string;
+    hideLabel?: boolean;
+    badgeText?: string;
+    hideExpertSlot?: boolean;
+    allowMarkdown?: boolean;
+}>;
+export default LabelHelper;

package/dist/types/functional-components/Span/Span.d.ts

@@ -0,0 +1,12 @@
+import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
+import type { JSXBase } from '../../stencil-public-runtime';
+import { type BadgeTextPropType, type HideLabelPropType, type KoliBriIconsProp, type LabelWithExpertSlotPropType } from '../../schema';
+export type SpanProps = JSXBase.HTMLAttributes<HTMLSpanElement> & {
+    label: LabelWithExpertSlotPropType;
+    badgeText?: BadgeTextPropType;
+    allowMarkdown?: boolean;
+    icons?: KoliBriIconsProp;
+    hideLabel?: HideLabelPropType;
+};
+declare const KolSpanFc: FC<SpanProps>;
+export default KolSpanFc;

package/dist/types/functional-components/Span/SpanCoreHelper.d.ts

@@ -0,0 +1,9 @@
+import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
+declare const KolSpanCoreHelperFc: FC<{
+    label: string;
+    hideLabel?: boolean;
+    badgeText?: string;
+    hideExpertSlot?: boolean;
+    allowMarkdown?: boolean;
+}>;
+export default KolSpanCoreHelperFc;

package/dist/types/functional-components/Span/index.d.ts

@@ -0,0 +1 @@
+export{default}from"./Span";export*from"./Span";

package/dist/types/functional-components/Span/test/snapshot.test.d.ts

@@ -0,0 +1 @@
+export{};

package/dist/types/functional-components/ToastItem/ToastItem.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
+import type { JSXBase } from '../../stencil-public-runtime';
+import { type Toast } from '../../schema';
+type ToastItemProps = JSXBase.HTMLAttributes<HTMLDivElement> & {
+    status: 'adding' | 'settled' | 'removing';
+    toast: Toast;
+    onClose: () => void;
+};
+declare const ToastItemFc: FC<ToastItemProps>;
+export default ToastItemFc;

package/dist/types/functional-components/ToastItem/index.d.ts

@@ -0,0 +1 @@
+export{default}from"./ToastItem";

package/dist/types/functional-components/ToastItem/tests/snapshot.test.d.ts

@@ -0,0 +1 @@
+export{};

package/dist/types/functional-components/index.d.ts

@@ -1 +1 @@
-export{default as KolAlertFc}from"./Alert";export{default as KolCollapsibleFc}from"./Collapsible";export{default as KolFormFieldMsgFc}from"./FormFieldMsg";
+export{default as KolAlertFc}from"./Alert";export{default as KolCollapsibleFc}from"./Collapsible";export{default as KolFormFieldMsgFc}from"./FormFieldMsg";export{default as KolHeadingFc}from"./Heading";export{default as KolIconFc}from"./Icon";export{default as KolSpanFc}from"./Span";export{default as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText";export{default as KolToastItemFc}from"./ToastItem";

package/dist/types/schema/components/abbr.d.ts

@@ -1,7 +1,7 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropLabel, PropTooltipAlign } from '../props';
-type RequiredProps = PropLabel;
-type OptionalProps = PropTooltipAlign;
+import type { PropLabel } from '../props';
+type RequiredProps = NonNullable<unknown>;
+type OptionalProps = PropLabel;
 type RequiredStates = RequiredProps & OptionalProps;
 type OptionalStates = NonNullable<unknown>;
 export type AbbrProps = Generic.Element.Members<RequiredProps, OptionalProps>;

package/dist/types/schema/components/badge.d.ts

@@ -1,16 +1,18 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { ColorPair, PropColor, PropIcons, PropLabel } from '../props';
-import type { Stringified } from '../types';
+import type { ColorPair, PropColor, PropLabel } from '../props';
+import type { KoliBriIconsProp, Stringified } from '../types';
 import type { ButtonProps } from './button';
 type RequiredProps = PropLabel;
 type OptionalProps = {
+    icons: Stringified<KoliBriIconsProp>;
     color: Stringified<PropColor>;
     smartButton: Stringified<ButtonProps>;
-} & PropIcons;
+};
 type RequiredStates = {
     color: ColorPair;
 };
 type OptionalStates = {
+    icons: KoliBriIconsProp;
     smartButton: ButtonProps;
 };
 type RequiredWatchers = RequiredStates;

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

@@ -9,4 +9,5 @@ type OptionalStates = OptionalProps;
 export type IconProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type IconStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type IconAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
+export type InternalIconProps = RequiredProps & OptionalProps;
 export {};

package/dist/types/schema/components/textarea.d.ts

@@ -1,7 +1,7 @@
 import type { Generic } from 'adopted-style-sheets';
 import type { MsgPropType, PropAccessKey, PropAdjustHeight, PropDisabled, PropHasCounter, PropHideError, PropHideLabel, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropReadOnly, PropRequired, PropRows, PropShortKey, PropSpellCheck, PropSyncValueBySelector, PropTouched } from '../props';
 import type { InputTypeOnDefault, KoliBriHorizontalIcons, Stringified } from '../types';
-export declare const cssResizeOptions: readonly ["both", "horizontal", "vertical", "none"];
+export declare const cssResizeOptions: readonly ["vertical", "none"];
 export type CSSResize = (typeof cssResizeOptions)[number];
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {

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

@@ -4,7 +4,7 @@ export type KoliBriCustomIcon = {
     label?: string;
     style?: Record<string, string>;
 };
-type IconOrIconClass = AnyIconFontClass | KoliBriCustomIcon;
+export type IconOrIconClass = AnyIconFontClass | KoliBriCustomIcon;
 export type KoliBriHorizontalIcons = {
     right?: IconOrIconClass;
     left?: IconOrIconClass;

package/doc/abbr.md

@@ -1,61 +1,20 @@
-# Abbr
-
-Die **Abbr**-Komponente implementiert den HTML-Tag `abbr`, wobei hier jedoch der Tooltip barrierefrei ist.
-Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Komponente angezeigt und vorgelesen.
-
-## Konstruktion
-
-### Code
-
-```html
-<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 _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 **`_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.
-
-## Barrierefreiheit
-
-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
-
-- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _target="_blank"></kol-link>
+# kol-abbr
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                        | Type                                                  | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | ----------- |
-| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                              | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                          | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
+| Property | Attribute | Description                                                                                                        | Type                  | Default     |
+| -------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |
+| `_label` | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` \| `undefined` | `undefined` |
 
 
 ## Slots
 
-| Slot | Description                             |
-| ---- | --------------------------------------- |
-|      | Der Begriff, der erläutert werden soll. |
+| Slot | Description                    |
+| ---- | ------------------------------ |
+|      | The abbreviation (short form). |
 
 
 ----------------------------------------------

package/doc/accordion.md

@@ -1,111 +1,4 @@
-# Accordion
-
-Synonyme: Collapse
-
-Die **Accordion**-Komponente ist ein Aufklapp-Menü. Klickt man auf den Kopfbereich, bestehend aus Icon und Überschrift, klappt der Inhalt mit zusätzlichen Informationen auf. Somit ist es ein interaktives Navigationselement, welches dazu dient, umfangreiche Inhalte platzsparend darzustellen.
-
-Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zugeordnete Inhalte angezeigt oder verborgen werden sollen. Sie erlauben umfangreichere Detailinformationen zu einem Oberbegriff, als es aus Gründen der Übersichtlichkeit eigentlich sinnvoll wäre. Sie überlassen es den Besucher:innen selbst, ob sie sich diese Informationen anzeigen lassen möchten.
-
-## Konstruktion
-
-### Code
-
-```html
-<div class="grid gap-2">
-	<kol-accordion _label="Element 1">
-		<div>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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.
-		</div>
-	</kol-accordion>
-	<kol-accordion _label="Element 2">
-		<div>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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.
-		</div>
-	</kol-accordion>
-</div>
-```
-
-### Beispiel
-
-<div class="grid gap-2">
-	<kol-accordion _label="Element 1">
-		<div>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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.
-		</div>
-	</kol-accordion>
-	<kol-accordion _label="Element 2">
-		<div>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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.
-		</div>
-	</kol-accordion>
-</div>
-
-## Verwendung
-
-### Überschrift im Accordion-Tab
-
-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
-
-Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
-
-### Inhalt des Accordion
-
-Der Hauptinhalt des Accordions wird über deb Slot übergeben.
-
-**`<kol-accordion _label="Element 1">Accordion-Inhalt</kol-accordion>`**
-
-### Accordion geöffnet anzeigen
-
-Standardmäßig wird das Accordion nach dem Laden der Seite im geschlossenen Zustand angezeigt. Soll das Accordion geöffnet angezeigt werden, setzen Sie das Attribut **\_open** zusätzlich ein.
-
-### Best practices
-
-- Verwenden Sie ein Accordion, um lange Textabschnitte unter einem thematischen Oberbegriff zusammenzufassen
-- Verwenden Sie ein Accordion, um weniger wichtige Informationen, als Ergänzung zu Hauptinformationen, zur Verfügung zu stellen.
-- Mit einem Accordion können Sie die Länge Ihrer Webseite deutlich reduzieren und stellen gleichzeitig die Erreichbarkeit aller Informationen für die Nutzer:innen sicher.
-- Verwenden Sie eindeutige Überschriften, um die Nutzer:innen auf die weiteren Informationen des Accordions hinzuweisen.
-- Vermeiden Sie, wichtige `Call-To-Action`-Elemente innerhalb eines Accordions zu verbergen.
-- Lassen Sie Fehlermeldungen nicht innerhalb des Accordions anzeigen, um zu vermeiden, dass Nutzer:innen wichtige Informationen übersehen.
-- Verwenden Sie ein Accordion nicht als Auswahl-Element für Nutzer:innen.
-- Verwenden Sie ein Accordion nicht, um wichtige Informationen zu rechtlichen Angaben oder zum Datenschutz anzuzeigen.
-
-### Anwendungsfälle
-
-- Häufig gestellte Fragen (FAQ)
-
-## Barrierefreiheit
-
-In der **Accordion**-Komponente wird das Öffnen-/Schließen-Icon links ausgerichtet, um Nutzer:innen mit eingeschränktem Sichtfeld eine bessere Bedienbarkeit zu ermöglichen.
-
-Es wurde bewusst auf die Verwendung von Icons, wie z.B. `<` oder `>` verzichtet. Die Verwendung der Icons `+` und `-` gewährleistet eine bessere Sicht- und Erkennbarkeit bezüglich des Geöffnet- und Geschlossen-Status.
-
-Bei der farblichen Gestaltung wurde besonders Wert auf einen höchstmöglichen Kontrast in der
-Standardansicht gelegt.
-
-### Tastatursteuerung
-
-| Taste   | Funktion                                             |
-| ------- | ---------------------------------------------------- |
-| `Tab`   | Springt die einzelnen Accordion-Tabs an.             |
-| `Enter` | Öffnet bzw. schließt den fokussierten Accordion-Tab. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#accordion" _target="_blank"></kol-link>
+# kol-accordion
 
 <!-- Auto Generated Below -->