@public-ui/components 2.2.4 → 2.2.5-rc.0

package/dist/kolibri/label-d0315384.js.map

@@ -1 +1 @@
-{"version":3,"names":["headingLevelOptions","READABLE_CHARS","ONLY_NUMBERS","countReadableChars","str","_a","match","length","hasEnoughReadableChars","min","containsOnlyNumbers","test","getValidationOptions","options","Object","assign","hooks","afterPatch","value","state","component","key","_b","a11yHint","uiUxHint","beforePatch","LABEL_VALUES","Set","validateLabel","watchValidator","validateLabelWithExpertSlot"],"sources":["src/schema/props/label.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchStringOptions } from '../utils';\nimport { watchValidator } from '../utils';\nimport { a11yHint, uiUxHint } from '../utils/a11y.tipps';\n\n/**\n * Defines the heading level options.\n */\nexport const headingLevelOptions = [0, 1, 2, 3, 4, 5, 6] as const;\nexport type HeadingLevel = (typeof headingLevelOptions)[number];\n\n/**\n * This is a regular expression that matches all readable characters.\n *\n * Interesting: https://stackoverflow.com/questions/150033/regular-expression-to-match-non-english-characters\n */\nconst READABLE_CHARS = /[a-zA-Z0-9äöüÄÖÜß]/g;\n\n/**\n * This is a regular expression that matches only numbers.\n */\nconst ONLY_NUMBERS = /^\\d+$/;\n\n/**\n * This function counts the number of readable characters in a string.\n * @param str The string to count.\n * @returns The number of readable characters in the string.\n */\nfunction countReadableChars(str: string): number {\n\treturn typeof str === 'string' ? str.match(READABLE_CHARS)?.length || 0 : 0;\n}\n\n/**\n * This function checks if a string has at least a certain number of readable characters.\n * @param str The string to check.\n * @param min The minimum number of readable characters.\n * @returns True if the string has at least the minimum number of readable characters, false otherwise.\n */\nexport function hasEnoughReadableChars(str: string, min = 1): boolean {\n\treturn countReadableChars(str) >= min;\n}\n\n/**\n * This function checks if a string contains only numbers.\n * @param str The string to check.\n * @returns True if the string contains only numbers, false otherwise.\n */\nexport function containsOnlyNumbers(str: string): boolean {\n\treturn ONLY_NUMBERS.test(str);\n}\n\n/**\n * Defines the type of the label property.\n */\nexport type LabelPropType = string;\n\n/**\n * 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.\n */\nexport type LabelWithExpertSlotPropType = LabelPropType | '';\n\n/**\n * The label property is used to label different elements:\n * - abbr -> title text\n * - button -> label text\n * - heading -> headline text\n * - input, select and textarea -> label text\n * - summary -> summary text\n * - quote, table -> caption text\n * - version -> version text\n * - etc.\n *\n * The label is often a mandatory attribute. If the value of the label is false,\n * the expert-slot will be used. Otherwise, the value of the label must be a string\n * and the expert-slot will be ignored.\n */\nexport type PropLabel = {\n\tlabel: LabelPropType;\n};\nexport type PropLabelWithExpertSlot = {\n\tlabel: LabelWithExpertSlotPropType;\n};\n\nexport type LabelProp = Generic.Element.Members<PropLabel, unknown>;\n// type LabelWithExpertSlotProp = Generic.Element.Members<PropLabelWithExpertSlot, unknown>;\n\nfunction getValidationOptions(options: WatchStringOptions): WatchStringOptions {\n\treturn {\n\t\t...options,\n\t\thooks: {\n\t\t\tafterPatch: (value, state, component, key) => {\n\t\t\t\tif (typeof options.hooks?.afterPatch === 'function') {\n\t\t\t\t\toptions.hooks?.afterPatch(value, state, component, key);\n\t\t\t\t}\n\t\t\t\tif (typeof value === 'string' && hasEnoughReadableChars(value, 3) === false && containsOnlyNumbers(value) === false) {\n\t\t\t\t\ta11yHint(`The heading or label (\"${value}\") is not accessible. A label should consist of at least three readable characters.`);\n\t\t\t\t}\n\t\t\t\tif (typeof value === 'string' && value.length > 80) {\n\t\t\t\t\tuiUxHint(`A heading or label should not be longer than 80 characters.`);\n\t\t\t\t}\n\t\t\t},\n\t\t\tbeforePatch: options.hooks?.beforePatch,\n\t\t},\n\t};\n}\n\nconst LABEL_VALUES = new Set(['string']);\nexport const validateLabel = (component: Generic.Element.Component, value?: LabelPropType, options: WatchStringOptions = {}): void => {\n\twatchValidator(component, '_label', (value) => typeof value === 'string', LABEL_VALUES, value, getValidationOptions(options));\n};\n\n/**\n * This method name helps to differentiate between the label\n * and the label with expert slot usage.\n */\nexport const validateLabelWithExpertSlot = validateLabel;\n"],"mappings":";;;sEASaA,EAAsB,CAAC,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,GAQtD,MAAMC,EAAiB,sBAKvB,MAAMC,EAAe,QAOrB,SAASC,EAAmBC,G,MAC3B,cAAcA,IAAQ,WAAWC,EAAAD,EAAIE,MAAML,MAAe,MAAAI,SAAA,SAAAA,EAAEE,SAAU,EAAI,CAC3E,C,SAQgBC,EAAuBJ,EAAaK,EAAM,GACzD,OAAON,EAAmBC,IAAQK,CACnC,C,SAOgBC,EAAoBN,GACnC,OAAOF,EAAaS,KAAKP,EAC1B,CAqCA,SAASQ,EAAqBC,G,MAC7B,OAAAC,OAAAC,OAAAD,OAAAC,OAAA,GACIF,GAAO,CACVG,MAAO,CACNC,WAAY,CAACC,EAAOC,EAAOC,EAAWC,K,QACrC,WAAWhB,EAAAQ,EAAQG,SAAK,MAAAX,SAAA,SAAAA,EAAEY,cAAe,WAAY,EACpDK,EAAAT,EAAQG,SAAK,MAAAM,SAAA,SAAAA,EAAEL,WAAWC,EAAOC,EAAOC,EAAWC,E,CAEpD,UAAWH,IAAU,UAAYV,EAAuBU,EAAO,KAAO,OAASR,EAAoBQ,KAAW,MAAO,CACpHK,EAAS,0BAA0BL,uF,CAEpC,UAAWA,IAAU,UAAYA,EAAMX,OAAS,GAAI,CACnDiB,EAAS,8D,GAGXC,aAAapB,EAAAQ,EAAQG,SAAK,MAAAX,SAAA,SAAAA,EAAEoB,cAG/B,CAEA,MAAMC,EAAe,IAAIC,IAAI,CAAC,W,MACjBC,EAAgB,CAACR,EAAsCF,EAAuBL,EAA8B,MACxHgB,EAAeT,EAAW,UAAWF,UAAiBA,IAAU,UAAUQ,EAAcR,EAAON,EAAqBC,GAAS,E,MAOjHiB,EAA8BF,S","ignoreList":[]}
+{"version":3,"names":["headingLevelOptions","READABLE_CHARS","ONLY_NUMBERS","countReadableChars","str","_a","match","length","hasEnoughReadableChars","min","containsOnlyNumbers","test","getValidationOptions","options","Object","assign","hooks","afterPatch","value","state","component","key","_b","a11yHint","uiUxHint","beforePatch","LABEL_VALUES","Set","validateLabel","watchValidator","validateLabelWithExpertSlot"],"sources":["src/schema/props/label.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchStringOptions } from '../utils';\nimport { watchValidator } from '../utils';\nimport { a11yHint, uiUxHint } from '../utils/a11y.tipps';\n\n/**\n * Defines the heading level options.\n */\nexport const headingLevelOptions = [0, 1, 2, 3, 4, 5, 6] as const;\nexport type HeadingLevel = (typeof headingLevelOptions)[number];\n\n/**\n * This is a regular expression that matches all readable characters.\n *\n * Interesting: https://stackoverflow.com/questions/150033/regular-expression-to-match-non-english-characters\n */\nconst READABLE_CHARS = /[a-zA-Z0-9äöüÄÖÜß]/g;\n\n/**\n * This is a regular expression that matches only numbers.\n */\nconst ONLY_NUMBERS = /^\\d+$/;\n\n/**\n * This function counts the number of readable characters in a string.\n * @param str The string to count.\n * @returns The number of readable characters in the string.\n */\nfunction countReadableChars(str: string): number {\n\treturn typeof str === 'string' ? str.match(READABLE_CHARS)?.length || 0 : 0;\n}\n\n/**\n * This function checks if a string has at least a certain number of readable characters.\n * @param str The string to check.\n * @param min The minimum number of readable characters.\n * @returns True if the string has at least the minimum number of readable characters, false otherwise.\n */\nexport function hasEnoughReadableChars(str: string, min = 1): boolean {\n\treturn countReadableChars(str) >= min;\n}\n\n/**\n * This function checks if a string contains only numbers.\n * @param str The string to check.\n * @returns True if the string contains only numbers, false otherwise.\n */\nexport function containsOnlyNumbers(str: string): boolean {\n\treturn ONLY_NUMBERS.test(str);\n}\n\n/**\n * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n */\nexport type LabelPropType = string;\n\n/**\n * 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.\n */\nexport type LabelWithExpertSlotPropType = LabelPropType | '';\n\n/**\n * The label property is used to label different elements:\n * - abbr -> title text\n * - button -> label text\n * - heading -> headline text\n * - input, select and textarea -> label text\n * - summary -> summary text\n * - quote, table -> caption text\n * - version -> version text\n * - etc.\n *\n * The label is often a mandatory attribute. If the value of the label is false,\n * the expert-slot will be used. Otherwise, the value of the label must be a string\n * and the expert-slot will be ignored.\n */\nexport type PropLabel = {\n\tlabel: LabelPropType;\n};\nexport type PropLabelWithExpertSlot = {\n\tlabel: LabelWithExpertSlotPropType;\n};\n\nexport type LabelProp = Generic.Element.Members<PropLabel, unknown>;\n// type LabelWithExpertSlotProp = Generic.Element.Members<PropLabelWithExpertSlot, unknown>;\n\nfunction getValidationOptions(options: WatchStringOptions): WatchStringOptions {\n\treturn {\n\t\t...options,\n\t\thooks: {\n\t\t\tafterPatch: (value, state, component, key) => {\n\t\t\t\tif (typeof options.hooks?.afterPatch === 'function') {\n\t\t\t\t\toptions.hooks?.afterPatch(value, state, component, key);\n\t\t\t\t}\n\t\t\t\tif (typeof value === 'string' && hasEnoughReadableChars(value, 3) === false && containsOnlyNumbers(value) === false) {\n\t\t\t\t\ta11yHint(`The heading or label (\"${value}\") is not accessible. A label should consist of at least three readable characters.`);\n\t\t\t\t}\n\t\t\t\tif (typeof value === 'string' && value.length > 80) {\n\t\t\t\t\tuiUxHint(`A heading or label should not be longer than 80 characters.`);\n\t\t\t\t}\n\t\t\t},\n\t\t\tbeforePatch: options.hooks?.beforePatch,\n\t\t},\n\t};\n}\n\nconst LABEL_VALUES = new Set(['string']);\nexport const validateLabel = (component: Generic.Element.Component, value?: LabelPropType, options: WatchStringOptions = {}): void => {\n\twatchValidator(component, '_label', (value) => typeof value === 'string', LABEL_VALUES, value, getValidationOptions(options));\n};\n\n/**\n * This method name helps to differentiate between the label\n * and the label with expert slot usage.\n */\nexport const validateLabelWithExpertSlot = validateLabel;\n"],"mappings":";;;sEASaA,EAAsB,CAAC,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,GAQtD,MAAMC,EAAiB,sBAKvB,MAAMC,EAAe,QAOrB,SAASC,EAAmBC,G,MAC3B,cAAcA,IAAQ,WAAWC,EAAAD,EAAIE,MAAML,MAAe,MAAAI,SAAA,SAAAA,EAAEE,SAAU,EAAI,CAC3E,C,SAQgBC,EAAuBJ,EAAaK,EAAM,GACzD,OAAON,EAAmBC,IAAQK,CACnC,C,SAOgBC,EAAoBN,GACnC,OAAOF,EAAaS,KAAKP,EAC1B,CAqCA,SAASQ,EAAqBC,G,MAC7B,OAAAC,OAAAC,OAAAD,OAAAC,OAAA,GACIF,GAAO,CACVG,MAAO,CACNC,WAAY,CAACC,EAAOC,EAAOC,EAAWC,K,QACrC,WAAWhB,EAAAQ,EAAQG,SAAK,MAAAX,SAAA,SAAAA,EAAEY,cAAe,WAAY,EACpDK,EAAAT,EAAQG,SAAK,MAAAM,SAAA,SAAAA,EAAEL,WAAWC,EAAOC,EAAOC,EAAWC,E,CAEpD,UAAWH,IAAU,UAAYV,EAAuBU,EAAO,KAAO,OAASR,EAAoBQ,KAAW,MAAO,CACpHK,EAAS,0BAA0BL,uF,CAEpC,UAAWA,IAAU,UAAYA,EAAMX,OAAS,GAAI,CACnDiB,EAAS,8D,GAGXC,aAAapB,EAAAQ,EAAQG,SAAK,MAAAX,SAAA,SAAAA,EAAEoB,cAG/B,CAEA,MAAMC,EAAe,IAAIC,IAAI,CAAC,W,MACjBC,EAAgB,CAACR,EAAsCF,EAAuBL,EAA8B,MACxHgB,EAAeT,EAAW,UAAWF,UAAiBA,IAAU,UAAUQ,EAAcR,EAAON,EAAqBC,GAAS,E,MAOjHiB,EAA8BF,S","ignoreList":[]}

