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

package/dist/types/schema/components/input-text.d.ts

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { InputTextTypePropType, MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHasCounter, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMaxLengthBehavior, PropMsg, PropName, PropReadOnly, PropRequired, PropShortKey, PropSpellCheck, PropSuggestions, PropSyncValueBySelector, PropTouched } from '../props';
+import type { InputTextTypePropType, MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHasCounter, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMaxLengthBehavior, PropMsg, PropName, PropReadOnly, PropRequired, PropShortKey, PropSpellCheck, PropSuggestions, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
 import type { InputTypeOnDefault, KoliBriHIcons, Stringified, W3CInputValue } from '../types';
 import type { InternalButtonProps } from './button';
 type RequiredProps = PropLabelWithExpertSlot;
@@ -12,7 +12,7 @@ type OptionalProps = {
     smartButton: Stringified<InternalButtonProps>;
     type: InputTextTypePropType;
     value: string;
-} & PropAccessKey & PropAutoComplete & PropDisabled & PropHasCounter & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropMaxLengthBehavior & PropName & PropReadOnly & PropRequired & PropShortKey & PropSpellCheck & PropSuggestions & PropSyncValueBySelector & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHasCounter & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropMaxLengthBehavior & PropName & PropReadOnly & PropRequired & PropShortKey & PropSpellCheck & PropSuggestions & PropSyncValueBySelector & PropTouched & PropVariantClassName;
 type RequiredStates = {
     currentLength: number;
     currentLengthDebounced: number;
@@ -27,7 +27,7 @@ type OptionalStates = {
     placeholder: string;
     smartButton: InternalButtonProps;
     value: string;
-} & PropAccessKey & PropAutoComplete & PropDisabled & PropHasCounter & PropHideLabel & PropHint & KoliBriHIcons & PropMaxLengthBehavior & PropMsg & PropName & PropReadOnly & PropRequired & PropShortKey & PropSpellCheck & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHasCounter & PropHideLabel & PropHint & KoliBriHIcons & PropMaxLengthBehavior & PropMsg & PropName & PropReadOnly & PropRequired & PropShortKey & PropSpellCheck & PropTouched & PropVariantClassName;
 export type InputTextProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type InputTextStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type InputTextWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

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

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { MsgPropType, PropAccessKey, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropMultiple, PropName, PropOptionsWithOptgroup, PropRequired, PropRows, PropShortKey, PropSyncValueBySelector, PropTouched } from '../props';
+import type { MsgPropType, PropAccessKey, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropMultiple, PropName, PropOptionsWithOptgroup, PropRequired, PropRows, PropShortKey, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
 import type { InputTypeOnDefault, KoliBriHIcons, SelectOption, StencilUnknown, Stringified, W3CInputValue } from '../types';
 type RequiredProps = PropLabelWithExpertSlot & PropOptionsWithOptgroup;
 type OptionalProps = {
@@ -7,7 +7,7 @@ type OptionalProps = {
     on: InputTypeOnDefault;
     tabIndex: number;
     value: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;
-} & PropAccessKey & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropMultiple & PropName & PropRequired & PropRows & PropShortKey & PropSyncValueBySelector & PropTouched;
+} & PropAccessKey & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropMultiple & PropName & PropRequired & PropRows & PropShortKey & PropSyncValueBySelector & PropTouched & PropVariantClassName;
 type RequiredStates = {
     hasValue: boolean;
     options: SelectOption<W3CInputValue>[];
@@ -16,7 +16,7 @@ type RequiredStates = {
 type OptionalStates = {
     on: InputTypeOnDefault;
     tabIndex: number;
-} & PropAccessKey & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropName & PropRequired & PropRows & PropMsg & PropShortKey & PropTouched;
+} & PropAccessKey & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropName & PropRequired & PropRows & PropMsg & PropShortKey & PropTouched & PropVariantClassName;
 export type SelectProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type SelectStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type SelectWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

package/dist/types/schema/components/single-select.d.ts

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { MsgPropType, PropAccessKey, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropOptions, PropRequired, PropRows, PropShortKey, PropSyncValueBySelector, PropTouched } from '../props';
+import type { MsgPropType, PropAccessKey, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropOptions, PropRequired, PropRows, PropShortKey, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
 import type { InputTypeOnDefault, KoliBriHIcons, Option, StencilUnknown, Stringified } from '../types';
 type RequiredProps = PropLabelWithExpertSlot & PropOptions;
 type OptionalProps = {
@@ -8,7 +8,7 @@ type OptionalProps = {
     placeholder: string;
     value: StencilUnknown;
     hasClearButton: boolean;
-} & PropAccessKey & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropName & PropRequired & PropRows & PropSyncValueBySelector & PropShortKey & PropTouched;
+} & PropAccessKey & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropName & PropRequired & PropRows & PropSyncValueBySelector & PropShortKey & PropTouched & PropVariantClassName;
 type RequiredStates = {
     options: Option<StencilUnknown>[];
 } & PropId & PropHideMsg & PropLabelWithExpertSlot;
@@ -16,7 +16,7 @@ type OptionalStates = {
     on: InputTypeOnDefault;
     placeholder: string;
     hasClearButton: boolean;
-} & PropAccessKey & PropDisabled & PropHideLabel & KoliBriHIcons & PropHint & PropName & PropRequired & PropRows & PropMsg & PropShortKey & PropTouched;
+} & PropAccessKey & PropDisabled & PropHideLabel & KoliBriHIcons & PropHint & PropName & PropRequired & PropRows & PropMsg & PropShortKey & PropTouched & PropVariantClassName;
 export type SingleSelectProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type SingleSelectStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type SingleSelectWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

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

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { MsgPropType, PropAccessKey, PropAdjustHeight, PropDisabled, PropHasCounter, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMaxLengthBehavior, PropMsg, PropName, PropReadOnly, PropRequired, PropRows, PropShortKey, PropSpellCheck, PropSyncValueBySelector, PropTouched } from '../props';
+import type { MsgPropType, PropAccessKey, PropAdjustHeight, PropDisabled, PropHasCounter, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMaxLengthBehavior, PropMsg, PropName, PropReadOnly, PropRequired, PropRows, PropShortKey, PropSpellCheck, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
 import type { InputTypeOnDefault, KoliBriHIcons, Stringified } from '../types';
 export declare const cssResizeOptions: readonly ["vertical", "none"];
 export type CSSResize = (typeof cssResizeOptions)[number];
@@ -11,7 +11,7 @@ type OptionalProps = {
     placeholder: string;
     resize: CSSResize;
     value: string;
-} & PropAccessKey & PropAdjustHeight & PropDisabled & PropHasCounter & PropHideLabel & PropHideMsg & PropHint & PropHorizontalIcons & PropMaxLengthBehavior & PropName & PropReadOnly & PropRequired & PropRows & PropShortKey & PropSpellCheck & PropSyncValueBySelector & PropTouched;
+} & PropAccessKey & PropAdjustHeight & PropDisabled & PropHasCounter & PropHideLabel & PropHideMsg & PropHint & PropHorizontalIcons & PropMaxLengthBehavior & PropName & PropReadOnly & PropRequired & PropRows & PropShortKey & PropSpellCheck & PropSyncValueBySelector & PropTouched & PropVariantClassName;
 type RequiredStates = {
     adjustHeight: boolean;
     currentLength: number;
@@ -24,7 +24,7 @@ type OptionalStates = {
     on: InputTypeOnDefault;
     placeholder: string;
     value: string;
-} & PropAccessKey & KoliBriHIcons & PropDisabled & PropHasCounter & PropHideLabel & PropHint & PropMaxLengthBehavior & PropMsg & PropName & PropReadOnly & PropRequired & PropRows & PropShortKey & PropSpellCheck & PropTouched;
+} & PropAccessKey & KoliBriHIcons & PropDisabled & PropHasCounter & PropHideLabel & PropHint & PropMaxLengthBehavior & PropMsg & PropName & PropReadOnly & PropRequired & PropRows & PropShortKey & PropSpellCheck & PropTouched & PropVariantClassName;
 export type TextareaProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type TextareaStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type TextareaWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

package/dist/types/schema/props/index.d.ts

@@ -1 +1 @@
-export{headingLevelOptions,type,HeadingLevel}from"../../internal/props/level";export*from"./accept";export*from"./access-key";export*from"./accordion-callbacks";export*from"./active";export*from"./adjust-height";export*from"./alert";export*from"./alert-type";export*from"./align";export*from"./allow-multi-sort";export*from"./alt";export*from"./alternative-button-link-role";export*from"./aria-controls";export*from"./aria-current-value";export*from"./aria-description";export*from"./aria-expanded";export*from"./aria-owns";export*from"./aria-selected";export*from"./auto-complete";export*from"./badge-text";export*from"./button-callbacks";export*from"./button-type";export*from"./button-variant";export*from"./checked";export*from"./collapsible";export*from"./color";export*from"./current-length";export*from"./custom-class";export*from"./details-callbacks";export*from"./disabled";export*from"./download";export*from"./error-list";export*from"./has-closer";export*from"./has-compact-button";export*from"./has-counter";export*from"./has-icons-when-expanded";export*from"./has-settings-menu";export*from"./has-value";export*from"./hide-label";export*from"./hide-msg";export*from"./hint";export*from"./href";export*from"./icons";export*from"./icons-input-checkbox";export*from"./id";export*from"./image-sizes";export*from"./image-source";export*from"./image-srcset";export*from"./indeterminate";export*from"./inline";export*from"./label";export*from"./label-align";export*from"./link-on-callbacks";export*from"./link-target";export*from"./loading";export*from"./max";export*from"./max-length";export*from"./max-length-behavior";export*from"./modal";export*from"./msg";export*from"./multiple";export*from"./name";export*from"./open";export*from"./options";export*from"./pagination-position";export*from"./pattern";export*from"./placeholder";export*from"./popover-align";export*from"./quote";export*from"./read-only";export*from"./required";export*from"./resize-textarea";export*from"./rows";export*from"./short-key";export*from"./show";export*from"./spell-check";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./tab-behavior";export*from"./tab-index";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-fixed-cols";export*from"./table-header-cells";export*from"./table-selection";export*from"./toolbar-items";export*from"./tooltip-align";export*from"./touched";export*from"./type-input-date";export*from"./type-input-text";export*from"./unit";export*from"./variant-alert";export*from"./variant-class-name";export*from"./variant-input-checkbox";export*from"./variant-progress";export*from"./variant-quote";export*from"./variant/spin";export*from"./width";
+export{headingLevelOptions,type,HeadingLevel}from"../../internal/props/level";export*from"./accept";export*from"./access-key";export*from"./accordion-callbacks";export*from"./active";export*from"./adjust-height";export*from"./alert";export*from"./alert-type";export*from"./align";export*from"./allow-multi-sort";export*from"./alt";export*from"./alternative-button-link-role";export*from"./aria-controls";export*from"./aria-current-value";export*from"./aria-description";export*from"./aria-expanded";export*from"./aria-owns";export*from"./aria-selected";export*from"./auto-complete";export*from"./badge-text";export*from"./button-callbacks";export*from"./button-type";export*from"./button-variant";export*from"./checked";export*from"./collapsible";export*from"./color";export*from"./current-length";export*from"./custom-class";export*from"./details-callbacks";export*from"./disabled";export*from"./download";export*from"./error-list";export*from"./has-closer";export*from"./has-compact-button";export*from"./has-counter";export*from"./has-icons-when-expanded";export*from"./has-settings-menu";export*from"./has-value";export*from"./hide-label";export*from"./hide-msg";export*from"./hint";export*from"./href";export*from"./icons";export*from"./icons-input-checkbox";export*from"./id";export*from"./image-sizes";export*from"./image-source";export*from"./image-srcset";export*from"./indeterminate";export*from"./inline";export*from"./label";export*from"./label-align";export*from"./link-on-callbacks";export*from"./link-target";export*from"./loading";export*from"./max";export*from"./max-length";export*from"./max-length-behavior";export*from"./modal";export*from"./msg";export*from"./multiple";export*from"./name";export*from"./open";export*from"./options";export*from"./pagination-position";export*from"./pattern";export*from"./placeholder";export*from"./popover-align";export*from"./quote";export*from"./read-only";export*from"./required";export*from"./resize-textarea";export*from"./rows";export*from"./short-key";export*from"./show";export*from"./spell-check";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./tab-behavior";export*from"./tab-index";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-fixed-cols";export*from"./table-header-cells";export*from"./table-selection";export*from"./toolbar-items";export*from"./tooltip-align";export*from"./touched";export*from"./type-input-date";export*from"./type-input-text";export*from"./unit";export*from"./variant-alert";export*from"./variant-class-name";export*from"./variant-input-checkbox";export*from"./variant-progress";export*from"./variant-quote";export*from"./variant/spin";export*from"./visibility-toggle";export*from"./width";

package/dist/types/schema/props/visibility-toggle.d.ts

@@ -0,0 +1,7 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { WatchBooleanOptions } from '../utils';
+export type VisibilityTogglePropType = boolean;
+export type PropVisibilityToggle = {
+    visibilityToggle: VisibilityTogglePropType;
+};
+export declare const validateVisibilityToggle: (component: Generic.Element.Component, value?: VisibilityTogglePropType, hooks?: WatchBooleanOptions) => void;

package/dist/types/utils/dev.utils.d.ts

@@ -4,3 +4,5 @@ export declare const initKoliBri: () => void;
 export declare const renderDevAdvice: () => void;
 declare let nonce: () => string;
 export { nonce };
+export declare const createUniqueId: (prefix: string) => string;
+export declare const createRelatedUniqueId: (baseId: string, suffix: string) => string;

package/doc/combobox.md

@@ -25,6 +25,7 @@
 | `_tooltipAlign`             | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                              | `'top'`     |
 | `_touched`                  | `_touched`          | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                             | `false`     |
 | `_value`                    | `_value`            | Defines the value of the element.                                                                                                                            | `string \| undefined`                                                                                                              | `undefined` |
+| `_variant`                  | `_variant`          | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/input-color.md

@@ -28,6 +28,7 @@ The **Color** input type creates a selection field for defining any color. The c
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |
 | `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |
 | `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/input-date.md

@@ -34,6 +34,7 @@ The **Date** input type creates an input field for date values. These can be spe
 | `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |
 | `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                           | `"date" \| "datetime-local" \| "month" \| "time" \| "week"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `'date'`    |
 | `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `` Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| null \| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/input-email.md

@@ -36,6 +36,7 @@ The **Email** input type creates an input field for email addresses. It supports
 | `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |
 | `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |
 | `_value`              | `_value`               | Defines the value of the element.                                                                                                                            | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/input-file.md

@@ -28,6 +28,7 @@ The **File** input type creates an input field for file uploads. One or multiple
 | `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \| undefined \| { _label: string; } & { _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _ariaExpanded?: boolean \| undefined; _tabIndex?: number \| undefined; _value?: StencilUnknown; _accessKey?: string \| undefined; _role?: "tab" \| "treeitem" \| undefined; _ariaControls?: string \| undefined; _ariaDescription?: string \| undefined; _ariaSelected?: boolean \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _inline?: boolean \| undefined; _name?: string \| undefined; _shortKey?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _variant?: string \| undefined; }` | `undefined` |
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |
 | `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/input-number.md

@@ -34,6 +34,7 @@ The **Number** input type creates an input field for numeric values. Use the `_m
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |
 | `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |
 | `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `` `${number}.${number}` \| `${number}` \| null \| number \| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/input-password.md

@@ -34,7 +34,8 @@ The **Password** input type creates an input field for passwords. The input is m
 | `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |
 | `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |
 | `_value`              | `_value`               | Defines the value of the element.                                                                                                                            | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
-| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                       | `"default" \| "visibility-toggle" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'default'` |
+| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_visibilityToggle`   | `_visibility-toggle`   | Activates the show password button                                                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |
 
 
 ## Methods

package/doc/input-radio.md

@@ -25,6 +25,7 @@ The **InputRadio** input type consists of a collection of radio elements, provid
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                              | `'top'`      |
 | `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                             | `false`      |
 | `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `boolean \| null \| number \| object \| string \| undefined`                                                                       | `null`       |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                              | `undefined`  |
 
 
 ## Methods

package/doc/input-range.md

@@ -30,6 +30,7 @@ The **Range** input type creates a slider control for selecting a numeric value
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                              | `'top'`     |
 | `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                             | `false`     |
 | `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                                                  | `undefined` |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/input-text.md

@@ -37,6 +37,7 @@ The **Text** input type creates an input field for plain text, search terms, URL
 | `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |
 | `_type`               | `_type`                | Defines either the type of the component or of the components interactive element.                                                                           | `"search" \| "tel" \| "text" \| "url" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'text'`    |
 | `_value`              | `_value`               | Defines the value of the element.                                                                                                                            | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/select.md

@@ -26,6 +26,7 @@
 | `_tooltipAlign`         | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                              | `'top'`     |
 | `_touched`              | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                             | `false`     |
 | `_value`                | `_value`         | Defines the value of the element.                                                                                                                            | `StencilUnknown[] \| boolean \| null \| number \| object \| string \| undefined`                                                   | `undefined` |
+| `_variant`              | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/single-select.md

@@ -30,6 +30,7 @@ The **SingleSelect** component creates a dropdown list from which exactly one pr
 | `_tooltipAlign`         | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                              | `'top'`     |
 | `_touched`              | `_touched`          | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                             | `false`     |
 | `_value`                | `_value`            | Defines the value of the element.                                                                                                                            | `boolean \| null \| number \| object \| string \| undefined`                                                                       | `null`      |
+| `_variant`              | `_variant`          | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/textarea.md

@@ -35,6 +35,7 @@ The **Textarea** component provides a larger input field for content. Unlike Inp
 | `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                          | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                              | `'top'`      |
 | `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                                                                                                                                                          | `boolean \| undefined`                                                                                                             | `false`      |
 | `_value`              | `_value`               | Defines the value of the element.                                                                                                                                                                                                                                                                  | `string \| undefined`                                                                                                              | `undefined`  |
+| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                                                                                                                                                             | `string \| undefined`                                                                                                              | `undefined`  |
 
 
 ## Methods

package/doc/tree-item.md

@@ -35,13 +35,13 @@ Type: `Promise<void | undefined>`
 
 
 
-### `focus() => Promise<any>`
+### `focus() => Promise<void | undefined>`
 
 Focuses the link element.
 
 #### Returns
 
-Type: `Promise<any>`
+Type: `Promise<void | undefined>`
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "4.2.0-rc.0",
+  "version": "4.2.0-rc.2",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -111,17 +111,17 @@
     "eslint-plugin-jsx-a11y": "6.10.2",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
-    "knip": "6.14.1",
+    "knip": "6.14.2",
     "mustache": "4.2.0",
-    "postcss": "8.5.14",
+    "postcss": "8.5.15",
     "postcss-sorting": "10.0.0",
     "prettier": "3.8.3",
     "prettier-plugin-organize-imports": "4.3.0",
     "pug": "3.0.4",
     "rimraf": "6.1.3",
     "stencil-awesome-test": "1.0.6",
-    "stylelint": "17.11.1",
-    "terser": "5.47.1",
+    "stylelint": "17.12.0",
+    "terser": "5.48.0",
     "twig": "3.0.0",
     "typescript": "5.9.3",
     "@public-ui/stylelint-rules": "4.1.2-rc.1"

package/vscode-custom-data.json

@@ -538,6 +538,10 @@
         {
           "name": "_value",
           "description": "Defines the value of the element."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },
@@ -961,6 +965,10 @@
         {
           "name": "_value",
           "description": "Defines the value of the element."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },
@@ -1111,6 +1119,10 @@
         {
           "name": "_value",
           "description": "Defines the value of the element."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },
@@ -1260,6 +1272,10 @@
         {
           "name": "_value",
           "description": "Defines the value of the element."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },
@@ -1369,6 +1385,10 @@
         {
           "name": "_touched",
           "description": "Shows if the input was touched by a user."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },
@@ -1502,6 +1522,10 @@
         {
           "name": "_value",
           "description": "Defines the value of the element."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },
@@ -1646,15 +1670,11 @@
         },
         {
           "name": "_variant",
-          "description": "Defines which variant should be used for presentation.",
-          "values": [
-            {
-              "name": "default"
-            },
-            {
-              "name": "visibility-toggle"
-            }
-          ]
+          "description": "Defines which variant should be used for presentation."
+        },
+        {
+          "name": "_visibility-toggle",
+          "description": "Activates the show password button"
         }
       ]
     },
@@ -1749,6 +1769,10 @@
         {
           "name": "_value",
           "description": "Defines the value of the element."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },
@@ -1855,6 +1879,10 @@
         {
           "name": "_value",
           "description": "Defines the value of the element."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },
@@ -2022,6 +2050,10 @@
         {
           "name": "_value",
           "description": "Defines the value of the element."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },
@@ -2791,6 +2823,10 @@
         {
           "name": "_value",
           "description": "Defines the value of the element."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },
@@ -2897,6 +2933,10 @@
         {
           "name": "_value",
           "description": "Defines the value of the element."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },
@@ -3386,6 +3426,10 @@
         {
           "name": "_value",
           "description": "Defines the value of the element."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation."
         }
       ]
     },

