@public-ui/components 4.3.0 → 4.3.1-rc.0

package/dist/collection/components/card/component.js

@@ -1,17 +1,20 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
+import { __decorate } from "tslib";
 import { h, Host } from "@stencil/core";
-import { setState, validateHasCloser, validateLabel } from "../../schema";
+import { setState, validateHasCloser, validateHref, validateLabel, validateLinkTarget } from "../../schema";
 import { translate } from "../../i18n";
 import { watchHeadingLevel } from "../heading/validation";
 import { KolButtonWcTag } from "../../core/component-names";
 import { KolHeadingFc } from "../../functional-components";
 import { createUniqueId } from "../../utils/dev.utils";
+import { createCtaRef, directClick, directFocus } from "../../utils/element-interaction";
 import { dispatchDomEvent, KolEvent } from "../../utils/events";
 export class KolCardWc {
     constructor() {
         this.translateClose = translate('kol-close');
+        this.ctaRef = createCtaRef();
         this.close = () => {
             var _a;
             if (((_a = this._on) === null || _a === void 0 ? void 0 : _a.onClose) !== undefined) {
@@ -24,6 +27,20 @@ export class KolCardWc {
         this.on = {
             onClick: this.close,
         };
+        this.onFocus = (event) => {
+            var _a, _b, _c;
+            (_c = (_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a._on) === null || _b === void 0 ? void 0 : _b.onFocus) === null || _c === void 0 ? void 0 : _c.call(_b, event);
+            if (this.host) {
+                dispatchDomEvent(this.host, KolEvent.focus);
+            }
+        };
+        this.onBlur = (event) => {
+            var _a, _b, _c;
+            (_c = (_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a._on) === null || _b === void 0 ? void 0 : _b.onBlur) === null || _c === void 0 ? void 0 : _c.call(_b, event);
+            if (this.host) {
+                dispatchDomEvent(this.host, KolEvent.blur);
+            }
+        };
         this._hasCloser = false;
         this._headingId = createUniqueId('card-heading');
         this._level = 0;
@@ -32,8 +49,10 @@ export class KolCardWc {
         };
         this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
     }
+    async focus(options) { }
+    async click() { }
     render() {
-        return (h(Host, { key: '909cc395209bdb2eba2f674f5fe9f4b8750fccef' }, h("article", { key: '8bbd3d853a4ea8bc6f83dedf245414e8d9421461', "aria-labelledby": this._headingId, class: "kol-card" }, h(KolHeadingFc, { key: '2609f6812d8d909de20b00162cb119b32c0d7f23', class: "kol-card__header", id: this._headingId, level: this.state._level }, this.state._label), h("div", { key: 'a953cb61794cf76980111256849685184cc5dcf9', class: "kol-card__content" }, h("slot", { key: '31d86a46cb4e9d9cee62692aeea43f08db236ccb' })), this.state._hasCloser && (h(KolButtonWcTag, { key: '763993312892b16856634e6d0d10de5cb1454629', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
+        return (h(Host, { key: '4edf0a6c01fafceaaa8c102f0e349bd9c6e841a2' }, h("article", { key: 'f5a7df5e99eebe1c2ceeb3c1f4e622ffa65779f6', "aria-labelledby": this._headingId, class: "kol-card" }, this._href && (h("a", { key: 'f72fd81aa9624d1ef831cb25c7d8930471905a09', href: this._href, target: this._target, class: "kol-card__link", onFocus: this.onFocus, onBlur: this.onBlur, ref: this.ctaRef }, h(KolHeadingFc, { key: 'bf617bae69235ae1bdb4a0410d8c692d3accf4ee', class: "kol-card__header", id: this._headingId, level: this.state._level }, this.state._label))), !this._href && (h(KolHeadingFc, { key: '672fe755206dad549ab93aeeac7f18fd6c350153', class: "kol-card__header", id: this._headingId, level: this.state._level }, this.state._label)), h("div", { key: '2055b15c3f21a2e0633b14d493c11b485dfd9f82', class: "kol-card__content" }, h("slot", { key: '654e87e4ffb96aea9c26728f0ebb783d8ac125a9' })), this.state._hasCloser && (h(KolButtonWcTag, { key: '090f520d1af68e7f0fc0f4ed2e12dd4799af21a0', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
                 left: {
                     icon: 'kolicon-cross',
                 },
@@ -42,6 +61,9 @@ export class KolCardWc {
     validateHasCloser(value) {
         validateHasCloser(this, value);
     }
+    validateHref(value) {
+        validateHref(this, value);
+    }
     validateLabel(value) {
         validateLabel(this, value, {
             required: true,
@@ -57,11 +79,16 @@ export class KolCardWc {
             });
         }
     }
+    validateTarget(value) {
+        validateLinkTarget(this, value);
+    }
     componentWillLoad() {
         this.validateHasCloser(this._hasCloser);
+        this.validateHref(this._href);
         this.validateLabel(this._label);
         this.validateLevel(this._level);
         this.validateOn(this._on);
+        this.validateTarget(this._target);
     }
     static get is() { return "kol-card-wc"; }
     static get properties() {
@@ -112,6 +139,31 @@ export class KolCardWc {
                 "attribute": "_heading-id",
                 "defaultValue": "createUniqueId('card-heading')"
             },
+            "_href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HrefPropType",
+                    "resolved": "string | undefined",
+                    "references": {
+                        "HrefPropType": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::HrefPropType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the target URI of the link or citation source."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_href"
+            },
             "_label": {
                 "type": "string",
                 "mutable": false,
@@ -168,7 +220,7 @@ export class KolCardWc {
                 "mutable": false,
                 "complexType": {
                     "original": "KoliBriCardEventCallbacks",
-                    "resolved": "undefined | { onClose?: EventCallback<Event> | undefined; }",
+                    "resolved": "undefined | { onClose?: EventCallback<Event> | undefined; onFocus?: EventCallback<FocusEvent> | undefined; onBlur?: EventCallback<FocusEvent> | undefined; }",
                     "references": {
                         "KoliBriCardEventCallbacks": {
                             "location": "import",
@@ -185,6 +237,31 @@ export class KolCardWc {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "_target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkTargetPropType",
+                    "resolved": "string | undefined",
+                    "references": {
+                        "LinkTargetPropType": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::LinkTargetPropType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines where to open the link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_target"
             }
         };
     }
@@ -193,11 +270,60 @@ export class KolCardWc {
             "state": {}
         };
     }
+    static get methods() {
+        return {
+            "focus": {
+                "complexType": {
+                    "signature": "(options?: KolFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "global",
+                            "id": "global::KolFocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the internal element.",
+                    "tags": []
+                }
+            },
+            "click": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clicks the primary interactive element inside this component.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "_hasCloser",
                 "methodName": "validateHasCloser"
+            }, {
+                "propName": "_href",
+                "methodName": "validateHref"
             }, {
                 "propName": "_label",
                 "methodName": "validateLabel"
@@ -207,7 +333,16 @@ export class KolCardWc {
             }, {
                 "propName": "_on",
                 "methodName": "validateOn"
+            }, {
+                "propName": "_target",
+                "methodName": "validateTarget"
             }];
     }
 }
+__decorate([
+    directFocus('ctaRef')
+], KolCardWc.prototype, "focus", null);
+__decorate([
+    directClick('ctaRef')
+], KolCardWc.prototype, "click", null);
 //# sourceMappingURL=component.js.map

package/dist/collection/components/card/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/card/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAwBhE,MAAM,OAAO,SAAS;IAJtB;QAMkB,mBAAc,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC;QAExC,UAAK,GAAG,GAAG,EAAE;;YAC7B,IAAI,CAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,MAAK,SAAS,EAAE,CAAC;gBACrC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YACtC,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACf,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC7C,CAAC;QACF,CAAC,CAAC;QAEe,OAAE,GAAG;YACrB,OAAO,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC;QAyCa,eAAU,GAAa,KAAK,CAAC;QAM7B,eAAU,GAAY,cAAc,CAAC,cAAc,CAAC,CAAC;QAUrD,WAAM,GAAkB,CAAC,CAAC;QAOzB,UAAK,GAAe;YACnC,MAAM,EAAE,EAAE;SACV,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAc,EAAW,EAAE,CACrD,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAQ,KAAmC,CAAC,OAAO,KAAK,UAAU,CAAC;KAkCnH;IArGO,MAAM;QACZ,OAAO,CACN,EAAC,IAAI;YAMJ,mFAA0B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAC,UAAU;gBAC1D,EAAC,YAAY,qDAAC,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAClF,IAAI,CAAC,KAAK,CAAC,MAAM,CACJ;gBACf,4DAAK,KAAK,EAAC,mBAAmB;oBAC7B,8DAAQ,CACH;gBACL,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,CACzB,EAAC,cAAc,qDACd,KAAK,EAAC,yCAAyC,iBACnC,mBAAmB,EAC/B,UAAU,QACV,MAAM,EAAE;wBACP,IAAI,EAAE;4BACL,IAAI,EAAE,eAAe;yBACrB;qBACD,EACD,MAAM,EAAE,IAAI,CAAC,cAAc,EAC3B,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,aAAa,EAAC,MAAM,GACnB,CACF,CACQ,CACJ,CACP,CAAC;IACH,CAAC;IAqCM,iBAAiB,CAAC,KAAyB;QACjD,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChC,CAAC;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;IACJ,CAAC;IAGM,aAAa,CAAC,KAAoB;QACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChC,CAAC;IAGM,UAAU,CAAC,KAAiC;QAClD,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;YACjC,QAAQ,CAA4B,IAAI,EAAE,KAAK,EAAE;gBAChD,OAAO,EAAG,KAAoC,CAAC,OAAO;aACtD,CAAC,CAAC;QACJ,CAAC;IACF,CAAC;IAEM,iBAAiB;QACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { CardAPI, CardStates, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, LabelPropType } from '../../schema';\nimport { setState, validateHasCloser, validateLabel } from '../../schema';\n\nimport { translate } from '../../i18n';\nimport { watchHeadingLevel } from '../heading/validation';\n\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KolHeadingFc } from '../../functional-components';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @internal\n * @slot - Allows arbitrary HTML to be inserted into the content area of the card.\n *\n * ## Accessibility\n * The card uses semantic `<article>` markup with `aria-labelledby` to properly label the content region.\n * When displaying multiple cards, wrap them in a `<ul>` or `<ol>` to group them semantically.\n *\n * @example\n * // Single card\n * <kol-card-wc _label=\"Card Title\">Content here</kol-card-wc>\n *\n * // Multiple cards (recommended)\n * <ul>\n *   <li><kol-card-wc _label=\"Card 1\">Content 1</kol-card-wc></li>\n *   <li><kol-card-wc _label=\"Card 2\">Content 2</kol-card-wc></li>\n * </ul>\n */\n@Component({\n\ttag: 'kol-card-wc',\n\tshadow: false,\n})\nexport class KolCardWc implements CardAPI {\n\t@Element() private readonly host?: HTMLKolCardElement;\n\tprivate readonly translateClose = translate('kol-close');\n\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{/*\n\t\t\t\t\tUsing a semantic <article> container with aria-labelledby provides proper\n\t\t\t\t\taccessibility for a self-contained card. When many cards appear together,\n\t\t\t\t\twrap them in a list (<ul> / <ol>) to preserve clean page navigation.\n\t\t\t\t*/}\n\t\t\t\t<article aria-labelledby={this._headingId} class=\"kol-card\">\n\t\t\t\t\t<KolHeadingFc class=\"kol-card__header\" id={this._headingId} level={this.state._level}>\n\t\t\t\t\t\t{this.state._label}\n\t\t\t\t\t</KolHeadingFc>\n\t\t\t\t\t<div class=\"kol-card__content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-card__close-button kol-close-button\"\n\t\t\t\t\t\t\tdata-testid=\"card-close-button\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-cross',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label={this.translateClose}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</article>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the ID of the heading element. If not provided, an internal ID will be generated.\n\t * @internal\n\t */\n\t@Prop() public _headingId?: string = createUniqueId('card-heading');\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\n\n\t@State() public state: CardStates = {\n\t\t_label: '', // ⚠ required\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/card/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tCardAPI,\n\tCardStates,\n\tClickableElement,\n\tFocusableElement,\n\tHasCloserPropType,\n\tHeadingLevel,\n\tHrefPropType,\n\tKoliBriAlertEventCallbacks,\n\tKoliBriCardEventCallbacks,\n\tLabelPropType,\n\tLinkTargetPropType,\n} from '../../schema';\nimport { setState, validateHasCloser, validateHref, validateLabel, validateLinkTarget } from '../../schema';\n\nimport { translate } from '../../i18n';\nimport { watchHeadingLevel } from '../heading/validation';\n\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KolHeadingFc } from '../../functional-components';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, directClick, directFocus } from '../../utils/element-interaction';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @internal\n * @slot - Allows arbitrary HTML to be inserted into the content area of the card.\n *\n * ## Accessibility\n * The card uses semantic `<article>` markup with `aria-labelledby` to properly label the content region.\n * When displaying multiple cards, wrap them in a `<ul>` or `<ol>` to group them semantically.\n *\n * @example\n * // Single card\n * <kol-card-wc _label=\"Card Title\">Content here</kol-card-wc>\n *\n * // Multiple cards (recommended)\n * <ul>\n *   <li><kol-card-wc _label=\"Card 1\">Content 1</kol-card-wc></li>\n *   <li><kol-card-wc _label=\"Card 2\">Content 2</kol-card-wc></li>\n * </ul>\n */\n@Component({\n\ttag: 'kol-card-wc',\n\tshadow: false,\n})\nexport class KolCardWc implements CardAPI, ClickableElement, FocusableElement {\n\t@Element() private readonly host?: HTMLKolCardElement;\n\tprivate readonly translateClose = translate('kol-close');\n\tprotected readonly ctaRef = createCtaRef<HTMLAnchorElement>();\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@directFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@directClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tprivate readonly onFocus = (event: FocusEvent) => {\n\t\tthis.state?._on?.onFocus?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.focus);\n\t\t}\n\t};\n\n\tprivate readonly onBlur = (event: FocusEvent) => {\n\t\tthis.state?._on?.onBlur?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.blur);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{/*\n\t\t\t\t\tUsing a semantic <article> container with aria-labelledby provides proper\n\t\t\t\t\taccessibility for a self-contained card. When many cards appear together,\n\t\t\t\t\twrap them in a list (<ul> / <ol>) to preserve clean page navigation.\n\t\t\t\t*/}\n\t\t\t\t<article aria-labelledby={this._headingId} class=\"kol-card\">\n\t\t\t\t\t{this._href && (\n\t\t\t\t\t\t<a href={this._href} target={this._target} class=\"kol-card__link\" onFocus={this.onFocus} onBlur={this.onBlur} ref={this.ctaRef}>\n\t\t\t\t\t\t\t<KolHeadingFc class=\"kol-card__header\" id={this._headingId} level={this.state._level}>\n\t\t\t\t\t\t\t\t{this.state._label}\n\t\t\t\t\t\t\t</KolHeadingFc>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t)}\n\t\t\t\t\t{!this._href && (\n\t\t\t\t\t\t<KolHeadingFc class=\"kol-card__header\" id={this._headingId} level={this.state._level}>\n\t\t\t\t\t\t\t{this.state._label}\n\t\t\t\t\t\t</KolHeadingFc>\n\t\t\t\t\t)}\n\t\t\t\t\t<div class=\"kol-card__content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-card__close-button kol-close-button\"\n\t\t\t\t\t\t\tdata-testid=\"card-close-button\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-cross',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label={this.translateClose}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</article>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the ID of the heading element. If not provided, an internal ID will be generated.\n\t * @internal\n\t */\n\t@Prop() public _headingId?: string = createUniqueId('card-heading');\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href?: HrefPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\n\n\t/**\n\t * Defines where to open the link.\n\t */\n\t@Prop() public _target?: LinkTargetPropType;\n\n\t@State() public state: CardStates = {\n\t\t_label: '', // ⚠ required\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: string): void {\n\t\tvalidateHref(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_target')\n\tpublic validateTarget(value?: LinkTargetPropType): void {\n\t\tvalidateLinkTarget(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateTarget(this._target);\n\t}\n}\n"]}

package/dist/collection/components/card/shadow.js

@@ -1,15 +1,20 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
+import { __decorate } from "tslib";
 import { h } from "@stencil/core";
 import { KolCardWcTag } from "../../core/component-names";
+import { createCtaRef, delegateClick, delegateFocus } from "../../utils/element-interaction";
 export class KolCard {
     constructor() {
+        this.ctaRef = createCtaRef();
         this._hasCloser = false;
         this._level = 0;
     }
+    async focus(options) { }
+    async click() { }
     render() {
-        return (h(KolCardWcTag, { key: 'f62c4259173d32d200f56a4e8b5d94e80d125a7c', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, h("slot", { key: '20ba15197879de826bbd47dca19616ec30267f6a' })));
+        return (h(KolCardWcTag, { key: '1fbd7841caa6aa8219ea7d6206c460e2d6c1bd9b', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _href: this._href, _target: this._target, ref: this.ctaRef }, h("slot", { key: '998f338618766bc36272bf950caaf88dfcf8a978' })));
     }
     static get is() { return "kol-card"; }
     static get encapsulation() { return "shadow"; }
@@ -30,7 +35,7 @@ export class KolCard {
                 "mutable": false,
                 "complexType": {
                     "original": "KoliBriCardEventCallbacks",
-                    "resolved": "undefined | { onClose?: EventCallback<Event> | undefined; }",
+                    "resolved": "undefined | { onClose?: EventCallback<Event> | undefined; onFocus?: EventCallback<FocusEvent> | undefined; onBlur?: EventCallback<FocusEvent> | undefined; }",
                     "references": {
                         "KoliBriCardEventCallbacks": {
                             "location": "import",
@@ -71,6 +76,31 @@ export class KolCard {
                 "attribute": "_has-closer",
                 "defaultValue": "false"
             },
+            "_href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HrefPropType",
+                    "resolved": "string | undefined",
+                    "references": {
+                        "HrefPropType": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::HrefPropType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the target URI of the link or citation source."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_href"
+            },
             "_label": {
                 "type": "string",
                 "mutable": false,
@@ -121,8 +151,86 @@ export class KolCard {
                 "reflect": false,
                 "attribute": "_level",
                 "defaultValue": "0"
+            },
+            "_target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkTargetPropType",
+                    "resolved": "string | undefined",
+                    "references": {
+                        "LinkTargetPropType": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::LinkTargetPropType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines where to open the link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_target"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "focus": {
+                "complexType": {
+                    "signature": "(options?: KolFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "global",
+                            "id": "global::KolFocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the internal element.",
+                    "tags": []
+                }
+            },
+            "click": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clicks the primary interactive element inside this component.",
+                    "tags": []
+                }
             }
         };
     }
+    static get elementRef() { return "host"; }
 }
+__decorate([
+    delegateFocus('ctaRef')
+], KolCard.prototype, "focus", null);
+__decorate([
+    delegateClick('ctaRef')
+], KolCard.prototype, "click", null);
 //# sourceMappingURL=shadow.js.map

package/dist/collection/components/card/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/card/shadow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAkB1D,MAAM,OAAO,OAAO;IAPpB;QAyBgB,eAAU,GAAa,KAAK,CAAC;QAU7B,WAAM,GAAkB,CAAC,CAAC;KACzC;IA5BO,MAAM;QACZ,OAAO,CACN,EAAC,YAAY,qDAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM;YACjG,8DAAQ,CACM,CACf,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBD","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\nimport type { CardProps, HeadingLevel, KoliBriCardEventCallbacks, LabelPropType } from '../../schema';\n\nimport { KolCardWcTag } from '../../core/component-names';\n\n/**\n * The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.\n *\n * The **Card** component consists of a **_title area_** and a **_content area_**.\n *\n * The **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font.\n *\n * @slot - Allows arbitrary HTML to be inserted into the content area of the card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements CardProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolCardWcTag _on={this._on} _hasCloser={this._hasCloser} _label={this._label} _level={this._level}>\n\t\t\t\t<slot />\n\t\t\t</KolCardWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/card/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAYpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAkB7F,MAAM,OAAO,OAAO;IAPpB;QAUoB,WAAM,GAAG,YAAY,EAAwB,CAAC;QA2ClD,eAAU,GAAa,KAAK,CAAC;QAe7B,WAAM,GAAkB,CAAC,CAAC;KAMzC;IAvDa,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAOlD,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAE/B,MAAM;QACZ,OAAO,CACN,EAAC,YAAY,qDACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,IAAI,CAAC,MAAM;YAEhB,8DAAQ,CACM,CACf,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCD;AAvDa;IAHZ,aAAa,CAAC,QAAQ,CAAC;oCAGuC;AAOlD;IADZ,aAAa,CAAC,QAAQ,CAAC;oCACc","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport type {\n\tCardProps,\n\tClickableElement,\n\tFocusableElement,\n\tHeadingLevel,\n\tHrefPropType,\n\tKoliBriCardEventCallbacks,\n\tLabelPropType,\n\tLinkTargetPropType,\n} from '../../schema';\n\nimport { KolCardWcTag } from '../../core/component-names';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.\n *\n * The **Card** component consists of a **_title area_** and a **_content area_**.\n *\n * The **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font.\n *\n * @slot - Allows arbitrary HTML to be inserted into the content area of the card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements CardProps, ClickableElement, FocusableElement {\n\t// @ts-expect-error: host is needed by the decorator.\n\t@Element() private readonly host?: HTMLKolCardElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolCardWcElement>();\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolCardWcTag\n\t\t\t\t_on={this._on}\n\t\t\t\t_hasCloser={this._hasCloser}\n\t\t\t\t_label={this._label}\n\t\t\t\t_level={this._level}\n\t\t\t\t_href={this._href}\n\t\t\t\t_target={this._target}\n\t\t\t\tref={this.ctaRef}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolCardWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href?: HrefPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines where to open the link.\n\t */\n\t@Prop() public _target?: LinkTargetPropType;\n}\n"]}

package/dist/collection/components/card/style.css

@@ -210,8 +210,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785826695208"); /* IE9*/
-  src: url("kolicons.eot?t=1785826695208#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785826695208") format("woff2"), url("kolicons.woff?t=1785826695208") format("woff"), url("kolicons.ttf?t=1785826695208") format("truetype"), url("kolicons.svg?t=1785826695208#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1786608057898"); /* IE9*/
+  src: url("kolicons.eot?t=1786608057898#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1786608057898") format("woff2"), url("kolicons.woff?t=1786608057898") format("woff"), url("kolicons.ttf?t=1786608057898") format("truetype"), url("kolicons.svg?t=1786608057898#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -426,4 +426,13 @@
   .kol-card__close-button {
     grid-area: close;
   }
+  .kol-card:has(.kol-card__link) {
+    position: relative;
+  }
+  .kol-card__link::after {
+    position: absolute;
+    inset: 0;
+    content: "";
+    cursor: pointer;
+  }
 }

package/dist/collection/components/combobox/shadow.js

@@ -139,11 +139,11 @@ export class KolCombobox {
     getInputProps() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const isDisabled = this.state._disabled === true;
-        return Object.assign(Object.assign({ ref: this.ctaRef, state: this.state, class: 'kol-combobox__input', type: 'text', role: 'combobox', 'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, 'aria-autocomplete': 'both', 'aria-controls': this.state._id + '-listbox', 'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, 'aria-expanded': this._isOpen ? 'true' : 'false', 'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, 'aria-labelledby': this.state._id + '-label', 'aria-keyshortcuts': this.state._shortKey, value: this.state._value, accessKey: this.state._accessKey, autocapitalize: 'off', autocorrect: 'off', disabled: isDisabled, customSuggestions: true, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade), { onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder });
+        return Object.assign(Object.assign({ ref: this.ctaRef, state: this.state, class: 'kol-combobox__input', type: 'text', role: 'combobox', 'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, 'aria-autocomplete': 'both', 'aria-controls': this.state._id + '-listbox', 'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, 'aria-expanded': this._isOpen ? 'true' : 'false', 'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, 'aria-labelledby': this.state._id + '-label', 'aria-keyshortcuts': this.state._shortKey, value: this.state._value, accessKey: this.state._accessKey, autocapitalize: 'off', autocorrect: 'off', autocomplete: 'off', disabled: isDisabled, customSuggestions: true, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade), { onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder });
     }
     render() {
         const isDisabled = this.state._disabled === true;
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '5d29dc592fe2292e261ef170fe75841d25f85aea' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '631741b70ef2a1b8d428a95c0fab4cb58c911cef', state: this.state }, h("div", { key: '9d66ed4035974fd3e377d974301495dd28eb418a', class: "kol-combobox__group" }, h(KolInputStateWrapperFc, Object.assign({ key: '8f2c831fec6b647adbb86f8429f19334a17de2ae' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (h(KolButtonWcTag, { key: '5a7b9faa823f8c5f2ef0f18a8a92b5c9587a61fc', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: "kol-combobox__delete", hidden: isDisabled, _on: {
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '25cb77f0f0600a5926bf7b34deca4a94ff77bb91' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '5dc21990fbab01d25081866187189a4094ffb583', state: this.state }, h("div", { key: '53f13e0dfb9d48c9cc689b895a21ef00366ef3f0', class: "kol-combobox__group" }, h(KolInputStateWrapperFc, Object.assign({ key: '3a338311ae0161b4ad3652530dd3e52ed043badc' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (h(KolButtonWcTag, { key: '30d59db123c1cf465d1203f2137769f5e8aa94c9', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: "kol-combobox__delete", hidden: isDisabled, _on: {
                 onClick: () => {
                     this.clearSelection();
                 },
@@ -153,7 +153,7 @@ export class KolCombobox {
                 onBlur: () => {
                     this.clearButtonFocused = false;
                 },
-            } })), h("button", { key: '9c260edf0a6488606a13d4ff9b12d08e0fdb3790', type: "button", tabIndex: -1, class: "kol-combobox-toggle", onClick: this.toggleListbox.bind(this), disabled: this._disabled, hidden: isDisabled }, h(IconFC, { key: '122243913c7f7e1fe7032636901f4863194dfd87', icons: "kolicon-chevron-down", label: "" }))), h(CustomSuggestionsOptionsGroupFc, { key: 'eee2b35d66c4aea8dbb9d2b6603edb67d8369b5e', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredSuggestions) &&
+            } })), h("button", { key: '9f8df794bbfde87df14965dbb45d1e9c3473e713', type: "button", tabIndex: -1, class: "kol-combobox-toggle", onClick: this.toggleListbox.bind(this), disabled: this._disabled, hidden: isDisabled }, h(IconFC, { key: 'a837765c6974405ac0d645ad50455aa17028df35', icons: "kolicon-chevron-down", label: "" }))), h(CustomSuggestionsOptionsGroupFc, { key: 'f20d8d422948ed99941a9e620d74005a276d35eb', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
             this._filteredSuggestions.map((option, index) => (h(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
                     if (el)
@@ -607,7 +607,7 @@ export class KolCombobox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
+                    "text": "Defines the icon classnames."
                 },
                 "getter": false,
                 "setter": false,