@public-ui/components 2.2.11 → 2.2.13-41ee611a95447f6b98a9420d37280eb13f78bd4c.0

package/dist/types/components/input-radio/shadow.d.ts

@@ -1,4 +1,4 @@
-import type { FocusableElement, HideErrorPropType, IdPropType, InputRadioAPI, InputRadioStates, InputTypeOnDefault, LabelWithExpertSlotPropType, MsgPropType, NamePropType, Orientation, RadioOptionsPropType, StencilUnknown, Stringified, SyncValueBySelectorPropType, TooltipAlignPropType, ShortKeyPropType } from '../../schema';
+import type { FocusableElement, HideErrorPropType, IdPropType, InputRadioAPI, InputRadioStates, InputTypeOnDefault, LabelWithExpertSlotPropType, MsgPropType, NamePropType, Orientation, RadioOptionsPropType, StencilUnknown, Stringified, SyncValueBySelectorPropType, TooltipAlignPropType } from '../../schema';
 import type { JSX } from '../../stencil-public-runtime';
 export declare class KolInputRadio implements InputRadioAPI, FocusableElement {
     private readonly host?;
@@ -10,7 +10,6 @@ export declare class KolInputRadio implements InputRadioAPI, FocusableElement {
     kolFocus(): Promise<void>;
     render(): JSX.Element;
     private readonly controller;
-    _accessKey?: string;
     _alert?: boolean;
     _disabled?: boolean;
     _error?: string;
@@ -25,7 +24,6 @@ export declare class KolInputRadio implements InputRadioAPI, FocusableElement {
     _options?: RadioOptionsPropType;
     _orientation?: Orientation;
     _required?: boolean;
-    _shortKey?: ShortKeyPropType;
     _syncValueBySelector?: SyncValueBySelectorPropType;
     _tabIndex?: number;
     _tooltipAlign?: TooltipAlignPropType;
@@ -35,7 +33,6 @@ export declare class KolInputRadio implements InputRadioAPI, FocusableElement {
     private inputHasFocus;
     constructor();
     private showAsAlert;
-    validateAccessKey(value?: string): void;
     validateTooltipAlign(value?: TooltipAlignPropType): void;
     validateAlert(value?: boolean): void;
     validateDisabled(value?: boolean): void;
@@ -51,7 +48,6 @@ export declare class KolInputRadio implements InputRadioAPI, FocusableElement {
     validateOptions(value?: RadioOptionsPropType): void;
     validateOrientation(value?: Orientation): void;
     validateRequired(value?: boolean): void;
-    validateShortKey(value?: ShortKeyPropType): void;
     validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void;
     validateTabIndex(value?: number): void;
     validateTouched(value?: boolean): void;

package/dist/types/components/popover-button/shadow.d.ts

@@ -4,9 +4,12 @@ import type { AccessKeyPropType, AlternativeButtonLinkRolePropType, AriaDescript
 export declare class KolPopoverButton implements PopoverButtonProps {
     private refButton?;
     private refPopover?;
+    private cleanupAutoPositioning?;
     state: PopoverButtonStates;
     private justClosed;
+    private popoverOpen;
     private handleBeforeToggle;
+    private alignPopover;
     private handleToggle;
     private handleButtonClick;
     componentDidRender(): void;
@@ -15,7 +18,6 @@ export declare class KolPopoverButton implements PopoverButtonProps {
     _accessKey?: AccessKeyPropType;
     _ariaControls?: string;
     _ariaDescription?: AriaDescriptionPropType;
-    _ariaExpanded?: boolean;
     _ariaSelected?: boolean;
     _customClass?: CustomClassPropType;
     _disabled?: boolean;

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

@@ -15,4 +15,5 @@ export declare class TextareaController extends InputIconController implements T
     validateSpellCheck(value?: SpellCheckPropType): void;
     validateValue(value?: string): void;
     componentWillLoad(): void;
+    readonly updateCurrentLengthDebounced: import("lodash-es").DebouncedFunc<(length: number) => void>;
 }

package/dist/types/components.d.ts

@@ -6,9 +6,11 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccessKeyPropType, AccordionCallbacksPropType, AlertType, AlertVariant, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonProps, ButtonTypePropType, ButtonVariantPropType, CSSResize, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, HeadingLevel, HeadingVariantPropType, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, ImageSourcePropType, InputCheckboxIconsProp, InputCheckboxVariant, InputDateType, InputTextType, InputTypeOnDefault, InputTypeOnOff, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriFormCallbacks, KoliBriHorizontalIcons, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriProgressVariantType, KoliBriQuoteVariant, KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, ListStyleType, Loading, MaxPropType, ModalPropType, MsgPropType, NamePropType, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, Orientation, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PopoverCallbacksPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, W3CInputValue } from "./schema";
+import { AriaHasPopupPropType } from "./schema/props/aria-has-popup";
 import { PasswordVariantPropType } from "./schema/props/variant/password-variant";
 import { Bundesamt, Bundesanstalt, Bundesministerium } from "./enums/bund";
 export { AccessKeyPropType, AccordionCallbacksPropType, AlertType, AlertVariant, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonProps, ButtonTypePropType, ButtonVariantPropType, CSSResize, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, HeadingLevel, HeadingVariantPropType, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, ImageSourcePropType, InputCheckboxIconsProp, InputCheckboxVariant, InputDateType, InputTextType, InputTypeOnDefault, InputTypeOnOff, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriFormCallbacks, KoliBriHorizontalIcons, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriProgressVariantType, KoliBriQuoteVariant, KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, ListStyleType, Loading, MaxPropType, ModalPropType, MsgPropType, NamePropType, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, Orientation, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PopoverCallbacksPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, W3CInputValue } from "./schema";
+export { AriaHasPopupPropType } from "./schema/props/aria-has-popup";
 export { PasswordVariantPropType } from "./schema/props/variant/password-variant";
 export { Bundesamt, Bundesanstalt, Bundesministerium } from "./enums/bund";
 export namespace Components {
@@ -365,6 +367,10 @@ export namespace Components {
           * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
          */
         "_ariaExpanded"?: boolean;
+        /**
+          * Defines the aria-haspopup attribute. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup)
+         */
+        "_ariaHasPopup"?: AriaHasPopupPropType;
         /**
           * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
          */
@@ -630,6 +636,7 @@ export namespace Components {
         "_secondaryHeadline"?: string;
         /**
           * Defines which variant should be used for presentation.
+          * @deprecated Removed in v3. Use CSS custom properties instead.
          */
         "_variant"?: HeadingVariantPropType;
     }
@@ -704,6 +711,7 @@ export namespace Components {
          */
         "_alert"?: boolean;
         "_currentLength"?: number;
+        "_currentLengthDebounced"?: number;
         /**
           * Makes the element not focusable and ignore all events.
           * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved.
@@ -1631,10 +1639,6 @@ export namespace Components {
         "kolFocus": () => Promise<void>;
     }
     interface KolInputRadio {
-        /**
-          * Defines which key combination can be used to trigger or focus the interactive element of the component.
-         */
-        "_accessKey"?: string;
         /**
           * Defines whether the screen-readers should read out the notification.
           * @deprecated Will be removed in v3. Use automatic behaviour instead.
@@ -1697,10 +1701,6 @@ export namespace Components {
           * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved.
          */
         "_required"?: boolean;
-        /**
-          * Adds a visual short key hint to the component.
-         */
-        "_shortKey"?: ShortKeyPropType;
         /**
           * Selector for synchronizing the value with another input element.
          */
@@ -2354,10 +2354,6 @@ export namespace Components {
           * Defines the value for the aria-description attribute.
          */
         "_ariaDescription"?: AriaDescriptionPropType;
-        /**
-          * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
-         */
-        "_ariaExpanded"?: boolean;
         /**
           * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
          */
@@ -4318,6 +4314,7 @@ declare namespace LocalJSX {
         "_secondaryHeadline"?: string;
         /**
           * Defines which variant should be used for presentation.
+          * @deprecated Removed in v3. Use CSS custom properties instead.
          */
         "_variant"?: HeadingVariantPropType;
     }
@@ -5243,10 +5240,6 @@ declare namespace LocalJSX {
         "_variant"?: PasswordVariantPropType;
     }
     interface KolInputRadio {
-        /**
-          * Defines which key combination can be used to trigger or focus the interactive element of the component.
-         */
-        "_accessKey"?: string;
         /**
           * Defines whether the screen-readers should read out the notification.
           * @deprecated Will be removed in v3. Use automatic behaviour instead.
@@ -5309,10 +5302,6 @@ declare namespace LocalJSX {
           * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved.
          */
         "_required"?: boolean;
-        /**
-          * Adds a visual short key hint to the component.
-         */
-        "_shortKey"?: ShortKeyPropType;
         /**
           * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
          */
@@ -5923,10 +5912,6 @@ declare namespace LocalJSX {
           * Defines the value for the aria-description attribute.
          */
         "_ariaDescription"?: AriaDescriptionPropType;
-        /**
-          * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
-         */
-        "_ariaExpanded"?: boolean;
         /**
           * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
          */

package/dist/types/schema/components/input-email.d.ts

@@ -19,12 +19,13 @@ type OptionalProps = {
 } & PropAccessKey & PropDisabled & PropHasCounter & PropHideError & PropHideLabel & PropHorizontalIcons & PropMultiple & PropName & PropReadOnly & PropRequired & PropShortKey & PropSuggestions & PropSyncValueBySelector & PropTouched;
 type RequiredStates = {
     autoComplete: InputTypeOnOff;
+    currentLength: number;
+    currentLengthDebounced: number;
     hasValue: boolean;
     suggestions: W3CInputValue[];
 } & PropId & PropHideError & PropLabelWithExpertSlot;
 type OptionalStates = {
     alert: boolean;
-    currentLength: number;
     hint: string;
     maxLength: number;
     on: InputTypeOnDefault;

package/dist/types/schema/components/input-password.d.ts

@@ -20,11 +20,12 @@ type OptionalProps = {
 } & PropAccessKey & PropPasswordVariant & PropDisabled & PropHasCounter & PropHideError & PropHideLabel & PropHorizontalIcons & PropName & PropReadOnly & PropRequired & PropShortKey & PropSyncValueBySelector & PropTouched;
 type RequiredStates = {
     autoComplete: InputTypeOnOff;
+    currentLength: number;
+    currentLengthDebounced: number;
     hasValue: boolean;
 } & PropId & PropHideError & PropLabelWithExpertSlot;
 type OptionalStates = {
     alert: boolean;
-    currentLength: number;
     hint: string;
     maxLength: number;
     on: InputTypeOnDefault;

package/dist/types/schema/components/input-radio.d.ts

@@ -1,6 +1,6 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { MsgPropType, PropAccessKey, PropDisabled, PropHideError, PropHideLabel, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropRadioOptions, PropRequired, PropShortKey, PropSyncValueBySelector, PropTooltipAlign, PropTouched } from '../props';
-import type { InputTypeOnDefault, RadioOption, Orientation, StencilUnknown, Stringified } from '../types';
+import type { MsgPropType, PropDisabled, PropHideError, PropHideLabel, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropRadioOptions, PropRequired, PropSyncValueBySelector, PropTooltipAlign, PropTouched } from '../props';
+import type { InputTypeOnDefault, Orientation, RadioOption, StencilUnknown, Stringified } from '../types';
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
     alert: boolean;
@@ -11,7 +11,7 @@ type OptionalProps = {
     orientation: Orientation;
     tabIndex: number;
     value: StencilUnknown;
-} & PropAccessKey & PropDisabled & PropHideError & PropHideLabel & PropName & PropRadioOptions & PropRequired & PropShortKey & PropSyncValueBySelector & PropTouched & PropTooltipAlign;
+} & PropDisabled & PropHideError & PropHideLabel & PropName & PropRadioOptions & PropRequired & PropSyncValueBySelector & PropTouched & PropTooltipAlign;
 type RequiredStates = {
     options: RadioOption<StencilUnknown>[];
     orientation: Orientation;
@@ -22,7 +22,7 @@ type OptionalStates = {
     on: InputTypeOnDefault;
     tabIndex: number;
     value: StencilUnknown;
-} & PropAccessKey & PropDisabled & PropHideLabel & PropMsg & PropName & PropRequired & PropShortKey & PropTouched;
+} & PropDisabled & PropHideLabel & PropMsg & PropName & PropRequired & PropTouched;
 export type InputRadioProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type InputRadioStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type InputRadioWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

package/dist/types/schema/components/input-text.d.ts

@@ -20,13 +20,14 @@ type OptionalProps = {
 } & PropAccessKey & PropDisabled & PropHasCounter & PropHideError & PropHideLabel & PropHorizontalIcons & PropId & PropName & PropReadOnly & PropRequired & PropShortKey & PropSpellCheck & PropSuggestions & PropSyncValueBySelector & PropTouched;
 type RequiredStates = {
     autoComplete: InputTypeOnOff;
+    currentLength: number;
+    currentLengthDebounced: number;
     hasValue: boolean;
     suggestions: W3CInputValue[];
     type: InputTextType;
 } & PropHideError & PropId & PropLabelWithExpertSlot;
 type OptionalStates = {
     alert: boolean;
-    currentLength: number;
     hint: string;
     maxLength: number;
     on: InputTypeOnDefault;

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

@@ -19,6 +19,7 @@ type OptionalProps = {
 type RequiredStates = {
     adjustHeight: boolean;
     currentLength: number;
+    currentLengthDebounced: number;
     hasValue: boolean;
     resize: CSSResize;
 } & PropAdjustHeight & PropHideError & PropId & PropLabelWithExpertSlot;

package/dist/types/schema/props/aria-has-popup.d.ts

@@ -0,0 +1,3 @@
+declare const ariaHasPopupOptions: readonly ["false", "true", "menu", "listbox", "tree", "grid", "dialog"];
+export type AriaHasPopupPropType = (typeof ariaHasPopupOptions)[number];
+export {};

package/doc/combobox.md

@@ -2,10 +2,6 @@
 
 Synonyme: Autocomplete, Select, Dropdown
 
-<kol-alert _type="warning" _variant="card">
-  <kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
-</kol-alert>
-
 Die **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit einer darunter angezeigten Liste von auswählbaren Optionen kombiniert.
 
 ## Konstruktion

package/doc/heading.md

@@ -38,12 +38,12 @@ Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglic
 
 ## 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.). Set to `false` to enable the expert slot. | `string`                                                                | `undefined` |
-| `_level`              | `_level`              | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                                                            | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `undefined` |
-| `_secondaryHeadline`  | `_secondary-headline` | Defines the text of the secondary headline.                                                                                                                  | `string` \| `undefined`                                                   | `undefined` |
-| `_variant`            | `_variant`            | Defines which variant should be used for presentation.                                                                                                       | `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` \| `"strong"` \| `undefined` | `undefined` |
+| Property              | Attribute             | Description                                                                                                                                                       | Type                                                                    | Default     |
+| --------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- |
+| `_label` _(required)_ | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.      | `string`                                                                | `undefined` |
+| `_level`              | `_level`              | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                                                                 | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `undefined` |
+| `_secondaryHeadline`  | `_secondary-headline` | Defines the text of the secondary headline.                                                                                                                       | `string` \| `undefined`                                                   | `undefined` |
+| `_variant`            | `_variant`            | <span class="text-red-500">**[DEPRECATED]**</span> Removed in v3. Use CSS custom properties instead.<br/><br/>Defines which variant should be used for presentation. | `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` \| `"strong"` \| `undefined` | `undefined` |
 
 
 ## Slots

package/doc/input-radio.md

@@ -103,7 +103,6 @@ kolibriElement._on = {
 
 | Property              | Attribute        | Description                                                                                                                                                                           | Type                                                                                                                                                                                                                                                                                                                                                                                        | Default      |
 | --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
-| `_accessKey`          | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                               | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
 | `_alert`              | `_alert`         | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in v3. Use automatic behaviour instead.<br/><br/>Defines whether the screen-readers should read out the notification. | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `undefined`  |
 | `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                                | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
 | `_error`              | `_error`         | <span style="color:red">**[DEPRECATED]**</span> Will be removed in v3. Use `msg` instead.<br/><br/>Defines the error message text.                                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
@@ -118,7 +117,6 @@ kolibriElement._on = {
 | `_options`            | `_options`       | Options the user can choose from.                                                                                                                                                     | `RadioOption<StencilUnknown>[]` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                      | `undefined`  |
 | `_orientation`        | `_orientation`   | Defines whether the orientation of the component is horizontal or vertical.                                                                                                           | `"horizontal"` \| `"vertical"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                   | `'vertical'` |
 | `_required`           | `_required`      | Makes the input element required.                                                                                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
-| `_shortKey`           | `_short-key`     | Adds a visual short key hint to the component.                                                                                                                                        | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
 | `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                      | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                             | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                                       | `'top'`      |
 | `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                                             | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |

package/doc/popover-button.md

@@ -10,7 +10,6 @@
 | `_accessKey`          | `_access-key`       | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                          | `string` \| `undefined`                                                                                                                                  | `undefined` |
 | `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                              | `string` \| `undefined`                                                                                                                                  | `undefined` |
 | `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                            | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)          | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
 | `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
 | `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant="custom" is set.                                                                                                                  | `string` \| `undefined`                                                                                                                                  | `undefined` |
 | `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                           | `boolean` \| `undefined`                                                                                                                                 | `false`     |

package/doc/tree.md

@@ -2,11 +2,7 @@
 
 Synonyme: List, Navigation
 
-<kol-alert _type="warning" _variant="card">
-  <kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
-</kol-alert>
-
-Die Komponente **Tree** stellt eine hierarchische Liste dar. Jedes Element in der Hierarchie kann Kindelemente haben, und Elemente, die Kinder haben, können erweitert oder reduziert werden, um die Kinder anzuzeigen oder zu verbergen.
+Die **Tree**-Komponente stellt eine hierarchische Liste dar, in der jedes Element untergeordnete Einträge enthalten kann. Elemente mit Kindelementen lassen sich ein- oder ausklappen, um die untergeordnete Ebene anzuzeigen oder auszublenden.
 
 ### Code
 
@@ -48,21 +44,25 @@ Die Komponente **Tree** stellt eine hierarchische Liste dar. Jedes Element in de
 
 ## Verwendung
 
-Eine **Tree**-Komponente wird verwendet, um komplexe, hierarchische Datenstrukturen visuell darzustellen und zu navigieren. Sie ermöglicht es Benutzern, sich effizient durch verschachtelte Informationen zu bewegen und bietet eine klare Übersicht über die Beziehungen zwischen den verschiedenen Elementen. Solche Komponenten sind nützlich in Anwendungen wie Navigatoren, Organisationsdiagrammen, Produktkatalogen und überall dort, wo eine strukturierte Darstellung von Daten erforderlich ist.
-Das **`_label`**-Attribut wird für den Text und das **`_href`**-Attribut für den Link des Navigationspunkts genutzt. Zusätzlich lässt sich das aktive Element über das Attribut **`_active`** steuern, sowie im Standardzustand über das **`_open`** Attribut öffnen.
+Die Tree-Komponente wird verwendet, um komplexe, hierarchisch aufgebaute Daten visuell darzustellen und benutzerfreundlich navigierbar zu machen. Sie ermöglicht es Nutzerinnen und Nutzern, sich effizient durch verschachtelte Strukturen zu bewegen und liefert dabei eine klare Übersicht über die Beziehungen zwischen über- und untergeordneten Elementen.
 
-### Tastatursteuerung
+Typische Einsatzbereiche sind z. B. Navigationsleisten, Organisationsstrukturen, Dateiverzeichnisse oder Produktkataloge – überall dort, wo Inhalte strukturiert und mehrstufig angezeigt werden sollen.
 
-| Taste          | Funktion                                                                                                                                                                                                                                                                                                                                                         |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`          | Der Tree lässt sich zudem mittels Tabulator-Taste fokussieren.                                                                                                                                                                                                                                                                                                   |
-| `Pfeil-Tasten` | Die Pfeiltasten können für die Navigation der Elemente im Tree verwendet werden, um das Untermenü zu öffnen oder zu schließen sowie zwischen den Navigationspunkten zu springen. Dabei wird die linke/rechte Pfeiltaste für das Öffnen oder Schließen des Untermenüs und die oben/unten Pfeiltaste für das Wechseln zwischen den Navigationselementen verwendet. |
-| `Enter`        | Selektiert das derzeitig fokussierte Element und navigiert, falls das **`_href`**-Attribut gesetzt wurde.                                                                                                                                                                                                                                                        |
-| `Home`         | Fokussiert das erste Element in der Tree-Komponenten                                                                                                                                                                                                                                                                                                             |
-| `End`          | Fokussiert das letzte Element in der Tree-Komponenten                                                                                                                                                                                                                                                                                                            |
-| `*`            | Öffnet, alle Geschwister-Elemente der derzeitig fokussierten Ebene                                                                                                                                                                                                                                                                                               |
+Jeder Navigationspunkt wird über das Attribut `_label` beschriftet und kann optional über `_href` mit einem Ziel verlinkt werden. Mit dem Attribut `_active` lässt sich ein Element als aktuell aktiv markieren, während `_open` steuert, ob ein Element beim initialen Laden aufgeklappt ist.
+
+### Tastatursteuerung
 
-Zusätzlich können Elemente in der **Tree**-Komponente mit Alphanumerischen-Tasten gesucht und fokussiert werden. In dem oben gennanten Beispiel, würde durch die Taste `S` das Element mit dem **`_label`** `Subpage 1` fokussiert werden und bei wiederholten Drücken der selben Taste die `Subpage 2`, etc.
+| Taste          | Funktion                                                                                                                                                                                                                      |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab`          | Fokussiert die Tree-Komponente, sodass sie per Tastatur bedient werden kann.                                                                                                                                                  |
+| `↑ / ↓`        | Navigiert zwischen sichtbaren Elementen auf derselben Ebene.                                                                                                                                                                  |
+| `→`            | Öffnet das Untermenü des aktuell fokussierten Elements (sofern vorhanden).                                                                                                                                                    |
+| `←`            | Schließt das Untermenü (sofern geöffnet) oder verschiebt den Fokus auf das übergeordnete Element.                                                                                                                             |
+| `Enter`        | Aktiviert das aktuell fokussierte Element. Wenn ein `_href`-Attribut vorhanden ist, erfolgt eine Navigation zum Ziel.                                                                                                         |
+| `Pos1`         | Fokussiert das erste Element der Tree-Komponente.                                                                                                                                                                             |
+| `Ende`         | Fokussiert das letzte Element der Tree-Komponente.                                                                                                                                                                            |
+| `*`            | Öffnet alle geschlossenen Geschwisterelemente auf der aktuell fokussierten Ebene.                                                                                                                                             |
+| Alphanumerisch | Durch Eingabe eines Buchstabens wird das nächste Element fokussiert, dessen `_label` mit diesem Zeichen beginnt. Bei wiederholtem Drücken desselben Buchstabens wird zum jeweils nächsten passenden Element weitergesprungen. |
 
 ## Links und Referenzen
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "2.2.11",
+  "version": "2.2.13-41ee611a95447f6b98a9420d37280eb13f78bd4c.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -21,7 +21,6 @@
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
   "types": "dist/types/index.d.ts",
-  "sideEffects": false,
   "description": "Contains all web components that belong to KoliBri - The accessible HTML-Standard.",
   "keywords": [
     "accessibility",
@@ -51,11 +50,14 @@
     "wcag"
   ],
   "dependencies": {
-    "@floating-ui/dom": "1.7.0",
-    "adopted-style-sheets": "1.1.8",
+    "@floating-ui/dom": "1.7.1",
+    "adopted-style-sheets": "1.1.9-rc.19",
+    "boxen": "8.0.1",
+    "chalk": "5.4.1",
     "clsx": "2.1.1",
-    "color-convert": "2.0.1",
+    "color-convert": "3.1.0",
     "color-rgba": "2.4.0",
+    "figlet": "1.8.1",
     "markdown-it": "14.1.0",
     "query-selector-all-shadow-root": "0.0.3",
     "query-selector-shadow-root": "0.0.3",
@@ -63,13 +65,14 @@
     "wcag-contrast": "3.0.0"
   },
   "peerDependencies": {
-    "adopted-style-sheets": "1.1.8"
+    "adopted-style-sheets": "1.1.9-rc.19"
   },
   "files": [
     "assets",
     "dist",
     "doc",
     "custom-elements.json",
+    "postinstall.js",
     "vscode-custom-data.json"
   ],
   "scripts": {}

package/postinstall.js

@@ -0,0 +1,38 @@
+module.exports = async () => {
+	if (process.env.CI === 'true') {
+		return;
+	}
+	const { default: chalk } = await import('chalk');
+	const { default: boxen } = await import('boxen');
+	const figlet = require('figlet');
+
+	const isGerman = (process.env.LANG || '').startsWith('de');
+	const title = chalk.cyan(figlet.textSync('KoliBri', { font: 'Standard' }));
+
+	const english = [
+		'Help us make KoliBri even more accessible!',
+		'',
+		'-  Star our repo & submit pull requests',
+		'-  Give feedback via GitHub issues',
+		'-  Documentation – https://public-ui.github.io',
+		'-  Open Source – https://github.com/public-ui',
+	].join('\n');
+
+	const german = [
+		'Hilf mit, KoliBri noch barrierefreier zu machen!',
+		'',
+		'-  Starte unser Repo & reiche Pull-Requests ein',
+		'-  Gib Feedback über GitHub Issues',
+		'-  Dokumentation – https://public-ui.github.io',
+		'-  Open Source – https://github.com/public-ui',
+	].join('\n');
+
+	const message = isGerman ? german : english;
+
+	console.log(title);
+	console.log(boxen(message, { padding: 1, borderStyle: 'round' }));
+};
+
+if (require.main === module) {
+	module.exports();
+}

package/vscode-custom-data.json

@@ -505,7 +505,7 @@
       "name": "kol-combobox",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Autocomplete, Select, Dropdown\n\n<kol-alert _type=\"warning\" _variant=\"card\">\n  <kol-badge _color=\"#476af5\" _label=\"Preview\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.\n</kol-alert>\n\nDie **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit einer darunter angezeigten Liste von auswählbaren Optionen kombiniert."
+        "value": "Synonyme: Autocomplete, Select, Dropdown\n\nDie **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit einer darunter angezeigten Liste von auswählbaren Optionen kombiniert."
       },
       "attributes": [
         {
@@ -2057,10 +2057,6 @@
         "value": "Synonyme: Choice Group, Radio Buttons\n\nDie Komponente **InputRadio** besteht aus einer Sammlung von Radio-Elementen und stellt so eine Auswahlmöglichkeit zwischen verschiedenen Werten dar. Es kann immer nur ein einzelner Wert zur gleichen Zeit ausgewählt werden. Ausgewählte Radio-Elemente werden i.d.R. mit einem gefüllten und optisch hervorgehobenen Kreis dargestellt.\n\n<kol-alert _alert _heading=\"Hinweis\" _level=\"1\" _type=\"info\">\n  Das Input-Radio dient der Abbildung einer Auswahlmöglichkeit bei der mindestens und maximal eine Auswahl getroffen werden kann. Das bedeutet, dass ein Input-Radio nicht einzeln vorkommen kann. Aufgrund dessen haben wir die Komponente als Listen-Komponente umgesetzt.\n</kol-alert><br/>"
       },
       "attributes": [
-        {
-          "name": "_access-key",
-          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
-        },
         {
           "name": "_alert",
           "description": "Defines whether the screen-readers should read out the notification."
@@ -2138,10 +2134,6 @@
           "name": "_required",
           "description": "Makes the input element required."
         },
-        {
-          "name": "_short-key",
-          "description": "Adds a visual short key hint to the component."
-        },
         {
           "name": "_tab-index",
           "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
@@ -3030,10 +3022,6 @@
           "name": "_aria-description",
           "description": "Defines the value for the aria-description attribute."
         },
-        {
-          "name": "_aria-expanded",
-          "description": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)"
-        },
         {
           "name": "_aria-selected",
           "description": "Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)"
@@ -4070,7 +4058,7 @@
       "name": "kol-tree",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: List, Navigation\n\n<kol-alert _type=\"warning\" _variant=\"card\">\n  <kol-badge _color=\"#476af5\" _label=\"Preview\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.\n</kol-alert>\n\nDie Komponente **Tree** stellt eine hierarchische Liste dar. Jedes Element in der Hierarchie kann Kindelemente haben, und Elemente, die Kinder haben, können erweitert oder reduziert werden, um die Kinder anzuzeigen oder zu verbergen."
+        "value": "Synonyme: List, Navigation\n\nDie **Tree**-Komponente stellt eine hierarchische Liste dar, in der jedes Element untergeordnete Einträge enthalten kann. Elemente mit Kindelementen lassen sich ein- oder ausklappen, um die untergeordnete Ebene anzuzeigen oder auszublenden."
       },
       "attributes": [
         {

package/dist/cjs/Alert-96b369f4.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const tslib_es6=require("./tslib.es6-5e301284.js"),index=require("./index-cb5cbda1.js"),clsx=require("./clsx-dd4d6dd1.js"),i18n=require("./i18n-5f0ed6ed.js"),componentNames=require("./component-names-2c750b1b.js"),dev_utils=require("./dev.utils-58fde089.js"),Icon=({ariaLabel:e,icon:n})=>index.h(index.Fragment,null,index.h("span",{class:"visually-hidden"},e),index.h(componentNames.KolIconTag,{class:"heading-icon",_label:"",_icons:n})),AlertIcon=({type:e,label:n})=>{switch(e){case"error":return index.h(Icon,{ariaLabel:i18n.translate("kol-error"),icon:"codicon codicon-error",label:n});case"info":return index.h(Icon,{ariaLabel:i18n.translate("kol-info"),icon:"codicon codicon-info",label:n});case"warning":return index.h(Icon,{ariaLabel:i18n.translate("kol-warning"),icon:"codicon codicon-warning",label:n});case"success":return index.h(Icon,{ariaLabel:i18n.translate("kol-success"),icon:"codicon codicon-pass",label:n});default:return index.h(Icon,{ariaLabel:i18n.translate("kol-message"),icon:"codicon codicon-comment",label:n})}},AlertIcon$1=AlertIcon,KolAlertFc=(e,n)=>{const{class:l={},type:o="default",variant:i="msg",label:a,hasCloser:c,alert:s,onAlertTimeout:t,onCloserClick:r,level:d}=e,u=tslib_es6.__rest(e,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);if(s){try{dev_utils.Log.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){dev_utils.Log.debug("Navigator does not support vibration.")}setTimeout((()=>{null==t||t()}),1e4)}const b=Object.assign({class:clsx.clsx("kol-alert-wc","alert",o,i,{hasCloser:!!c},l),role:s?"alert":void 0},u);return index.h("div",Object.assign({},b),index.h("div",{class:"heading"},index.h(AlertIcon$1,{label:a,type:o}),index.h("div",{class:"heading-content"},a?index.h(componentNames.KolHeadingWcTag,{_label:a,_level:d}):null,"msg"===i&&index.h("div",{class:"content"},n)),c&&index.h(componentNames.KolButtonWcTag,{class:"close",_ariaDescription:(null==a?void 0:a.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i18n.translate("kol-close-alert"),_on:{onClick:r},_tooltipAlign:"left"})),"card"===i&&index.h("div",{class:"content"},n))},KolAlertFc$1=KolAlertFc;exports.KolAlertFc=KolAlertFc$1;

package/dist/cjs/Alert-96b369f4.js.map

@@ -1 +0,0 @@
-{"file":"Alert-96b369f4.js","mappings":";;;;;;;;;;;;AAUA,MAAM,IAAI,GAA4D,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE;IACzF,QACCA;QACCA,kBAAM,KAAK,EAAC,iBAAiB,IAAE,SAAS,CAAQ;QAChDA,QAACC,yBAAU,IAAC,KAAK,EAAC,cAAc,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAE,IAAI,GAAI,CACzD,EACF;AACH,CAAC,CAAC;AAEF,MAAM,SAAS,GAA6C,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE;IAC3E,QAAQ,IAAI;QACX,KAAK,OAAO;YACX,OAAOD,QAAC,IAAI,IAAC,SAAS,EAAEE,cAAS,CAAC,WAAW,CAAC,EAAE,IAAI,EAAC,uBAAuB,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC;QAC/F,KAAK,MAAM;YACV,OAAOF,QAAC,IAAI,IAAC,SAAS,EAAEE,cAAS,CAAC,UAAU,CAAC,EAAE,IAAI,EAAC,sBAAsB,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC;QAC7F,KAAK,SAAS;YACb,OAAOF,QAAC,IAAI,IAAC,SAAS,EAAEE,cAAS,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,yBAAyB,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC;QACnG,KAAK,SAAS;YACb,OAAOF,QAAC,IAAI,IAAC,SAAS,EAAEE,cAAS,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,sBAAsB,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC;QAChG;YACC,OAAOF,QAAC,IAAI,IAAC,SAAS,EAAEE,cAAS,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,yBAAyB,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC;KACnG;AACF,CAAC,CAAC;AAEF,oBAAe,SAAS;;ACnBxB,MAAM,UAAU,GAAwB,CAAC,KAAK,EAAE,QAAQ;IACvD,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,EAAE,EAAE,IAAI,GAAG,SAAS,EAAE,OAAO,GAAG,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,KAAK,KAAe,KAAK,EAAf,KAAK,oBAAK,KAAK,EAA9I,uGAAsI,CAAQ,CAAC;IAErJ,IAAI,KAAK,EAAE;QAKV,IAAI;YACHC,aAAG,CAAC,KAAK,CAAC,CAAC,8BAA8B,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SACxF;QAAC,OAAO,CAAC,EAAE;YACXA,aAAG,CAAC,KAAK,CAAC,uCAAuC,CAAC,CAAC;SACnD;QAED,UAAU,CAAC;YACV,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,CAAC;SACnB,EAAE,KAAK,CAAC,CAAC;KACV;IAED,MAAM,SAAS,mBACd,KAAK,EAAEC,SAAI,CAAC,cAAc,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,UAAU,CAAC,EAC3F,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,SAAS,IAC9B,KAAK,CACR,CAAC;IAEF,QACCJ,iCAAS,SAAS;QACjBA,iBAAK,KAAK,EAAC,SAAS;YACnBA,QAACK,WAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,GAAI;YACvCL,iBAAK,KAAK,EAAC,iBAAiB;gBAC1B,KAAK,GAAGA,QAACM,8BAAe,IAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAI,GAAG,IAAI;gBAChE,OAAO,KAAK,KAAK,IAAIN,iBAAK,KAAK,EAAC,SAAS,IAAE,QAAQ,CAAO,CACtD;YACL,SAAS,KACTA,QAACO,6BAAc,IACd,KAAK,EAAC,OAAO,EACb,gBAAgB,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,EAAE,KAAI,EAAE,EACrC,UAAU,QACV,MAAM,EAAE;oBACP,IAAI,EAAE;wBACL,IAAI,EAAE,uBAAuB;qBAC7B;iBACD,EACD,MAAM,EAAEL,cAAS,CAAC,iBAAiB,CAAC,EACpC,GAAG,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,EAC/B,aAAa,EAAC,MAAM,GACH,CAClB,CACI;QACL,OAAO,KAAK,MAAM,IAAIF,iBAAK,KAAK,EAAC,SAAS,IAAE,QAAQ,CAAO,CACvD,EACL;AACH,CAAC,CAAC;AAEF,qBAAe,UAAU;;;;","names":["h","KolIconTag","translate","Log","clsx","AlertIcon","KolHeadingWcTag","KolButtonWcTag"],"sources":["src/functional-components/AlertIcon/AlertIcon.tsx","src/functional-components/Alert/Alert.tsx"],"sourcesContent":["import { Fragment, type FunctionalComponent as FC, h } from '@stencil/core';\nimport { KolIconTag } from '../../core/component-names';\nimport type { AlertType } from '../../schema';\nimport { translate } from '../../i18n';\n\n/**\n * The icon uses a visually-hidden span instead of an aria-label because the Alert might be referenced as content for aria-describedby.\n * In this scenario, Firefox with NVDA does not properly read the aria-label, so the visually-hidden span ensures correct screen reader behavior.\n * @see https://github.com/public-ui/kolibri/issues/7119\n */\nconst Icon: FC<{ ariaLabel: string; icon: string; label?: string }> = ({ ariaLabel, icon }) => {\n\treturn (\n\t\t<>\n\t\t\t<span class=\"visually-hidden\">{ariaLabel}</span>\n\t\t\t<KolIconTag class=\"heading-icon\" _label=\"\" _icons={icon} />\n\t\t</>\n\t);\n};\n\nconst AlertIcon: FC<{ label?: string; type?: AlertType }> = ({ type, label }) => {\n\tswitch (type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" label={label} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" label={label} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" label={label} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" label={label} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" label={label} />;\n\t}\n};\n\nexport default AlertIcon;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\nimport type { InternalAlertProps } from '../../schema';\nimport { Log } from '../../schema';\nimport { translate } from '../../i18n';\nimport AlertIcon from '../AlertIcon';\nimport { KolButtonWcTag, KolHeadingWcTag } from '../../core/component-names';\n\nexport type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> &\n\tPartial<Omit<InternalAlertProps, 'on'>> & {\n\t\tonCloserClick?: () => void;\n\t\tonAlertTimeout?: () => void;\n\t};\n\nconst KolAlertFc: FC<KolAlertFcProps> = (props, children) => {\n\tconst { class: classNames = {}, type = 'default', variant = 'msg', label, hasCloser, alert, onAlertTimeout, onCloserClick, level, ...other } = props;\n\n\tif (alert) {\n\t\t/**\n\t\t * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t */\n\t\ttry {\n\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t} catch (e) {\n\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t}\n\n\t\tsetTimeout(() => {\n\t\t\tonAlertTimeout?.();\n\t\t}, 10000);\n\t}\n\n\tconst rootProps: Partial<JSXBase.HTMLAttributes<HTMLDivElement>> = {\n\t\tclass: clsx('kol-alert-wc', 'alert', type, variant, { hasCloser: !!hasCloser }, classNames),\n\t\trole: alert ? 'alert' : undefined,\n\t\t...other,\n\t};\n\n\treturn (\n\t\t<div {...rootProps}>\n\t\t\t<div class=\"heading\">\n\t\t\t\t<AlertIcon label={label} type={type} />\n\t\t\t\t<div class=\"heading-content\">\n\t\t\t\t\t{label ? <KolHeadingWcTag _label={label} _level={level} /> : null}\n\t\t\t\t\t{variant === 'msg' && <div class=\"content\">{children}</div>}\n\t\t\t\t</div>\n\t\t\t\t{hasCloser && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t_ariaDescription={label?.trim() || ''}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label={translate('kol-close-alert')}\n\t\t\t\t\t\t_on={{ onClick: onCloserClick }}\n\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{variant === 'card' && <div class=\"content\">{children}</div>}\n\t\t</div>\n\t);\n};\n\nexport default KolAlertFc;\n"],"version":3}

package/dist/cjs/Collapsible-8b3c4050.js.map

@@ -1 +0,0 @@
-{"file":"Collapsible-8b3c4050.js","mappings":";;;;;;;;;;AAsCA,MAAM,gBAAgB,GAAyB,CAAC,KAAK,EAAE,QAAQ;IAC9D,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,GAAG,EAAE,EAAE,kBAAkB,GAAG,EAAE,EAAE,YAAY,GAAG,EAAE,KAAe,KAAK,EAAf,KAAK,oBAAK,KAAK,EAArJ,sHAA6I,CAAQ,CAAC;IAC5J,MAAM,IAAI,GAAG,IAAI,GAAG,QAAQ,GAAG,KAAK,CAAC;IAErC,QACCA,+BACC,EAAE,EAAE,EAAE,EACN,KAAK,EAAEC,SAAI,CACV,aAAa,EACb;YACC,QAAQ,EAAE,QAAQ,KAAK,IAAI;YAC3B,IAAI,EAAE,IAAI,KAAK,IAAI;SACnB,EACD,UAAU,CACV,IACG,KAAK;QAETD,QAACE,8BAAe,IAAC,GAAG,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,GAAG,EAAE,MAAM,EAAC,EAAE,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAED,SAAI,CAAC,sBAAsB,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,CAAC;YACzHD,QAACG,6BAAc,IACd,KAAK,EAAEF,SAAI,CAAC,6BAA6B,EAAE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,KAAK,CAAC,EACrE,GAAG,EAAE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,GAAG,EAC5B,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,GAAG,EAAE,UAAU,EAC9B,aAAa,EAAE,IAAI,EACnB,SAAS,EAAE,QAAQ,EACnB,MAAM,EAAE,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,KAAI,mBAAmB,IAAI,EAAE,EAC/D,MAAM,EAAE,KAAK,EACb,GAAG,EAAE,EAAE,OAAO,EAAE,GACC,CACD;QAClBD,iBAAK,KAAK,EAAEC,SAAI,CAAC,sBAAsB,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,YAAY,CAAC;YACnED,iBAAK,KAAK,EAAEC,SAAI,CAAC,gCAAgC,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,cAAc,CAAC;gBAC/ED,gCAAkB,IAAI,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,EAAE,KAAK,EAAEC,SAAI,CAAC,sBAAsB,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,UAAU,IAClI,QAAQ,CACJ,CACD,CACD,CACD,EACL;AACH,CAAC,CAAC;AAEF,2BAAe,gBAAgB;;;;","names":["h","clsx","KolHeadingWcTag","KolButtonWcTag"],"sources":["src/functional-components/Collapsible/Collapsible.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport type { FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\nimport { KolButtonWcTag, KolHeadingWcTag } from '../../core/component-names';\nimport type { HeadingLevel, IconsPropType } from '../../schema';\n\ntype ClassType =\n\t| string\n\t| {\n\t\t\t[className: string]: boolean;\n\t  };\n\nexport type CollapsibleProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {\n\tid: string;\n\topen?: boolean;\n\tdisabled?: boolean;\n\tlevel?: HeadingLevel;\n\tlabel: string;\n\n\tHeadingProps?: {\n\t\tref?: ((elm?: HTMLKolHeadingWcElement | undefined) => void) | undefined;\n\t\tclass?: ClassType;\n\t};\n\n\tHeadingButtonProps?: {\n\t\tref?: ((elm?: HTMLKolButtonWcElement | undefined) => void) | undefined;\n\t\tclass?: ClassType;\n\t\t_icons?: IconsPropType;\n\t};\n\n\tContentProps?: {\n\t\tclass?: ClassType;\n\t\tanimationClass?: ClassType;\n\t\twrapperClass?: ClassType;\n\t};\n};\n\nconst KolCollapsibleFc: FC<CollapsibleProps> = (props, children) => {\n\tconst { id, class: classNames, label, level = 1, disabled, open, onClick, HeadingProps = {}, HeadingButtonProps = {}, ContentProps = {}, ...other } = props;\n\tconst icon = open ? 'remove' : 'add';\n\n\treturn (\n\t\t<div\n\t\t\tid={id}\n\t\t\tclass={clsx(\n\t\t\t\t'collapsible',\n\t\t\t\t{\n\t\t\t\t\tdisabled: disabled === true,\n\t\t\t\t\topen: open === true,\n\t\t\t\t},\n\t\t\t\tclassNames,\n\t\t\t)}\n\t\t\t{...other}\n\t\t>\n\t\t\t<KolHeadingWcTag ref={HeadingProps?.ref} _label=\"\" _level={level} class={clsx('collapsible__heading', HeadingProps?.class)}>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tclass={clsx('collapsible__heading-button', HeadingButtonProps?.class)}\n\t\t\t\t\tref={HeadingButtonProps?.ref}\n\t\t\t\t\tslot=\"expert\"\n\t\t\t\t\t_ariaControls={`${id}-control`}\n\t\t\t\t\t_ariaExpanded={open}\n\t\t\t\t\t_disabled={disabled}\n\t\t\t\t\t_icons={HeadingButtonProps?._icons || `codicon codicon-${icon}`}\n\t\t\t\t\t_label={label}\n\t\t\t\t\t_on={{ onClick }}\n\t\t\t\t></KolButtonWcTag>\n\t\t\t</KolHeadingWcTag>\n\t\t\t<div class={clsx('collapsible__wrapper', ContentProps?.wrapperClass)}>\n\t\t\t\t<div class={clsx('collapsible__wrapper-animation', ContentProps?.animationClass)}>\n\t\t\t\t\t<div aria-hidden={open === false ? 'true' : undefined} class={clsx('collapsible__content', ContentProps?.class)} id={`${id}-control`}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default KolCollapsibleFc;\n"],"version":3}

package/dist/cjs/FormFieldMsg-f54e236a.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const clsx=require("./clsx-dd4d6dd1.js"),index=require("./index-cb5cbda1.js"),Alert=require("./Alert-96b369f4.js");function transformObjectProperties(r){return Object.entries(r).reduce(((r,[e,s])=>{const t=e.startsWith("_")?e.slice(1):e;return Object.assign(Object.assign({},r),{[t]:s})}),{})}const FormFieldMsgFc=({_alert:r,_msg:e,_hideError:s,_id:t})=>{const i=transformObjectProperties(e||{});return index.h(Alert.KolAlertFc,Object.assign({id:`${t}-error`,alert:r,type:"error",class:clsx.clsx({error:!0,"visually-hidden":!0===s})},i),(null==e?void 0:e._description)||void 0)},KolFormFieldMsgFc=FormFieldMsgFc;exports.KolFormFieldMsgFc=KolFormFieldMsgFc;