@public-ui/components 4.2.1 → 4.3.0-rc.1

package/dist/cjs/variant-quote-DUWZtljE.js

@@ -0,0 +1,41 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+'use strict';
+
+var normalizers = require('./normalizers-R90MJyQR.js');
+
+function throwNoStateAccess() {
+    throw new Error('This controller does not use component state.');
+}
+class BaseWebComponent {
+    constructor() {
+        this.stateAccess = {
+            setState: (key, value) => {
+                this[key] = value;
+            },
+            getState: (key) => {
+                return this[key];
+            },
+        };
+    }
+}
+BaseWebComponent.stateLess = Object.freeze({
+    setState: throwNoStateAccess,
+    getState: throwNoStateAccess,
+});
+
+const LOADING_OPTIONS = ['eager', 'lazy'];
+const LOADING_SET = new Set(LOADING_OPTIONS);
+const loadingProp = normalizers.createPropDefinition('loading', 'lazy', (value) => normalizers.normalizeString(value), (v) => LOADING_SET.has(v));
+
+const QUOTE_VARIANT_OPTIONS = ['block', 'inline'];
+const QUOTE_VARIANT_SET = new Set(QUOTE_VARIANT_OPTIONS);
+const variantQuoteProp = normalizers.createPropDefinition('variant', 'inline', (value) => normalizers.normalizeString(value), (v) => QUOTE_VARIANT_SET.has(v));
+
+exports.BaseWebComponent = BaseWebComponent;
+exports.loadingProp = loadingProp;
+exports.variantQuoteProp = variantQuoteProp;
+//# sourceMappingURL=variant-quote-DUWZtljE.js.map
+
+//# sourceMappingURL=variant-quote-DUWZtljE.js.map