package/dist/cjs/Collapsible-BAxJEFEO.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";var tslib_es6=require("./tslib.es6-7DbU_BSw.js"),index=require("./index-DZiGsIFR.js"),componentNames=require("./component-names-5KS_pYRF.js"),clsx=require("./clsx-Bm_HQUnh.js"),Heading=require("./Heading-lo6uM9NB.js");const KolCollapsibleFc=(l,e)=>{const{id:s,class:i,label:o,level:n=1,disabled:a,open:c,onClick:d,HeadingProps:r={},HeadingButtonProps:t={},ContentProps:p={}}=l,b=tslib_es6.__rest(l,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),x=c?"kolicon-chevron-down":"kolicon-chevron-right",_=`${s}-heading`;return index.h("div",Object.assign({id:s,class:clsx.clsx("collapsible",{"collapsible--disabled":!0===a,"collapsible--open":!0===c},i)},b),index.h(Heading.KolHeadingFc,{ref:null==r?void 0:r.ref,level:n,class:clsx.clsx("collapsible__heading",null==r?void 0:r.class)},index.h(componentNames.KolButtonWcTag,{class:clsx.clsx("collapsible__heading-button",null==t?void 0:t.class),ref:null==t?void 0:t.ref,slot:"expert",id:_,_ariaControls:`${s}-control`,_ariaExpanded:c,_disabled:a,_icons:(null==t?void 0:t._icons)||`${x}`,_label:o,_on:{onClick:d}})),index.h("div",{class:clsx.clsx("collapsible__wrapper",null==p?void 0:p.wrapperClass)},index.h("div",{class:clsx.clsx("collapsible__wrapper-animation",null==p?void 0:p.animationClass)},index.h("div",{"aria-hidden":!1===c?"true":void 0,"aria-labelledby":_,role:"region",class:clsx.clsx("collapsible__content",null==p?void 0:p.class),id:`${s}-control`},e))))};exports.KolCollapsibleFc=KolCollapsibleFc;

