@public-ui/components 2.1.3 → 2.1.4-alpha.1

package/dist/types/components/tree-item/component.d.ts

@@ -2,7 +2,10 @@ import { type JSX } from '../../stencil-public-runtime';
 import type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '../../schema';
 export declare class KolTreeItemWc implements TreeItemAPI {
     private linkElement;
+    private groupId;
+    private level?;
     host: HTMLElement;
+    private renderIcon;
     render(): JSX.Element;
     state: TreeItemStates;
     _active?: OpenPropType;
@@ -14,6 +17,7 @@ export declare class KolTreeItemWc implements TreeItemAPI {
     validateOpen(value?: OpenPropType): void;
     validateHref(value?: HrefPropType): void;
     componentWillLoad(): void;
+    private determineTreeItemDepth;
     private handleSlotchange;
     private checkForChildren;
     focusLink(): Promise<void>;

package/dist/types/components/tree-item/test/html.mock.d.ts

@@ -0,0 +1,2 @@
+import type { TreeItemProps } from '../../../schema';
+export declare const getTreeItemHtml: (props: TreeItemProps) => string;

package/dist/types/components.d.ts

@@ -5,10 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AccessKeyPropType, AlertType, AlertVariant, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonProps, ButtonTypePropType, ButtonVariantPropType, CSSResize, CustomClassPropType, DownloadPropType, ErrorListPropType, EventCallbacks, HeadingLevel, HeadingVariantPropType, HrefPropType, IconsPropType, IdPropType, ImageSourcePropType, InputCheckboxIconsProp, InputCheckboxVariant, InputDateType, InputTextType, InputTypeOnDefault, InputTypeOnOff, Iso8601, KoliBriAccordionCallbacks, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriFormCallbacks, KoliBriHorizontalIcons, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriProgressVariantType, KoliBriQuoteVariant, KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTabsCallbacks, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, ListStyleType, Loading, MaxPropType, MsgPropType, NamePropType, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, Orientation, PaginationHasButton, PaginationPositionPropType, PropColor, RowsPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, W3CInputValue } from "./schema";
+import { AccessKeyPropType, AlertType, AlertVariant, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaOwnsPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonProps, ButtonTypePropType, ButtonVariantPropType, CSSResize, CustomClassPropType, DownloadPropType, ErrorListPropType, EventCallbacks, HeadingLevel, HeadingVariantPropType, HrefPropType, IconsPropType, IdPropType, ImageSourcePropType, InputCheckboxIconsProp, InputCheckboxVariant, InputDateType, InputTextType, InputTypeOnDefault, InputTypeOnOff, Iso8601, KoliBriAccordionCallbacks, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriFormCallbacks, KoliBriHorizontalIcons, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriProgressVariantType, KoliBriQuoteVariant, KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTabsCallbacks, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, ListStyleType, Loading, MaxPropType, ModalPropType, MsgPropType, NamePropType, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, Orientation, PaginationHasButton, PaginationPositionPropType, PropColor, RowsPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, W3CInputValue } from "./schema";
 import { PasswordVariantPropType } from "./schema/props/variant/password-variant";
 import { Bundesamt, Bundesanstalt, Bundesministerium } from "./enums/bund";
-export { AccessKeyPropType, AlertType, AlertVariant, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonProps, ButtonTypePropType, ButtonVariantPropType, CSSResize, CustomClassPropType, DownloadPropType, ErrorListPropType, EventCallbacks, HeadingLevel, HeadingVariantPropType, HrefPropType, IconsPropType, IdPropType, ImageSourcePropType, InputCheckboxIconsProp, InputCheckboxVariant, InputDateType, InputTextType, InputTypeOnDefault, InputTypeOnOff, Iso8601, KoliBriAccordionCallbacks, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriFormCallbacks, KoliBriHorizontalIcons, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriProgressVariantType, KoliBriQuoteVariant, KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTabsCallbacks, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, ListStyleType, Loading, MaxPropType, MsgPropType, NamePropType, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, Orientation, PaginationHasButton, PaginationPositionPropType, PropColor, RowsPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, W3CInputValue } from "./schema";
+export { AccessKeyPropType, AlertType, AlertVariant, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaOwnsPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonProps, ButtonTypePropType, ButtonVariantPropType, CSSResize, CustomClassPropType, DownloadPropType, ErrorListPropType, EventCallbacks, HeadingLevel, HeadingVariantPropType, HrefPropType, IconsPropType, IdPropType, ImageSourcePropType, InputCheckboxIconsProp, InputCheckboxVariant, InputDateType, InputTextType, InputTypeOnDefault, InputTypeOnOff, Iso8601, KoliBriAccordionCallbacks, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriFormCallbacks, KoliBriHorizontalIcons, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriProgressVariantType, KoliBriQuoteVariant, KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTabsCallbacks, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, ListStyleType, Loading, MaxPropType, ModalPropType, MsgPropType, NamePropType, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, Orientation, PaginationHasButton, PaginationPositionPropType, PropColor, RowsPropType, SpinVariantPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, W3CInputValue } from "./schema";
 export { PasswordVariantPropType } from "./schema/props/variant/password-variant";
 export { Bundesamt, Bundesanstalt, Bundesministerium } from "./enums/bund";
 export namespace Components {
@@ -518,6 +518,30 @@ export namespace Components {
          */
         "_open"?: boolean;
     }
+    interface KolDrawer {
+        /**
+          * Specifies the orientation of the drawer.
+         */
+        "_align"?: AlignPropType;
+        /**
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
+         */
+        "_label": LabelPropType;
+        /**
+          * Indicates whether the drawer is a modal.
+         */
+        "_modal"?: ModalPropType;
+        /**
+          * Specifies the EventCallback function to be called when the drawer is closing.
+         */
+        "_on"?: KoliBriModalEventCallbacks;
+        /**
+          * Specifies the default open state of the drawer.
+         */
+        "_open"?: OpenPropType;
+        "close": () => Promise<void>;
+        "open": () => Promise<void>;
+    }
     interface KolForm {
         /**
           * A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error.
@@ -1930,6 +1954,15 @@ export namespace Components {
           * Defines the value for the aria-current attribute.
          */
         "_ariaCurrentValue"?: AriaCurrentValuePropType;
+        /**
+          * Marks this element as open/expanded, or that the connected element (aria-controls/aria-owns) is open/expanded.
+          * @TODO : Change type to `AriaExpandedPropType` after Stencil#4663 has been resolved.
+         */
+        "_ariaExpanded"?: boolean;
+        /**
+          * Defines the contextual relationship between a parent and its child elements.
+         */
+        "_ariaOwns"?: AriaOwnsPropType;
         /**
           * Makes the element not focusable and ignore all events.
          */
@@ -2856,6 +2889,12 @@ declare global {
         prototype: HTMLKolDetailsElement;
         new (): HTMLKolDetailsElement;
     };
+    interface HTMLKolDrawerElement extends Components.KolDrawer, HTMLStencilElement {
+    }
+    var HTMLKolDrawerElement: {
+        prototype: HTMLKolDrawerElement;
+        new (): HTMLKolDrawerElement;
+    };
     interface HTMLKolFormElement extends Components.KolForm, HTMLStencilElement {
     }
     var HTMLKolFormElement: {
@@ -3179,6 +3218,7 @@ declare global {
         "kol-card": HTMLKolCardElement;
         "kol-combobox": HTMLKolComboboxElement;
         "kol-details": HTMLKolDetailsElement;
+        "kol-drawer": HTMLKolDrawerElement;
         "kol-form": HTMLKolFormElement;
         "kol-heading": HTMLKolHeadingElement;
         "kol-heading-wc": HTMLKolHeadingWcElement;
@@ -3719,6 +3759,28 @@ declare namespace LocalJSX {
          */
         "_open"?: boolean;
     }
+    interface KolDrawer {
+        /**
+          * Specifies the orientation of the drawer.
+         */
+        "_align"?: AlignPropType;
+        /**
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
+         */
+        "_label": LabelPropType;
+        /**
+          * Indicates whether the drawer is a modal.
+         */
+        "_modal"?: ModalPropType;
+        /**
+          * Specifies the EventCallback function to be called when the drawer is closing.
+         */
+        "_on"?: KoliBriModalEventCallbacks;
+        /**
+          * Specifies the default open state of the drawer.
+         */
+        "_open"?: OpenPropType;
+    }
     interface KolForm {
         /**
           * A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error.
@@ -5075,6 +5137,15 @@ declare namespace LocalJSX {
           * Defines the value for the aria-current attribute.
          */
         "_ariaCurrentValue"?: AriaCurrentValuePropType;
+        /**
+          * Marks this element as open/expanded, or that the connected element (aria-controls/aria-owns) is open/expanded.
+          * @TODO : Change type to `AriaExpandedPropType` after Stencil#4663 has been resolved.
+         */
+        "_ariaExpanded"?: boolean;
+        /**
+          * Defines the contextual relationship between a parent and its child elements.
+         */
+        "_ariaOwns"?: AriaOwnsPropType;
         /**
           * Makes the element not focusable and ignore all events.
          */
@@ -5895,6 +5966,7 @@ declare namespace LocalJSX {
         "kol-card": KolCard;
         "kol-combobox": KolCombobox;
         "kol-details": KolDetails;
+        "kol-drawer": KolDrawer;
         "kol-form": KolForm;
         "kol-heading": KolHeading;
         "kol-heading-wc": KolHeadingWc;
@@ -5967,6 +6039,7 @@ declare module "@stencil/core" {
             "kol-card": LocalJSX.KolCard & JSXBase.HTMLAttributes<HTMLKolCardElement>;
             "kol-combobox": LocalJSX.KolCombobox & JSXBase.HTMLAttributes<HTMLKolComboboxElement>;
             "kol-details": LocalJSX.KolDetails & JSXBase.HTMLAttributes<HTMLKolDetailsElement>;
+            "kol-drawer": LocalJSX.KolDrawer & JSXBase.HTMLAttributes<HTMLKolDrawerElement>;
             "kol-form": LocalJSX.KolForm & JSXBase.HTMLAttributes<HTMLKolFormElement>;
             "kol-heading": LocalJSX.KolHeading & JSXBase.HTMLAttributes<HTMLKolHeadingElement>;
             "kol-heading-wc": LocalJSX.KolHeadingWc & JSXBase.HTMLAttributes<HTMLKolHeadingWcElement>;

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

@@ -13,6 +13,7 @@ export declare let KolButtonTag: "kol-button";
 export declare let KolButtonWcTag: "kol-button-wc";
 export declare let KolCardTag: "kol-card";
 export declare let KolDetailsTag: "kol-details";
+export declare let KolDrawerTag: "kol-drawer";
 export declare let KolFormTag: "kol-form";
 export declare let KolHeadingTag: "kol-heading";
 export declare let KolHeadingWcTag: "kol-heading-wc";

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

@@ -1,11 +1,12 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropAccessKey, PropAlternativeButtonLinkRole, PropAriaControls, PropAriaExpanded, PropAriaSelected, PropButtonCallbacks, PropButtonType, PropButtonVariant, PropCustomClass, PropDisabled, PropHideLabel, PropIcons, PropId, PropLabelWithExpertSlot, PropName, PropSyncValueBySelector, PropTooltipAlign } from '../props';
+import type { AriaExpandedPropType, PropAccessKey, PropAlternativeButtonLinkRole, PropAriaControls, PropAriaSelected, PropButtonCallbacks, PropButtonType, PropButtonVariant, PropCustomClass, PropDisabled, PropHideLabel, PropIcons, PropId, PropLabelWithExpertSlot, PropName, PropSyncValueBySelector, PropTooltipAlign } from '../props';
 import type { KoliBriAllIcons, StencilUnknown, Stringified } from '../types';
 export type RequiredButtonProps = PropLabelWithExpertSlot;
 export type OptionalButtonProps = {
     tabIndex: number;
     value: Stringified<StencilUnknown>;
-} & PropAlternativeButtonLinkRole & PropAriaControls & PropAriaExpanded & PropAriaSelected & PropButtonCallbacks<StencilUnknown> & PropButtonType & PropButtonVariant & PropCustomClass & PropDisabled & PropHideLabel & PropIcons & PropId & PropName & PropSyncValueBySelector & PropTooltipAlign & PropAccessKey;
+    ariaExpanded: AriaExpandedPropType;
+} & PropAlternativeButtonLinkRole & PropAriaControls & PropAriaSelected & PropButtonCallbacks<StencilUnknown> & PropButtonType & PropButtonVariant & PropCustomClass & PropDisabled & PropHideLabel & PropIcons & PropId & PropName & PropSyncValueBySelector & PropTooltipAlign & PropAccessKey;
 export type RequiredButtonStates = RequiredButtonProps & PropButtonType & PropButtonVariant & {
     icons: KoliBriAllIcons;
 };

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

@@ -0,0 +1,15 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { PropLabel, PropOpen, PropAlign, PropModal } from '../props';
+import type { KoliBriModalEventCallbacks } from '../types';
+type RequiredProps = PropLabel;
+type OptionalProps = PropAlign & PropOpen & PropModal & {
+    on: KoliBriModalEventCallbacks;
+};
+type RequiredStates = PropAlign & PropOpen & PropLabel;
+type OptionalStates = PropModal & {
+    on: KoliBriModalEventCallbacks;
+};
+export type DrawerProps = Generic.Element.Members<RequiredProps, OptionalProps>;
+export type DrawerStates = Generic.Element.Members<RequiredStates, OptionalStates>;
+export type DrawerAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
+export {};

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

@@ -1 +1 @@
-export*from"./abbr";export*from"./accordion";export*from"./alert";export*from"./avatar";export*from"./badge";export*from"./breadcrumb";export*from"./button";export*from"./button-group";export*from"./button-link";export*from"./card";export*from"./details";export*from"./form";export*from"./heading";export*from"./icon";export*from"./image";export*from"./indented-text";export*from"./input";export*from"./input-checkbox";export*from"./input-color";export*from"./input-date";export*from"./input-email";export*from"./input-file";export*from"./input-number";export*from"./input-password";export*from"./input-radio";export*from"./input-range";export*from"./input-text";export*from"./kolibri";export*from"./link";export*from"./link-button";export*from"./link-group";export*from"./modal";export*from"./nav";export*from"./pagination";export*from"./popover";export*from"./progress";export*from"./quote";export*from"./select";export*from"./skip-nav";export*from"./span";export*from"./spin";export*from"./split-button";export*from"./symbol";export*from"./table";export*from"./tableStateless";export*from"./tabs";export*from"./textarea";export*from"./toaster";export*from"./toolbar";export*from"./tooltip";export*from"./tree";export*from"./tree-item";export*from"./version";export*from"./combobox";
+export*from"./abbr";export*from"./accordion";export*from"./alert";export*from"./avatar";export*from"./badge";export*from"./breadcrumb";export*from"./button";export*from"./button-group";export*from"./button-link";export*from"./card";export*from"./details";export*from"./drawer";export*from"./form";export*from"./heading";export*from"./icon";export*from"./image";export*from"./indented-text";export*from"./input";export*from"./input-checkbox";export*from"./input-color";export*from"./input-date";export*from"./input-email";export*from"./input-file";export*from"./input-number";export*from"./input-password";export*from"./input-radio";export*from"./input-range";export*from"./input-text";export*from"./kolibri";export*from"./link";export*from"./link-button";export*from"./link-group";export*from"./modal";export*from"./nav";export*from"./pagination";export*from"./popover";export*from"./progress";export*from"./quote";export*from"./select";export*from"./skip-nav";export*from"./span";export*from"./spin";export*from"./split-button";export*from"./symbol";export*from"./table";export*from"./tableStateless";export*from"./tabs";export*from"./textarea";export*from"./toaster";export*from"./toolbar";export*from"./tooltip";export*from"./tree";export*from"./tree-item";export*from"./version";export*from"./combobox";

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

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropAccessKey, PropAlternativeButtonLinkRole, PropAriaCurrentValue, PropDisabled, PropDownload, PropHideLabel, PropHref, PropIcons, PropLabelWithExpertSlot, PropLinkOnCallbacks, PropLinkTarget, PropTooltipAlign } from '../props';
+import type { PropAccessKey, PropAlternativeButtonLinkRole, PropAriaCurrentValue, PropAriaExpanded, PropAriaOwns, PropDisabled, PropDownload, PropHideLabel, PropHref, PropIcons, PropLabelWithExpertSlot, PropLinkOnCallbacks, PropLinkTarget, PropTooltipAlign } from '../props';
 export type RequiredProps = PropHref;
 export type OptionalProps = {
     tabIndex: number;
@@ -7,7 +7,7 @@ export type OptionalProps = {
 type RequiredStates = PropAriaCurrentValue & PropIcons & PropHref;
 type OptionalStates = {
     ariaCurrent: string;
-} & Omit<RequiredProps & OptionalProps, keyof RequiredStates>;
+} & PropAriaExpanded & PropAriaOwns & Omit<RequiredProps & OptionalProps, keyof RequiredStates>;
 export type LinkProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type LinkStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type LinkAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;

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

@@ -1,5 +1,5 @@
 import { Theme } from 'adopted-style-sheets';
-export declare const KoliBri: Theme<"kol", "info" | "success" | "warning" | "error" | "message" | "close" | "form-description" | "of" | "characters" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "logo-description" | "open-link-in-tab" | "kolibri-logo", "symbol" | "details" | "abbr" | "button" | "form" | "link" | "nav" | "progress" | "select" | "table" | "textarea" | "image" | "icon" | "alert" | "card" | "accordion" | "accordion-group" | "avatar" | "badge" | "breadcrumb" | "button-group" | "button-link" | "combobox" | "heading" | "indented-text" | "input-checkbox" | "input-color" | "input-date" | "input-email" | "input-file" | "input-number" | "input-password" | "input-radio" | "input-range" | "input-text" | "kolibri" | "link-button" | "link-group" | "logo" | "modal" | "pagination" | "separator" | "skip-nav" | "spin" | "split-button" | "table-stateless" | "table-stateful" | "tabs" | "toast-container" | "toolbar" | "tooltip" | "tree" | "tree-item">;
+export declare const KoliBri: Theme<"kol", "info" | "success" | "warning" | "error" | "message" | "close" | "form-description" | "of" | "characters" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "logo-description" | "open-link-in-tab" | "kolibri-logo", "symbol" | "details" | "abbr" | "button" | "form" | "link" | "nav" | "progress" | "select" | "table" | "textarea" | "image" | "icon" | "alert" | "card" | "accordion" | "accordion-group" | "avatar" | "badge" | "breadcrumb" | "button-group" | "button-link" | "combobox" | "drawer" | "heading" | "indented-text" | "input-checkbox" | "input-color" | "input-date" | "input-email" | "input-file" | "input-number" | "input-password" | "input-radio" | "input-range" | "input-text" | "kolibri" | "link-button" | "link-group" | "logo" | "modal" | "pagination" | "separator" | "skip-nav" | "spin" | "split-button" | "table-stateless" | "table-stateful" | "tabs" | "toast-container" | "toolbar" | "tooltip" | "tree" | "tree-item">;
 export * from './components';
 export * from './props';
 export * from './types';

package/dist/types/schema/props/alternative-button-link-role.d.ts

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-export type AlternativeButtonLinkRolePropType = 'button' | 'link' | 'tab';
+export type AlternativeButtonLinkRolePropType = 'button' | 'link' | 'tab' | 'treeitem';
 export type PropAlternativeButtonLinkRole = {
     role: AlternativeButtonLinkRolePropType;
 };

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

@@ -1,7 +1,6 @@
 import type { Generic } from 'adopted-style-sheets';
-type AriaExpandedPropType = boolean;
+export type AriaExpandedPropType = boolean;
 export type PropAriaExpanded = {
     ariaExpanded: AriaExpandedPropType;
 };
 export declare const validateAriaExpanded: (component: Generic.Element.Component, value?: AriaExpandedPropType) => void;
-export {};

package/dist/types/schema/props/aria-owns.d.ts

@@ -0,0 +1,6 @@
+import type { Generic } from 'adopted-style-sheets';
+export type AriaOwnsPropType = string;
+export type PropAriaOwns = {
+    ariaOwns: AriaOwnsPropType;
+};
+export declare const validateAriaOwns: (component: Generic.Element.Component, value?: AriaOwnsPropType) => void;

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

@@ -1 +1 @@
-export*from"./access-key";export*from"./active";export*from"./adjust-height";export*from"./alert";export*from"./align";export*from"./alternative-button-link-role";export*from"./aria-controls";export*from"./aria-current-value";export*from"./aria-expanded";export*from"./aria-selected";export*from"./button-callbacks";export*from"./button-type";export*from"./button-variant";export*from"./checked";export*from"./collapsible";export*from"./color";export*from"./custom-class";export*from"./disabled";export*from"./download";export*from"./error-list";export*from"./has-closer";export*from"./has-compact-button";export*from"./has-counter";export*from"./has-icons-when-expanded";export*from"./heading-variant";export*from"./hide-error";export*from"./hide-label";export*from"./href";export*from"./icons";export*from"./id";export*from"./image-source";export*from"./indeterminate";export*from"./label";export*from"./link-on-callbacks";export*from"./link-target";export*from"./loading";export*from"./max";export*from"./msg";export*from"./multiple";export*from"./name";export*from"./open";export*from"./options";export*from"./pagination-position";export*from"./read-only";export*from"./required";export*from"./rows";export*from"./show";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-header-cells";export*from"./table-selection";export*from"./tooltip-align";export*from"./toolbar-items";export*from"./touched";export*from"./variant/spin";
+export*from"./access-key";export*from"./active";export*from"./adjust-height";export*from"./alert";export*from"./align";export*from"./alternative-button-link-role";export*from"./aria-controls";export*from"./aria-current-value";export*from"./aria-expanded";export*from"./aria-owns";export*from"./aria-selected";export*from"./button-callbacks";export*from"./button-type";export*from"./button-variant";export*from"./checked";export*from"./collapsible";export*from"./color";export*from"./custom-class";export*from"./disabled";export*from"./download";export*from"./error-list";export*from"./has-closer";export*from"./has-compact-button";export*from"./has-counter";export*from"./has-icons-when-expanded";export*from"./heading-variant";export*from"./hide-error";export*from"./hide-label";export*from"./href";export*from"./icons";export*from"./id";export*from"./image-source";export*from"./indeterminate";export*from"./label";export*from"./link-on-callbacks";export*from"./link-target";export*from"./loading";export*from"./max";export*from"./modal";export*from"./msg";export*from"./multiple";export*from"./name";export*from"./open";export*from"./options";export*from"./pagination-position";export*from"./read-only";export*from"./required";export*from"./rows";export*from"./show";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-header-cells";export*from"./table-selection";export*from"./tooltip-align";export*from"./toolbar-items";export*from"./touched";export*from"./variant/spin";

package/dist/types/schema/props/modal.d.ts

@@ -0,0 +1,6 @@
+import type { Generic } from 'adopted-style-sheets';
+export type ModalPropType = boolean;
+export type PropModal = {
+    modal: ModalPropType;
+};
+export declare const validateModal: (component: Generic.Element.Component, value?: ModalPropType) => void;

package/dist/types/schema/tag-names.d.ts

@@ -12,44 +12,45 @@ export declare enum TagEnum {
     'card' = 10,
     'combobox' = 11,
     'details' = 12,
-    'form' = 13,
-    'heading' = 14,
-    'icon' = 15,
-    'image' = 16,
-    'indented-text' = 17,
-    'input-checkbox' = 18,
-    'input-color' = 19,
-    'input-date' = 20,
-    'input-email' = 21,
-    'input-file' = 22,
-    'input-number' = 23,
-    'input-password' = 24,
-    'input-radio' = 25,
-    'input-range' = 26,
-    'input-text' = 27,
-    'kolibri' = 28,
-    'link' = 29,
-    'link-button' = 30,
-    'link-group' = 31,
-    'logo' = 32,
-    'modal' = 33,
-    'nav' = 34,
-    'pagination' = 35,
-    'progress' = 36,
-    'select' = 37,
-    'separator' = 38,
-    'skip-nav' = 39,
-    'spin' = 40,
-    'split-button' = 41,
-    'symbol' = 42,
-    'table' = 43,
-    'table-stateless' = 44,
-    'table-stateful' = 45,
-    'tabs' = 46,
-    'textarea' = 47,
-    'toast-container' = 48,
-    'toolbar' = 49,
-    'tooltip' = 50,
-    'tree' = 51,
-    'tree-item' = 52
+    'drawer' = 13,
+    'form' = 14,
+    'heading' = 15,
+    'icon' = 16,
+    'image' = 17,
+    'indented-text' = 18,
+    'input-checkbox' = 19,
+    'input-color' = 20,
+    'input-date' = 21,
+    'input-email' = 22,
+    'input-file' = 23,
+    'input-number' = 24,
+    'input-password' = 25,
+    'input-radio' = 26,
+    'input-range' = 27,
+    'input-text' = 28,
+    'kolibri' = 29,
+    'link' = 30,
+    'link-button' = 31,
+    'link-group' = 32,
+    'logo' = 33,
+    'modal' = 34,
+    'nav' = 35,
+    'pagination' = 36,
+    'progress' = 37,
+    'select' = 38,
+    'separator' = 39,
+    'skip-nav' = 40,
+    'spin' = 41,
+    'split-button' = 42,
+    'symbol' = 43,
+    'table' = 44,
+    'table-stateless' = 45,
+    'table-stateful' = 46,
+    'tabs' = 47,
+    'textarea' = 48,
+    'toast-container' = 49,
+    'toolbar' = 50,
+    'tooltip' = 51,
+    'tree' = 52,
+    'tree-item' = 53
 }

package/doc/badge.md

@@ -105,7 +105,7 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 | `_color`              | `_color`        | Defines the backgroundColor and foregroundColor.                                                                   | `string` \| `undefined` \| `{ backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `'#000'`    |
 | `_icons`              | `_icons`        | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                    | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 | `_label` _(required)_ | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
-| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only).                             | `string` \| `undefined` \| `{ _label: string; } & { _tabIndex?: number` \| `undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType` \| `undefined; _ariaControls?: string` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _on?: ButtonCallbacksPropType<StencilUnknown>` \| `undefined; _type?: "button"` \| `"reset"` \| `"submit"` \| `undefined; _variant?: "primary"` \| `"secondary"` \| `"normal"` \| `"tertiary"` \| `"danger"` \| `"ghost"` \| `"custom"` \| `undefined; _customClass?: string` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _icons?: IconsPropType` \| `undefined; _id?: string` \| `undefined; _name?: string` \| `undefined; _syncValueBySelector?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; _accessKey?: string` \| `undefined; }` | `undefined` |
+| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only).                             | `string` \| `undefined` \| `{ _label: string; } & { _tabIndex?: number` \| `undefined; _value?: Stringified<StencilUnknown>; _ariaExpanded?: boolean` \| `undefined; _role?: AlternativeButtonLinkRolePropType` \| `undefined; _ariaControls?: string` \| `undefined; _ariaSelected?: boolean` \| `undefined; _on?: ButtonCallbacksPropType<StencilUnknown>` \| `undefined; _type?: "button"` \| `"reset"` \| `"submit"` \| `undefined; _variant?: "primary"` \| `"secondary"` \| `"normal"` \| `"tertiary"` \| `"danger"` \| `"ghost"` \| `"custom"` \| `undefined; _customClass?: string` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _icons?: IconsPropType` \| `undefined; _id?: string` \| `undefined; _name?: string` \| `undefined; _syncValueBySelector?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; _accessKey?: string` \| `undefined; }` | `undefined` |
 
 
 ----------------------------------------------

package/doc/button-link.md

@@ -65,7 +65,7 @@ kolibriElement._on = {
 | `_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` |
 | `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                    | `string` \| `undefined`                                                                                                                                  | `undefined` |
 | `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                      | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
-| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                             | `undefined` |
+| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `"treeitem"` \| `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'`     |
 | `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                                               | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                         | `'button'`  |

package/doc/button.md

@@ -135,7 +135,7 @@ Probleme mit Disabled-Status
 | `_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` |
 | `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                    | `string` \| `undefined`                                                                                                                                  | `undefined` |
 | `_on`                 | --               | Defines the callback functions for button events.                                                                                                                                | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
-| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                             | `undefined` |
+| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `"treeitem"` \| `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'`     |
 | `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                                               | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                         | `'button'`  |

package/doc/drawer.md

@@ -0,0 +1,182 @@
+# Drawer (Sidebar) `preview`
+
+<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>
+
+Mit Hilfe der **Drawer**-Komponente können zusätzliche Informationen oder auch Navigationselemente in einem ausklappbaren Seitenfenster angezeigt werden. Ein offener Drawer kann als Modal (\_modal) via ESC geschlossen werden. Die **Drawer**-Komponente ist standardmäßig versteckt. Sie wird i.d.R. erst nach Klick auf einen Button oder sonstigem Trigger angezeigt bzw. controlled mit dem Attribut \_open gesteuert.
+
+```html
+<kol-drawer _label="Drawer" _open _modal _align="top"> </kol-drawer>
+```
+
+### Beispiel
+
+#### Uncontrolled
+
+<kol-drawer
+id="example-drawer"
+\_align="left"
+\_label="Drawer"
+
+>
+
+    <div>
+        <p>Dies ist der Inhalt des Drawers. Hier können Sie beliebige HTML-Elemente einfügen.</p>
+        <kol-button class="close-drawer" _label="Schließen"></kol-button>
+    </div>
+
+</kol-drawer>
+<kol-button id="drawer-open-button" _label="Drawer öffnen"></kol-button>
+
+<script>
+  const drawer = document.querySelector('#example-drawer');
+  const drawerOpenButton = document.querySelector('#drawer-open-button');
+
+  function openDrawer() {
+    drawer.open();
+  }
+
+  function closeDrawer() {
+    drawer.close();
+  }
+
+  document.querySelectorAll('.close-drawer').forEach((b) => (b.onclick = closeDrawer));
+  drawerOpenButton.onclick = openDrawer;
+</script>
+
+#### Uncontrolled Modal
+
+<kol-drawer
+\_modal
+\_align="left"
+\_label="Drawer"
+
+> </kol-drawer>
+
+#### Controlled
+
+<kol-drawer
+\_open=true
+\_align="left"
+\_label="Drawer"
+
+> </kol-drawer>
+
+<kol-drawer
+\_open=true
+\_align="left"
+\_label="Drawer"
+
+> </kol-drawer>
+
+## Verwendung
+
+Um den **Drawer** programmgesteuert zu öffnen und zu schließen, verwenden Sie die Methoden **`open()`** und **`close()`**. Stellen Sie sicher, dass das **`_label`** Attribut gesetzt ist, um die Zugänglichkeit zu gewährleisten. Die Ausrichtung des Drawers können Sie mit dem **`_align`** Attribut und den Werten **left**, **top**, **right** oder **bottom** anpassen, um ihn auf der gewünschten Seite des Bildschirms anzuzeigen. Wenn Sie den **Drawer** als **Modal** verwenden möchten, aktivieren Sie das **`_modal`** Attribut, um den Hintergrund abzudunkeln und den Fokus auf den Drawer-Inhalt zu lenken. Zudem nutzen Sie das **`_on`** Attribut, um benutzerdefinierte Aktionen beim Schließen des Drawers auszuführen. Ein offenes **Modal** kann via **ESC** geschlossen werden.
+
+## Barrierefreiheit
+
+Das \_label Attribut stellt eine klare und verständliche Beschriftung für den Drawer bereit. Dies verbessert die Nutzung für Personen, die Screenreader verwenden, da das Label als **`aria-label`** fungiert und somit die Bedeutung und Funktion des Drawers erklärt.
+
+### Drawer als Modal
+
+Beim Öffnen des **Drawers** wird der Fokus automatisch auf den Inhalt des Drawers gesetzt. Dies stellt sicher, dass Benutzer von Screenreadern sofort wissen, dass ein neuer Bereich geöffnet wurde, und dass sie direkt interagieren können. Beim Schließen des Drawers wird der Fokus zum vorherigen aktiven Element zurückgeführt, was eine nahtlose Benutzererfahrung bietet.
+
+Die **Drawer**-Komponente unterstützt die vollständige Navigation über die Tastatur. Benutzer können mit der Tab-Taste durch die interaktiven Elemente innerhalb des Drawers navigieren. Zudem kann der **Drawer** mit der ESC-Taste schnell und einfach geschlossen werden, was die Bedienung erleichtert.
+
+Während der **Drawer** (als Modal) geöffnet ist, werden alle selektierbaren Elemente außerhalb des Drawers deaktiviert. Dies verhindert ungewollte Interaktionen mit dem Hintergrundinhalt und lenkt die Aufmerksamkeit der Benutzer auf den **Drawer**-Inhalt.
+
+### Tastatursteuerung
+
+| Taste       | Funktion                                                                                     |
+| ----------- | -------------------------------------------------------------------------------------------- |
+| `Tab`       | Bei geöffnetem Drawer werden alle fokussierbaren Elemente der Reihenfolge nach angesprungen. |
+| `ESC-Taste` | Schließt den Drawer.                                                                         |
+
+## Animationen
+
+Optional können Animationen mit Keyframes hinzugefügt werden. Dabei ist es wichtig, dass die Keyframes die Namen `slideIn` bzw. `slideOut` enthalten und auf der Klasse `drawer__wrapper` definiert werden.
+
+**Beispiel:**
+
+```scss
+.drawer__wrapper {
+	&--left {
+		animation: slideInLeft $duration forwards;
+		&.is-closing {
+			animation: slideOutLeft $duration forwards !important;
+		}
+	}
+	&--right {
+		animation: slideInRight $duration forwards;
+		&.is-closing {
+			animation: slideOutRight $duration forwards;
+		}
+	}
+	&--top {
+		animation: slideInTop $duration forwards;
+		&.is-closing {
+			animation: slideOutTop $duration forwards;
+		}
+	}
+	&--bottom {
+		animation: slideInBottom $duration forwards;
+		&.is-closing {
+			animation: slideOutBottom $duration forwards;
+		}
+	}
+}
+```
+
+## Links und Referenzen
+
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes" _target="_blank"></kol-link>
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute | Description                                                                                                        | Type                                                      | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
+| `_align`              | `_align`  | Specifies the orientation of the drawer.                                                                           | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`     | `undefined` |
+| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                  | `undefined` |
+| `_modal`              | `_modal`  | Indicates whether the drawer is a modal.                                                                           | `boolean` \| `undefined`                                    | `undefined` |
+| `_on`                 | --        | Specifies the EventCallback function to be called when the drawer is closing.                                      | `undefined` \| `({ onClose?: (() => void)` \| `undefined; })` | `undefined` |
+| `_open`               | `_open`   | Specifies the default open state of the drawer.                                                                    | `boolean` \| `undefined`                                    | `undefined` |
+
+
+## Methods
+
+### `close() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `open() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Slots
+
+| Slot | Description            |
+| ---- | ---------------------- |
+|      | The Content of drawer. |
+
+
+----------------------------------------------
+
+