package/dist/cjs/variant-quote-DUWZtljE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant-quote-DUWZtljE.js","sources":["src/internal/functional-components/base-web-component.ts","src/internal/props/loading.ts","src/internal/props/variant-quote.ts"],"sourcesContent":["import type { ComponentApi, InternalOf, StateAccess } from './generic-types';\n\n/**\n * Throws when a stateless controller accidentally attempts to read or write state.\n * Used as the implementation behind {@link BaseWebComponent.stateLess}.\n */\nfunction throwNoStateAccess(): never {\n\tthrow new Error('This controller does not use component state.');\n}\n\n/**\n * Base class for web components that provides type-safe state access.\n * Subclasses pass `this.stateAccess` to their controller constructors, ensuring\n * that all state reads and writes are validated against Api['States'] at compile time.\n */\nexport abstract class BaseWebComponent<Api extends ComponentApi> {\n\t/**\n\t * Frozen sentinel for controllers that do not need component state.\n\t * Both `setState` and `getState` throw if called, catching accidental\n\t * state access at runtime.\n\t *\n\t * Pass this to the controller constructor in web components whose\n\t * controller only uses render props (no `@State` fields).\n\t */\n\tpublic static readonly stateLess: StateAccess<never> = Object.freeze({\n\t\tsetState: throwNoStateAccess,\n\t\tgetState: throwNoStateAccess,\n\t});\n\n\t/**\n\t * Bundled state access for passing to controllers.\n\t * Writes trigger a Stencil re-render via the @State decorator on the subclass.\n\t */\n\tprotected readonly stateAccess: StateAccess<Api> = {\n\t\tsetState: <K extends keyof InternalOf<NonNullable<Api['States']>>>(key: K, value: InternalOf<NonNullable<Api['States']>>[K]): void => {\n\t\t\t(this as Record<string, unknown>)[key as string] = value;\n\t\t},\n\t\tgetState: <K extends keyof InternalOf<NonNullable<Api['States']>>>(key: K): InternalOf<NonNullable<Api['States']>>[K] => {\n\t\t\treturn (this as Record<string, unknown>)[key as string] as InternalOf<NonNullable<Api['States']>>[K];\n\t\t},\n\t};\n}\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Loading prop for lazy-loading behavior of embedded content\n *\n * Description:\n * The loading attribute controls when the browser should start fetching the resource.\n * Lazy loading defers loading of off-screen content until it is near the viewport,\n * improving initial page load performance.\n *\n * Usage (according to W3C HTML specification):\n * - \"lazy\": Defers loading until the element approaches the viewport\n * - \"eager\": Loads the resource immediately regardless of viewport position\n * - Default is \"lazy\" to optimize performance\n *\n * Accessibility:\n * - Lazy loading must not interfere with assistive technology access to content\n * - Content must be available when focused or navigated to via keyboard (WCAG 2.1.1 Keyboard)\n * - Ensure lazy-loaded content does not cause unexpected layout shifts (WCAG 2.3.3 Animation from Interactions)\n *\n * @see https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes\n * @see https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html\n */\nconst LOADING_OPTIONS = ['eager', 'lazy'] as const;\nexport type LoadingType = (typeof LOADING_OPTIONS)[number];\nexport type LoadingProp = SimpleProp<'loading', LoadingType>;\n\nconst LOADING_SET: ReadonlySet<string> = new Set(LOADING_OPTIONS);\n\nexport const loadingProp = createPropDefinition<LoadingProp>(\n\t'loading',\n\t'lazy',\n\t(value: unknown) => normalizeString(value) as LoadingType,\n\t(v) => LOADING_SET.has(v),\n);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for quotation display style\n *\n * Description:\n * Determines whether the quotation is rendered as a block-level (<blockquote>) or\n * inline (<q>) element. The choice affects both visual layout and semantic HTML structure.\n *\n * Usage (according to W3C HTML specification):\n * - \"block\": Renders as <blockquote> — for extended, standalone quotations from an external source\n * - \"inline\": Renders as <q> — for short inline quotations within flowing text (default)\n * - The browser automatically adds appropriate quotation marks around <q> elements\n * - Both elements support the cite attribute to reference the quotation source\n *\n * Accessibility:\n * - Semantic HTML elements (<blockquote>, <q>) help assistive technologies convey content structure\n * - The quotation structure must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n * - Block quotes are announced as distinct sections by screen readers\n *\n * @see https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element\n * @see https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n */\nconst QUOTE_VARIANT_OPTIONS = ['block', 'inline'] as const;\nexport type QuoteVariantType = (typeof QUOTE_VARIANT_OPTIONS)[number];\nexport type VariantQuoteProp = SimpleProp<'variant', QuoteVariantType>;\n\nconst QUOTE_VARIANT_SET: ReadonlySet<string> = new Set(QUOTE_VARIANT_OPTIONS);\n\nexport const variantQuoteProp = createPropDefinition<VariantQuoteProp>(\n\t'variant',\n\t'inline',\n\t(value: unknown) => normalizeString(value) as QuoteVariantType,\n\t(v) => QUOTE_VARIANT_SET.has(v),\n);\n"],"names":["createPropDefinition","normalizeString"],"mappings":";;;;;;;AAMA,SAAS,kBAAkB,GAAA;AAC1B,IAAA,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC;AACjE;MAOsB,gBAAgB,CAAA;AAAtC,IAAA,WAAA,GAAA;QAkBoB,IAAA,CAAA,WAAW,GAAqB;AAClD,YAAA,QAAQ,EAAE,CAAyD,GAAM,EAAE,KAAgD,KAAU;AACnI,gBAAA,IAAgC,CAAC,GAAa,CAAC,GAAG,KAAK;aACxD;AACD,YAAA,QAAQ,EAAE,CAAyD,GAAM,KAA+C;AACvH,gBAAA,OAAQ,IAAgC,CAAC,GAAa,CAA8C;aACpG;SACD;;;AAhBsB,gBAAA,CAAA,SAAS,GAAuB,MAAM,CAAC,MAAM,CAAC;AACpE,IAAA,QAAQ,EAAE,kBAAkB;AAC5B,IAAA,QAAQ,EAAE,kBAAkB;AAC5B,CAAA,CAAC;;ACFH,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU;AAIlD,MAAM,WAAW,GAAwB,IAAI,GAAG,CAAC,eAAe,CAAC;AAE1D,MAAM,WAAW,GAAGA,gCAAoB,CAC9C,SAAS,EACT,MAAM,EACN,CAAC,KAAc,KAAKC,2BAAe,CAAC,KAAK,CAAgB,EACzD,CAAC,CAAC,KAAK,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;;ACT1B,MAAM,qBAAqB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;AAI1D,MAAM,iBAAiB,GAAwB,IAAI,GAAG,CAAC,qBAAqB,CAAC;AAEtE,MAAM,gBAAgB,GAAGD,gCAAoB,CACnD,SAAS,EACT,QAAQ,EACR,CAAC,KAAc,KAAKC,2BAAe,CAAC,KAAK,CAAqB,EAC9D,CAAC,CAAC,KAAK,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;;;;;;"}

package/dist/collection/components/_skeleton/web-components/click-button/component.js

@@ -1,28 +1,29 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
+import { __decorate } from "tslib";
 import { h, Host } from "@stencil/core";
 import { BaseWebComponent } from "../../../../internal/functional-components/base-web-component";
 import { ClickButtonFC } from "../../../../internal/functional-components/click-button/component";
 import { ClickButtonController } from "../../../../internal/functional-components/click-button/controller";
