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

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

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

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

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

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

@@ -202,8 +202,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1780050253507"); /* IE9*/
-  src: url("kolicons.eot?t=1780050253507#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780050253507") format("woff2"), url("kolicons.woff?t=1780050253507") format("woff"), url("kolicons.ttf?t=1780050253507") format("truetype"), url("kolicons.svg?t=1780050253507#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1780914078349"); /* IE9*/
+  src: url("kolicons.eot?t=1780914078349#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780914078349") format("woff2"), url("kolicons.woff?t=1780914078349") format("woff"), url("kolicons.ttf?t=1780914078349") format("truetype"), url("kolicons.svg?t=1780914078349#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -426,6 +426,7 @@
   .kol-input-container {
     background-color: transparent;
     display: grid;
+    position: relative;
     width: 100%;
     min-width: var(--a11y-min-size);
     min-height: var(--a11y-min-size);
@@ -437,6 +438,7 @@
   }
   .kol-input-container__container {
     position: relative;
+    z-index: 1;
   }
   .kol-input-container__adornment {
     display: flex;

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

@@ -53,14 +53,14 @@ export class KolPopoverButtonWc {
     async showPopover() {
         this.popoverCtrl.setShow(true);
     }
-    async focus() { }
+    async focus(options) { }
     async click() { }
     render() {
-        return (h(Fragment, null, h(KolButtonWcTag, { key: 'f3b3f92128fb4d6c275ea87dacc9626d496f91c1', class: clsx('kol-popover-button', {
+        return (h(Fragment, null, h(KolButtonWcTag, { key: '9e1a7324de0e3164562d41b81d9b794304508658', class: clsx('kol-popover-button', {
                 'kol-popover-button--open': this.popoverOpen,
                 'kol-popover-button--inline': this.state._inline === true,
                 'kol-popover-button--standalone': this.state._inline === false,
-            }), _accessKey: this._accessKey, _ariaControls: this.popoverId, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, ref: this.setButtonElementRef }, h("slot", { key: '299356030a1b0dfcd250ae79abfa32ac27669a3d', name: "expert", slot: "expert" })), h(PopoverFC, { key: '34827eb9859dbea0378d1d4f9cbc259a28d152e2', align: this.state._popoverAlign || 'bottom', popoverRef: this.setPopoverElementRef, class: "kol-popover-button__popover", id: this.popoverId }, h("slot", { key: '98c648d7ce7aa3c9bdf8b7e43703e3b7df4bf8d3' }))));
+            }), _accessKey: this._accessKey, _ariaControls: this.popoverId, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, ref: this.setButtonElementRef }, h("slot", { key: '647d8e36914dd39d3b5ed610051ba0a3fb081052', name: "expert", slot: "expert" })), h(PopoverFC, { key: '4158958c2efaf7f7bf7c02537e9aa4c45b855c88', align: this.state._popoverAlign || 'bottom', popoverRef: this.setPopoverElementRef, class: "kol-popover-button__popover", id: this.popoverId }, h("slot", { key: '0cc270905c7835fc7db5119b7609553d86b49050' }))));
     }
     validateInline(value) {
         validateInline(this, value, {
@@ -583,12 +583,21 @@ export class KolPopoverButtonWc {
             },
             "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/popover-button/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/popover-button/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Fragment, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { PopoverFC } from '../../internal/functional-components/popover/component';\nimport { PopoverController } from '../../internal/functional-components/popover/controller';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tIdPropType,\n\tInlinePropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { validateInline, validatePopoverAlign } from '../../schema';\nimport type { PopoverButtonProps, PopoverButtonStates } from '../../schema/components/popover-button';\nimport clsx from '../../utils/clsx';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, directClick, directFocus } from '../../utils/element-interaction';\n\n/**\n * @internal\n * @slot - The popover content.\n *\n * **Note:** The `_on` button callback prop is not supported. The button's `onClick` is reserved for toggling the popover.\n * Manage the popover visibility state and coordinate with the internal popover element.\n */\n@Component({\n\ttag: 'kol-popover-button-wc',\n\tshadow: false,\n})\n// class implementing PopoverButtonProps and not API because we don't want to repeat the entire state and validation for button props\nexport class KolPopoverButtonWc implements PopoverButtonProps, FocusableElement {\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\tprivate readonly popoverCtrl = new PopoverController();\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate readonly popoverId = createUniqueId('popover');\n\n\tprivate readonly setPopoverElementRef = (element?: HTMLDivElement) => {\n\t\tthis.popoverElement = element;\n\t\tthis.popoverCtrl.setPopoverElementRef(element);\n\t};\n\n\tprivate readonly setButtonElementRef = (element?: HTMLKolButtonWcElement) => {\n\t\tthis.ctaRef(element);\n\t\tif (element) {\n\t\t\tthis.popoverCtrl.setTriggerElement(element as HTMLElement);\n\t\t}\n\t};\n\n\tprivate on: ButtonCallbacksPropType<StencilUnknown> = {\n\t\tonClick: () => {\n\t\t\tthis.popoverCtrl.setShow(!this.popoverOpen);\n\t\t},\n\t};\n\n\t@State() public state: PopoverButtonStates = {\n\t\t_label: '',\n\t\t_popoverAlign: 'bottom',\n\t\t_inline: false,\n\t};\n\t@State() private popoverOpen = false;\n\n\t/**\n\t * Hides the popover programmatically by calling the PopoverController.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tthis.popoverCtrl.setShow(false);\n\t}\n\n\t/**\n\t * Show the popover programmatically by calling the PopoverController.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tthis.popoverCtrl.setShow(true);\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@directFocus('ctaRef')\n\tpublic async focus(): 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 handleToggle = (event: Event): void => {\n\t\tthis.popoverOpen = (event as ToggleEvent).newState === 'open';\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tclass={clsx('kol-popover-button', {\n\t\t\t\t\t\t'kol-popover-button--open': this.popoverOpen,\n\t\t\t\t\t\t'kol-popover-button--inline': this.state._inline === true,\n\t\t\t\t\t\t'kol-popover-button--standalone': this.state._inline === false,\n\t\t\t\t\t})}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this.popoverId}\n\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t_ariaExpanded={this.popoverOpen}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_inline={this._inline}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this.on}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\tref={this.setButtonElementRef}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t\t<PopoverFC align={this.state._popoverAlign || 'bottom'} popoverRef={this.setPopoverElementRef} class=\"kol-popover-button__popover\" id={this.popoverId}>\n\t\t\t\t\t<slot />\n\t\t\t\t</PopoverFC>\n\t\t\t</>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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 * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @internal\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@Watch('_inline')\n\tpublic validateInline(value?: InlinePropType): void {\n\t\tvalidateInline(this, value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_popoverAlign')\n\tpublic validatePopoverAlign(value?: PopoverAlignPropType): void {\n\t\tvalidatePopoverAlign(this, value);\n\t\tif (value) {\n\t\t\tthis.popoverCtrl.setAlign(value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validateInline(this._inline);\n\t\tthis.validatePopoverAlign(this._popoverAlign);\n\t}\n\n\tpublic componentDidRender() {\n\t\t// The popoverElement is already set via popoverRef callback from PopoverFC.\n\t\t// Register the toggle listener once the popover element is available.\n\t\tif (this.popoverElement) {\n\t\t\tthis.popoverElement.addEventListener('toggle', this.handleToggle);\n\t\t}\n\t\t// Ensure align value is synced with controller\n\t\tif (this.state._popoverAlign) {\n\t\t\tthis.popoverCtrl.setAlign(this.state._popoverAlign);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tif (this.popoverElement) {\n\t\t\tthis.popoverElement.removeEventListener('toggle', this.handleToggle);\n\t\t}\n\t\tthis.popoverCtrl.destroy();\n\t\tthis.popoverElement = undefined;\n\t}\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/popover-button/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Fragment, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { PopoverFC } from '../../internal/functional-components/popover/component';\nimport { PopoverController } from '../../internal/functional-components/popover/controller';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tIdPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { validateInline, validatePopoverAlign } from '../../schema';\nimport type { PopoverButtonProps, PopoverButtonStates } from '../../schema/components/popover-button';\nimport clsx from '../../utils/clsx';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, directClick, directFocus } from '../../utils/element-interaction';\n\n/**\n * @internal\n * @slot - The popover content.\n *\n * **Note:** The `_on` button callback prop is not supported. The button's `onClick` is reserved for toggling the popover.\n * Manage the popover visibility state and coordinate with the internal popover element.\n */\n@Component({\n\ttag: 'kol-popover-button-wc',\n\tshadow: false,\n})\n// class implementing PopoverButtonProps and not API because we don't want to repeat the entire state and validation for button props\nexport class KolPopoverButtonWc implements PopoverButtonProps, FocusableElement {\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\tprivate readonly popoverCtrl = new PopoverController();\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate readonly popoverId = createUniqueId('popover');\n\n\tprivate readonly setPopoverElementRef = (element?: HTMLDivElement) => {\n\t\tthis.popoverElement = element;\n\t\tthis.popoverCtrl.setPopoverElementRef(element);\n\t};\n\n\tprivate readonly setButtonElementRef = (element?: HTMLKolButtonWcElement) => {\n\t\tthis.ctaRef(element);\n\t\tif (element) {\n\t\t\tthis.popoverCtrl.setTriggerElement(element as HTMLElement);\n\t\t}\n\t};\n\n\tprivate on: ButtonCallbacksPropType<StencilUnknown> = {\n\t\tonClick: () => {\n\t\t\tthis.popoverCtrl.setShow(!this.popoverOpen);\n\t\t},\n\t};\n\n\t@State() public state: PopoverButtonStates = {\n\t\t_label: '',\n\t\t_popoverAlign: 'bottom',\n\t\t_inline: false,\n\t};\n\t@State() private popoverOpen = false;\n\n\t/**\n\t * Hides the popover programmatically by calling the PopoverController.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tthis.popoverCtrl.setShow(false);\n\t}\n\n\t/**\n\t * Show the popover programmatically by calling the PopoverController.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tthis.popoverCtrl.setShow(true);\n\t}\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 handleToggle = (event: Event): void => {\n\t\tthis.popoverOpen = (event as ToggleEvent).newState === 'open';\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tclass={clsx('kol-popover-button', {\n\t\t\t\t\t\t'kol-popover-button--open': this.popoverOpen,\n\t\t\t\t\t\t'kol-popover-button--inline': this.state._inline === true,\n\t\t\t\t\t\t'kol-popover-button--standalone': this.state._inline === false,\n\t\t\t\t\t})}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this.popoverId}\n\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t_ariaExpanded={this.popoverOpen}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_inline={this._inline}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this.on}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\tref={this.setButtonElementRef}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t\t<PopoverFC align={this.state._popoverAlign || 'bottom'} popoverRef={this.setPopoverElementRef} class=\"kol-popover-button__popover\" id={this.popoverId}>\n\t\t\t\t\t<slot />\n\t\t\t\t</PopoverFC>\n\t\t\t</>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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 * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @internal\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@Watch('_inline')\n\tpublic validateInline(value?: InlinePropType): void {\n\t\tvalidateInline(this, value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_popoverAlign')\n\tpublic validatePopoverAlign(value?: PopoverAlignPropType): void {\n\t\tvalidatePopoverAlign(this, value);\n\t\tif (value) {\n\t\t\tthis.popoverCtrl.setAlign(value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validateInline(this._inline);\n\t\tthis.validatePopoverAlign(this._popoverAlign);\n\t}\n\n\tpublic componentDidRender() {\n\t\t// The popoverElement is already set via popoverRef callback from PopoverFC.\n\t\t// Register the toggle listener once the popover element is available.\n\t\tif (this.popoverElement) {\n\t\t\tthis.popoverElement.addEventListener('toggle', this.handleToggle);\n\t\t}\n\t\t// Ensure align value is synced with controller\n\t\tif (this.state._popoverAlign) {\n\t\t\tthis.popoverCtrl.setAlign(this.state._popoverAlign);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tif (this.popoverElement) {\n\t\t\tthis.popoverElement.removeEventListener('toggle', this.handleToggle);\n\t\t}\n\t\tthis.popoverCtrl.destroy();\n\t\tthis.popoverElement = undefined;\n\t}\n}\n"]}

package/dist/collection/components/popover-button/shadow.js

@@ -25,9 +25,9 @@ export class KolPopoverButton {
         void ((_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.showPopover());
     }
     async click() { }
-    async focus() { }
+    async focus(options) { }
     render() {
-        return (h(KolPopoverButtonWcTag, { key: 'b394838d1b5f29df382e4652673bfb42b7930853', ref: this.ctaRef, _accessKey: this._accessKey, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _popoverAlign: this._popoverAlign, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, h("slot", { key: '094e5e4a91dc18375d778ab155431fec1b50d7ea', name: "expert", slot: "expert" }), h("slot", { key: '9e2a314b243ac3360cf1411f8cf747b4a7d345d7' })));
+        return (h(KolPopoverButtonWcTag, { key: '31a6eafd923d75089ccfb44e87945efec18702dd', ref: this.ctaRef, _accessKey: this._accessKey, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _popoverAlign: this._popoverAlign, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, h("slot", { key: 'eea141f244c65bd7cf21a63e8346df619fba2c89', name: "expert", slot: "expert" }), h("slot", { key: '2a4f7297ed377a7a58ce30a3a30806a35761bd71' })));
     }
     static get is() { return "kol-popover-button"; }
     static get encapsulation() { return "shadow"; }
@@ -514,12 +514,21 @@ export class KolPopoverButton {
             },
             "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/popover-button/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/popover-button/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAkBnE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAgB7F,MAAM,OAAO,gBAAgB;IAP7B;QASoB,WAAM,GAAG,YAAY,EAAiC,CAAC;QAgF3D,cAAS,GAAa,KAAK,CAAC;QAO5B,eAAU,GAAa,KAAK,CAAC;QAU7B,YAAO,GAAoB,KAAK,CAAC;QAejC,kBAAa,GAA0B,QAAQ,CAAC;QAqBhD,kBAAa,GAA0B,KAAK,CAAC;QAK7C,UAAK,GAAwB,QAAQ,CAAC;QAUtC,aAAQ,GAA2B,QAAQ,CAAC;KAC3D;IA9IO,KAAK,CAAC,WAAW;;QACvB,KAAK,CAAA,MAAA,IAAI,CAAC,MAAM,CAAC,EAAE,0CAAE,WAAW,EAAE,CAAA,CAAC;IACpC,CAAC;IAOM,KAAK,CAAC,WAAW;;QACvB,KAAK,CAAA,MAAA,IAAI,CAAC,MAAM,CAAC,EAAE,0CAAE,WAAW,EAAE,CAAA,CAAC;IACpC,CAAC;IAOY,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAOzB,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAE/B,MAAM;QACZ,OAAO,CACN,EAAC,qBAAqB,qDACrB,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ;YACzC,8DAAQ,CACe,CACxB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFD;AA5Ha;IADZ,aAAa,CAAC,QAAQ,CAAC;6CACc;AAOzB;IADZ,aAAa,CAAC,QAAQ,CAAC;6CACc","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * A button that toggles the visibility of a popover overlay containing arbitrary content.\n * The popover uses the native HTML Popover API for lightweight, non-modal overlays.\n *\n * @slot - The popover content (displayed when the button is clicked).\n * @slot expert - Custom label content for the button (when `_label` is `false`).\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements PopoverButtonProps, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolPopoverButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolPopoverButtonWcElement>();\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ctaRef.el?.hidePopover();\n\t}\n\n\t/**\n\t * Shows the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tvoid this.ctaRef.el?.showPopover();\n\t}\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\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\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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 * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/popover-button/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * A button that toggles the visibility of a popover overlay containing arbitrary content.\n * The popover uses the native HTML Popover API for lightweight, non-modal overlays.\n *\n * @slot - The popover content (displayed when the button is clicked).\n * @slot expert - Custom label content for the button (when `_label` is `false`).\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements PopoverButtonProps, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolPopoverButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolPopoverButtonWcElement>();\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ctaRef.el?.hidePopover();\n\t}\n\n\t/**\n\t * Shows the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tvoid this.ctaRef.el?.showPopover();\n\t}\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\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\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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 * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"]}

package/dist/collection/components/popover-button/style.css

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

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

@@ -20,7 +20,7 @@ export class KolSelectWc {
             return Array.isArray(this.state._value) && this.state._value.length > 0 ? this.state._value[0] : this.state._value;
         }
     }
-    async focus() { }
+    async focus(options) { }
     async click() { }
     getFormFieldProps() {
         return {
@@ -43,13 +43,13 @@ export class KolSelectWc {
             } });
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '607b429939938960542769969e7089416567451b' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '6c008bd220a118d84b1861ce0434b1163102334c', state: this.state }, h("form", { key: 'e5944ee645aafd0f7cbd40a0044b909af8908ec4', onSubmit: (event) => {
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '1aa065d33eb61c13e5d46118820fb1517c116ef8' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '5c56852755b4dbf5f808d128bb221c7b9c50d59c', state: this.state }, h("form", { key: '6974fa1eef19077680e0825f50d576c7e8fb0ad1', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host,
                     ref: this.ctaRef.el,
                 });
-            } }, h("input", { key: '3137875efec2e47a44a414307e4a2d96a8225459', type: "submit", hidden: true }), h(KolSelectStateWrapperFc, Object.assign({ key: '132a41cde87cf09a6e0f6f0260ef6c3088a3170a' }, this.getSelectProps()))))));
+            } }, h("input", { key: 'dca06d50c09696120b037147e9df5d2d7167cc9e', type: "submit", hidden: true }), h(KolSelectStateWrapperFc, Object.assign({ key: 'c382d84c4c6c8098f850eeaa68acc5e03a65e66b' }, this.getSelectProps()))))));
     }
     constructor() {
         this.ctaRef = createCtaRef();
@@ -710,12 +710,21 @@ export class KolSelectWc {
             },
             "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/select/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/select/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from '../../utils/clsx';\n\nimport type {\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tMultiplePropType,\n\tNamePropType,\n\tOptionsWithOptgroupPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tSelectAPI,\n\tSelectStates,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolSelectStateWrapperFc, { type SelectStateWrapperProps } from '../../functional-component-wrappers/SelectStateWrapper/SelectStateWrapper';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, directClick, directFocus } from '../../utils/element-interaction';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { SelectController } from './controller';\n\n/**\n * @internal\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-select-wc',\n\tshadow: false,\n})\nexport class KolSelectWc implements SelectAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolSelectWcElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLSelectElement>();\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown[] | StencilUnknown> {\n\t\tif (this._multiple) {\n\t\t\treturn this.state._value;\n\t\t} else {\n\t\t\treturn Array.isArray(this.state._value) && this.state._value.length > 0 ? this.state._value[0] : this.state._value;\n\t\t}\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@directFocus('ctaRef')\n\tpublic async focus(): 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 getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-select', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.ctaRef.el?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getSelectProps(): SelectStateWrapperProps {\n\t\treturn {\n\t\t\tref: this.ctaRef,\n\t\t\tstate: this.state,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput.bind(this),\n\t\t\tonChange: this.onChange.bind(this),\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<form\n\t\t\t\t\t\tonSubmit={(event) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tpropagateSubmitEventToForm({\n\t\t\t\t\t\t\t\tform: this.host,\n\t\t\t\t\t\t\t\tref: this.ctaRef.el,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<input type=\"submit\" hidden />\n\t\t\t\t\t\t<KolSelectStateWrapperFc {...this.getSelectProps()} />\n\t\t\t\t\t</form>\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component’s interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options!: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: SelectStates = {\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('select'),\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: MultiplePropType): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onInput(event: Event): void {\n\t\tconst selectedValues = Array.from(this.ctaRef.el?.options || [])\n\t\t\t.filter((option) => option.selected)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\tif (this._multiple) {\n\t\t\tthis._value = selectedValues;\n\t\t\tthis.controller.onFacade.onInput(event, true, selectedValues);\n\t\t} else {\n\t\t\tconst singleValue: StencilUnknown = selectedValues.length > 0 ? selectedValues[0] : undefined;\n\t\t\tthis._value = singleValue;\n\t\t\tthis.controller.onFacade.onInput(event, true, singleValue);\n\t\t}\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\tif (this._multiple) {\n\t\t\tthis.controller.onFacade.onChange(event, this._value as StencilUnknown[]);\n\t\t} else {\n\t\t\tthis.controller.onFacade.onChange(event, this._value as StencilUnknown);\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/select/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from '../../utils/clsx';\n\nimport type {\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tMultiplePropType,\n\tNamePropType,\n\tOptionsWithOptgroupPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tSelectAPI,\n\tSelectStates,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolSelectStateWrapperFc, { type SelectStateWrapperProps } from '../../functional-component-wrappers/SelectStateWrapper/SelectStateWrapper';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, directClick, directFocus } from '../../utils/element-interaction';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { SelectController } from './controller';\n\n/**\n * @internal\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-select-wc',\n\tshadow: false,\n})\nexport class KolSelectWc implements SelectAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolSelectWcElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLSelectElement>();\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown[] | StencilUnknown> {\n\t\tif (this._multiple) {\n\t\t\treturn this.state._value;\n\t\t} else {\n\t\t\treturn Array.isArray(this.state._value) && this.state._value.length > 0 ? this.state._value[0] : this.state._value;\n\t\t}\n\t}\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 getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-select', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.ctaRef.el?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getSelectProps(): SelectStateWrapperProps {\n\t\treturn {\n\t\t\tref: this.ctaRef,\n\t\t\tstate: this.state,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput.bind(this),\n\t\t\tonChange: this.onChange.bind(this),\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<form\n\t\t\t\t\t\tonSubmit={(event) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tpropagateSubmitEventToForm({\n\t\t\t\t\t\t\t\tform: this.host,\n\t\t\t\t\t\t\t\tref: this.ctaRef.el,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<input type=\"submit\" hidden />\n\t\t\t\t\t\t<KolSelectStateWrapperFc {...this.getSelectProps()} />\n\t\t\t\t\t</form>\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component’s interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options!: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: SelectStates = {\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('select'),\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: MultiplePropType): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onInput(event: Event): void {\n\t\tconst selectedValues = Array.from(this.ctaRef.el?.options || [])\n\t\t\t.filter((option) => option.selected)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\tif (this._multiple) {\n\t\t\tthis._value = selectedValues;\n\t\t\tthis.controller.onFacade.onInput(event, true, selectedValues);\n\t\t} else {\n\t\t\tconst singleValue: StencilUnknown = selectedValues.length > 0 ? selectedValues[0] : undefined;\n\t\t\tthis._value = singleValue;\n\t\t\tthis.controller.onFacade.onInput(event, true, singleValue);\n\t\t}\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\tif (this._multiple) {\n\t\t\tthis.controller.onFacade.onChange(event, this._value as StencilUnknown[]);\n\t\t} else {\n\t\t\tthis.controller.onFacade.onChange(event, this._value as StencilUnknown);\n\t\t}\n\t}\n}\n"]}

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

