@public-ui/components 4.0.0-beta.0 → 4.0.0-beta.1

package/dist/types/components.d.ts

@@ -5,20 +5,20 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonProps, ButtonTypePropType, ButtonVariantPropType, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, ImageSourcePropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, Loading, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PopoverCallbacksPropType, ProgressVariantPropType, PropColor, QuoteVariantPropType, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType } from "./schema";
+import { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonProps, ButtonTypePropType, ButtonVariantPropType, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, ImageSourcePropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, Loading, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PopoverCallbacksPropType, ProgressVariantPropType, PropColor, QuoteVariantPropType, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType } from "./schema";
 import { AriaHasPopupPropType } from "./schema/props/aria-has-popup";
+import { ModalVariantPropType } from "./schema/props/variant/modal";
 import { InputCheckboxVariantPropType } from "./schema/props/variant-input-checkbox";
 import { PasswordVariantPropType } from "./schema/props/variant/password-variant";
 import { OrientationPropType } from "./schema/props/orientation";
-import { ModalVariantPropType } from "./schema/props/variant/modal";
 import { MinWidthPropType } from "./schema/props/min-width";
 import { HasCreateButtonPropType } from "./schema/props/has-create-button";
-export { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonProps, ButtonTypePropType, ButtonVariantPropType, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, ImageSourcePropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, Loading, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PopoverCallbacksPropType, ProgressVariantPropType, PropColor, QuoteVariantPropType, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType } from "./schema";
+export { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonProps, ButtonTypePropType, ButtonVariantPropType, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, ImageSourcePropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, Loading, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PopoverCallbacksPropType, ProgressVariantPropType, PropColor, QuoteVariantPropType, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType } from "./schema";
 export { AriaHasPopupPropType } from "./schema/props/aria-has-popup";
+export { ModalVariantPropType } from "./schema/props/variant/modal";
 export { InputCheckboxVariantPropType } from "./schema/props/variant-input-checkbox";
 export { PasswordVariantPropType } from "./schema/props/variant/password-variant";
 export { OrientationPropType } from "./schema/props/orientation";