+import { createCtaRef, delegateFocus } from "../../../../utils/element-interaction";
 export class KolClickButton extends BaseWebComponent {
     constructor() {
         this.ctrl = new ClickButtonController(this.stateAccess);
+        this.buttonRef = createCtaRef();
         super();
     }
     watchLabel(value) {
         this.ctrl.watchLabel(value);
     }
-    async focus() {
-        return Promise.resolve(this.ctrl.focus());
-    }
+    async focus(options) { }
     componentWillLoad() {
         this.ctrl.componentWillLoad({
             label: this._label,
         });
     }
     render() {
-        return (h(Host, { key: '13b02362df73f8676bd663d495d9f8db728aced1' }, h(ClickButtonFC, { key: 'dcd11986d2f98368d9c36d1233f34040794ce8e2', label: this.ctrl.getRenderProp('label'), refButton: this.ctrl.setButtonRef, handleClick: this.ctrl.handleClick })));
+        return (h(Host, { key: '922d574d34d7ff5632a9b5489bbf4b205f64f3bd' }, h(ClickButtonFC, { key: '3546de6fd6b08ff2c01efc46943cf26ce50252c4', label: this.ctrl.getRenderProp('label'), refButton: this.buttonRef, handleClick: this.ctrl.handleClick })));
     }
     static get is() { return "kol-click-button"; }
     static get encapsulation() { return "shadow"; }
@@ -53,12 +54,21 @@ export class KolClickButton extends BaseWebComponent {
         return {
             "focus": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: KolFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "KolFocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "import",
+                            "path": "../../../../schema",
+                            "id": "src/schema/index.ts::KolFocusOptions"
                         }
                     },
                     "return": "Promise<void>"
@@ -77,4 +87,7 @@ export class KolClickButton extends BaseWebComponent {
             }];
     }
 }
+__decorate([
+    delegateFocus('buttonRef')
+], KolClickButton.prototype, "focus", null);
 //# sourceMappingURL=component.js.map