package/dist/cjs/Collapsible-BAxJEFEO.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Collapsible-BAxJEFEO.js","sources":["src/functional-components/Collapsible/Collapsible.tsx"],"sourcesContent":["import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport type { EventValueOrEventCallback, HeadingLevel, IconsPropType, StencilUnknown } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport KolHeadingFc from '../Heading';\n\ntype ClassType =\n\t| string\n\t| {\n\t\t\t[className: string]: boolean;\n\t  };\n\nexport type CollapsibleProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id' | 'onClick'> & {\n\tid: string;\n\topen?: boolean;\n\tdisabled?: boolean;\n\tlevel?: HeadingLevel;\n\tlabel: string;\n\tonClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>;\n\n\tHeadingProps?: {\n\t\tref?: ((elm?: HTMLElement | undefined) => void) | undefined;\n\t\tclass?: ClassType;\n\t};\n\n\tHeadingButtonProps?: {\n\t\tref?: ((elm?: HTMLKolButtonWcElement | undefined) => void) | undefined;\n\t\tclass?: ClassType;\n\t\t_icons?: IconsPropType;\n\t};\n\n\tContentProps?: {\n\t\tclass?: ClassType;\n\t\tanimationClass?: ClassType;\n\t\twrapperClass?: ClassType;\n\t};\n};\n\nconst KolCollapsibleFc: FC<CollapsibleProps> = (props, children) => {\n\tconst { id, class: classNames, label, level = 1, disabled, open, onClick, HeadingProps = {}, HeadingButtonProps = {}, ContentProps = {}, ...other } = props;\n\tconst icon = open ? 'kolicon-chevron-down' : 'kolicon-chevron-right';\n\n\tconst headingId = `${id}-heading`;\n\n\treturn (\n\t\t<div\n\t\t\tid={id}\n\t\t\tclass={clsx(\n\t\t\t\t'collapsible',\n\t\t\t\t{\n\t\t\t\t\t'collapsible--disabled': disabled === true,\n\t\t\t\t\t'collapsible--open': open === true,\n\t\t\t\t},\n\t\t\t\tclassNames,\n\t\t\t)}\n\t\t\t{...other}\n\t\t>\n\t\t\t<KolHeadingFc ref={HeadingProps?.ref} level={level} class={clsx('collapsible__heading', HeadingProps?.class)}>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tclass={clsx('collapsible__heading-button', HeadingButtonProps?.class)}\n\t\t\t\t\tref={HeadingButtonProps?.ref}\n\t\t\t\t\tslot=\"expert\"\n\t\t\t\t\tid={headingId}\n\t\t\t\t\t_ariaControls={`${id}-control`}\n\t\t\t\t\t_ariaExpanded={open}\n\t\t\t\t\t_disabled={disabled}\n\t\t\t\t\t_icons={HeadingButtonProps?._icons || `${icon}`}\n\t\t\t\t\t_label={label}\n\t\t\t\t\t_on={{ onClick }}\n\t\t\t\t></KolButtonWcTag>\n\t\t\t</KolHeadingFc>\n\t\t\t<div class={clsx('collapsible__wrapper', ContentProps?.wrapperClass)}>\n\t\t\t\t<div class={clsx('collapsible__wrapper-animation', ContentProps?.animationClass)}>\n\t\t\t\t\t<div\n\t\t\t\t\t\taria-hidden={open === false ? 'true' : undefined}\n\t\t\t\t\t\taria-labelledby={headingId}\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\tclass={clsx('collapsible__content', ContentProps?.class)}\n\t\t\t\t\t\tid={`${id}-control`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default KolCollapsibleFc;\n"],"names":["__rest","h","clsx","KolHeadingFc","KolButtonWcTag"],"mappings":";;;;;;;;;;;AAwCA,MAAM,gBAAgB,GAAyB,CAAC,KAAK,EAAE,QAAQ,KAAI;AAClE,IAAA,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,GAAG,EAAE,EAAE,kBAAkB,GAAG,EAAE,EAAE,YAAY,GAAG,EAAE,EAAe,GAAA,KAAK,EAAf,KAAK,GAAAA,gBAAA,CAAK,KAAK,EAArJ,CAAA,IAAA,EAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,cAAA,EAAA,oBAAA,EAAA,cAAA,CAA6I,CAAQ;IAC3J,MAAM,IAAI,GAAG,IAAI,GAAG,sBAAsB,GAAG,uBAAuB;AAEpE,IAAA,MAAM,SAAS,GAAG,CAAG,EAAA,EAAE,UAAU;AAEjC,IAAA,QACCC,OACC,CAAA,KAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAE,EAAE,EAAE,EACN,KAAK,EAAEC,SAAI,CACV,aAAa,EACb;YACC,uBAAuB,EAAE,QAAQ,KAAK,IAAI;YAC1C,mBAAmB,EAAE,IAAI,KAAK,IAAI;AAClC,SAAA,EACD,UAAU,CACV,EAAA,EACG,KAAK,CAAA,EAETD,OAAA,CAACE,oBAAY,EAAA,EAAC,GAAG,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAED,SAAI,CAAC,sBAAsB,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,KAAK,CAAC,EAAA,EAC3GD,OAAA,CAACG,6BAAc,EAAA,EACd,KAAK,EAAEF,SAAI,CAAC,6BAA6B,EAAE,kBAAkB,aAAlB,kBAAkB,KAAA,MAAA,GAAA,MAAA,GAAlB,kBAAkB,CAAE,KAAK,CAAC,EACrE,GAAG,EAAE,kBAAkB,KAAlB,IAAA,IAAA,kBAAkB,KAAlB,MAAA,GAAA,MAAA,GAAA,kBAAkB,CAAE,GAAG,EAC5B,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,SAAS,EACb,aAAa,EAAE,GAAG,EAAE,CAAA,QAAA,CAAU,EAC9B,aAAa,EAAE,IAAI,EACnB,SAAS,EAAE,QAAQ,EACnB,MAAM,EAAE,CAAA,kBAAkB,aAAlB,kBAAkB,KAAA,MAAA,GAAA,MAAA,GAAlB,kBAAkB,CAAE,MAAM,KAAI,CAAG,EAAA,IAAI,CAAE,CAAA,EAC/C,MAAM,EAAE,KAAK,EACb,GAAG,EAAE,EAAE,OAAO,EAAE,GACC,CACJ,EACfD,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAEC,SAAI,CAAC,sBAAsB,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,YAAY,CAAC,EAAA,EACnED,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAEC,SAAI,CAAC,gCAAgC,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,cAAc,CAAC,EAAA,EAC/ED,OACc,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,IAAI,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,EAC/B,iBAAA,EAAA,SAAS,EAC1B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAEC,SAAI,CAAC,sBAAsB,EAAE,YAAY,aAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,KAAK,CAAC,EACxD,EAAE,EAAE,GAAG,EAAE,CAAA,QAAA,CAAU,EAElB,EAAA,QAAQ,CACJ,CACD,CACD,CACD;AAER;;;;"}

