@public-ui/components 1.5.0-rc.12 → 1.5.0-rc.13

package/dist/types/components/pagination/component.d.ts

@@ -1,7 +1,7 @@
 import { JSX } from '../../stencil-public-runtime';
 import { Generic } from '@a11y-ui/core';
 import { KoliBriButtonVariant, KoliBriButtonVariantPropState, KoliBriButtonCustomClassPropState } from '../../types/button-link';
-import { PropAlignment } from '../../types/props';
+import { Alignment } from '../../types/props';
 import { KoliBriPaginationButtonCallbacks } from './types';
 import { Stringified } from '../../types/common';
 import { Option } from '../../types/input/types';
@@ -22,7 +22,7 @@ export type OptionalProps = KoliBriButtonCustomClassPropState & KoliBriButtonVar
   pageSize: number;
   pageSizeOptions: Stringified<number[]>;
   siblingCount: number;
-  tooltipAlign: PropAlignment;
+  tooltipAlign: Alignment;
 };
 type RequiredStates = KoliBriButtonVariantPropState & {
   boundaryCount: number;
@@ -35,7 +35,7 @@ type RequiredStates = KoliBriButtonVariantPropState & {
   total: number;
 };
 type OptionalStates = KoliBriButtonCustomClassPropState & {
-  tooltipAlign: PropAlignment;
+  tooltipAlign: Alignment;
 };
 type States = Generic.Element.Members<RequiredStates, OptionalStates>;
 export declare class KolPagination implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {
@@ -51,7 +51,7 @@ export declare class KolPagination implements Generic.Element.ComponentApi<Requi
   _pageSizeOptions: Stringified<number[]>;
   _on: KoliBriPaginationButtonCallbacks;
   _siblingCount?: number;
-  _tooltipAlign?: PropAlignment;
+  _tooltipAlign?: Alignment;
   _total: number;
   _variant?: KoliBriButtonVariant;
   state: States;
@@ -76,7 +76,7 @@ export declare class KolPagination implements Generic.Element.ComponentApi<Requi
   validatePageSizeOptions(value?: Stringified<number[]>): void;
   validateSiblingCount(value?: number): void;
   validateTotal(value?: number): void;
-  validateTooltipAlign(value?: PropAlignment): void;
+  validateTooltipAlign(value?: Alignment): void;
   validateVariant(value?: KoliBriButtonVariant): void;
   componentWillLoad(): void;
 }

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

@@ -0,0 +1,35 @@
+import { JSX } from '../../stencil-public-runtime';
+import { Generic } from '@a11y-ui/core';
+import { Alignment, PropAlignment, PropOpen, PropShow } from '../../types/props';
+type RequiredProps = unknown;
+type OptionalProps = PropAlignment & PropOpen;
+export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;
+type RequiredStates = PropAlignment & PropOpen & PropShow;
+type OptionalStates = unknown;
+export type States = Generic.Element.Members<RequiredStates, OptionalStates>;
+type API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
+export declare class KolPopover implements API {
+  private arrowElement?;
+  private popoverElement?;
+  private triggerElement?;
+  private host?;
+  private alignPopover;
+  private setPosition;
+  private showPopover;
+  private hidePopover;
+  private hidePopoverByEscape;
+  private hidePopoverByClickOutside;
+  private addListenersToBody;
+  private removeListenersToBody;
+  private catchHostAndTriggerElement;
+  private catchPopoverElement;
+  private catchArrowElement;
+  render(): JSX.Element;
+  _alignment?: Alignment;
+  _open?: boolean;
+  state: States;
+  validateAlignment(value?: Alignment): void;
+  validateOpen(value?: boolean): void;
+  componentWillLoad(): void;
+}
+export {};

package/dist/types/components/popover/test/html.mock.d.ts

@@ -0,0 +1,4 @@
+import { Props } from '../shadow';
+export declare const getPopoverHtml: (props: Props, slots?: {
+  default?: string;
+}, additionalAttrs?: string) => string;

package/dist/types/components/tabs/component.d.ts

@@ -4,7 +4,7 @@ import { KoliBriIconProp } from '../../types/icon';
 import { Generic } from '@a11y-ui/core';
 import { EventCallback, EventValueOrEventCallback } from '../../types/callbacks';
 import { Stringified } from '../../types/common';
-import { PropAlignment } from '../../types/props';
+import { Alignment } from '../../types/props';
 export type KoliBriTabsCallbacks = {
   onCreate?: EventCallback<Event> | {
     label: string;
@@ -20,7 +20,7 @@ type OptionalTabButtonProps = {
   disabled: boolean;
   icon: Stringified<KoliBriIconProp>;
   iconOnly: boolean;
-  tooltipAlign: PropAlignment;
+  tooltipAlign: Alignment;
 };
 export type TabButtonProps = Generic.Element.Members<RequiredTabButtonProps, OptionalTabButtonProps>;
 type RequiredProps = {
@@ -29,12 +29,12 @@ type RequiredProps = {
 };
 type OptionalProps = {
   on: KoliBriTabsCallbacks;
-  tabsAlign: PropAlignment;
+  tabsAlign: Alignment;
   selected: number;
 };
 type RequiredStates = {
   ariaLabel: string;
-  tabsAlign: PropAlignment;
+  tabsAlign: Alignment;
   selected: number;
   tabs: TabButtonProps[];
 };
@@ -61,7 +61,7 @@ export declare class KolTabs implements Generic.Element.ComponentApi<RequiredPro
   _on?: KoliBriTabsCallbacks;
   _selected?: number;
   _tabs: Stringified<TabButtonProps[]>;
-  _tabsAlign?: PropAlignment;
+  _tabsAlign?: Alignment;
   state: States;
   private selectNextNotDisabledTab;
   private syncSelectedAndTabs;
@@ -69,7 +69,7 @@ export declare class KolTabs implements Generic.Element.ComponentApi<RequiredPro
   validateOn(value?: KoliBriTabsCallbacks): void;
   validateSelected(value?: number): void;
   validateTabs(value?: Stringified<TabButtonProps[]>): void;
-  validateTabsAlign(value?: PropAlignment): void;
+  validateTabsAlign(value?: Alignment): void;
   componentWillLoad(): void;
   private readonly handleTabPanels;
   componentDidRender(): void;

package/dist/types/components/tooltip/component.d.ts

@@ -1,12 +1,12 @@
 import { JSX } from '../../stencil-public-runtime';
 import { Generic } from '@a11y-ui/core';
-import { PropAlignment } from '../../types/props';
+import { Alignment } from '../../types/props';
 type RequiredProps = {
   id: string;
   label: string;
 };
 type OptionalProps = {
-  align: PropAlignment;
+  align: Alignment;
 };
 export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;
 type RequiredStates = RequiredProps & OptionalProps;
@@ -27,11 +27,11 @@ export declare class KolTooltip implements Generic.Element.ComponentApi<Required
   private catchTooltipElement;
   private catchArrowElement;
   render(): JSX.Element;
-  _align?: PropAlignment;
+  _align?: Alignment;
   _id: string;
   _label: string;
   state: States;
-  validateAlign(value?: PropAlignment): void;
+  validateAlign(value?: Alignment): void;
   validateId(value?: string): void;
   validateLabel(value?: string): void;
   private overFocusCount;

package/dist/types/components.d.ts

@@ -5,12 +5,12 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AriaCurrent, PropAlignment } from "./types/props";
+import { Alignment, AriaCurrent } from "./types/props";
 import { HeadingLevel } from "./types/heading-level";
 import { KoliBriAccordionCallbacks } from "./components/accordion/types";
 import { AlertType, AlertVariant, KoliBriAlertEventCallbacks } from "./components/alert/types";
-import { KoliBriColor } from "./components/badge/component";
 import { Stringified } from "./types/common";
+import { PropColor } from "./types/props/color";
 import { KoliBriHorizontalIcon, KoliBriIconProp } from "./types/icon";
 import { AlternativButtonLinkRole, ButtonProps, KoliBriButtonCallbacks, KoliBriButtonType, KoliBriButtonVariant, LinkOnCallbacks, LinkProps, LinkTarget, LinkUseCase } from "./types/button-link";
 import { KoliBriFormCallbacks } from "./components/form/component";
@@ -24,6 +24,7 @@ import { InputDateType, InputNumberType } from "./types/input/control/number";
 import { W3CInputValue } from "./types/w3c";
 import { Orientation } from "./types/orientation";
 import { InputTextType } from "./types/input/control/text";
+import { Stringified as Stringified1 } from "./components";
 import { ListStyleType } from "./components/link-group/component";
 import { Bundesamt, Bundesanstalt, Bundesministerium } from "./enums/bund";
 import { KoliBriModalEventCallbacks } from "./types/modal";
@@ -37,12 +38,12 @@ import { KoliBriDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } fro
 import { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/component";
 import { CSSResize } from "./components/textarea/types";
 import { KoliBriToastEventCallbacks } from "./types/toast";
-export { AriaCurrent, PropAlignment } from "./types/props";
+export { Alignment, AriaCurrent } from "./types/props";
 export { HeadingLevel } from "./types/heading-level";
 export { KoliBriAccordionCallbacks } from "./components/accordion/types";
 export { AlertType, AlertVariant, KoliBriAlertEventCallbacks } from "./components/alert/types";
-export { KoliBriColor } from "./components/badge/component";
 export { Stringified } from "./types/common";
+export { PropColor } from "./types/props/color";
 export { KoliBriHorizontalIcon, KoliBriIconProp } from "./types/icon";
 export { AlternativButtonLinkRole, ButtonProps, KoliBriButtonCallbacks, KoliBriButtonType, KoliBriButtonVariant, LinkOnCallbacks, LinkProps, LinkTarget, LinkUseCase } from "./types/button-link";
 export { KoliBriFormCallbacks } from "./components/form/component";
@@ -56,6 +57,7 @@ export { InputDateType, InputNumberType } from "./types/input/control/number";
 export { W3CInputValue } from "./types/w3c";
 export { Orientation } from "./types/orientation";
 export { InputTextType } from "./types/input/control/text";
+export { Stringified as Stringified1 } from "./components";
 export { ListStyleType } from "./components/link-group/component";
 export { Bundesamt, Bundesanstalt, Bundesministerium } from "./enums/bund";
 export { KoliBriModalEventCallbacks } from "./types/modal";
@@ -78,7 +80,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
     }
     interface KolAccordion {
         /**
@@ -132,7 +134,7 @@ export namespace Components {
         /**
           * Setzt die Hintergrundfarbe.
          */
-        "_color"?: string | KoliBriColor;
+        "_color"?: Stringified<PropColor>;
         /**
           * Iconklasse (z.B.: "codicon codicon-home")
          */
@@ -201,7 +203,7 @@ export namespace Components {
           * Gibt an, ob das Icon links oder rechts dargestellt werden soll.
           * @deprecated
          */
-        "_iconAlign"?: PropAlignment;
+        "_iconAlign"?: Alignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -229,7 +231,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Gibt an, welche Typ der Button hat.
          */
@@ -307,7 +309,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Gibt an, welche Typ der Button hat.
          */
@@ -358,7 +360,7 @@ export namespace Components {
           * Gibt an, ob das Icon links oder rechts dargestellt werden soll.
           * @deprecated
          */
-        "_iconAlign"?: PropAlignment;
+        "_iconAlign"?: Alignment;
         /**
           * Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.
          */
@@ -386,7 +388,7 @@ export namespace Components {
         /**
           * Setzt die gewünschte Ausrichtung des Tooltips (`_icon-only`).
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Setzt den Typ der Schaltfläche.
          */
@@ -1484,7 +1486,7 @@ export namespace Components {
         /**
           * Gibt an, in welcher Farbe das Bild-Logo initial dargestellt werden soll.
          */
-        "_color"?: string;
+        "_color"?: Stringified1<PropColor>;
         /**
           * Gibt an, ob die Logo-Beschriftung angezeigt werden soll.
          */
@@ -1527,7 +1529,7 @@ export namespace Components {
           * Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.
           * @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.
          */
-        "_iconAlign"?: PropAlignment;
+        "_iconAlign"?: Alignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -1570,7 +1572,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Gibt den Verwendungsfall des Links an.
           * @deprecated Das Styling sollte stets über CSS erfolgen.
@@ -1646,7 +1648,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Gibt an, welche Ausprägung der Link-Button hat.
          */
@@ -1721,7 +1723,7 @@ export namespace Components {
           * Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.
           * @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.
          */
-        "_iconAlign"?: PropAlignment;
+        "_iconAlign"?: Alignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -1764,7 +1766,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Gibt den Verwendungsfall des Links an.
           * @deprecated Das Styling sollte stets über CSS erfolgen.
@@ -1872,7 +1874,7 @@ export namespace Components {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Setzt die Gesamtanzahl der Seiten.
          */
@@ -1882,6 +1884,16 @@ export namespace Components {
          */
         "_variant"?: KoliBriButtonVariant;
     }
+    interface KolPopover {
+        /**
+          * Setzt die Ausrichtung des Popovers in Relation zum Triggerelement.
+         */
+        "_alignment"?: Alignment;
+        /**
+          * Öffnet/schließt das Popover.
+         */
+        "_open"?: boolean;
+    }
     interface KolProgress {
         /**
           * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.
@@ -2089,7 +2101,7 @@ export namespace Components {
         /**
           * Setzt die Position der Registrierkarten.
          */
-        "_tabsAlign"?: PropAlignment;
+        "_tabsAlign"?: Alignment;
     }
     interface KolTextarea {
         /**
@@ -2211,7 +2223,7 @@ export namespace Components {
         /**
           * Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.
          */
-        "_align"?: PropAlignment;
+        "_align"?: Alignment;
         /**
           * Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird.
          */
@@ -2493,6 +2505,12 @@ declare global {
         prototype: HTMLKolPaginationElement;
         new (): HTMLKolPaginationElement;
     };
+    interface HTMLKolPopoverElement extends Components.KolPopover, HTMLStencilElement {
+    }
+    var HTMLKolPopoverElement: {
+        prototype: HTMLKolPopoverElement;
+        new (): HTMLKolPopoverElement;
+    };
     interface HTMLKolProgressElement extends Components.KolProgress, HTMLStencilElement {
     }
     var HTMLKolProgressElement: {
@@ -2620,6 +2638,7 @@ declare global {
         "kol-modal": HTMLKolModalElement;
         "kol-nav": HTMLKolNavElement;
         "kol-pagination": HTMLKolPaginationElement;
+        "kol-popover": HTMLKolPopoverElement;
         "kol-progress": HTMLKolProgressElement;
         "kol-quote": HTMLKolQuoteElement;
         "kol-select": HTMLKolSelectElement;
@@ -2645,7 +2664,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
     }
     interface KolAccordion {
         /**
@@ -2699,7 +2718,7 @@ declare namespace LocalJSX {
         /**
           * Setzt die Hintergrundfarbe.
          */
-        "_color"?: string | KoliBriColor;
+        "_color"?: Stringified<PropColor>;
         /**
           * Iconklasse (z.B.: "codicon codicon-home")
          */
@@ -2768,7 +2787,7 @@ declare namespace LocalJSX {
           * Gibt an, ob das Icon links oder rechts dargestellt werden soll.
           * @deprecated
          */
-        "_iconAlign"?: PropAlignment;
+        "_iconAlign"?: Alignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -2796,7 +2815,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Gibt an, welche Typ der Button hat.
          */
@@ -2874,7 +2893,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Gibt an, welche Typ der Button hat.
          */
@@ -2925,7 +2944,7 @@ declare namespace LocalJSX {
           * Gibt an, ob das Icon links oder rechts dargestellt werden soll.
           * @deprecated
          */
-        "_iconAlign"?: PropAlignment;
+        "_iconAlign"?: Alignment;
         /**
           * Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.
          */
@@ -2953,7 +2972,7 @@ declare namespace LocalJSX {
         /**
           * Setzt die gewünschte Ausrichtung des Tooltips (`_icon-only`).
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Setzt den Typ der Schaltfläche.
          */
@@ -4051,7 +4070,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, in welcher Farbe das Bild-Logo initial dargestellt werden soll.
          */
-        "_color"?: string;
+        "_color"?: Stringified1<PropColor>;
         /**
           * Gibt an, ob die Logo-Beschriftung angezeigt werden soll.
          */
@@ -4094,7 +4113,7 @@ declare namespace LocalJSX {
           * Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.
           * @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.
          */
-        "_iconAlign"?: PropAlignment;
+        "_iconAlign"?: Alignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -4137,7 +4156,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Gibt den Verwendungsfall des Links an.
           * @deprecated Das Styling sollte stets über CSS erfolgen.
@@ -4213,7 +4232,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Gibt an, welche Ausprägung der Link-Button hat.
          */
@@ -4288,7 +4307,7 @@ declare namespace LocalJSX {
           * Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.
           * @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.
          */
-        "_iconAlign"?: PropAlignment;
+        "_iconAlign"?: Alignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -4331,7 +4350,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Gibt den Verwendungsfall des Links an.
           * @deprecated Das Styling sollte stets über CSS erfolgen.
@@ -4439,7 +4458,7 @@ declare namespace LocalJSX {
         /**
           * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden.
          */
-        "_tooltipAlign"?: PropAlignment;
+        "_tooltipAlign"?: Alignment;
         /**
           * Setzt die Gesamtanzahl der Seiten.
          */
@@ -4449,6 +4468,16 @@ declare namespace LocalJSX {
          */
         "_variant"?: KoliBriButtonVariant;
     }
+    interface KolPopover {
+        /**
+          * Setzt die Ausrichtung des Popovers in Relation zum Triggerelement.
+         */
+        "_alignment"?: Alignment;
+        /**
+          * Öffnet/schließt das Popover.
+         */
+        "_open"?: boolean;
+    }
     interface KolProgress {
         /**
           * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.
@@ -4656,7 +4685,7 @@ declare namespace LocalJSX {
         /**
           * Setzt die Position der Registrierkarten.
          */
-        "_tabsAlign"?: PropAlignment;
+        "_tabsAlign"?: Alignment;
     }
     interface KolTextarea {
         /**
@@ -4778,7 +4807,7 @@ declare namespace LocalJSX {
         /**
           * Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.
          */
-        "_align"?: PropAlignment;
+        "_align"?: Alignment;
         /**
           * Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird.
          */
@@ -4837,6 +4866,7 @@ declare namespace LocalJSX {
         "kol-modal": KolModal;
         "kol-nav": KolNav;
         "kol-pagination": KolPagination;
+        "kol-popover": KolPopover;
         "kol-progress": KolProgress;
         "kol-quote": KolQuote;
         "kol-select": KolSelect;
@@ -4911,6 +4941,7 @@ declare module "@stencil/core" {
             "kol-modal": LocalJSX.KolModal & JSXBase.HTMLAttributes<HTMLKolModalElement>;
             "kol-nav": LocalJSX.KolNav & JSXBase.HTMLAttributes<HTMLKolNavElement>;
             "kol-pagination": LocalJSX.KolPagination & JSXBase.HTMLAttributes<HTMLKolPaginationElement>;
+            "kol-popover": LocalJSX.KolPopover & JSXBase.HTMLAttributes<HTMLKolPopoverElement>;
             "kol-progress": LocalJSX.KolProgress & JSXBase.HTMLAttributes<HTMLKolProgressElement>;
             "kol-quote": LocalJSX.KolQuote & JSXBase.HTMLAttributes<HTMLKolQuoteElement>;
             "kol-select": LocalJSX.KolSelect & JSXBase.HTMLAttributes<HTMLKolSelectElement>;

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

@@ -3,7 +3,7 @@ import { Events } from '../enums/events';
 import { EventCallback, EventValueOrEventCallback } from './callbacks';
 import { Stringified } from './common';
 import { KoliBriAllIcon, KoliBriIconProp } from './icon';
-import { PropAlignment, PropAriaCurrent, PropAriaExpanded, PropAriaSelected, PropDisabled, PropStealth } from './props';
+import { Alignment, PropAriaCurrent, PropAriaExpanded, PropAriaSelected, PropDisabled, PropStealth } from './props';
 import { PropLabel } from './props/label';
 export type AlternativButtonLinkRole = 'button' | 'link' | 'tab';
 type RequiredButtonAndLinkProps = PropLabel;
@@ -11,11 +11,11 @@ type OptionalButtonAndLinkProps = {
   ariaControls: string;
   ariaLabel: string;
   icon: Stringified<KoliBriIconProp>;
-  iconAlign: PropAlignment;
+  iconAlign: Alignment;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
-  tooltipAlign: PropAlignment;
+  tooltipAlign: Alignment;
 } & PropAriaCurrent & PropAriaExpanded & PropAriaSelected & PropDisabled;
 type RequiredButtonAndLinkStates = {
   icon: KoliBriAllIcon;
@@ -24,11 +24,11 @@ type RequiredButtonAndLinkStates = {
 type OptionalButtonAndLinkStates = {
   ariaLabel: string;
   ariaControls: string;
-  iconAlign: PropAlignment;
+  iconAlign: Alignment;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
-  tooltipAlign: PropAlignment;
+  tooltipAlign: Alignment;
 } & PropAriaCurrent & PropAriaExpanded & PropAriaSelected & PropDisabled;
 export type KoliBriButtonType = 'button' | 'reset' | 'submit';
 export type KoliBriButtonVariant = 'primary' | 'secondary' | 'normal' | 'danger' | 'ghost' | 'custom';
@@ -98,5 +98,5 @@ export type OptionalLinkStates = OptionalButtonAndLinkStates & {
 export type LinkStates = Generic.Element.Members<RequiredLinkStates, OptionalLinkStates>;
 export type RequiredLinkButtonProps = RequiredLinkProps;
 export type OptionalLinkButtonProps = OptionalLinkProps & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;
-export declare const watchTooltipAlignment: (component: Generic.Element.Component, propName: string, value?: PropAlignment) => void;
+export declare const watchTooltipAlignment: (component: Generic.Element.Component, propName: string, value?: Alignment) => void;
 export {};

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

@@ -1,4 +1,9 @@
+import { Generic } from '@a11y-ui/core';
 type HorizontalAlignment = 'left' | 'right';
 type VerticalAlignment = 'top' | 'bottom';
-export type PropAlignment = HorizontalAlignment | VerticalAlignment;
+export type Alignment = HorizontalAlignment | VerticalAlignment;
+export type PropAlignment = {
+  alignment: Alignment;
+};
+export declare const validateAlignment: (component: Generic.Element.Component, value?: Alignment) => void;
 export {};

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

@@ -0,0 +1,20 @@
+import { Generic } from '@a11y-ui/core';
+import { WatchOptions } from '../../utils/prop.validators';
+import { Stringified } from '../common';
+type CharacteristicColors = {
+  primary: string;
+  secondary: string;
+  neutral: string;
+};
+export type ColorPair = {
+  backgroundColor: string;
+  foregroundColor: Stringified<CharacteristicColors>;
+};
+type DeprecatedColorPair = {
+  backgroundColor: string;
+  color: string;
+};
+export type PropColor = ColorPair | DeprecatedColorPair;
+export declare const validateColor: (component: Generic.Element.Component, value?: Stringified<PropColor>, options?: WatchOptions) => void;
+export declare const handleColorChange: (value: unknown) => ColorPair;
+export {};

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

@@ -1,11 +1,11 @@
 import { Generic } from '@a11y-ui/core';
 import { KoliBriIconProp, KoliBriIconState } from '../icon';
-import { PropAlignment } from '.';
+import { Alignment } from '.';
 import { Stringified } from '../common';
 export type PropIcon = {
   icon: Stringified<KoliBriIconProp>;
 };
-export declare const mapIconProp2State: (icon: KoliBriIconProp, iconAlign?: PropAlignment) => KoliBriIconState;
+export declare const mapIconProp2State: (icon: KoliBriIconProp, iconAlign?: Alignment) => KoliBriIconState;
 export declare const isIcon: (value?: unknown) => boolean;
 export declare const validateIcon: (component: Generic.Element.Component, value?: KoliBriIconProp) => void;
-export declare const watchIconAlign: (component: Generic.Element.Component, value?: PropAlignment) => void;
+export declare const watchIconAlign: (component: Generic.Element.Component, value?: Alignment) => void;

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

@@ -1 +1 @@
-export{PropAdjustHeight,validateAdjustHeight}from"./adjust-height";export{PropAlert,validateAlert}from"./alert";export{PropAlignment}from"./alignment";export{PropChecked,validateChecked}from"./checked";export{AriaCurrent,PropAriaCurrent,validateAriaCurrent}from"./aria-current";export{PropAriaExpanded,validateAriaExpanded}from"./aria-expanded";export{PropAriaSelected,validateAriaSelected}from"./aria-selected";export{PropCollapsible,validateCollapsible}from"./collapsible";export{PropCompact,validateCompact}from"./compact";export{PropDisabled,validateDisabled}from"./disabled";export{PropHasCloser,validateHasCloser}from"./has-closer";export{PropHasCompactButton,validateHasCompactButton}from"./has-compact-button";export{PropHasCounter,validateHasCounter}from"./has-counter";export{PropHasFooter,validateHasFooter}from"./has-footer";export{PropHideLabel,validateHideLabel}from"./hide-label";export{PropIndeterminate,validateIndeterminate}from"./indeterminate";export{PropMultiple,validateMultiple}from"./multiple";export{PropOpen,validateOpen}from"./open";export{PropReadOnly,validateReadOnly}from"./read-only";export{PropRequired,validateRequired}from"./required";export{PropShow,validateShow}from"./show";export{PropStealth,validateStealth}from"./stealth";export{PropTouched,validateTouched}from"./touched";
+export{PropAdjustHeight,validateAdjustHeight}from"./adjust-height";export{PropAlert,validateAlert}from"./alert";export{Alignment,PropAlignment,validateAlignment}from"./alignment";export{PropChecked,validateChecked}from"./checked";export{AriaCurrent,PropAriaCurrent,validateAriaCurrent}from"./aria-current";export{PropAriaExpanded,validateAriaExpanded}from"./aria-expanded";export{PropAriaSelected,validateAriaSelected}from"./aria-selected";export{PropCollapsible,validateCollapsible}from"./collapsible";export{PropCompact,validateCompact}from"./compact";export{PropDisabled,validateDisabled}from"./disabled";export{PropHasCloser,validateHasCloser}from"./has-closer";export{PropHasCompactButton,validateHasCompactButton}from"./has-compact-button";export{PropHasCounter,validateHasCounter}from"./has-counter";export{PropHasFooter,validateHasFooter}from"./has-footer";export{PropHideLabel,validateHideLabel}from"./hide-label";export{PropIndeterminate,validateIndeterminate}from"./indeterminate";export{PropMultiple,validateMultiple}from"./multiple";export{PropOpen,validateOpen}from"./open";export{PropReadOnly,validateReadOnly}from"./read-only";export{PropRequired,validateRequired}from"./required";export{PropShow,validateShow}from"./show";export{PropStealth,validateStealth}from"./stealth";export{PropTouched,validateTouched}from"./touched";