package/dist/collection/components/_skeleton/web-components/click-button/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../../src/components/_skeleton/web-components/click-button/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+DAA+D,CAAC;AAEjG,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAClG,OAAO,EAAE,qBAAqB,EAAE,MAAM,oEAAoE,CAAC;AAU3G,MAAM,OAAO,cAAe,SAAQ,gBAAgC;;QAClD,SAAI,GAAG,IAAI,qBAAqB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;;;IAS7D,UAAU,CAAC,KAAc;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;IAMM,KAAK,CAAC,KAAK;QACjB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAC3C,CAAC;IAEM,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC3B,KAAK,EAAE,IAAI,CAAC,MAAM;SAClB,CAAC,CAAC;IACJ,CAAC;IAEM,MAAM;QACZ,OAAO,CACN,EAAC,IAAI;YACJ,EAAC,aAAa,qDAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,GAAI,CAC3H,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../../../internal/functional-components/base-web-component';\nimport type { ClickButtonApi } from '../../../../internal/functional-components/click-button/api';\nimport { ClickButtonFC } from '../../../../internal/functional-components/click-button/component';\nimport { ClickButtonController } from '../../../../internal/functional-components/click-button/controller';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-click-button',\n\tshadow: true,\n})\nexport class KolClickButton extends BaseWebComponent<ClickButtonApi> implements WebComponentInterface<ClickButtonApi> {\n\tprivate readonly ctrl = new ClickButtonController(this.stateAccess);\n\n\t/**\n\t * Sets the label of the click button component.\n\t */\n\t@Prop()\n\tpublic _label!: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Focuses the interactive element of the component.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.focus());\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<ClickButtonFC label={this.ctrl.getRenderProp('label')} refButton={this.ctrl.setButtonRef} handleClick={this.ctrl.handleClick} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../../src/components/_skeleton/web-components/click-button/component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+DAA+D,CAAC;AAEjG,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAClG,OAAO,EAAE,qBAAqB,EAAE,MAAM,oEAAoE,CAAC;AAG3G,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AASpF,MAAM,OAAO,cAAe,SAAQ,gBAAgC;;QAClD,SAAI,GAAG,IAAI,qBAAqB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACnD,cAAS,GAAG,YAAY,EAAqB,CAAC;;;IASxD,UAAU,CAAC,KAAc;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;IASY,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAExD,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC3B,KAAK,EAAE,IAAI,CAAC,MAAM;SAClB,CAAC,CAAC;IACJ,CAAC;IAEM,MAAM;QACZ,OAAO,CACN,EAAC,IAAI;YACJ,EAAC,aAAa,qDAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,GAAI,CACnH,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD;AAfa;IAHZ,aAAa,CAAC,WAAW,CAAC;2CAGoC","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../../../internal/functional-components/base-web-component';\nimport type { ClickButtonApi } from '../../../../internal/functional-components/click-button/api';\nimport { ClickButtonFC } from '../../../../internal/functional-components/click-button/component';\nimport { ClickButtonController } from '../../../../internal/functional-components/click-button/controller';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { KolFocusOptions } from '../../../../schema';\nimport { createCtaRef, delegateFocus } from '../../../../utils/element-interaction';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-click-button',\n\tshadow: true,\n})\nexport class KolClickButton extends BaseWebComponent<ClickButtonApi> implements WebComponentInterface<ClickButtonApi> {\n\tprivate readonly ctrl = new ClickButtonController(this.stateAccess);\n\tprivate readonly buttonRef = createCtaRef<HTMLButtonElement>();\n\n\t/**\n\t * Sets the label of the click button component.\n\t */\n\t@Prop()\n\tpublic _label!: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Focuses the interactive element of the component.\n\t */\n\t@Method()\n\t@delegateFocus('buttonRef')\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\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<ClickButtonFC label={this.ctrl.getRenderProp('label')} refButton={this.buttonRef} handleClick={this.ctrl.handleClick} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/_skeleton/web-components/skeleton/component.js

@@ -1,22 +1,23 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
+import { __decorate } from "tslib";
 import { h, Host } from "@stencil/core";
 import { BaseWebComponent } from "../../../../internal/functional-components/base-web-component";
 import { SkeletonFC } from "../../../../internal/functional-components/skeleton/component";
 import { SkeletonController } from "../../../../internal/functional-components/skeleton/controller";
 import { Log } from "../../../../schema";
+import { createCtaRef, delegateFocus } from "../../../../utils/element-interaction";
 export class KolSkeleton extends BaseWebComponent {
     constructor() {
         this.ctrl = new SkeletonController(this.stateAccess);
+        this.buttonRef = createCtaRef();
         this.count = 0;
         this.label = 'Label';
         this.show = true;
         super();
     }
-    async focus() {
-        return Promise.resolve(this.ctrl.focus());
-    }
+    async focus(options) { }
     async toggle() {
         return Promise.resolve(this.ctrl.toggle());
     }
@@ -49,7 +50,10 @@ export class KolSkeleton extends BaseWebComponent {
         this.ctrl.destroy();
     }
     render() {
-        return (h(Host, { key: 'ff0f258279d6e18440f82f7fb4de42ed9bf4eaac' }, h(SkeletonFC, { key: '2a07e293ba5934de959d7099f927db80ad396c68', count: this.count, label: this.label, name: this.ctrl.getRenderProp('name'), handleClick: () => this.ctrl.handleClick(), onLoaded: this.loaded, onRendered: this.rendered, show: this.show, refButton: (element) => this.ctrl.setButtonRef(element) })));
+        return (h(Host, { key: 'e7e29ff558a0f2d6eebba4d8b2247ee269836bb5' }, h(SkeletonFC, { key: '949256a8455d79b2ea97182ecbf509fb0f3e59ee', count: this.count, label: this.label, name: this.ctrl.getRenderProp('name'), handleClick: this.ctrl.handleClick, onLoaded: this.loaded, onRendered: this.rendered, show: this.show, refButton: (element) => {
+                this.buttonRef(element);
+                this.ctrl.setButtonRef(element);
+            } })));
     }
     static get is() { return "kol-skeleton"; }
     static get encapsulation() { return "shadow"; }
@@ -120,12 +124,21 @@ export class KolSkeleton extends BaseWebComponent {
         return {
             "focus": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: KolFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "KolFocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "import",
+                            "path": "../../../../schema",
+                            "id": "src/schema/index.ts::KolFocusOptions"
                         }
                     },
                     "return": "Promise<void>"
@@ -176,4 +189,7 @@ export class KolSkeleton extends BaseWebComponent {
             }];
     }
 }
+__decorate([
+    delegateFocus('buttonRef')
+], KolSkeleton.prototype, "focus", null);
 //# sourceMappingURL=component.js.map