@@ -21,9 +21,9 @@ export class KolSelect {
         var _a;
         return (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.getValue();
     }
-    async focus() { }
+    async focus(options) { }
     render() {
-        return (h(Host, { key: '43a977b957f285fca31f70f808622ba8b239bf56', class: "kol-select" }, h(KolSelectWcTag, { key: '22c6b0f1ca9b7ad14559c507b3de48fb22b098c3', ref: this.ctaRef, _accessKey: this._accessKey, _disabled: this._disabled, _hideLabel: this._hideLabel, _hideMsg: this._hideMsg, _hint: this._hint, _icons: this._icons, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value, _variant: this._variant }, h("slot", { key: 'd52a4fa1d901660ff7e02e729e35fa380b99bb1d', name: "expert", slot: "expert" }))));
+        return (h(Host, { key: 'd0ea37552dd5cab3a992362f8118a411e75c9e70', class: "kol-select" }, h(KolSelectWcTag, { key: '13b0b268ad9eefc72a69ba9a2f8e787f85d5d96b', ref: this.ctaRef, _accessKey: this._accessKey, _disabled: this._disabled, _hideLabel: this._hideLabel, _hideMsg: this._hideMsg, _hint: this._hint, _icons: this._icons, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value, _variant: this._variant }, h("slot", { key: '6fe09927b73a67f353425f836ab5ee3e840dae5b', name: "expert", slot: "expert" }))));
     }
     static get is() { return "kol-select"; }
     static get encapsulation() { return "shadow"; }
@@ -575,12 +575,21 @@ export class KolSelect {
             },
             "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/select/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/select/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\n\nimport type {\n\tFocusableElement,\n\tIconsHorizontalPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectProps,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport { KolSelectWcTag } from '../../core/component-names';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectProps, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolSelectElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolSelectWcElement>();\n\n\t/**\n\t * Returns the selected values.\n\t */\n\t@Method()\n\tpublic async getValue(): Promise<StencilUnknown[] | StencilUnknown | undefined> {\n\t\treturn this.ctaRef.el?.getValue();\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\treturn (\n\t\t\t<Host class=\"kol-select\">\n\t\t\t\t<KolSelectWcTag\n\t\t\t\t\tref={this.ctaRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_hideMsg={this._hideMsg}\n\t\t\t\t\t_hint={this._hint}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_msg={this._msg}\n\t\t\t\t\t_multiple={this._multiple}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_options={this._options}\n\t\t\t\t\t_required={this._required}\n\t\t\t\t\t_rows={this._rows}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this._touched}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolSelectWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options!: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Maximum number of visible rows of the element.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/select/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\n\nimport type {\n\tFocusableElement,\n\tIconsHorizontalPropType,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectProps,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport { KolSelectWcTag } from '../../core/component-names';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectProps, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolSelectElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolSelectWcElement>();\n\n\t/**\n\t * Returns the selected values.\n\t */\n\t@Method()\n\tpublic async getValue(): Promise<StencilUnknown[] | StencilUnknown | undefined> {\n\t\treturn this.ctaRef.el?.getValue();\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\treturn (\n\t\t\t<Host class=\"kol-select\">\n\t\t\t\t<KolSelectWcTag\n\t\t\t\t\tref={this.ctaRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_hideMsg={this._hideMsg}\n\t\t\t\t\t_hint={this._hint}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_msg={this._msg}\n\t\t\t\t\t_multiple={this._multiple}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_options={this._options}\n\t\t\t\t\t_required={this._required}\n\t\t\t\t\t_rows={this._rows}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this._touched}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolSelectWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options!: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Maximum number of visible rows of the element.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n}\n"]}

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