package/dist/cjs/FieldControlStateWrapper-CO4jO9fs.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";var tslib_es6=require("./tslib.es6-7DbU_BSw.js"),index=require("./index-DZiGsIFR.js"),variantQuote=require("./variant-quote-DpNzmCtr.js"),component$1=require("./component-BPCYmpVt.js"),controller=require("./controller-DiB9pVnb.js");require("./common-DPb6NWR4.js");var component=require("./component-_XOk9iaD.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-DyiXTos6.js"),clsx=require("./clsx-Bm_HQUnh.js");const fieldControlTooltipControllerById=new Map,getFieldControlTooltipController=e=>{const l=fieldControlTooltipControllerById.get(e);if(l)return l;const o=new controller.TooltipController(variantQuote.BaseWebComponent.stateLess);return o.componentWillLoad({label:""}),fieldControlTooltipControllerById.set(e,o),o},destroyFieldControlTooltipController=e=>{const l=fieldControlTooltipControllerById.get(e);l&&(l.destroy(),fieldControlTooltipControllerById.delete(e))},InputContainer=(e,l)=>{var{class:o}=e,t=tslib_es6.__rest(e,["class"]);return index.h("div",Object.assign({class:clsx.clsx("kol-field-control__input",o)},t),l)},KolFieldControlFc=(e,l)=>{const{class:o,id:t,disabled:r,label:n,hideLabel:i,labelAlign:s,renderNoTooltip:d,hint:a,renderNoHint:c,accessKey:p,shortKey:b,msg:u,touched:C,required:h,readonly:f,tooltipAlign:g,tooltipFloatingRef:F,fieldControlInputProps:_,fieldControlLabelProps:m,fieldControlTooltipProps:y,fieldControlHintProps:x}=e,T=tslib_es6.__rest(e,["class","id","disabled","label","hideLabel","labelAlign","renderNoTooltip","hint","renderNoHint","accessKey","shortKey","msg","touched","required","readonly","tooltipAlign","tooltipFloatingRef","fieldControlInputProps","fieldControlLabelProps","fieldControlTooltipProps","fieldControlHintProps"]),B=!c,v=!d,q=component.showExpertSlot(n),K=v&&!q&&i,j=component.buildBadgeTextString(p,b),k=K?getFieldControlTooltipController(t):void 0;k?(k.watchAlign(g),k.watchBadgeText(j||""),k.watchId(`${t}-label`),k.watchLabel(n)):destroyFieldControlTooltipController(t);const S=null==_?void 0:_.ref,I=[index.h(index.Fragment,null,index.h(InputContainer,Object.assign({},_,{ref:e=>{null==S||S(e),k&&e&&(k.initContext(e),k.syncListeners(void 0,e,!0))}}),l),K&&index.h("div",{class:clsx.clsx("kol-form-field__tooltip",null==y?void 0:y.class)},index.h(component$1.TooltipFC,{badgeText:j||"",label:n,align:g,id:`${t}-label`,refFloating:null!=F?F:e=>{null==k||k.setTooltipElementRef(e)}}))),index.h(FormFieldStateWrapper.KolFormFieldLabelFc,Object.assign({},m||{},{id:t,baseClassName:"kol-field-control",class:clsx.clsx(null==m?void 0:m.class,{"kol-field-control__label--visually-hidden":Boolean(i)}),hasExpertSlot:q,label:n,accessKey:p,shortKey:b}))];"left"===s&&I.reverse();const P={"kol-field-control--disabled":Boolean(r),"kol-field-control--required":Boolean(h),"kol-field-control--touched":Boolean(C),"kol-field-control--hide-label":Boolean(i),"kol-field-control--read-only":Boolean(f),[`kol-field-control--${FormFieldStateWrapper.getMsgType(u)}`]:Boolean(FormFieldStateWrapper.isMsgDefinedAndInputTouched(u,C)),[`kol-field-control--label-align-${s}`]:Boolean(s)};return index.h("div",Object.assign({class:clsx.clsx("kol-field-control",P,o)},T),I,B&&index.h(FormFieldStateWrapper.KolFormFieldHintFc,Object.assign({},x||{},{baseClassName:"kol-field-control",id:t,hint:a})))};function getFieldControlProps(e){const l={id:e._id,disabled:e._disabled,msg:e._msg,hint:e._hint,label:e._label,hideLabel:e._hideLabel,touched:e._touched};return"_required"in e&&(l.required=e._required),"_readOnly"in e&&(l.readonly=e._readOnly),"_labelAlign"in e&&(l.labelAlign=e._labelAlign),"_accessKey"in e&&(l.accessKey=e._accessKey),"_shortKey"in e&&(l.shortKey=e._shortKey),l}const FieldControlStateWrapper=(e,l)=>{var{state:o}=e,t=tslib_es6.__rest(e,["state"]);return index.h(KolFieldControlFc,Object.assign({},getFieldControlProps(o),t),l)};exports.FieldControlStateWrapper=FieldControlStateWrapper;