package/dist/kolibri/open-20d08415.js.map

@@ -1 +1 @@
-{"version":3,"names":["validateOpen","component","value","options","watchBoolean"],"sources":["src/schema/props/open.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type OpenPropType = boolean;\n\n/**\n * If set (to true) opens/expands the element, closes if not set (or set to false).\n */\nexport type PropOpen = {\n\topen: OpenPropType;\n};\n\n/* validator */\nexport const validateOpen = (component: Generic.Element.Component, value: OpenPropType | undefined, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_open', value, options);\n};\n"],"mappings":";;;wDAgBaA,EAAe,CAACC,EAAsCC,EAAiCC,KACnGC,EAAaH,EAAW,QAASC,EAAOC,EAAQ,S","ignoreList":[]}
+{"version":3,"names":["validateOpen","component","value","options","watchBoolean"],"sources":["src/schema/props/open.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type OpenPropType = boolean;\n\n/**\n * Opens/expands the element when truthy, closes/collapses when falsy.\n */\nexport type PropOpen = {\n\topen: OpenPropType;\n};\n\n/* validator */\nexport const validateOpen = (component: Generic.Element.Component, value: OpenPropType | undefined, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_open', value, options);\n};\n"],"mappings":";;;wDAgBaA,EAAe,CAACC,EAAsCC,EAAiCC,KACnGC,EAAaH,EAAW,QAASC,EAAOC,EAAQ,S","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as s}from"./index-9809a0af.js";const t=class{constructor(t){s(this,t)}};export{t as test_component};
+import{r as s}from"./index-dc1c5aae.js";const t=class{constructor(t){s(this,t)}};export{t as test_component};

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

@@ -18,7 +18,6 @@ export declare class KolDrawer implements DrawerAPI {
     state: DrawerStates;
     validateLabel(value?: LabelPropType): void;
     validateAlign(value?: AlignPropType): void;
-    validateModal(value?: ModalPropType): void;
     validateOpen(value?: OpenPropType): Promise<void>;
     validateOn(value?: KoliBriModalEventCallbacks): void;
     private handleCloseDialog;

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

@@ -1,13 +1,15 @@
 import type { JSX } from '../../stencil-public-runtime';
 import type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '../../schema';
 export declare class KolForm implements FormAPI {
-    errorListElement?: HTMLElement;
+    errorListBlock?: HTMLElement;
+    errorListFirstLink?: HTMLElement;
     private readonly onSubmit;
     private readonly onReset;
     private readonly handleLinkClick;
     private renderErrorList;
     private renderFormElement;
     render(): JSX.Element;
+    private scrollToErrorList;
     focusErrorList(): Promise<void>;
     _on?: KoliBriFormCallbacks;
     _requiredText?: Stringified<boolean>;

package/dist/types/components.d.ts

@@ -40,7 +40,7 @@ export namespace Components {
          */
         "_on"?: AccordionCallbacksPropType<boolean>;
         /**
-          * If set (to true) opens/expands the element, closes if not set (or set to false).
+          * Opens/expands the element when truthy, closes/collapses when falsy.
           * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved.
          */
         "_open"?: boolean;
@@ -162,7 +162,7 @@ export namespace Components {
     }
     interface KolButton {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -219,7 +219,7 @@ export namespace Components {
          */
         "_role"?: AlternativeButtonLinkRolePropType;
         /**
-          * Defines the elements short key.
+          * Adds a visual short key hint to the component.
          */
         "_shortKey"?: ShortKeyPropType;
         /**
@@ -262,7 +262,7 @@ export namespace Components {
     }
     interface KolButtonLink {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -350,7 +350,7 @@ export namespace Components {
     }
     interface KolButtonWc {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -521,7 +521,7 @@ export namespace Components {
          */
         "_shortKey"?: ShortKeyPropType;
         /**
-          * Suggestions the user can choose from.
+          * Suggestions to provide for the input.
          */
         "_suggestions": SuggestionsPropType;
         /**
@@ -566,7 +566,7 @@ export namespace Components {
          */
         "_on"?: DetailsCallbacksPropType<boolean>;
         /**
-          * If set (to true) opens/expands the element, closes if not set (or set to false).
+          * Opens/expands the element when truthy, closes/collapses when falsy.
           * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved.
          */
         "_open"?: boolean;
@@ -578,7 +578,7 @@ export namespace Components {
     }
     interface KolDrawer {
         /**
-          * Specifies the orientation of the drawer.
+          * Defines the visual orientation of the component.
          */
         "_align"?: AlignPropType;
         /**
@@ -586,7 +586,7 @@ export namespace Components {
          */
         "_label": LabelPropType;
         /**
-          * Indicates whether the drawer is a modal.
+          * @deprecated Indicates whether the drawer is a modal.
          */
         "_modal"?: ModalPropType;
         /**
@@ -594,7 +594,7 @@ export namespace Components {
          */
         "_on"?: KoliBriModalEventCallbacks;
         /**
-          * Specifies the default open state of the drawer.
+          * Opens/expands the element when truthy, closes/collapses when falsy.
          */
         "_open"?: OpenPropType;
         "close": () => Promise<void>;
@@ -695,7 +695,7 @@ export namespace Components {
     }
     interface KolInput {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -1989,7 +1989,7 @@ export namespace Components {
     }
     interface KolLink {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -2034,7 +2034,7 @@ export namespace Components {
          */
         "_role"?: AlternativeButtonLinkRolePropType;
         /**
-          * Defines the elements access key.
+          * Adds a visual short key hint to the component.
          */
         "_shortKey"?: ShortKeyPropType;
         /**
@@ -2057,7 +2057,7 @@ export namespace Components {
     }
     interface KolLinkButton {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -2151,7 +2151,7 @@ export namespace Components {
     }
     interface KolLinkWc {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -2856,6 +2856,7 @@ export namespace Components {
         "_label": string;
         /**
           * Defines the table min-width.
+          * @deprecated This property is deprecated and will be removed in the next major release.
          */
         "_minWidth"?: string;
         /**
@@ -2869,7 +2870,7 @@ export namespace Components {
     }
     interface KolTabs {
         /**
-          * Defines the position of the tab captions.
+          * Defines the visual orientation of the component.
          */
         "_align"?: AlignPropType;
         /**
@@ -3033,7 +3034,7 @@ export namespace Components {
          */
         "_items": ToolbarItemsPropType;
         /**
-          * Defines the semantic aria-label of the component.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": string;
     }
@@ -3057,7 +3058,7 @@ export namespace Components {
     }
     interface KolTree {
         /**
-          * Defines the label of the tree.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
     }
@@ -3067,15 +3068,15 @@ export namespace Components {
          */
         "_active"?: OpenPropType;
         /**
-          * This property is used for a link from a reference to the target URL.
+          * Defines the target URI of the link.
          */
         "_href": HrefPropType;
         /**
-          * Defines the label of the link.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
         /**
-          * If set (to true) opens/expands the element, closes if not set (or set to false).
+          * Opens/expands the element when truthy, closes/collapses when falsy.
          */
         "_open"?: OpenPropType;
         "collapse": () => Promise<void>;
@@ -3089,15 +3090,15 @@ export namespace Components {
          */
         "_active"?: OpenPropType;
         /**
-          * This property is used for a link from a reference to the target URL.
+          * Defines the target URI of the link.
          */
         "_href": HrefPropType;
         /**
-          * Defines the label of the link.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
         /**
-          * If set (to true) opens/expands the element, closes if not set (or set to false).
+          * Opens/expands the element when truthy, closes/collapses when falsy.
          */
         "_open"?: OpenPropType;
         "collapse": () => Promise<void>;
@@ -3107,7 +3108,7 @@ export namespace Components {
     }
     interface KolTreeWc {
         /**
-          * Defines the label of the tree.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
     }
@@ -3654,7 +3655,7 @@ declare namespace LocalJSX {
          */
         "_on"?: AccordionCallbacksPropType<boolean>;
         /**
-          * If set (to true) opens/expands the element, closes if not set (or set to false).
+          * Opens/expands the element when truthy, closes/collapses when falsy.
           * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved.
          */
         "_open"?: boolean;
@@ -3771,7 +3772,7 @@ declare namespace LocalJSX {
     }
     interface KolButton {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -3828,7 +3829,7 @@ declare namespace LocalJSX {
          */
         "_role"?: AlternativeButtonLinkRolePropType;
         /**
-          * Defines the elements short key.
+          * Adds a visual short key hint to the component.
          */
         "_shortKey"?: ShortKeyPropType;
         /**
@@ -3861,7 +3862,7 @@ declare namespace LocalJSX {
     }
     interface KolButtonLink {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -3939,7 +3940,7 @@ declare namespace LocalJSX {
     }
     interface KolButtonWc {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -4105,7 +4106,7 @@ declare namespace LocalJSX {
          */
         "_shortKey"?: ShortKeyPropType;
         /**
-          * Suggestions the user can choose from.
+          * Suggestions to provide for the input.
          */
         "_suggestions": SuggestionsPropType;
         /**
@@ -4144,14 +4145,14 @@ declare namespace LocalJSX {
          */
         "_on"?: DetailsCallbacksPropType<boolean>;
         /**
-          * If set (to true) opens/expands the element, closes if not set (or set to false).
+          * Opens/expands the element when truthy, closes/collapses when falsy.
           * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved.
          */
         "_open"?: boolean;
     }
     interface KolDrawer {
         /**
-          * Specifies the orientation of the drawer.
+          * Defines the visual orientation of the component.
          */
         "_align"?: AlignPropType;
         /**
@@ -4159,7 +4160,7 @@ declare namespace LocalJSX {
          */
         "_label": LabelPropType;
         /**
-          * Indicates whether the drawer is a modal.
+          * @deprecated Indicates whether the drawer is a modal.
          */
         "_modal"?: ModalPropType;
         /**
@@ -4167,7 +4168,7 @@ declare namespace LocalJSX {
          */
         "_on"?: KoliBriModalEventCallbacks;
         /**
-          * Specifies the default open state of the drawer.
+          * Opens/expands the element when truthy, closes/collapses when falsy.
          */
         "_open"?: OpenPropType;
     }
@@ -4265,7 +4266,7 @@ declare namespace LocalJSX {
     }
     interface KolInput {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -5453,7 +5454,7 @@ declare namespace LocalJSX {
     }
     interface KolLink {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -5498,7 +5499,7 @@ declare namespace LocalJSX {
          */
         "_role"?: AlternativeButtonLinkRolePropType;
         /**
-          * Defines the elements access key.
+          * Adds a visual short key hint to the component.
          */
         "_shortKey"?: ShortKeyPropType;
         /**
@@ -5516,7 +5517,7 @@ declare namespace LocalJSX {
     }
     interface KolLinkButton {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -5605,7 +5606,7 @@ declare namespace LocalJSX {
     }
     interface KolLinkWc {
         /**
-          * Defines the elements access key.
+          * Defines which key combination can be used to trigger or focus the interactive element of the component.
          */
         "_accessKey"?: AccessKeyPropType;
         /**
@@ -6285,6 +6286,7 @@ declare namespace LocalJSX {
         "_label": string;
         /**
           * Defines the table min-width.
+          * @deprecated This property is deprecated and will be removed in the next major release.
          */
         "_minWidth"?: string;
         /**
@@ -6298,7 +6300,7 @@ declare namespace LocalJSX {
     }
     interface KolTabs {
         /**
-          * Defines the position of the tab captions.
+          * Defines the visual orientation of the component.
          */
         "_align"?: AlignPropType;
         /**
@@ -6450,7 +6452,7 @@ declare namespace LocalJSX {
          */
         "_items": ToolbarItemsPropType;
         /**
-          * Defines the semantic aria-label of the component.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": string;
     }
@@ -6474,7 +6476,7 @@ declare namespace LocalJSX {
     }
     interface KolTree {
         /**
-          * Defines the label of the tree.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
     }
@@ -6484,15 +6486,15 @@ declare namespace LocalJSX {
          */
         "_active"?: OpenPropType;
         /**
-          * This property is used for a link from a reference to the target URL.
+          * Defines the target URI of the link.
          */
         "_href": HrefPropType;
         /**
-          * Defines the label of the link.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
         /**
-          * If set (to true) opens/expands the element, closes if not set (or set to false).
+          * Opens/expands the element when truthy, closes/collapses when falsy.
          */
         "_open"?: OpenPropType;
     }
@@ -6502,21 +6504,21 @@ declare namespace LocalJSX {
          */
         "_active"?: OpenPropType;
         /**
-          * This property is used for a link from a reference to the target URL.
+          * Defines the target URI of the link.
          */
         "_href": HrefPropType;
         /**
-          * Defines the label of the link.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
         /**
-          * If set (to true) opens/expands the element, closes if not set (or set to false).
+          * Opens/expands the element when truthy, closes/collapses when falsy.
          */
         "_open"?: OpenPropType;
     }
     interface KolTreeWc {
         /**
-          * Defines the label of the tree.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
     }

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

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

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

@@ -11,6 +11,7 @@ type RequiredStates = {
     data: KoliBriTableDataType[];
 } & PropLabel;
 type OptionalStates = {
+    deprecatedMinWidth: string;
     minWidth: string;
     dataFoot: KoliBriTableDataType[];
     selection: KoliBriTableSelection;

package/dist/types/schema/props/error-list.d.ts

@@ -1,7 +1,8 @@
 import type { Generic } from 'adopted-style-sheets';
+import { EventCallback } from '../types';
 export type ErrorListPropType = {
     message: string;
-    selector: string;
+    selector: string | EventCallback<Event>;
 };
 export type PropErrorList = {
     errorList: ErrorListPropType[];

package/doc/accordion.md

@@ -118,7 +118,7 @@ Standardansicht gelegt.
 | `_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`                                            | `1`         |
 | `_on`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, boolean>` \| `undefined; }` | `undefined` |
-| `_open`               | `_open`     | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean` \| `undefined`                                                                    | `false`     |
+| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean` \| `undefined`                                                                    | `false`     |
 
 
 ## Methods

package/doc/button-link.md

@@ -54,7 +54,7 @@ kolibriElement._on = {
 
 | Property              | Attribute           | Description                                                                                                                                                                      | Type                                                                                                                                                   | Default     |
 | --------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `_accessKey`          | `_access-key`       | Defines the elements access key.                                                                                                                                                 | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_accessKey`          | `_access-key`       | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                          | `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` |

package/doc/button.md

@@ -123,7 +123,7 @@ Probleme mit Disabled-Status
 
 | Property              | Attribute           | Description                                                                                                                                                                      | Type                                                                                                                                                   | Default     |
 | --------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `_accessKey`          | `_access-key`       | Defines the elements access key.                                                                                                                                                 | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_accessKey`          | `_access-key`       | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                          | `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` |
@@ -137,7 +137,7 @@ Probleme mit Disabled-Status
 | `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                    | `string` \| `undefined`                                                                                                                                  | `undefined` |
 | `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
 | `_role`               | `_role`             | Defines the role of the components primary element.                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `"treeitem"` \| `undefined`                                                                                               | `undefined` |
-| `_shortKey`           | `_short-key`        | Defines the elements short key.                                                                                                                                                  | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_shortKey`           | `_short-key`        | Adds a visual short key hint to the component.                                                                                                                                   | `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'`  |

package/doc/combobox.md

@@ -71,7 +71,7 @@ Beispiel für die Konstruktion des JSON-Array:
 | `_placeholder`              | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                                           | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
 | `_required`                 | `_required`      | Makes the input element required.                                                                                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
 | `_shortKey`                 | `_short-key`     | Adds a visual short key hint to the component.                                                                                                                                        | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_suggestions` _(required)_ | `_suggestions`   | Suggestions the user can choose from.                                                                                                                                                 | `W3CInputValue[]` \| `string`                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
+| `_suggestions` _(required)_ | `_suggestions`   | Suggestions to provide for the input.                                                                                                                                                 | `W3CInputValue[]` \| `string`                                                                                                                                                                                                                                                                                                                                                                 | `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'`     |
 | `_touched`                  | `_touched`       | Shows if the input was touched by a user.                                                                                                                                             | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |

package/doc/details.md

@@ -99,7 +99,7 @@ Verwenden Sie das Attribut **`_label`**, um den Text zu definieren, der als Übe
 | `_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`                                             | `1`         |
 | `_on`                 | --          | Defines the callback functions for details.                                                                        | `undefined` \| `{ onToggle?: EventValueOrEventCallback<MouseEvent, boolean>` \| `undefined; }` | `undefined` |
-| `_open`               | `_open`     | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean` \| `undefined`                                                                     | `false`     |
+| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean` \| `undefined`                                                                     | `false`     |
 
 
 ## Methods

package/doc/drawer.md

@@ -132,11 +132,11 @@ Optional können Animationen mit Keyframes hinzugefügt werden. Dabei ist es wic
 
 | Property              | Attribute | Description                                                                                                        | Type                                                      | Default     |
 | --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
-| `_align`              | `_align`  | Specifies the orientation of the drawer.                                                                           | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`     | `undefined` |
+| `_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` |
-| `_modal`              | `_modal`  | Indicates whether the drawer is a modal.                                                                           | `boolean` \| `undefined`                                    | `undefined` |
+| `_modal`              | `_modal`  | <span class="text-red-500">**[DEPRECATED]**</span> Indicates whether the drawer is a modal.<br/><br/>                 | `boolean` \| `undefined`                                    | `undefined` |
 | `_on`                 | --        | Specifies the EventCallback function to be called when the drawer is closing.                                      | `undefined` \| `({ onClose?: (() => void)` \| `undefined; })` | `undefined` |
-| `_open`               | `_open`   | Specifies the default open state of the drawer.                                                                    | `boolean` \| `undefined`                                    | `undefined` |
+| `_open`               | `_open`   | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean` \| `undefined`                                    | `undefined` |
 
 
 ## Methods