@@ -207,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1780050253507"); /* IE9*/
-  src: url("kolicons.eot?t=1780050253507#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780050253507") format("woff2"), url("kolicons.woff?t=1780050253507") format("woff"), url("kolicons.ttf?t=1780050253507") format("truetype"), url("kolicons.svg?t=1780050253507#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1780914078349"); /* IE9*/
+  src: url("kolicons.eot?t=1780914078349#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780914078349") format("woff2"), url("kolicons.woff?t=1780914078349") format("woff"), url("kolicons.ttf?t=1780914078349") format("truetype"), url("kolicons.svg?t=1780914078349#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -426,6 +426,7 @@
   .kol-input-container {
     background-color: transparent;
     display: grid;
+    position: relative;
     width: 100%;
     min-width: var(--a11y-min-size);
     min-height: var(--a11y-min-size);
@@ -437,6 +438,7 @@
   }
   .kol-input-container__container {
     position: relative;
+    z-index: 1;
   }
   .kol-input-container__adornment {
     display: flex;

package/dist/collection/components/single-select/shadow.js

@@ -20,7 +20,7 @@ export class KolSingleSelect {
     async getValue() {
         return this._value;
     }
-    async focus() { }
+    async focus(options) { }
     onBlur() {
         var _a, _b;
         const matchingOption = (_a = this.state._options) === null || _a === void 0 ? void 0 : _a.find((option) => { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = this._inputValue) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
@@ -187,7 +187,7 @@ export class KolSingleSelect {
     render() {
         var _a;
         const isDisabled = this.state._disabled === true;
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '8e3e19922baa5e7f6501da6666758ce2021b59c9' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '206902ed286674c301d26f0f57db149cecda6d6f', state: this.state }, h("div", { key: '70bdda576df36b7e1c154757aa6aaddf13ed4776', class: "kol-single-select__group" }, h(KolInputStateWrapperFc, Object.assign({ key: '88dbcf20d0bd40d98d44b0736b7619fa3592a937' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (h(KolButtonWcTag, { key: '082ed8710605d9cf6b2a05ced94d48956f33fc59', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: "kol-single-select__delete", hidden: isDisabled, _on: {
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: 'a562e230c017b24eb129118d516f032a6b42e8c9' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: 'df7a38b381bda50cf1fd969f3b39a76b52d7ea10', state: this.state }, h("div", { key: '4f9a18322d000f14386ebe2d7213ce767177afda', class: "kol-single-select__group" }, h(KolInputStateWrapperFc, Object.assign({ key: '4f0719ba06ad2c923c4f187bbe8a29de3189419e' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (h(KolButtonWcTag, { key: 'c8453b29f259808fcb41173aed65780c569be8cf', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: "kol-single-select__delete", hidden: isDisabled, _on: {
                 onClick: () => {
                     var _a;
                     this.clearSelection();
@@ -199,9 +199,9 @@ export class KolSingleSelect {
                 onBlur: () => {
                     this.clearButtonFocused = false;
                 },
-            } })), h(IconFC, { key: '6b4be5258ecd8a69970f6dd27a81fc245ad51f97', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), h(IconFC, { key: '9dc7b5cb4973f0b04d55b2349b40543082909ec5', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), h(CustomSuggestionsOptionsGroupFc, { key: '1bddbbfd4d8ac09166b0aedd4f3e54d13584f228', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (h(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
+            }), onClick: this.toggleListbox.bind(this) })), h(CustomSuggestionsOptionsGroupFc, { key: '2ecd91b862dc14bafd09efdc99a6f91eded101dc', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (h(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
             }, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
@@ -1048,12 +1048,21 @@ export class KolSingleSelect {
             },
             "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>"