-export { ModalVariantPropType } from "./schema/props/variant/modal";
 export { MinWidthPropType } from "./schema/props/min-width";
 export { HasCreateButtonPropType } from "./schema/props/has-create-button";
 export namespace Components {
@@ -56,7 +56,7 @@ export namespace Components {
         /**
           * Sets focus on the internal element.
          */
-        "kolFocus": () => Promise<void>;
+        "focus": () => Promise<void | undefined>;
     }
     interface KolAlert {
         /**
@@ -181,7 +181,7 @@ export namespace Components {
         /**
           * Sets focus on the internal element.
          */
-        "kolFocus": () => Promise<void>;
+        "focus": () => Promise<void>;
     }
     interface KolBreadcrumb {
         /**
@@ -288,13 +288,13 @@ export namespace Components {
          */
         "_variant"?: ButtonVariantPropType;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<StencilUnknown>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<StencilUnknown>;
     }
     interface KolButtonLink {
         /**
@@ -385,13 +385,13 @@ export namespace Components {
          */
         "_value"?: StencilUnknown;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<StencilUnknown>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<StencilUnknown>;
     }
     interface KolButtonWc {
         /**
@@ -496,7 +496,7 @@ export namespace Components {
         /**
           * Sets focus on the internal element.
          */
-        "kolFocus": () => Promise<void>;
+        "focus": () => Promise<void | undefined>;
     }
     interface KolCard {
         /**
@@ -635,13 +635,13 @@ export namespace Components {
          */
         "_value"?: string;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<string>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<string>;
     }
     interface KolDetails {
         /**
@@ -671,7 +671,66 @@ export namespace Components {
         /**
           * Sets focus on the internal element.
          */
-        "kolFocus": () => Promise<void>;
+        "focus": () => Promise<void | undefined>;
+    }
+    interface KolDialog {
+        /**
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
+         */
+        "_label": LabelPropType;
+        /**
+          * Defines the modal callback functions.
+         */
+        "_on"?: KoliBriDialogEventCallbacks;
+        /**
+          * Defines the variant of the modal.
+          * @default 'blank'
+         */
+        "_variant"?: ModalVariantPropType;
+        /**
+          * Defines the width of the modal. (max-width: 100%)
+          * @default '100%'
+         */
+        "_width"?: string;
+        /**
+          * Closes the dialog.
+         */
+        "closeModal": () => Promise<void>;
+        /**
+          * Opens the dialog.
+         */
+        "openModal": () => Promise<void>;
+    }
+    /**
+     * https://en.wikipedia.org/wiki/Modal_window
+     */
+    interface KolDialogWc {
+        /**
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
+         */
+        "_label": LabelPropType;
+        /**
+          * Defines the modal callback functions.
+         */
+        "_on"?: KoliBriDialogEventCallbacks;
+        /**
+          * Defines the variant of the modal.
+          * @default 'blank'
+         */
+        "_variant"?: ModalVariantPropType;
+        /**
+          * Defines the width of the modal. (max-width: 100%)
+          * @default '100%'
+         */
+        "_width"?: string;
+        /**
+          * Closes the modal dialog.
+         */
+        "closeModal": () => Promise<void>;
+        /**
+          * Opens the modal dialog.
+         */
+        "openModal": () => Promise<void>;
     }
     interface KolDrawer {
         /**
@@ -877,13 +936,13 @@ export namespace Components {
          */
         "_variant"?: InputCheckboxVariantPropType;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<StencilUnknown>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<StencilUnknown>;
     }
     interface KolInputColor {
         /**
@@ -975,13 +1034,13 @@ export namespace Components {
          */
         "_value"?: string;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<string | undefined>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<string | undefined>;
     }
     interface KolInputDate {
         /**
@@ -1102,13 +1161,13 @@ export namespace Components {
          */
         "_value"?: Iso8601 | Date | null;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<string | Date | undefined | null>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<string | Date | undefined | null>;
         /**
           * Resets the component's value.
          */
@@ -1244,13 +1303,13 @@ export namespace Components {
          */
         "_value"?: string;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<string | undefined>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<string | undefined>;
     }
     interface KolInputFile {
         /**
@@ -1345,13 +1404,13 @@ export namespace Components {
          */
         "_touched"?: boolean;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<FileList | null | undefined>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<FileList | null | undefined>;
         /**
           * Resets the component's value.
          */
@@ -1475,13 +1534,13 @@ export namespace Components {
          */
         "_value"?: number | NumberString | null;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<number | NumberString | null>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<number | NumberString | null>;
     }
     interface KolInputPassword {
         /**
@@ -1608,13 +1667,13 @@ export namespace Components {
          */
         "_variant"?: PasswordVariantPropType;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<string | undefined>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<string | undefined>;
     }
     interface KolInputRadio {
         /**
@@ -1698,13 +1757,13 @@ export namespace Components {
          */
         "_value": StencilUnknown;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<StencilUnknown>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<StencilUnknown>;
     }
     interface KolInputRange {
         /**
@@ -1806,13 +1865,13 @@ export namespace Components {
          */
         "_value"?: number | NumberString;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<number | NumberString | undefined>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<number | NumberString | undefined>;
     }
     interface KolInputText {
         /**
@@ -1947,13 +2006,13 @@ export namespace Components {
          */
         "_value"?: string;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<string | undefined>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<string | undefined>;
         /**
           * Get selection end of internal element.
          */
@@ -2066,7 +2125,7 @@ export namespace Components {
         /**
           * Sets focus on the internal element.
          */
-        "kolFocus": () => Promise<void>;
+        "focus": () => Promise<void | undefined>;
     }
     interface KolLinkButton {
         /**
@@ -2146,7 +2205,7 @@ export namespace Components {
         /**
           * Sets focus on the internal element.
          */
-        "kolFocus": () => Promise<void>;
+        "focus": () => Promise<void | undefined>;
     }
     interface KolLinkWc {
         /**
@@ -2243,10 +2302,10 @@ export namespace Components {
         /**
           * Sets focus on the internal element.
          */
-        "kolFocus": () => Promise<void>;
+        "focus": () => Promise<void | undefined>;
     }
     /**
-     * https://en.wikipedia.org/wiki/Modal_window
+     * @deprecated Use `kol-dialog` instead.
      */
     interface KolModal {
         /**
@@ -2256,7 +2315,7 @@ export namespace Components {
         /**
           * Defines the modal callback functions.
          */
-        "_on"?: KoliBriModalEventCallbacks;
+        "_on"?: KoliBriDialogEventCallbacks;
         /**
           * Defines the variant of the modal.
           * @default 'blank'
@@ -2512,13 +2571,13 @@ export namespace Components {
          */
         "_variant"?: ButtonVariantPropType;
         /**
-          * Hides the popover programmatically by forwarding the call to the web component.
+          * Sets focus on the internal element.
          */
-        "hidePopover": () => Promise<void>;
+        "focus": () => Promise<any>;
         /**
-          * Sets focus on the internal element.
+          * Hides the popover programmatically by forwarding the call to the web component.
          */
-        "kolFocus": () => Promise<void>;
+        "hidePopover": () => Promise<void>;
         /**
           * Shows the popover programmatically by forwarding the call to the web component.
          */
@@ -2622,13 +2681,13 @@ export namespace Components {
          */
         "_variant"?: ButtonVariantPropType;
         /**
-          * Hides the popover programmatically by calling the native hidePopover method.
+          * Sets focus on the internal element.
          */
-        "hidePopover": () => Promise<void>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Hides the popover programmatically by calling the native hidePopover method.
          */
-        "kolFocus": () => Promise<void>;
+        "hidePopover": () => Promise<void>;
         /**
           * Show the popover programmatically by calling the native showPopover method.
          */
@@ -2794,13 +2853,13 @@ export namespace Components {
          */
         "_value"?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;
         /**
-          * Returns the selected values.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<StencilUnknown[] | StencilUnknown>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Focuses the select element.
+          * Returns the selected values.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<StencilUnknown[] | StencilUnknown>;
     }
     interface KolSelectWc {
         /**
@@ -2903,13 +2962,13 @@ export namespace Components {
          */
         "_value"?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<StencilUnknown[] | StencilUnknown>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<StencilUnknown[] | StencilUnknown>;
     }
     interface KolSingleSelect {
         /**
@@ -3011,13 +3070,13 @@ export namespace Components {
          */
         "_value": StencilUnknown;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<StencilUnknown>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<StencilUnknown>;
     }
     interface KolSkipNav {
         /**
@@ -3029,9 +3088,9 @@ export namespace Components {
          */
         "_links": Stringified<LinkProps[]>;
         /**
-          * Sets focus on the skip navigation's first link.
+          * Sets focus on the internal element.
          */
-        "kolFocus": () => Promise<void>;
+        "focus": () => Promise<void | undefined>;
     }
     interface KolSpin {
         /**
@@ -3144,13 +3203,13 @@ export namespace Components {
          */
         "closePopup": () => Promise<void>;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<StencilUnknown>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<StencilUnknown>;
     }
     interface KolTableSettingsWc {
         /**
@@ -3437,13 +3496,13 @@ export namespace Components {
          */
         "_value"?: string;
         /**
-          * Returns the current value.
+          * Sets focus on the internal element.
          */
-        "getValue": () => Promise<string | undefined>;
+        "focus": () => Promise<void | undefined>;
         /**
-          * Sets focus on the internal element.
+          * Returns the current value.
          */
-        "kolFocus": () => Promise<void>;
+        "getValue": () => Promise<string | undefined>;
     }
     /**
      * @deprecated Will be removed in the next major version. For more information, please refer to: https://github.com/public-ui/kolibri/issues/8372
@@ -3521,15 +3580,15 @@ export namespace Components {
         /**
           * Collapses the tree item.
          */
-        "collapse": () => Promise<void>;
+        "collapse": () => Promise<void | undefined>;
         /**
           * Expands the tree item.
          */
-        "expand": () => Promise<void>;
+        "expand": () => Promise<void | undefined>;
         /**
           * Focuses the link element.
          */
-        "focusLink": () => Promise<void>;
+        "focus": () => Promise<any>;
         /**
           * Returns whether the tree item is expanded.
          */
@@ -3563,7 +3622,7 @@ export namespace Components {
         /**
           * Focuses the link element.
          */
-        "focusLink": () => Promise<void>;
+        "focus": () => Promise<void | undefined>;
         /**
           * Returns whether the tree item is expanded.
          */
@@ -3591,7 +3650,11 @@ declare global {
         prototype: HTMLKolAbbrElement;
         new (): HTMLKolAbbrElement;
     };
-    interface HTMLKolAccordionElement extends Components.KolAccordion, HTMLStencilElement {
+    interface HTMLKolAccordionElement extends Omit<Components.KolAccordion, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolAccordionElement: {
         prototype: HTMLKolAccordionElement;
@@ -3621,7 +3684,11 @@ declare global {
         prototype: HTMLKolAvatarWcElement;
         new (): HTMLKolAvatarWcElement;
     };
-    interface HTMLKolBadgeElement extends Components.KolBadge, HTMLStencilElement {
+    interface HTMLKolBadgeElement extends Omit<Components.KolBadge, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void>;
     }
     var HTMLKolBadgeElement: {
         prototype: HTMLKolBadgeElement;
@@ -3633,19 +3700,31 @@ declare global {
         prototype: HTMLKolBreadcrumbElement;
         new (): HTMLKolBreadcrumbElement;
     };
-    interface HTMLKolButtonElement extends Components.KolButton, HTMLStencilElement {
+    interface HTMLKolButtonElement extends Omit<Components.KolButton, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolButtonElement: {
         prototype: HTMLKolButtonElement;
         new (): HTMLKolButtonElement;
     };
-    interface HTMLKolButtonLinkElement extends Components.KolButtonLink, HTMLStencilElement {
+    interface HTMLKolButtonLinkElement extends Omit<Components.KolButtonLink, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolButtonLinkElement: {
         prototype: HTMLKolButtonLinkElement;
         new (): HTMLKolButtonLinkElement;
     };
-    interface HTMLKolButtonWcElement extends Components.KolButtonWc, HTMLStencilElement {
+    interface HTMLKolButtonWcElement extends Omit<Components.KolButtonWc, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolButtonWcElement: {
         prototype: HTMLKolButtonWcElement;
@@ -3663,18 +3742,41 @@ declare global {
         prototype: HTMLKolCardWcElement;
         new (): HTMLKolCardWcElement;
     };
-    interface HTMLKolComboboxElement extends Components.KolCombobox, HTMLStencilElement {
+    interface HTMLKolComboboxElement extends Omit<Components.KolCombobox, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolComboboxElement: {
         prototype: HTMLKolComboboxElement;
         new (): HTMLKolComboboxElement;
     };
-    interface HTMLKolDetailsElement extends Components.KolDetails, HTMLStencilElement {
+    interface HTMLKolDetailsElement extends Omit<Components.KolDetails, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolDetailsElement: {
         prototype: HTMLKolDetailsElement;
         new (): HTMLKolDetailsElement;
     };
+    interface HTMLKolDialogElement extends Components.KolDialog, HTMLStencilElement {
+    }
+    var HTMLKolDialogElement: {
+        prototype: HTMLKolDialogElement;
+        new (): HTMLKolDialogElement;
+    };
+    /**
+     * https://en.wikipedia.org/wiki/Modal_window
+     */
+    interface HTMLKolDialogWcElement extends Components.KolDialogWc, HTMLStencilElement {
+    }
+    var HTMLKolDialogWcElement: {
+        prototype: HTMLKolDialogWcElement;
+        new (): HTMLKolDialogWcElement;
+    };
     interface HTMLKolDrawerElement extends Components.KolDrawer, HTMLStencilElement {
     }
     var HTMLKolDrawerElement: {
@@ -3705,61 +3807,101 @@ declare global {
         prototype: HTMLKolImageElement;
         new (): HTMLKolImageElement;
     };
-    interface HTMLKolInputCheckboxElement extends Components.KolInputCheckbox, HTMLStencilElement {
+    interface HTMLKolInputCheckboxElement extends Omit<Components.KolInputCheckbox, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolInputCheckboxElement: {
         prototype: HTMLKolInputCheckboxElement;
         new (): HTMLKolInputCheckboxElement;
     };
-    interface HTMLKolInputColorElement extends Components.KolInputColor, HTMLStencilElement {
+    interface HTMLKolInputColorElement extends Omit<Components.KolInputColor, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolInputColorElement: {
         prototype: HTMLKolInputColorElement;
         new (): HTMLKolInputColorElement;
     };
-    interface HTMLKolInputDateElement extends Components.KolInputDate, HTMLStencilElement {
+    interface HTMLKolInputDateElement extends Omit<Components.KolInputDate, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolInputDateElement: {
         prototype: HTMLKolInputDateElement;
         new (): HTMLKolInputDateElement;
     };
-    interface HTMLKolInputEmailElement extends Components.KolInputEmail, HTMLStencilElement {
+    interface HTMLKolInputEmailElement extends Omit<Components.KolInputEmail, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolInputEmailElement: {
         prototype: HTMLKolInputEmailElement;
         new (): HTMLKolInputEmailElement;
     };
-    interface HTMLKolInputFileElement extends Components.KolInputFile, HTMLStencilElement {
+    interface HTMLKolInputFileElement extends Omit<Components.KolInputFile, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolInputFileElement: {
         prototype: HTMLKolInputFileElement;
         new (): HTMLKolInputFileElement;
     };
-    interface HTMLKolInputNumberElement extends Components.KolInputNumber, HTMLStencilElement {
+    interface HTMLKolInputNumberElement extends Omit<Components.KolInputNumber, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolInputNumberElement: {
         prototype: HTMLKolInputNumberElement;
         new (): HTMLKolInputNumberElement;
     };
-    interface HTMLKolInputPasswordElement extends Components.KolInputPassword, HTMLStencilElement {
+    interface HTMLKolInputPasswordElement extends Omit<Components.KolInputPassword, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolInputPasswordElement: {
         prototype: HTMLKolInputPasswordElement;
         new (): HTMLKolInputPasswordElement;
     };
-    interface HTMLKolInputRadioElement extends Components.KolInputRadio, HTMLStencilElement {
+    interface HTMLKolInputRadioElement extends Omit<Components.KolInputRadio, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolInputRadioElement: {
         prototype: HTMLKolInputRadioElement;
         new (): HTMLKolInputRadioElement;
     };
-    interface HTMLKolInputRangeElement extends Components.KolInputRange, HTMLStencilElement {
+    interface HTMLKolInputRangeElement extends Omit<Components.KolInputRange, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolInputRangeElement: {
         prototype: HTMLKolInputRangeElement;
         new (): HTMLKolInputRangeElement;
     };
-    interface HTMLKolInputTextElement extends Components.KolInputText, HTMLStencilElement {
+    interface HTMLKolInputTextElement extends Omit<Components.KolInputText, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolInputTextElement: {
         prototype: HTMLKolInputTextElement;
@@ -3771,26 +3913,38 @@ declare global {
         prototype: HTMLKolKolibriElement;
         new (): HTMLKolKolibriElement;
     };
-    interface HTMLKolLinkElement extends Components.KolLink, HTMLStencilElement {
+    interface HTMLKolLinkElement extends Omit<Components.KolLink, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolLinkElement: {
         prototype: HTMLKolLinkElement;
         new (): HTMLKolLinkElement;
     };
-    interface HTMLKolLinkButtonElement extends Components.KolLinkButton, HTMLStencilElement {
+    interface HTMLKolLinkButtonElement extends Omit<Components.KolLinkButton, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolLinkButtonElement: {
         prototype: HTMLKolLinkButtonElement;
         new (): HTMLKolLinkButtonElement;
     };
-    interface HTMLKolLinkWcElement extends Components.KolLinkWc, HTMLStencilElement {
+    interface HTMLKolLinkWcElement extends Omit<Components.KolLinkWc, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolLinkWcElement: {
         prototype: HTMLKolLinkWcElement;
         new (): HTMLKolLinkWcElement;
     };
     /**
-     * https://en.wikipedia.org/wiki/Modal_window
+     * @deprecated Use `kol-dialog` instead.
      */
     interface HTMLKolModalElement extends Components.KolModal, HTMLStencilElement {
     }
@@ -3816,7 +3970,7 @@ declare global {
         prototype: HTMLKolPaginationWcElement;
         new (): HTMLKolPaginationWcElement;
     };
-    interface HTMLKolPopoverButtonElement extends Omit<Components.KolPopoverButton, "hidePopover" | "showPopover">, HTMLStencilElement {
+    interface HTMLKolPopoverButtonElement extends Omit<Components.KolPopoverButton, "hidePopover" | "showPopover" | "focus">, HTMLStencilElement {
         /**
           * Hides the popover programmatically by forwarding the call to the web component.
          */
@@ -3825,12 +3979,16 @@ declare global {
           * Shows the popover programmatically by forwarding the call to the web component.
          */
         "showPopover": () => Promise<void>;
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<any>;
     }
     var HTMLKolPopoverButtonElement: {
         prototype: HTMLKolPopoverButtonElement;
         new (): HTMLKolPopoverButtonElement;
     };
-    interface HTMLKolPopoverButtonWcElement extends Omit<Components.KolPopoverButtonWc, "hidePopover" | "showPopover">, HTMLStencilElement {
+    interface HTMLKolPopoverButtonWcElement extends Omit<Components.KolPopoverButtonWc, "hidePopover" | "showPopover" | "focus">, HTMLStencilElement {
         /**
           * Hides the popover programmatically by calling the native hidePopover method.
          */
@@ -3839,6 +3997,10 @@ declare global {
           * Show the popover programmatically by calling the native showPopover method.
          */
         "showPopover": () => Promise<void>;
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolPopoverButtonWcElement: {
         prototype: HTMLKolPopoverButtonWcElement;
@@ -3862,25 +4024,41 @@ declare global {
         prototype: HTMLKolQuoteElement;
         new (): HTMLKolQuoteElement;
     };
-    interface HTMLKolSelectElement extends Components.KolSelect, HTMLStencilElement {
+    interface HTMLKolSelectElement extends Omit<Components.KolSelect, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolSelectElement: {
         prototype: HTMLKolSelectElement;
         new (): HTMLKolSelectElement;
     };
-    interface HTMLKolSelectWcElement extends Components.KolSelectWc, HTMLStencilElement {
+    interface HTMLKolSelectWcElement extends Omit<Components.KolSelectWc, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolSelectWcElement: {
         prototype: HTMLKolSelectWcElement;
         new (): HTMLKolSelectWcElement;
     };
-    interface HTMLKolSingleSelectElement extends Components.KolSingleSelect, HTMLStencilElement {
+    interface HTMLKolSingleSelectElement extends Omit<Components.KolSingleSelect, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolSingleSelectElement: {
         prototype: HTMLKolSingleSelectElement;
         new (): HTMLKolSingleSelectElement;
     };
-    interface HTMLKolSkipNavElement extends Components.KolSkipNav, HTMLStencilElement {
+    interface HTMLKolSkipNavElement extends Omit<Components.KolSkipNav, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolSkipNavElement: {
         prototype: HTMLKolSkipNavElement;
@@ -3892,7 +4070,11 @@ declare global {
         prototype: HTMLKolSpinElement;
         new (): HTMLKolSpinElement;
     };
-    interface HTMLKolSplitButtonElement extends Components.KolSplitButton, HTMLStencilElement {
+    interface HTMLKolSplitButtonElement extends Omit<Components.KolSplitButton, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolSplitButtonElement: {
         prototype: HTMLKolSplitButtonElement;
@@ -3928,7 +4110,11 @@ declare global {
         prototype: HTMLKolTabsElement;
         new (): HTMLKolTabsElement;
     };
-    interface HTMLKolTextareaElement extends Components.KolTextarea, HTMLStencilElement {
+    interface HTMLKolTextareaElement extends Omit<Components.KolTextarea, "focus">, HTMLStencilElement {
+        /**
+          * Sets focus on the internal element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolTextareaElement: {
         prototype: HTMLKolTextareaElement;
@@ -3961,13 +4147,21 @@ declare global {
         prototype: HTMLKolTreeElement;
         new (): HTMLKolTreeElement;
     };
-    interface HTMLKolTreeItemElement extends Components.KolTreeItem, HTMLStencilElement {
+    interface HTMLKolTreeItemElement extends Omit<Components.KolTreeItem, "focus">, HTMLStencilElement {
+        /**
+          * Focuses the link element.
+         */
+        "focus": () => Promise<any>;
     }
     var HTMLKolTreeItemElement: {
         prototype: HTMLKolTreeItemElement;
         new (): HTMLKolTreeItemElement;
     };
-    interface HTMLKolTreeItemWcElement extends Components.KolTreeItemWc, HTMLStencilElement {
+    interface HTMLKolTreeItemWcElement extends Omit<Components.KolTreeItemWc, "focus">, HTMLStencilElement {
+        /**
+          * Focuses the link element.
+         */
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolTreeItemWcElement: {
         prototype: HTMLKolTreeItemWcElement;
@@ -4007,6 +4201,8 @@ declare global {
         "kol-card-wc": HTMLKolCardWcElement;
         "kol-combobox": HTMLKolComboboxElement;
         "kol-details": HTMLKolDetailsElement;
+        "kol-dialog": HTMLKolDialogElement;
+        "kol-dialog-wc": HTMLKolDialogWcElement;
         "kol-drawer": HTMLKolDrawerElement;
         "kol-form": HTMLKolFormElement;
         "kol-heading": HTMLKolHeadingElement;
@@ -4641,6 +4837,49 @@ declare namespace LocalJSX {
          */
         "_open"?: boolean;
     }
+    interface KolDialog {
+        /**
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
+         */
+        "_label": LabelPropType;
+        /**
+          * Defines the modal callback functions.
+         */
+        "_on"?: KoliBriDialogEventCallbacks;
+        /**
+          * Defines the variant of the modal.
+          * @default 'blank'
+         */
+        "_variant"?: ModalVariantPropType;
+        /**
+          * Defines the width of the modal. (max-width: 100%)
+          * @default '100%'
+         */
+        "_width"?: string;
+    }
+    /**
+     * https://en.wikipedia.org/wiki/Modal_window
+     */
+    interface KolDialogWc {
+        /**
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
+         */
+        "_label": LabelPropType;
+        /**
+          * Defines the modal callback functions.
+         */
+        "_on"?: KoliBriDialogEventCallbacks;
+        /**
+          * Defines the variant of the modal.
+          * @default 'blank'
+         */
+        "_variant"?: ModalVariantPropType;
+        /**
+          * Defines the width of the modal. (max-width: 100%)
+          * @default '100%'
+         */
+        "_width"?: string;
+    }
     interface KolDrawer {
         /**
           * Defines the visual orientation of the component.
@@ -6037,7 +6276,7 @@ declare namespace LocalJSX {
         "_tooltipAlign"?: TooltipAlignPropType;
     }
     /**
-     * https://en.wikipedia.org/wiki/Modal_window
+     * @deprecated Use `kol-dialog` instead.
      */
     interface KolModal {
         /**
@@ -6047,7 +6286,7 @@ declare namespace LocalJSX {
         /**
           * Defines the modal callback functions.
          */
-        "_on"?: KoliBriModalEventCallbacks;
+        "_on"?: KoliBriDialogEventCallbacks;
         /**
           * Defines the variant of the modal.
           * @default 'blank'
@@ -7226,6 +7465,8 @@ declare namespace LocalJSX {
         "kol-card-wc": KolCardWc;
         "kol-combobox": KolCombobox;
         "kol-details": KolDetails;
+        "kol-dialog": KolDialog;
+        "kol-dialog-wc": KolDialogWc;
         "kol-drawer": KolDrawer;
         "kol-form": KolForm;
         "kol-heading": KolHeading;
@@ -7296,6 +7537,11 @@ declare module "@stencil/core" {
             "kol-card-wc": LocalJSX.KolCardWc & JSXBase.HTMLAttributes<HTMLKolCardWcElement>;
             "kol-combobox": LocalJSX.KolCombobox & JSXBase.HTMLAttributes<HTMLKolComboboxElement>;
             "kol-details": LocalJSX.KolDetails & JSXBase.HTMLAttributes<HTMLKolDetailsElement>;
+            "kol-dialog": LocalJSX.KolDialog & JSXBase.HTMLAttributes<HTMLKolDialogElement>;
+            /**
+             * https://en.wikipedia.org/wiki/Modal_window
+             */
+            "kol-dialog-wc": LocalJSX.KolDialogWc & JSXBase.HTMLAttributes<HTMLKolDialogWcElement>;
             "kol-drawer": LocalJSX.KolDrawer & JSXBase.HTMLAttributes<HTMLKolDrawerElement>;
             "kol-form": LocalJSX.KolForm & JSXBase.HTMLAttributes<HTMLKolFormElement>;
             "kol-heading": LocalJSX.KolHeading & JSXBase.HTMLAttributes<HTMLKolHeadingElement>;
@@ -7316,7 +7562,7 @@ declare module "@stencil/core" {
             "kol-link-button": LocalJSX.KolLinkButton & JSXBase.HTMLAttributes<HTMLKolLinkButtonElement>;
             "kol-link-wc": LocalJSX.KolLinkWc & JSXBase.HTMLAttributes<HTMLKolLinkWcElement>;
             /**
-             * https://en.wikipedia.org/wiki/Modal_window
+             * @deprecated Use `kol-dialog` instead.
              */
             "kol-modal": LocalJSX.KolModal & JSXBase.HTMLAttributes<HTMLKolModalElement>;
             "kol-nav": LocalJSX.KolNav & JSXBase.HTMLAttributes<HTMLKolNavElement>;