@public-ui/components 3.0.1 → 3.0.2-23b676ffff02d65bc7f05613310ad885935cd160.0

package/dist/types/components.d.ts

@@ -425,7 +425,6 @@ export namespace Components {
           * Defines the value that the button emits on click.
          */
         "_value"?: StencilUnknown;
-        "hideTooltip": () => Promise<void>;
         "kolFocus": () => Promise<void>;
     }
     interface KolCard {
@@ -447,6 +446,25 @@ export namespace Components {
          */
         "_on"?: KoliBriCardEventCallbacks;
     }
+    interface KolCardWc {
+        /**
+          * Defines whether the element can be closed.
+          * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.
+         */
+        "_hasCloser"?: boolean;
+        /**
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
+         */
+        "_label": LabelPropType;
+        /**
+          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
+         */
+        "_level"?: HeadingLevel;
+        /**
+          * Defines the event callback functions for the component.
+         */
+        "_on"?: KoliBriCardEventCallbacks;
+    }
     interface KolCombobox {
         /**
           * Defines which key combination can be used to trigger or focus the interactive element of the component.
@@ -560,6 +578,11 @@ export namespace Components {
           * Defines the visual orientation of the component.
          */
         "_align"?: AlignPropType;
+        /**
+          * Defines whether the element can be closed.
+          * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.
+         */
+        "_hasCloser"?: boolean;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -1962,6 +1985,52 @@ export namespace Components {
          */
         "_tooltipAlign"?: TooltipAlignPropType;
     }
+    interface KolPaginationWc {
+        /**
+          * Defines the amount of pages to show next to the outer arrow buttons.
+         */
+        "_boundaryCount"?: number;
+        /**
+          * Defines the custom class attribute if _variant="custom" is set.
+         */
+        "_customClass"?: CustomClassPropType;
+        /**
+          * Defines which navigation buttons to render (first, last, next, previous buttons).
+         */
+        "_hasButtons"?: boolean | Stringified<PaginationHasButton>;
+        /**
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
+         */
+        "_label"?: LabelPropType;
+        /**
+          * Defines the maximum number of pages.
+         */
+        "_max": MaxPropType;
+        /**
+          * Gibt an, auf welche Callback-Events reagiert werden.
+         */
+        "_on": KoliBriPaginationButtonCallbacks;
+        /**
+          * Defines the current page.
+         */
+        "_page": number;
+        /**
+          * Defines the amount of entries to show per page.
+         */
+        "_pageSize": number;
+        /**
+          * Defines the options for the page-size-select.
+         */
+        "_pageSizeOptions": Stringified<number[]>;
+        /**
+          * Defines the amount of pages to show next to the current page.
+         */
+        "_siblingCount"?: number;
+        /**
+          * Defines where to show the Tooltip preferably: top, right, bottom or left.
+         */
+        "_tooltipAlign"?: TooltipAlignPropType;
+    }
     interface KolPopoverButton {
         /**
           * Defines which key combination can be used to trigger or focus the interactive element of the component.
@@ -2407,10 +2476,18 @@ export namespace Components {
         "_variant"?: SpinVariantPropType;
     }
     interface KolSplitButton {
+        /**
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
+         */
+        "_accessKey"?: AccessKeyPropType;
         /**
           * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
          */
         "_ariaControls"?: string;
+        /**
+          * Defines the value for the aria-description attribute.
+         */
+        "_ariaDescription"?: AriaDescriptionPropType;
         /**
           * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
          */
@@ -2443,11 +2520,11 @@ export namespace Components {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
-        "_label": LabelPropType;
+        "_label": LabelWithExpertSlotPropType;
         /**
           * Defines the technical name of an input field.
          */
-        "_name"?: NamePropType;
+        "_name"?: string;
         /**
           * Defines the callback functions for button events.
          */
@@ -2456,6 +2533,10 @@ export namespace Components {
           * Defines the role of the components primary element.
          */
         "_role"?: AlternativeButtonLinkRolePropType;
+        /**
+          * Adds a visual short key hint to the component.
+         */
+        "_shortKey"?: ShortKeyPropType;
         /**
           * Selector for synchronizing the value with another input element.
          */
@@ -2471,12 +2552,14 @@ export namespace Components {
         /**
           * Defines the value that the button emits on click.
          */
-        "_value"?: Stringified<StencilUnknown>;
+        "_value"?: StencilUnknown;
         /**
           * Defines which variant should be used for presentation.
          */
         "_variant"?: ButtonVariantPropType;
         "closePopup": () => Promise<void>;
+        "getValue": () => Promise<StencilUnknown>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolTableSettingsWc {
         "_tableSettings": TableSettingsPropType;
@@ -2773,7 +2856,6 @@ export namespace Components {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
-        "hideTooltip": () => Promise<void>;
     }
     interface KolTree {
         /**
@@ -2913,6 +2995,12 @@ declare global {
         prototype: HTMLKolCardElement;
         new (): HTMLKolCardElement;
     };
+    interface HTMLKolCardWcElement extends Components.KolCardWc, HTMLStencilElement {
+    }
+    var HTMLKolCardWcElement: {
+        prototype: HTMLKolCardWcElement;
+        new (): HTMLKolCardWcElement;
+    };
     interface HTMLKolComboboxElement extends Components.KolCombobox, HTMLStencilElement {
     }
     var HTMLKolComboboxElement: {
@@ -3060,6 +3148,12 @@ declare global {
         prototype: HTMLKolPaginationElement;
         new (): HTMLKolPaginationElement;
     };
+    interface HTMLKolPaginationWcElement extends Components.KolPaginationWc, HTMLStencilElement {
+    }
+    var HTMLKolPaginationWcElement: {
+        prototype: HTMLKolPaginationWcElement;
+        new (): HTMLKolPaginationWcElement;
+    };
     interface HTMLKolPopoverButtonElement extends Components.KolPopoverButton, HTMLStencilElement {
     }
     var HTMLKolPopoverButtonElement: {
@@ -3223,6 +3317,7 @@ declare global {
         "kol-button-link": HTMLKolButtonLinkElement;
         "kol-button-wc": HTMLKolButtonWcElement;
         "kol-card": HTMLKolCardElement;
+        "kol-card-wc": HTMLKolCardWcElement;
         "kol-combobox": HTMLKolComboboxElement;
         "kol-details": HTMLKolDetailsElement;
         "kol-drawer": HTMLKolDrawerElement;
@@ -3247,6 +3342,7 @@ declare global {
         "kol-modal": HTMLKolModalElement;
         "kol-nav": HTMLKolNavElement;
         "kol-pagination": HTMLKolPaginationElement;
+        "kol-pagination-wc": HTMLKolPaginationWcElement;
         "kol-popover-button": HTMLKolPopoverButtonElement;
         "kol-popover-button-wc": HTMLKolPopoverButtonWcElement;
         "kol-popover-wc": HTMLKolPopoverWcElement;
@@ -3669,6 +3765,25 @@ declare namespace LocalJSX {
          */
         "_on"?: KoliBriCardEventCallbacks;
     }
+    interface KolCardWc {
+        /**
+          * Defines whether the element can be closed.
+          * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.
+         */
+        "_hasCloser"?: boolean;
+        /**
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
+         */
+        "_label": LabelPropType;
+        /**
+          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
+         */
+        "_level"?: HeadingLevel;
+        /**
+          * Defines the event callback functions for the component.
+         */
+        "_on"?: KoliBriCardEventCallbacks;
+    }
     interface KolCombobox {
         /**
           * Defines which key combination can be used to trigger or focus the interactive element of the component.
@@ -3775,6 +3890,11 @@ declare namespace LocalJSX {
           * Defines the visual orientation of the component.
          */
         "_align"?: AlignPropType;
+        /**
+          * Defines whether the element can be closed.
+          * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.
+         */
+        "_hasCloser"?: boolean;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -5100,6 +5220,52 @@ declare namespace LocalJSX {
          */
         "_tooltipAlign"?: TooltipAlignPropType;
     }
+    interface KolPaginationWc {
+        /**
+          * Defines the amount of pages to show next to the outer arrow buttons.
+         */
+        "_boundaryCount"?: number;
+        /**
+          * Defines the custom class attribute if _variant="custom" is set.
+         */
+        "_customClass"?: CustomClassPropType;
+        /**
+          * Defines which navigation buttons to render (first, last, next, previous buttons).
+         */
+        "_hasButtons"?: boolean | Stringified<PaginationHasButton>;
+        /**
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
+         */
+        "_label"?: LabelPropType;
+        /**
+          * Defines the maximum number of pages.
+         */
+        "_max": MaxPropType;
+        /**
+          * Gibt an, auf welche Callback-Events reagiert werden.
+         */
+        "_on": KoliBriPaginationButtonCallbacks;
+        /**
+          * Defines the current page.
+         */
+        "_page": number;
+        /**
+          * Defines the amount of entries to show per page.
+         */
+        "_pageSize"?: number;
+        /**
+          * Defines the options for the page-size-select.
+         */
+        "_pageSizeOptions"?: Stringified<number[]>;
+        /**
+          * Defines the amount of pages to show next to the current page.
+         */
+        "_siblingCount"?: number;
+        /**
+          * Defines where to show the Tooltip preferably: top, right, bottom or left.
+         */
+        "_tooltipAlign"?: TooltipAlignPropType;
+    }
     interface KolPopoverButton {
         /**
           * Defines which key combination can be used to trigger or focus the interactive element of the component.
@@ -5517,10 +5683,18 @@ declare namespace LocalJSX {
         "_variant"?: SpinVariantPropType;
     }
     interface KolSplitButton {
+        /**
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
+         */
+        "_accessKey"?: AccessKeyPropType;
         /**
           * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
          */
         "_ariaControls"?: string;
+        /**
+          * Defines the value for the aria-description attribute.
+         */
+        "_ariaDescription"?: AriaDescriptionPropType;
         /**
           * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
          */
@@ -5553,11 +5727,11 @@ declare namespace LocalJSX {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
-        "_label": LabelPropType;
+        "_label": LabelWithExpertSlotPropType;
         /**
           * Defines the technical name of an input field.
          */
-        "_name"?: NamePropType;
+        "_name"?: string;
         /**
           * Defines the callback functions for button events.
          */
@@ -5566,6 +5740,10 @@ declare namespace LocalJSX {
           * Defines the role of the components primary element.
          */
         "_role"?: AlternativeButtonLinkRolePropType;
+        /**
+          * Adds a visual short key hint to the component.
+         */
+        "_shortKey"?: ShortKeyPropType;
         /**
           * Defines where to show the Tooltip preferably: top, right, bottom or left.
          */
@@ -5577,7 +5755,7 @@ declare namespace LocalJSX {
         /**
           * Defines the value that the button emits on click.
          */
-        "_value"?: Stringified<StencilUnknown>;
+        "_value"?: StencilUnknown;
         /**
           * Defines which variant should be used for presentation.
          */
@@ -5939,6 +6117,7 @@ declare namespace LocalJSX {
         "kol-button-link": KolButtonLink;
         "kol-button-wc": KolButtonWc;
         "kol-card": KolCard;
+        "kol-card-wc": KolCardWc;
         "kol-combobox": KolCombobox;
         "kol-details": KolDetails;
         "kol-drawer": KolDrawer;
@@ -5963,6 +6142,7 @@ declare namespace LocalJSX {
         "kol-modal": KolModal;
         "kol-nav": KolNav;
         "kol-pagination": KolPagination;
+        "kol-pagination-wc": KolPaginationWc;
         "kol-popover-button": KolPopoverButton;
         "kol-popover-button-wc": KolPopoverButtonWc;
         "kol-popover-wc": KolPopoverWc;
@@ -6006,6 +6186,7 @@ declare module "@stencil/core" {
             "kol-button-link": LocalJSX.KolButtonLink & JSXBase.HTMLAttributes<HTMLKolButtonLinkElement>;
             "kol-button-wc": LocalJSX.KolButtonWc & JSXBase.HTMLAttributes<HTMLKolButtonWcElement>;
             "kol-card": LocalJSX.KolCard & JSXBase.HTMLAttributes<HTMLKolCardElement>;
+            "kol-card-wc": LocalJSX.KolCardWc & JSXBase.HTMLAttributes<HTMLKolCardWcElement>;
             "kol-combobox": LocalJSX.KolCombobox & JSXBase.HTMLAttributes<HTMLKolComboboxElement>;
             "kol-details": LocalJSX.KolDetails & JSXBase.HTMLAttributes<HTMLKolDetailsElement>;
             "kol-drawer": LocalJSX.KolDrawer & JSXBase.HTMLAttributes<HTMLKolDrawerElement>;
@@ -6033,6 +6214,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-pagination-wc": LocalJSX.KolPaginationWc & JSXBase.HTMLAttributes<HTMLKolPaginationWcElement>;
             "kol-popover-button": LocalJSX.KolPopoverButton & JSXBase.HTMLAttributes<HTMLKolPopoverButtonElement>;
             "kol-popover-button-wc": LocalJSX.KolPopoverButtonWc & JSXBase.HTMLAttributes<HTMLKolPopoverButtonWcElement>;
             "kol-popover-wc": LocalJSX.KolPopoverWc & JSXBase.HTMLAttributes<HTMLKolPopoverWcElement>;

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

@@ -10,6 +10,7 @@ export declare let KolButtonLinkTag: "kol-button-link";
 export declare let KolButtonTag: "kol-button";
 export declare let KolButtonWcTag: "kol-button-wc";
 export declare let KolCardTag: "kol-card";
+export declare let KolCardWcTag: "kol-card-wc";
 export declare let KolComboboxTag: "kol-combobox";
 export declare let KolDetailsTag: "kol-details";
 export declare let KolDrawerTag: "kol-drawer";
@@ -35,6 +36,7 @@ export declare let KolLinkWcTag: "kol-link-wc";
 export declare let KolModalTag: "kol-modal";
 export declare let KolNavTag: "kol-nav";
 export declare let KolPaginationTag: "kol-pagination";
+export declare let KolPaginationWcTag: "kol-pagination-wc";
 export declare let KolPopoverWcTag: "kol-popover-wc";
 export declare let KolPopoverButtonTag: "kol-popover-button";
 export declare let KolPopoverButtonWcTag: "kol-popover-button-wc";

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

@@ -5,6 +5,7 @@ export type CustomSuggestionsProps = JSXBase.HTMLAttributes<HTMLLIElement> & {
     index: number;
     option: W3CInputValue;
     selected: boolean;
+    searchTerm?: string;
     ref?: ((elm?: HTMLLIElement | undefined) => void) | undefined;
 };
 declare const CustomSuggestionsOptionFc: FC<CustomSuggestionsProps>;

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

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

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

@@ -1,20 +1,9 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { Loading, PropImageSource } from '../props';
-type RequiredProps = {
-    alt: string;
-} & PropImageSource;
-type OptionalProps = {
-    loading: Loading;
-    sizes: string;
-    srcset: string;
-};
-type RequiredStates = RequiredProps & {
-    loading: Loading;
-};
-type OptionalStates = {
-    sizes: string;
-    srcset: string;
-};
+import type { PropAlt, PropImageSizes, PropImageSource, PropImageSrcset, PropLoading } from '../props';
+type RequiredProps = PropAlt & PropImageSource;
+type OptionalProps = PropLoading & PropImageSizes & PropImageSrcset;
+type RequiredStates = RequiredProps & PropLoading;
+type OptionalStates = PropImageSizes & PropImageSrcset;
 export type ImageProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type ImageStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type ImageAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;

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

@@ -0,0 +1,7 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { WatchStringOptions } from '../utils';
+export type AltPropType = string;
+export type PropAlt = {
+    alt: AltPropType;
+};
+export declare const validateAlt: (component: Generic.Element.Component, value?: AltPropType, options?: WatchStringOptions) => void;

package/dist/types/schema/props/image-sizes.d.ts

@@ -0,0 +1,7 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { WatchStringOptions } from '../utils';
+export type ImageSizesPropType = string;
+export type PropImageSizes = {
+    sizes: ImageSizesPropType;
+};
+export declare const validateImageSizes: (component: Generic.Element.Component, value?: ImageSizesPropType, options?: WatchStringOptions) => void;

package/dist/types/schema/props/image-srcset.d.ts

@@ -0,0 +1,7 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { WatchStringOptions } from '../utils';
+export type ImageSrcsetPropType = string;
+export type PropImageSrcset = {
+    srcset: ImageSrcsetPropType;
+};
+export declare const validateImageSrcset: (component: Generic.Element.Component, value?: ImageSrcsetPropType, options?: WatchStringOptions) => void;

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

@@ -1 +1 @@
-export*from"./access-key";export*from"./accordion-callbacks";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-description";export*from"./aria-expanded";export*from"./aria-owns";export*from"./aria-selected";export*from"./badge-text";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"./details-callbacks";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"./hide-label";export*from"./hide-msg";export*from"./href";export*from"./icons";export*from"./id";export*from"./image-source";export*from"./indeterminate";export*from"./label";export*from"./label-align";export*from"./link-on-callbacks";export*from"./link-target";export*from"./link-variant";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"./popover-align";export*from"./popover-callbacks";export*from"./read-only";export*from"./required";export*from"./rows";export*from"./short-key";export*from"./show";export*from"./spell-check";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./tab-behavior";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-header-cells";export*from"./table-selection";export*from"./toolbar-items";export*from"./tooltip-align";export*from"./touched";export*from"./variant/spin";
+export*from"./access-key";export*from"./accordion-callbacks";export*from"./active";export*from"./adjust-height";export*from"./alert";export*from"./alt";export*from"./align";export*from"./alternative-button-link-role";export*from"./aria-controls";export*from"./aria-current-value";export*from"./aria-description";export*from"./aria-expanded";export*from"./aria-owns";export*from"./aria-selected";export*from"./badge-text";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"./details-callbacks";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"./hide-label";export*from"./hide-msg";export*from"./href";export*from"./icons";export*from"./id";export*from"./image-source";export*from"./image-sizes";export*from"./image-srcset";export*from"./indeterminate";export*from"./label";export*from"./label-align";export*from"./link-on-callbacks";export*from"./link-target";export*from"./link-variant";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"./popover-align";export*from"./popover-callbacks";export*from"./read-only";export*from"./required";export*from"./rows";export*from"./short-key";export*from"./show";export*from"./spell-check";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./tab-behavior";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-header-cells";export*from"./table-selection";export*from"./toolbar-items";export*from"./tooltip-align";export*from"./touched";export*from"./variant/spin";

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

@@ -1,5 +1,8 @@
 import type { Generic } from 'adopted-style-sheets';
 declare const loadingOptions: readonly ["eager", "lazy"];
 export type Loading = (typeof loadingOptions)[number];
+export type PropLoading = {
+    loading: Loading;
+};
 export declare function validateLoading(component: Generic.Element.Component, value?: Loading): void;
 export {};

package/doc/card.md

@@ -1,4 +1,4 @@
-# kol-card
+# kol-card-wc
 
 <!-- Auto Generated Below -->
 

package/doc/components.md

@@ -5,9 +5,9 @@
 You can install the KoliBri components with `npm`, `pnpm` or `yarn`:
 
 ```bash
-npm i -g @public-ui/components
-pnpm i -g @public-ui/components
-yarn add -g @public-ui/components
+npm i @public-ui/components
+pnpm i @public-ui/components
+yarn add @public-ui/components
 ```
 
 ## Usage
@@ -36,7 +36,7 @@ Then, you can use the components in your HTML:
 
 Consider using one of the [framework integrations](https://public-ui.github.io/en/docs/get-started/frameworks) for a better developer experience.
 
-## Development hints
+## Development notes
 
 ### Styling
 

package/doc/drawer.md

@@ -5,12 +5,13 @@
 
 ## Properties
 
-| Property              | Attribute | Description                                                                                                        | Type                                                      | Default     |
-| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
-| `_align`              | `_align`  | Defines the visual orientation of the component.                                                                   | `"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` |
-| `_on`                 | --        | Specifies the EventCallback function to be called when the drawer is closing.                                      | `undefined` \| `({ onClose?: (() => void)` \| `undefined; })` | `undefined` |
-| `_open`               | `_open`   | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean` \| `undefined`                                    | `undefined` |
+| Property              | Attribute     | Description                                                                                                        | Type                                                      | Default     |
+| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
+| `_align`              | `_align`      | Defines the visual orientation of the component.                                                                   | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`     | `undefined` |
+| `_hasCloser`          | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean` \| `undefined`                                    | `false`     |
+| `_label` _(required)_ | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                  | `undefined` |
+| `_on`                 | --            | Specifies the EventCallback function to be called when the drawer is closing.                                      | `undefined` \| `({ onClose?: (() => void)` \| `undefined; })` | `undefined` |
+| `_open`               | `_open`       | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean` \| `undefined`                                    | `undefined` |
 
 
 ## Methods

package/doc/pagination.md

@@ -1,4 +1,4 @@
-# kol-pagination
+# kol-pagination-wc
 
 <!-- Auto Generated Below -->