package/dist/collection/components/_skeleton/web-components/skeleton/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../../src/components/_skeleton/web-components/skeleton/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter, JSX } from '@stencil/core';\nimport { Component, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { SkeletonApi } from '../../../../internal/functional-components/skeleton/api';\nimport { SkeletonFC } from '../../../../internal/functional-components/skeleton/component';\nimport { SkeletonController } from '../../../../internal/functional-components/skeleton/controller';\nimport { Log } from '../../../../schema';\n\n@Component({\n\ttag: 'kol-skeleton',\n\tshadow: true,\n})\nexport class KolSkeleton extends BaseWebComponent<SkeletonApi> implements WebComponentInterface<SkeletonApi> {\n\tprivate readonly ctrl = new SkeletonController(this.stateAccess);\n\n\t/**\n\t * Focuses the interactive element of the component.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.focus());\n\t}\n\n\t/**\n\t * Toggles the visibility of the skeleton component.\n\t */\n\t@Method()\n\tpublic async toggle(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.toggle());\n\t}\n\n\t/**\n\t * Sets the name of the skeleton component.\n\t */\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\t@State()\n\tpublic count: number = 0;\n\n\t@State()\n\tpublic label: string = 'Label';\n\n\t@State()\n\tpublic show: boolean = true;\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent): void {\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tLog.debug('button pressed');\n\t\t\tthis.ctrl.handleClick();\n\t\t}\n\t}\n\n\t/**\n\t * Emitted when the skeleton has finished loading.\n\t */\n\t@Event() public loaded!: EventEmitter<number>;\n\n\t/**\n\t * Emitted when the skeleton has been rendered for the first time.\n\t */\n\t@Event() public rendered!: EventEmitter<void>;\n\n\t@Listen('keydown', { target: 'window' })\n\tpublic onKeydown(event: KeyboardEvent): void {\n\t\tthis.ctrl.onKeydown(event);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tname: this._name,\n\t\t});\n\n\t\t// Set up the callback for emitting loaded events\n\t\tthis.ctrl.setOnLoadedCallback((count: number) => {\n\t\t\tthis.loaded.emit(count);\n\t\t});\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.rendered.emit();\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<SkeletonFC\n\t\t\t\t\tcount={this.count}\n\t\t\t\t\tlabel={this.label}\n\t\t\t\t\tname={this.ctrl.getRenderProp('name')}\n\t\t\t\t\thandleClick={() => this.ctrl.handleClick()}\n\t\t\t\t\tonLoaded={this.loaded}\n\t\t\t\t\tonRendered={this.rendered}\n\t\t\t\t\tshow={this.show}\n\t\t\t\t\trefButton={(element) => this.ctrl.setButtonRef(element)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../../src/components/_skeleton/web-components/skeleton/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter, JSX } from '@stencil/core';\nimport { Component, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { SkeletonApi } from '../../../../internal/functional-components/skeleton/api';\nimport { SkeletonFC } from '../../../../internal/functional-components/skeleton/component';\nimport { SkeletonController } from '../../../../internal/functional-components/skeleton/controller';\nimport { Log, type KolFocusOptions } from '../../../../schema';\nimport { createCtaRef, delegateFocus } from '../../../../utils/element-interaction';\n\n@Component({\n\ttag: 'kol-skeleton',\n\tshadow: true,\n})\nexport class KolSkeleton extends BaseWebComponent<SkeletonApi> implements WebComponentInterface<SkeletonApi> {\n\tprivate readonly ctrl = new SkeletonController(this.stateAccess);\n\tprivate readonly buttonRef = createCtaRef<HTMLButtonElement>();\n\n\t/**\n\t * Focuses the interactive element of the component.\n\t */\n\t@Method()\n\t@delegateFocus('buttonRef')\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 * Toggles the visibility of the skeleton component.\n\t */\n\t@Method()\n\tpublic async toggle(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.toggle());\n\t}\n\n\t/**\n\t * Sets the name of the skeleton component.\n\t */\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\t/**\n\t * Tracks the current count value for the skeleton.\n\t */\n\t@State()\n\tpublic count: number = 0;\n\n\t/**\n\t * The label text displayed on the click button.\n\t */\n\t@State()\n\tpublic label: string = 'Label';\n\n\t/**\n\t * Controls the visibility of the skeleton component.\n\t */\n\t@State()\n\tpublic show: boolean = true;\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent): void {\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tLog.debug('button pressed');\n\t\t\tthis.ctrl.handleClick();\n\t\t}\n\t}\n\n\t/**\n\t * Emitted when the skeleton has finished loading.\n\t */\n\t@Event() public loaded!: EventEmitter<number>;\n\n\t/**\n\t * Emitted when the skeleton has been rendered for the first time.\n\t */\n\t@Event() public rendered!: EventEmitter<void>;\n\n\t/**\n\t * Global keydown listener. Auto-cleaned by Stencil on component removal.\n\t */\n\t@Listen('keydown', { target: 'window' })\n\tpublic onKeydown(event: KeyboardEvent): void {\n\t\tthis.ctrl.onKeydown(event);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tname: this._name,\n\t\t});\n\n\t\t// Set up the callback for emitting loaded events\n\t\tthis.ctrl.setOnLoadedCallback((count: number) => {\n\t\t\tthis.loaded.emit(count);\n\t\t});\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.rendered.emit();\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<SkeletonFC\n\t\t\t\t\tcount={this.count}\n\t\t\t\t\tlabel={this.label}\n\t\t\t\t\tname={this.ctrl.getRenderProp('name')}\n\t\t\t\t\thandleClick={this.ctrl.handleClick}\n\t\t\t\t\tonLoaded={this.loaded}\n\t\t\t\t\tonRendered={this.rendered}\n\t\t\t\t\tshow={this.show}\n\t\t\t\t\trefButton={(element) => {\n\t\t\t\t\t\tthis.buttonRef(element);\n\t\t\t\t\t\tthis.ctrl.setButtonRef(element);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}

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

