@public-ui/components 3.1.0-rc.0 → 3.1.0

package/dist/kolibri/max-length-behavior-nTw1Zuyf.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{d as t,N as s,w as o}from"./common-Dd0zJQbD.js";const a=(s,a,n)=>{t(s,"_hasCounter",a,n)},n=(t,a,n={})=>{s(t,"_maxLength",a,Object.assign({min:0},n))},e=["hard","soft"],r=(s,t)=>{o(s,"_maxLengthBehavior",s=>"string"==typeof s&&e.includes(s),new Set(["String {hard, soft}"]),t)};export{a,n as b,r as v};
+import{d as a,N as t,w as s}from"./common-Dd0zJQbD.js";const o=(s,t,n)=>{a(s,"_hasCounter",t,n)},e=(s,a,n={})=>{t(s,"_maxLength",a,Object.assign({min:0},n))},n=["hard","soft"],r=(a,t)=>{s(a,"_maxLengthBehavior",s=>"string"==typeof s&&n.includes(s),new Set(["String {hard, soft}"]),t)};export{o as a,e as b,r as v};

package/dist/kolibri/reuse-CX4AQDkS.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-const s=o=>""===o,o=(o,s)=>o||s||"";export{o as b,s};
+const s=s=>""===s,a=(s,a)=>s||a||"";export{a as b,s};

package/dist/kolibri/spell-check-B9ot-4t-.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{d as e}from"./common-Dd0zJQbD.js";const o=(o,s)=>{e(o,"_spellCheck",s,{defaultValue:void 0})};export{o as v};
+import{d as o}from"./common-Dd0zJQbD.js";const e=(e,s)=>{o(e,"_spellCheck",s,{defaultValue:void 0})};export{e as v};

package/dist/kolibri/suggestions-B-jLvT4L.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{H as s,q as e}from"./common-Dd0zJQbD.js";const o=(o,t)=>{s(o,"_suggestions",s=>"string"==typeof s||"number"==typeof s,t,void 0,{hooks:{afterPatch:s=>{Array.isArray(s)&&s.length&&e("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})};export{o as v};
+import{H as s,q as o}from"./common-Dd0zJQbD.js";const e=(e,t)=>{s(e,"_suggestions",s=>"string"==typeof s||"number"==typeof s,t,void 0,{hooks:{afterPatch:s=>{Array.isArray(s)&&s.length&&o("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})};export{e as v};

package/dist/kolibri/table-settings-DxLvhwRE.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{d as t,w as e,O as n,o,p as a,s,G as c}from"./common-Dd0zJQbD.js";const l=(e,a)=>{t(e,"_hasSettingsMenu",a)},f=(t,a)=>{e(t,"_on",e=>"object"==typeof e&&null!==e,new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),a)},r=(t,a)=>{e(t,"_on",e=>"object"==typeof e&&null!==e,new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),a)},i=(e,t,r)=>{n(t,()=>{o(t,()=>{void 0===t&&(t=[]);try{t=a(t)}catch(e){}Array.isArray(t)&&t.every(e=>"object"==typeof e&&null!==e)&&s(e,"_data",t,r)})})},y=(e,t,r)=>{n(t,()=>{o(t,()=>{void 0===t&&(t=[]);try{t=a(t)}catch(e){}Array.isArray(t)&&t.every(e=>"object"==typeof e&&null!==e)&&s(e,"_dataFoot",t,r)})})},p=(e,t)=>{(e=>e&&c(e)&&"function"==typeof e.label&&(!e.selectedKeys||Array.isArray(e.selectedKeys)))("string"==typeof t?(()=>{try{return a(t)}catch(e){return}})():t)&&s(e,"_selection",t)},b=(t,a)=>{e(t,"_tableSettings",e=>"object"==typeof e&&null!==e,new Set(["TableSettings"]),a)};export{y as a,l as b,p as c,r as d,b as e,f,i as v};
+import{d as t,w as e,O as a,o,p as n,s,G as l}from"./common-Dd0zJQbD.js";const c=(e,a)=>{t(e,"_hasSettingsMenu",a)},r=(t,a)=>{e(t,"_on",e=>"object"==typeof e&&null!==e,new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),a)},y=(t,a)=>{e(t,"_on",e=>"object"==typeof e&&null!==e,new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),a)},p=(e,t,r)=>{a(t,()=>{o(t,()=>{void 0===t&&(t=[]);try{t=n(t)}catch(e){}Array.isArray(t)&&t.every(e=>"object"==typeof e&&null!==e)&&s(e,"_data",t,r)})})},b=(e,t,r)=>{a(t,()=>{o(t,()=>{void 0===t&&(t=[]);try{t=n(t)}catch(e){}Array.isArray(t)&&t.every(e=>"object"==typeof e&&null!==e)&&s(e,"_dataFoot",t,r)})})},f=(e,t)=>{(e=>e&&l(e)&&"function"==typeof e.label&&(!e.selectedKeys||Array.isArray(e.selectedKeys)))("string"==typeof t?(()=>{try{return n(t)}catch(e){return}})():t)&&s(e,"_selection",t)},i=(t,a)=>{e(t,"_tableSettings",e=>"object"==typeof e&&null!==e,new Set(["TableSettings"]),a)};export{b as a,c as b,f as c,y as d,i as e,r as f,p as v};

package/dist/kolibri/test-component.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as o}from"./index-BuVNvMVh.js";import"./common-Dd0zJQbD.js";const s=class{constructor(s){o(this,s)}};export{s as test_component};
+import{r as o}from"./index-BVfSKhpj.js";import"./common-Dd0zJQbD.js";const s=class{constructor(s){o(this,s)}};export{s as test_component};

package/dist/kolibri/tooltip-open-tracking-rBbBgPWP.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-let s=0;const t=()=>{s++},a=()=>{s=Math.max(0,s-1)},o=t=>{s>0&&t.preventDefault()},c=()=>s>0;export{a,o as h,c as i,t};
+let a=0;const s=()=>{a++},t=()=>{a=Math.max(0,a-1)},e=t=>{a>0&&t.preventDefault()},h=()=>a>0;export{t as a,e as h,h as i,s as t};

package/dist/kolibri/validation-aqgnZOL6.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{w as e}from"./common-Dd0zJQbD.js";import{h as o}from"./label-Dnmzb2S_.js";const r=(r,t)=>{e(r,"_level",e=>"number"==typeof e&&o.includes(e),new Set(o.map(String)),t,{defaultValue:1,required:!0})},t=(e,o)=>{r(e,o)};export{t as w};
+import{w as e}from"./common-Dd0zJQbD.js";import{h as o}from"./label-Dnmzb2S_.js";const r=(r,m)=>{((r,m)=>{e(r,"_level",e=>"number"==typeof e&&o.includes(e),new Set(o.map(String)),m,{defaultValue:1,required:!0})})(r,m)};export{r as w};

package/dist/types/stencil-public-runtime.d.ts

@@ -63,6 +63,12 @@ export interface ShadowRootOptions {
      * focusable part is given focus, and the shadow host is given any available `:focus` styling.
      */
     delegatesFocus?: boolean;
+    /**
+     * Sets the slot assignment mode for the shadow root. When set to `'manual'`, enables imperative
+     * slotting using the `HTMLSlotElement.assign()` method. Defaults to `'named'` for standard
+     * declarative slotting behavior.
+     */
+    slotAssignment?: 'manual' | 'named';
 }
 export interface ModeStyles {
     [modeName: string]: string | string[];
@@ -125,6 +131,9 @@ export interface AttachInternalsDecorator {
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
+export interface ResolveVarFunction {
+    <T>(variable: T): string;
+}
 export interface ListenOptions {
     /**
      * Handlers can also be registered for an event other than the host itself.
@@ -153,7 +162,9 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+    (propName: any, watchOptions?: {
+        immediate?: boolean;
+    }): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
 }
 export interface PropSerializeDecorator {
     (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
@@ -208,6 +219,24 @@ export declare const AttachInternals: AttachInternalsDecorator;
  * https://stenciljs.com/docs/events#listen-decorator
  */
 export declare const Listen: ListenDecorator;
+/**
+ * The `resolveVar()` function is a compile-time utility that resolves const variables
+ * and object properties to their string literal values. This allows variables to be
+ * used in `@Listen` and `@Event` decorators instead of hardcoded strings.
+ *
+ * @example
+ * ```ts
+ * const MY_EVENT = 'myEvent';
+ * @Listen(resolveVar(MY_EVENT))
+ * ```
+ *
+ * @example
+ * ```ts
+ * const EVENTS = { MY_EVENT: 'myEvent' } as const;
+ * @Event({ eventName: resolveVar(EVENTS.MY_EVENT) })
+ * ```
+ */
+export declare const resolveVar: ResolveVarFunction;
 /**
  * The `@Method()` decorator is used to expose methods on the public API.
  * Class methods decorated with the @Method() decorator can be called directly
@@ -365,6 +394,27 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type TagTransformer = (tag: string) => string;
+/**
+ * Sets a tag transformer to be used when rendering your custom elements.
+ * ```ts
+ * setTagTransformer((tag) => {
+ *  if (tag.startsWith('my-')) return `new-${tag}`
+ *  return tag;
+ * });
+ * ```
+ * Will mean all your components that start with `my-` are defined instead with `new-my-` prefix.
+ *
+ * @param transformer the transformer function to use which must return a string.
+ */
+export declare function setTagTransformer(transformer: TagTransformer): void;
+/**
+ * Transforms a tag name using a transformer set via `setTagTransformer`
+ *
+ * @param tag - the tag to transform e.g. `my-tag`
+ * @returns the transformed tag e.g. `new-my-tag`
+ */
+export declare function transformTag(tag: string): string;
 /**
  * @deprecated - Use `MixedInCtor` instead:
  * ```ts
@@ -568,7 +618,7 @@ export interface FunctionalUtilities {
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
-    (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
+    (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[] | null;
 }
 /**
  * A Child VDOM node
@@ -623,6 +673,35 @@ export declare function h(sel: any, text: string): VNode;
 export declare function h(sel: any, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsx mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsx".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsx(type: any, props: any, key?: string): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxmode with multiple children.
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsxs(type: any, props: any, key?: string): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxdev mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsxdev".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @param isStaticChildren indicates if the children are static
+ * @param source source information
+ * @param self reference to the component instance
+ * @returns a jsx vnode
+ */
+export declare function jsxDEV(type: any, props: any, key?: string | number, isStaticChildren?: boolean, source?: any, self?: any): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
 /**
  * A virtual DOM node
@@ -653,7 +732,7 @@ declare namespace LocalJSX {
 export { LocalJSX as JSX };
 export declare namespace JSXBase {
     interface IntrinsicElements {
-        slot: JSXBase.SlotAttributes;
+        slot: JSXBase.SlotAttributes<HTMLSlotElement>;
         a: JSXBase.AnchorHTMLAttributes<HTMLAnchorElement>;
         abbr: JSXBase.HTMLAttributes;
         address: JSXBase.HTMLAttributes;
@@ -823,7 +902,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes extends JSXAttributes {
+    interface SlotAttributes<T = HTMLSlotElement> extends JSXAttributes<T> {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -879,6 +958,9 @@ export declare namespace JSXBase {
         popoverTargetAction?: string;
         popoverTargetElement?: Element | null;
         popoverTarget?: string;
+        command?: string;
+        commandFor?: string;
+        commandfor?: string;
     }
     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -1747,6 +1829,7 @@ export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;
     syncQueue?: boolean;
+    /** @deprecated in-favour of `setTagTransformer` and `transformTag` */
     transformTagName?: (tagName: string) => string;
     jmp?: (c: Function) => any;
     raf?: (c: FrameRequestCallback) => number;

package/doc/accordion.md

@@ -5,13 +5,13 @@
 
 ## Properties
 
-| Property              | Attribute   | Description                                                                                                        | Type                                                                                      | Default     |
-| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ----------- |
-| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `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` |
-| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                            | `0`         |
-| `_on`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \| undefined; }` | `undefined` |
-| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \| undefined`                                                                    | `false`     |
+| Property              | Attribute   | Description                                                                                                        | Type                                           | Default     |
+| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------- |
+| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `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` |
+| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `0`         |
+| `_on`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `boolean \| undefined`                         | `undefined` |
+| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \| undefined`                         | `false`     |
 
 
 ## Methods

package/doc/button-link.md

@@ -5,27 +5,27 @@
 
 ## Properties
 
-| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |
-| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \| undefined`                                                                                                                                 | `undefined` |
-| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \| undefined`                                                                                                                                 | `undefined` |
-| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \| undefined`                                                                                                                                 | `false`     |
-| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \| undefined`                                                                                                                                 | `false`     |
-| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                                                                                 | `undefined` |
-| `_id`                 | `_id`               | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                            | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \| undefined`                                                                                                                                 | `true`      |
-| `_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`             | <span style="color:red">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `"tab" \| "treeitem" \| undefined`                                                                                                                     | `undefined` |
-| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \| 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'`  |
-| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`                                                                                           | `undefined` |
-| `_variant`            | `_variant`          | <span style="color:red">**[DEPRECATED]**</span> Use the new _inline property instead.<br/><br/>Defines which variant should be used for presentation.                                                                                    | `"inline" \| "standalone" \| undefined`                                                                                                                | `'inline'`  |
+| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                   | Default     |
+| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \| undefined`                                                  | `undefined` |
+| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \| undefined`                                                  | `undefined` |
+| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \| undefined`                                                  | `undefined` |
+| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \| undefined`                                                 | `undefined` |
+| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \| undefined`                                                 | `undefined` |
+| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \| undefined`                                                 | `false`     |
+| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \| undefined`                                                 | `false`     |
+| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined` | `undefined` |
+| `_id`                 | `_id`               | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                            | `string \| undefined`                                                  | `undefined` |
+| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \| undefined`                                                 | `true`      |
+| `_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.                                                                                                                                                                              | `boolean \| null \| number \| object \| string \| undefined`           | `undefined` |
+| `_role`               | `_role`             | <span style="color:red">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `"tab" \| "treeitem" \| undefined`                                     | `undefined` |
+| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \| 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'`  |
+| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`           | `undefined` |
+| `_variant`            | `_variant`          | <span style="color:red">**[DEPRECATED]**</span> Use the new _inline property instead.<br/><br/>Defines which variant should be used for presentation.                                                                                    | `"inline" \| "standalone" \| undefined`                                | `'inline'`  |
 
 
 ## Methods

package/doc/button.md

@@ -5,28 +5,28 @@
 
 ## Properties
 
-| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |
-| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \| undefined`                                                                                                                                 | `undefined` |
-| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \| undefined`                                                                                                                                 | `undefined` |
-| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant="custom" is set.                                                                                                                                                                          | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \| undefined`                                                                                                                                 | `false`     |
-| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \| undefined`                                                                                                                                 | `false`     |
-| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                                                                                 | `undefined` |
-| `_id`                 | `_id`               | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                            | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \| undefined`                                                                                                                                 | `false`     |
-| `_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`             | <span style="color:red">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `"tab" \| "treeitem" \| undefined`                                                                                                                     | `undefined` |
-| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \| 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'`  |
-| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`                                                                                           | `undefined` |
-| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| "tertiary" \| undefined`                                                   | `'normal'`  |
+| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                 | Default     |
+| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \| undefined`                                                                                | `undefined` |
+| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \| undefined`                                                                                | `undefined` |
+| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \| undefined`                                                                                | `undefined` |
+| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \| undefined`                                                                               | `undefined` |
+| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \| undefined`                                                                               | `undefined` |
+| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant="custom" is set.                                                                                                                                                                          | `string \| undefined`                                                                                | `undefined` |
+| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \| undefined`                                                                               | `false`     |
+| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \| undefined`                                                                               | `false`     |
+| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                               | `undefined` |
+| `_id`                 | `_id`               | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                            | `string \| undefined`                                                                                | `undefined` |
+| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \| undefined`                                                                               | `false`     |
+| `_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.                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`                                         | `undefined` |
+| `_role`               | `_role`             | <span style="color:red">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `"tab" \| "treeitem" \| undefined`                                                                   | `undefined` |
+| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \| 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'`  |
+| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`                                         | `undefined` |
+| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| "tertiary" \| undefined` | `'normal'`  |
 
 
 ## Methods

package/doc/details.md

@@ -5,13 +5,13 @@
 
 ## Properties
 
-| Property              | Attribute   | Description                                                                                                        | Type                                                                                       | Default     |
-| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ----------- |
-| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `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` |
-| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                             | `0`         |
-| `_on`                 | --          | Defines the callback functions for details.                                                                        | `undefined \| { onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \| undefined; }` | `undefined` |
-| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \| undefined`                                                                     | `false`     |
+| Property              | Attribute   | Description                                                                                                        | Type                                           | Default     |
+| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------- |
+| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `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` |
+| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `0`         |
+| `_on`                 | --          | Defines the callback functions for details.                                                                        | `boolean \| undefined`                         | `undefined` |
+| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \| undefined`                         | `false`     |
 
 
 ## Methods

package/doc/popover-button.md

@@ -5,28 +5,28 @@
 
 ## Properties
 
-| Property              | Attribute           | Description                                                                                                                                                                      | Type                                                                                                                                                   | Default     |
-| --------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                            | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                              | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                            | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \| undefined`                                                                                                                                 | `undefined` |
-| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant="custom" is set.                                                                                                                  | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                           | `boolean \| undefined`                                                                                                                                 | `false`     |
-| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                       | `boolean \| undefined`                                                                                                                                 | `false`     |
-| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                  | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                                                                                 | `undefined` |
-| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                             | `boolean \| undefined`                                                                                                                                 | `false`     |
-| `_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` |
-| `_popoverAlign`       | `_popover-align`    | Defines where to show the Popover preferably: top, right, bottom or left.                                                                                                        | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                  | `'bottom'`  |
-| `_role`               | `_role`             | Defines the role of the components primary element.                                                                                                                              | `"tab" \| "treeitem" \| undefined`                                                                                                                     | `undefined` |
-| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                          | `string \| undefined`                                                                                                                                  | `undefined` |
-| `_tabIndex`           | `_tab-index`        | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                 | `number \| undefined`                                                                                                                                  | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                        | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                  | `'top'`     |
-| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                               | `"button" \| "reset" \| "submit" \| undefined`                                                                                                         | `'button'`  |
-| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                | `boolean \| null \| number \| object \| string \| undefined`                                                                                           | `undefined` |
-| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                           | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| "tertiary" \| undefined`                                                   | `'normal'`  |
+| Property              | Attribute           | Description                                                                                                                                                                      | Type                                                                                                 | Default     |
+| --------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                            | `string \| undefined`                                                                                | `undefined` |
+| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                              | `string \| undefined`                                                                                | `undefined` |
+| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                            | `string \| undefined`                                                                                | `undefined` |
+| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \| undefined`                                                                               | `undefined` |
+| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant="custom" is set.                                                                                                                  | `string \| undefined`                                                                                | `undefined` |
+| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                           | `boolean \| undefined`                                                                               | `false`     |
+| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                       | `boolean \| undefined`                                                                               | `false`     |
+| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                  | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                               | `undefined` |
+| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                             | `boolean \| undefined`                                                                               | `false`     |
+| `_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.                                                                                                                                | `boolean \| null \| number \| object \| string \| undefined`                                         | `undefined` |
+| `_popoverAlign`       | `_popover-align`    | Defines where to show the Popover preferably: top, right, bottom or left.                                                                                                        | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                | `'bottom'`  |
+| `_role`               | `_role`             | Defines the role of the components primary element.                                                                                                                              | `"tab" \| "treeitem" \| undefined`                                                                   | `undefined` |
+| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                          | `string \| undefined`                                                                                | `undefined` |
+| `_tabIndex`           | `_tab-index`        | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                 | `number \| undefined`                                                                                | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                        | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                | `'top'`     |
+| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                               | `"button" \| "reset" \| "submit" \| undefined`                                                       | `'button'`  |
+| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                | `boolean \| null \| number \| object \| string \| undefined`                                         | `undefined` |
+| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                           | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| "tertiary" \| undefined` | `'normal'`  |
 
 
 ## Methods