@@ -201,8 +201,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1780571516250"); /* IE9*/
-  src: url("kolicons.eot?t=1780571516250#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780571516250") format("woff2"), url("kolicons.woff?t=1780571516250") format("woff"), url("kolicons.ttf?t=1780571516250") format("truetype"), url("kolicons.svg?t=1780571516250#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1780919027063"); /* IE9*/
+  src: url("kolicons.eot?t=1780919027063#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780919027063") format("woff2"), url("kolicons.woff?t=1780919027063") format("woff"), url("kolicons.ttf?t=1780919027063") format("truetype"), url("kolicons.svg?t=1780919027063#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -40,7 +40,7 @@ export class KolAccordion {
             _on: {},
         };
     }
-    async focus() { }
+    async focus(options) { }
     async click() { }
     render() {
         const { _open, _label, _disabled, _level } = this.state;
@@ -64,7 +64,7 @@ export class KolAccordion {
                 animationClass: `${rootClass}__wrapper-animation`,
             },
         };
-        return (h(KolCollapsibleFc, Object.assign({ key: 'cd3d50a344997e204c341937fe6f6643adcce51f' }, props), h("slot", { key: '3a38af2e5141904a17f3beacf52db4f479b73133' })));
+        return (h(KolCollapsibleFc, Object.assign({ key: 'a934425a8a378c01a0f17d1164e7fc087be03c2a' }, props), h("slot", { key: 'dd86a9b2254b923fce52e5a04ce4609bcd1e76f4' })));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -226,12 +226,21 @@ export class KolAccordion {
         return {
             "focus": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: KolFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "KolFocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::KolFocusOptions"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/accordion/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\n\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport type {\n\tAccordionAPI,\n\tAccordionCallbacksPropType,\n\tAccordionStates,\n\tDisabledPropType,\n\tFocusableElement,\n\tHeadingLevel,\n\tLabelPropType,\n\tOpenPropType,\n} from '../../schema';\nimport { featureHint, validateAccordionCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { watchHeadingLevel } from '../heading/validation';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\n/**\n * The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.\n *\n * Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.\n *\n * @slot - Allows arbitrary HTML to be inserted into the content area of the accordion.\n */\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements AccordionAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolAccordionElement;\n\n\tprivate readonly id = createUniqueId('accordion');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\tpublic async focus(): Promise<void> {}\n\n\t/**\n\t * Triggers a click on the trigger button of the first section.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state._on?.onClick?.(event, Boolean(this._open));\n\t\t\tthis.state._on?.onToggle?.(event, Boolean(this._open));\n\n\t\t\tif (this.host) {\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.click, Boolean(this._open));\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.toggle, Boolean(this._open));\n\t\t\t}\n\t\t});\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled, _level } = this.state;\n\t\tconst rootClass = 'kol-accordion';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.id,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.ctaRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t<slot />\n\t\t\t</KolCollapsibleFc>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: 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!: string;\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 * Gibt die EventCallback-Funktionen an.\n\t */\n\t@Prop() public _on?: AccordionCallbacksPropType<boolean>;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: AccordionStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 0,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(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(on?: AccordionCallbacksPropType<boolean>): void {\n\t\tvalidateAccordionCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/accordion/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\n\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport type {\n\tAccordionAPI,\n\tAccordionCallbacksPropType,\n\tAccordionStates,\n\tDisabledPropType,\n\tFocusableElement,\n\tHeadingLevel,\n\tKolFocusOptions,\n\tLabelPropType,\n\tOpenPropType,\n} from '../../schema';\nimport { featureHint, validateAccordionCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { watchHeadingLevel } from '../heading/validation';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\n/**\n * The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.\n *\n * Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.\n *\n * @slot - Allows arbitrary HTML to be inserted into the content area of the accordion.\n */\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements AccordionAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolAccordionElement;\n\n\tprivate readonly id = createUniqueId('accordion');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\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 * Triggers a click on the trigger button of the first section.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state._on?.onClick?.(event, Boolean(this._open));\n\t\t\tthis.state._on?.onToggle?.(event, Boolean(this._open));\n\n\t\t\tif (this.host) {\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.click, Boolean(this._open));\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.toggle, Boolean(this._open));\n\t\t\t}\n\t\t});\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled, _level } = this.state;\n\t\tconst rootClass = 'kol-accordion';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.id,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.ctaRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t<slot />\n\t\t\t</KolCollapsibleFc>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: 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!: string;\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 * Gibt die EventCallback-Funktionen an.\n\t */\n\t@Prop() public _on?: AccordionCallbacksPropType<boolean>;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: AccordionStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 0,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(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(on?: AccordionCallbacksPropType<boolean>): void {\n\t\tvalidateAccordionCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"]}

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

@@ -263,8 +263,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1780571516250"); /* IE9*/
-  src: url("kolicons.eot?t=1780571516250#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780571516250") format("woff2"), url("kolicons.woff?t=1780571516250") format("woff"), url("kolicons.ttf?t=1780571516250") format("truetype"), url("kolicons.svg?t=1780571516250#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1780919027063"); /* IE9*/
+  src: url("kolicons.eot?t=1780919027063#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780919027063") format("woff2"), url("kolicons.woff?t=1780919027063") format("woff"), url("kolicons.ttf?t=1780919027063") format("truetype"), url("kolicons.svg?t=1780919027063#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -207,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1780571516250"); /* IE9*/
-  src: url("kolicons.eot?t=1780571516250#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780571516250") format("woff2"), url("kolicons.woff?t=1780571516250") format("woff"), url("kolicons.ttf?t=1780571516250") format("truetype"), url("kolicons.svg?t=1780571516250#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1780919027063"); /* IE9*/
+  src: url("kolicons.eot?t=1780919027063#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780919027063") format("woff2"), url("kolicons.woff?t=1780919027063") format("woff"), url("kolicons.ttf?t=1780919027063") format("truetype"), url("kolicons.svg?t=1780919027063#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -33,15 +33,15 @@ export class KolBadge {
     renderSmartButton(props) {
         return (h(KolButtonWcTag, { ref: this.ctaRef, class: "kol-badge__smart-button", _ariaControls: this.id, _ariaDescription: props._ariaDescription, _variant: props._variant, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign }));
     }
-    async focus() { }
+    async focus(options) { }
     render() {
         const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
-        return (h("span", { key: '51437c2b683e3c84e4b3759b84066423cab53580', class: clsx('kol-badge', {
+        return (h("span", { key: '9091b07e3ef752f765f96bbd66eaa329ae89543d', class: clsx('kol-badge', {
                 'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
             }), style: {
                 backgroundColor: this.bgColorStr,
                 color: this.colorStr,
-            } }, h(SpanFC, { key: 'cb27d0dec0d497c6b63e4d6ae8803593d8b8e78d', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
+            } }, h(SpanFC, { key: '9a0ee2dd77bfad8c7043cca5229b4398af16e6b8', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
     }
     validateIcons(value) {
         validateIcons(this, value);
@@ -210,12 +210,21 @@ export class KolBadge {
         return {
             "focus": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: KolFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "KolFocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::KolFocusOptions"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/badge/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { SpanFC } from '../../internal/functional-components/span/component';\nimport type { BadgeAPI, BadgeStates, FocusableElement, InternalButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from '../../schema';\n\nimport { createUniqueId } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport clsx from '../../utils/clsx';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n/**\n * The **Badge** component allows you to visually highlight specific information.\n * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n */\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolBadgeElement;\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = createUniqueId('badge-label');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\tprivate renderSmartButton(props: InternalButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\tclass=\"kol-badge__smart-button\"\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_ariaDescription={props._ariaDescription}\n\t\t\t\t_variant={props._variant}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t/>\n\t\t);\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\tpublic async focus(): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclass={clsx('kol-badge', {\n\t\t\t\t\t'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SpanFC class=\"kol-badge__label\" id={hasSmartButton ? this.id : undefined} allowMarkdown icons={this.state._icons} label={this._label} />\n\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as InternalButtonProps)}\n\t\t\t</span>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\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 * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<InternalButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_icons: {},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor;\n\t};\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: KoliBriIconsProp): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: InternalButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<InternalButtonProps>(value as string);\n\t\t\t} catch {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/badge/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { SpanFC } from '../../internal/functional-components/span/component';\nimport type {\n\tBadgeAPI,\n\tBadgeStates,\n\tFocusableElement,\n\tInternalButtonProps,\n\tKolFocusOptions,\n\tKoliBriIconsProp,\n\tLabelPropType,\n\tPropColor,\n\tStringified,\n} from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from '../../schema';\n\nimport { createUniqueId } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport clsx from '../../utils/clsx';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n/**\n * The **Badge** component allows you to visually highlight specific information.\n * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n */\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolBadgeElement;\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = createUniqueId('badge-label');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\tprivate renderSmartButton(props: InternalButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\tclass=\"kol-badge__smart-button\"\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_ariaDescription={props._ariaDescription}\n\t\t\t\t_variant={props._variant}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t/>\n\t\t);\n\t}\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\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclass={clsx('kol-badge', {\n\t\t\t\t\t'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SpanFC class=\"kol-badge__label\" id={hasSmartButton ? this.id : undefined} allowMarkdown icons={this.state._icons} label={this._label} />\n\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as InternalButtonProps)}\n\t\t\t</span>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\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 * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<InternalButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_icons: {},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor;\n\t};\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: KoliBriIconsProp): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: InternalButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<InternalButtonProps>(value as string);\n\t\t\t} catch {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"]}

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

@@ -201,8 +201,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1780571516250"); /* IE9*/
-  src: url("kolicons.eot?t=1780571516250#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780571516250") format("woff2"), url("kolicons.woff?t=1780571516250") format("woff"), url("kolicons.ttf?t=1780571516250") format("truetype"), url("kolicons.svg?t=1780571516250#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1780919027063"); /* IE9*/
+  src: url("kolicons.eot?t=1780919027063#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780919027063") format("woff2"), url("kolicons.woff?t=1780919027063") format("woff"), url("kolicons.ttf?t=1780919027063") format("truetype"), url("kolicons.svg?t=1780919027063#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -201,8 +201,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1780571516250"); /* IE9*/
-  src: url("kolicons.eot?t=1780571516250#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780571516250") format("woff2"), url("kolicons.woff?t=1780571516250") format("woff"), url("kolicons.ttf?t=1780571516250") format("truetype"), url("kolicons.svg?t=1780571516250#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1780919027063"); /* IE9*/
+  src: url("kolicons.eot?t=1780919027063#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780919027063") format("woff2"), url("kolicons.woff?t=1780919027063") format("woff"), url("kolicons.ttf?t=1780919027063") format("truetype"), url("kolicons.svg?t=1780919027063#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -16,7 +16,7 @@ import { dispatchDomEvent, KolEvent } from "../../utils/events";
 import { propagateResetEventToForm, propagateSubmitEventToForm } from "../form/controller";
 import { AssociatedInputController } from "../input-adapter-leanup/associated.controller";
 export class KolButtonWc {
-    async focus() { }
+    async focus(options) { }
     async click() { }
     render() {
         var _a;
@@ -25,14 +25,14 @@ export class KolButtonWc {
         const badgeText = this.state._accessKey || this.state._shortKey;
         const isDisabled = this.state._disabled === true;
         const hideLabel = this.state._hideLabel === true;
-        return (h(Host, { key: '16666b7bbc5590d87a4278b11b42eed9305905d7' }, h("button", { key: 'cbe00d5dd3039399bca51581b4610a7628829f62', ref: this.ctaRef, accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' && this.state._label.length > 0 ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
+        return (h(Host, { key: 'c1d7f928a7e82f9101c1da0929b2f17670c45bbf' }, h("button", { key: '2ffa65db67b8c7ba0c4aa5b3bd44cf2e9c3d6820', ref: this.ctaRef, accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' && this.state._label.length > 0 ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
                 'kol-button--disabled': isDisabled,
                 [`kol-button--${this.state._variant}`]: this.state._variant !== 'custom',
                 'kol-button--inline': this.state._inline === true,
                 'kol-button--standalone': this.state._inline === false,
                 'kol-button--hide-label': hideLabel,
                 [this.state._customClass]: typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
-            }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, h(SpanFC, { key: '0bcd901be3e67d7d49d3edd0e2de43a46a09eb43', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, h("slot", { key: 'c60cec4abe221171e48dcc5cd5b4be2ad32ac03a', name: "expert", slot: "expert" }))), hideLabel && typeof this.state._label === 'string' && this.state._label.length > 0 && (h("div", { key: 'f8c1b2830178a37482cd1ae7b25e4186954c3195', class: "kol-button__tooltip" }, h(TooltipFC, { key: '3e6110b1ddf4188efd8546cd20635c9732940a5e', badgeText: badgeText || '', label: this.state._label, id: this.tooltipCtrl.getRenderProp('id'), refFloating: this.tooltipCtrl.setTooltipElementRef })))));
+            }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, h(SpanFC, { key: '86eae862c2e73e86fc146974a90a4a693a04020f', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, h("slot", { key: '021615c5514837c984b8a89eef6c43cc03db13b6', name: "expert", slot: "expert" }))), hideLabel && typeof this.state._label === 'string' && this.state._label.length > 0 && (h("div", { key: '6a9c6f55dec04a4bc2f32f366617b36bfbb1254c', class: "kol-button__tooltip" }, h(TooltipFC, { key: 'bc1e41aec24688ba853a0e25c432764ca8b07e30', badgeText: badgeText || '', label: this.state._label, id: this.tooltipCtrl.getRenderProp('id'), refFloating: this.tooltipCtrl.setTooltipElementRef })))));
     }
     constructor() {
         this.ctaRef = createCtaRef();
@@ -781,12 +781,21 @@ export class KolButtonWc {
         return {
             "focus": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: KolFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "KolFocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::KolFocusOptions"
                         }
                     },
                     "return": "Promise<void>"