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

package/dist/types/components.d.ts

@@ -5,22 +5,20 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonTypePropType, ButtonVariantPropType, ColorPair, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, FixedColsPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, InternalButtonProps, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, VariantClassNamePropType } from "./schema";
+import { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonTypePropType, ButtonVariantPropType, ColorPair, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, FixedColsPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, InternalButtonProps, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, VariantClassNamePropType, VisibilityTogglePropType } from "./schema";
 import { AriaHasPopupPropType } from "./schema/props/aria-has-popup";
 import { ModalVariantPropType } from "./schema/props/variant/modal";
 import { LoadingType, OrientationPropType as OrientationPropType1, ProgressVariantType } from "./internal/props";
 import { InputCheckboxVariantPropType } from "./schema/props/variant-input-checkbox";
-import { PasswordVariantPropType } from "./schema/props/variant/password-variant";
 import { OrientationPropType } from "./schema/props/orientation";
 import { QuoteVariantType } from "./internal/props/variant-quote";
 import { SpinVariantType } from "./internal/props/variant-spin";
 import { HasCreateButtonPropType } from "./schema/props/has-create-button";
-export { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonTypePropType, ButtonVariantPropType, ColorPair, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, FixedColsPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, InternalButtonProps, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, VariantClassNamePropType } from "./schema";
+export { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonTypePropType, ButtonVariantPropType, ColorPair, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, FixedColsPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, InternalButtonProps, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, VariantClassNamePropType, VisibilityTogglePropType } from "./schema";
 export { AriaHasPopupPropType } from "./schema/props/aria-has-popup";
 export { ModalVariantPropType } from "./schema/props/variant/modal";
 export { LoadingType, OrientationPropType as OrientationPropType1, ProgressVariantType } from "./internal/props";
 export { InputCheckboxVariantPropType } from "./schema/props/variant-input-checkbox";
-export { PasswordVariantPropType } from "./schema/props/variant/password-variant";
 export { OrientationPropType } from "./schema/props/orientation";
 export { QuoteVariantType } from "./internal/props/variant-quote";
 export { SpinVariantType } from "./internal/props/variant-spin";
@@ -570,7 +568,7 @@ export namespace Components {
         "_hasCloser"?: boolean;
         /**
           * Defines the ID of the heading element. If not provided, an internal ID will be generated.
-          * @default nonce()
+          * @default createUniqueId('card-heading')
          */
         "_headingId"?: string;
         /**
@@ -686,6 +684,10 @@ export namespace Components {
           * Defines the value of the element.
          */
         "_value"?: string;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Clicks the primary interactive element inside this component.
          */
@@ -1161,6 +1163,10 @@ export namespace Components {
           * Defines the value of the element.
          */
         "_value"?: string;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Clicks the primary interactive element inside this component.
          */
@@ -1290,6 +1296,10 @@ export namespace Components {
           * Defines the value of the element.
          */
         "_value"?: Iso8601 | Date | null;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Clicks the primary interactive element inside this component.
          */
@@ -1434,6 +1444,10 @@ export namespace Components {
           * Defines the value of the element.
          */
         "_value"?: string;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Clicks the primary interactive element inside this component.
          */
@@ -1537,6 +1551,10 @@ export namespace Components {
           * @default false
          */
         "_touched"?: boolean;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Clicks the primary interactive element inside this component.
          */
@@ -1669,6 +1687,10 @@ export namespace Components {
           * Defines the value of the element.
          */
         "_value"?: number | NumberString | null;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Clicks the primary interactive element inside this component.
          */
@@ -1801,9 +1823,13 @@ export namespace Components {
         "_value"?: string;
         /**
           * Defines which variant should be used for presentation.
-          * @default 'default'
          */
-        "_variant"?: PasswordVariantPropType;
+        "_variant"?: VariantClassNamePropType;
+        /**
+          * Activates the show password button
+          * @default false
+         */
+        "_visibilityToggle"?: VisibilityTogglePropType;
         /**
           * Clicks the primary interactive element inside this component.
          */
@@ -1896,6 +1922,10 @@ export namespace Components {
           * @default null
          */
         "_value": StencilUnknown;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Clicks the primary interactive element inside this component.
          */
@@ -2006,6 +2036,10 @@ export namespace Components {
           * Defines the value of the element.
          */
         "_value"?: number | NumberString;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Clicks the primary interactive element inside this component.
          */
@@ -2149,6 +2183,10 @@ export namespace Components {
           * Defines the value of the element.
          */
         "_value"?: string;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Focuses the primary interactive element inside this component.
          */
@@ -3032,6 +3070,10 @@ export namespace Components {
           * Defines the value of the element.
          */
         "_value"?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Sets focus on the internal element.
          */
@@ -3136,6 +3178,10 @@ export namespace Components {
           * Defines the value of the input.
          */
         "_value"?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Clicks the primary interactive element inside this component.
          */
@@ -3246,6 +3292,10 @@ export namespace Components {
           * @default null
          */
         "_value": StencilUnknown;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Sets focus on the internal element.
          */
@@ -3717,6 +3767,10 @@ export namespace Components {
           * Defines the value of the element.
          */
         "_value"?: string;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Clicks the primary interactive element inside this component.
          */
@@ -3830,7 +3884,7 @@ export namespace Components {
         /**
           * Focuses the link element.
          */
-        "focus": () => Promise<any>;
+        "focus": () => Promise<void | undefined>;
         /**
           * Returns whether the tree item is expanded.
          */
@@ -4675,7 +4729,7 @@ declare global {
         /**
           * Focuses the link element.
          */
-        "focus": () => Promise<any>;
+        "focus": () => Promise<void | undefined>;
     }
     var HTMLKolTreeItemElement: {
         prototype: HTMLKolTreeItemElement;
@@ -5363,6 +5417,10 @@ declare namespace LocalJSX {
           * Defines the value of the element.
          */
         "_value"?: string;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     /**
      * The **Details** component allows additional information to be initially shown with a short introductory text,
@@ -5733,6 +5791,10 @@ declare namespace LocalJSX {
           * Defines the value of the element.
          */
         "_value"?: string;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     /**
      * The **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.
@@ -5846,6 +5908,10 @@ declare namespace LocalJSX {
           * Defines the value of the element.
          */
         "_value"?: Iso8601 | Date | null;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     /**
      * The **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.
@@ -5970,6 +6036,10 @@ declare namespace LocalJSX {
           * Defines the value of the element.
          */
         "_value"?: string;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     /**
      * The **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.
@@ -6057,6 +6127,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "_touched"?: boolean;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     /**
      * The **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.
@@ -6169,6 +6243,10 @@ declare namespace LocalJSX {
           * Defines the value of the element.
          */
         "_value"?: number | NumberString | null;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     /**
      * The **Password** input type creates an input field for passwords. The input is masked with dot symbols.
@@ -6285,9 +6363,13 @@ declare namespace LocalJSX {
         "_value"?: string;
         /**
           * Defines which variant should be used for presentation.
-          * @default 'default'
          */
-        "_variant"?: PasswordVariantPropType;
+        "_variant"?: VariantClassNamePropType;
+        /**
+          * Activates the show password button
+          * @default false
+         */
+        "_visibilityToggle"?: VisibilityTogglePropType;
     }
     /**
      * The **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.
@@ -6364,6 +6446,10 @@ declare namespace LocalJSX {
           * @default null
          */
         "_value"?: StencilUnknown;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     /**
      * The **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.
@@ -6458,6 +6544,10 @@ declare namespace LocalJSX {
           * Defines the value of the element.
          */
         "_value"?: number | NumberString;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     /**
      * The **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.
@@ -6585,6 +6675,10 @@ declare namespace LocalJSX {
           * Defines the value of the element.
          */
         "_value"?: string;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     interface KolKolibri {
         /**
@@ -7342,6 +7436,10 @@ declare namespace LocalJSX {
           * Defines the value of the element.
          */
         "_value"?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     interface KolSelectWc {
         /**
@@ -7434,6 +7532,10 @@ declare namespace LocalJSX {
           * Defines the value of the input.
          */
         "_value"?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     /**
      * The **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.
@@ -7528,6 +7630,10 @@ declare namespace LocalJSX {
           * @default null
          */
         "_value"?: StencilUnknown;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     interface KolSkeleton {
         /**
@@ -7943,6 +8049,10 @@ declare namespace LocalJSX {
           * Defines the value of the element.
          */
         "_value"?: string;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     /**
      * @deprecated Will be removed in the next major version. For more information, please refer to: https://github.com/public-ui/kolibri/issues/8372

package/dist/types/e2e/utils/setContentWithRetry.d.ts

@@ -0,0 +1,3 @@
+import type { E2EPage } from '@stencil/playwright';
+declare const setContentWithRetry: (page: Pick<E2EPage, "setContent" | "waitForTimeout">, html: string) => Promise<void>;
+export { setContentWithRetry };

package/dist/types/functional-components/FormField/FormField.d.ts

@@ -1,7 +1,7 @@
 import type { JSX } from '../../stencil-public-runtime';
 import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
 import type { JSXBase } from '../../stencil-public-runtime';
-import type { MaxLengthBehaviorPropType, MsgPropType, Stringified, TooltipAlignPropType } from '../../schema';
+import type { MaxLengthBehaviorPropType, MsgPropType, Stringified, TooltipAlignPropType, VariantClassNamePropType } from '../../schema';
 export type FormFieldProps = JSXBase.HTMLAttributes<HTMLElement> & {
     component?: 'div' | 'fieldset';
     id: string;
@@ -33,6 +33,7 @@ export type FormFieldProps = JSXBase.HTMLAttributes<HTMLElement> & {
     tooltipAlign?: TooltipAlignPropType;
     tooltipFloatingRef?: (el?: HTMLDivElement) => void;
     tooltipArrowRef?: (el?: HTMLDivElement) => void;
+    variant?: VariantClassNamePropType;
     formFieldLabelProps?: JSXBase.HTMLAttributes<Omit<HTMLLabelElement | HTMLLegendElement, 'id' | 'hidden' | 'htmlFor'>> & {
         component?: 'label' | 'legend';
     };

package/dist/types/schema/components/combobox.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, PropRequired, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched } from '../props';
+import type { MsgPropType, PropAccessKey, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropRequired, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
 import type { InputTypeOnDefault, KoliBriHIcons, Stringified, W3CInputValue } from '../types';
 type RequiredProps = PropLabelWithExpertSlot & PropSuggestions;
 type OptionalProps = {
@@ -8,7 +8,7 @@ type OptionalProps = {
     on: InputTypeOnDefault;
     placeholder: string;
     value: string;
-} & PropAccessKey & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropName & PropRequired & PropShortKey & PropSyncValueBySelector & PropTouched;
+} & PropAccessKey & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropName & PropRequired & PropShortKey & PropSyncValueBySelector & PropTouched & PropVariantClassName;
 type RequiredStates = {
     hasValue: boolean;
     hasClearButton: boolean;
@@ -18,7 +18,7 @@ type RequiredStates = {
 type OptionalStates = {
     on: InputTypeOnDefault;
     placeholder: string;
-} & PropAccessKey & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropName & PropRequired & PropMsg & PropShortKey & PropTouched;
+} & PropAccessKey & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropName & PropRequired & PropMsg & PropShortKey & PropTouched & PropVariantClassName;
 export type ComboboxProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type ComboboxStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type ComboboxWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

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

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropLabelWithExpertSlot, PropMsg, PropName, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched } from '../props';
+import type { MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropLabelWithExpertSlot, PropMsg, PropName, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
 import type { InputTypeOnDefault, KoliBriHIcons, Stringified, W3CInputValue } from '../types';
 import type { InternalButtonProps } from './button';
 type RequiredProps = PropLabelWithExpertSlot;
@@ -8,7 +8,7 @@ type OptionalProps = {
     on: InputTypeOnDefault;
     smartButton: Stringified<InternalButtonProps>;
     value: string;
-} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHideMsg & PropHint & PropHorizontalIcons & PropName & PropShortKey & PropSuggestions & PropSyncValueBySelector & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHideMsg & PropHint & PropHorizontalIcons & PropName & PropShortKey & PropSuggestions & PropSyncValueBySelector & PropTouched & PropVariantClassName;
 type RequiredStates = {
     id: string;
     suggestions: W3CInputValue[];
@@ -17,7 +17,7 @@ type OptionalStates = {
     on: InputTypeOnDefault;
     smartButton: InternalButtonProps;
     value: string;
-} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropMsg & PropName & PropShortKey & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropMsg & PropName & PropShortKey & PropTouched & PropVariantClassName;
 export type InputColorProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type InputColorStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type InputColorWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

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

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { InputDateTypePropType, MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropReadOnly, PropRequired, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched } from '../props';
+import type { InputDateTypePropType, MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropReadOnly, PropRequired, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
 import type { InputTypeOnDefault, Iso8601, KoliBriHIcons, NumberString, Stringified, W3CInputValue } from '../types';
 import type { InternalButtonProps } from './button';
 type RequiredProps = PropLabelWithExpertSlot;
@@ -12,7 +12,7 @@ type OptionalProps = {
     step: number | NumberString;
     type: InputDateTypePropType;
     value: Iso8601 | Date | null;
-} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHideMsg & PropHint & PropHorizontalIcons & PropName & PropReadOnly & PropRequired & PropSuggestions & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHideMsg & PropHint & PropHorizontalIcons & PropName & PropReadOnly & PropRequired & PropSuggestions & PropTouched & PropVariantClassName;
 type RequiredStates = {
     hasValue: boolean;
     suggestions: W3CInputValue[];
@@ -26,7 +26,7 @@ type OptionalStates = {
     smartButton: InternalButtonProps;
     step: number;
     value: Iso8601 | null;
-} & PropAccessKey & PropAutoComplete & PropHint & PropSyncValueBySelector & PropDisabled & PropHideLabel & KoliBriHIcons & PropMsg & PropName & PropReadOnly & PropRequired & PropShortKey & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropHint & PropSyncValueBySelector & PropDisabled & PropHideLabel & KoliBriHIcons & PropMsg & PropName & PropReadOnly & PropRequired & PropShortKey & PropTouched & PropVariantClassName;
 export type InputDateProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type InputDateStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type InputDateWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

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

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMaxLengthBehavior, PropMsg, PropMultiple, PropName, PropReadOnly, PropRequired, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched } from '../props';
+import type { MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMaxLengthBehavior, PropMsg, PropMultiple, PropName, PropReadOnly, PropRequired, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
 import type { InputTypeOnDefault, KoliBriHIcons, Stringified, W3CInputValue } from '../types';
 import type { InternalButtonProps } from './button';
 type RequiredProps = PropLabelWithExpertSlot;
@@ -11,7 +11,7 @@ type OptionalProps = {
     placeholder: string;
     smartButton: Stringified<InternalButtonProps>;
     value: string;
-} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropMaxLengthBehavior & PropMultiple & PropName & PropReadOnly & PropRequired & PropShortKey & PropSuggestions & PropSyncValueBySelector & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropMaxLengthBehavior & PropMultiple & PropName & PropReadOnly & PropRequired & PropShortKey & PropSuggestions & PropSyncValueBySelector & PropTouched & PropVariantClassName;
 type RequiredStates = {
     hasValue: boolean;
     suggestions: W3CInputValue[];
@@ -25,7 +25,7 @@ type OptionalStates = {
     placeholder: string;
     smartButton: InternalButtonProps;
     value: string;
-} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropMaxLengthBehavior & PropMsg & PropMultiple & PropName & PropReadOnly & PropRequired & PropShortKey & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropMaxLengthBehavior & PropMsg & PropMultiple & PropName & PropReadOnly & PropRequired & PropShortKey & PropTouched & PropVariantClassName;
 export type InputEmailProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type InputEmailStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type InputEmailWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

package/dist/types/schema/components/input-file.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, PropRequired, PropShortKey, PropSyncValueBySelector, PropTouched } from '../props';
+import type { MsgPropType, PropAccessKey, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropMultiple, PropName, PropRequired, PropShortKey, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
 import type { InputTypeOnDefault, KoliBriHIcons, Stringified } from '../types';
 import type { InternalButtonProps } from './button';
 type RequiredProps = PropLabelWithExpertSlot;
@@ -8,13 +8,13 @@ type OptionalProps = {
     msg: Stringified<MsgPropType>;
     on: InputTypeOnDefault;
     smartButton: Stringified<InternalButtonProps>;
-} & PropAccessKey & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropMultiple & PropName & PropRequired & PropShortKey & PropSyncValueBySelector & PropTouched;
+} & PropAccessKey & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropMultiple & PropName & PropRequired & PropShortKey & PropSyncValueBySelector & PropTouched & PropVariantClassName;
 type RequiredStates = PropId & PropLabelWithExpertSlot & PropHideMsg;
 type OptionalStates = {
     accept: string;
     on: InputTypeOnDefault;
     smartButton: InternalButtonProps;
-} & PropAccessKey & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropMsg & PropMultiple & PropName & PropRequired & PropShortKey & PropTouched;
+} & PropAccessKey & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropMsg & PropMultiple & PropName & PropRequired & PropShortKey & PropTouched & PropVariantClassName;
 export type InputFileProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type InputFileStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type InputFileWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

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

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { MsgPropType, PlaceholderPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropReadOnly, PropRequired, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched } from '../props';
+import type { MsgPropType, PlaceholderPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropReadOnly, PropRequired, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
 import type { InputTypeOnDefault, KoliBriHIcons, NumberString, Stringified, W3CInputValue } from '../types';
 import type { InternalButtonProps } from './button';
 type RequiredProps = PropLabelWithExpertSlot;
@@ -12,7 +12,7 @@ type OptionalProps = {
     smartButton: Stringified<InternalButtonProps>;
     step: number | NumberString;
     value: number | NumberString | null;
-} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHideMsg & PropHint & PropHorizontalIcons & PropName & PropReadOnly & PropRequired & PropSuggestions & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHideMsg & PropHint & PropHorizontalIcons & PropName & PropReadOnly & PropRequired & PropSuggestions & PropTouched & PropVariantClassName;
 type RequiredStates = {
     hasValue: boolean;
     suggestions: W3CInputValue[];
@@ -25,7 +25,7 @@ type OptionalStates = {
     smartButton: InternalButtonProps;
     step: number;
     value: number;
-} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropMsg & PropName & PropReadOnly & PropRequired & PropSyncValueBySelector & PropShortKey & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropMsg & PropName & PropReadOnly & PropRequired & PropSyncValueBySelector & PropShortKey & PropTouched & PropVariantClassName;
 export type InputNumberProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type InputNumberStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type InputNumberWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

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

@@ -1,6 +1,6 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHasCounter, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMaxLengthBehavior, PropMsg, PropName, PropReadOnly, PropRequired, PropShortKey, PropSyncValueBySelector, PropTouched } from '../props';
-import type { PropPasswordVariant } from '../props/variant/password-variant';
+import type { MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHasCounter, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMaxLengthBehavior, PropMsg, PropName, PropReadOnly, PropRequired, PropShortKey, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
+import { PropVisibilityToggle } from '../props/visibility-toggle';
 import type { InputTypeOnDefault, KoliBriHIcons, Stringified } from '../types';
 import type { InternalButtonProps } from './button';
 type RequiredProps = PropLabelWithExpertSlot;
@@ -12,7 +12,7 @@ type OptionalProps = {
     smartButton: Stringified<InternalButtonProps>;
     value: string;
     msg: Stringified<MsgPropType>;
-} & PropAccessKey & PropAutoComplete & PropPasswordVariant & PropDisabled & PropHasCounter & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropMaxLengthBehavior & PropName & PropReadOnly & PropRequired & PropShortKey & PropSyncValueBySelector & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHasCounter & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropMaxLengthBehavior & PropName & PropReadOnly & PropRequired & PropShortKey & PropSyncValueBySelector & PropTouched & PropVariantClassName & PropVisibilityToggle;
 type RequiredStates = {
     currentLength: number;
     currentLengthDebounced: number;
@@ -25,7 +25,7 @@ type OptionalStates = {
     placeholder: string;
     smartButton: InternalButtonProps;
     value: string | null;
-} & PropAccessKey & PropAutoComplete & PropPasswordVariant & PropDisabled & PropHasCounter & PropHideLabel & PropHint & KoliBriHIcons & PropMaxLengthBehavior & PropMsg & PropName & PropReadOnly & PropRequired & PropShortKey & PropSyncValueBySelector & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHasCounter & PropHideLabel & PropHint & KoliBriHIcons & PropMaxLengthBehavior & PropMsg & PropName & PropReadOnly & PropRequired & PropShortKey & PropSyncValueBySelector & PropTouched & PropVariantClassName & PropVisibilityToggle;
 export type InputPasswordProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type InputPasswordStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type InputPasswordWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

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

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { MsgPropType, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropRadioOptions, PropRequired, PropSyncValueBySelector, PropTooltipAlign, PropTouched } from '../props';
+import type { MsgPropType, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropRadioOptions, PropRequired, PropSyncValueBySelector, PropTooltipAlign, PropTouched, PropVariantClassName } from '../props';
 import type { PropOrientation } from '../props/orientation';
 import type { InputTypeOnDefault, RadioOption, StencilUnknown, Stringified } from '../types';
 type RequiredProps = PropLabelWithExpertSlot;
@@ -7,14 +7,14 @@ type OptionalProps = {
     msg: Stringified<MsgPropType>;
     on: InputTypeOnDefault;
     value: StencilUnknown;
-} & PropDisabled & PropHideLabel & PropHideMsg & PropHint & PropName & PropOrientation & PropRadioOptions & PropRequired & PropSyncValueBySelector & PropTouched & PropTooltipAlign;
+} & PropDisabled & PropHideLabel & PropHideMsg & PropHint & PropName & PropOrientation & PropRadioOptions & PropRequired & PropSyncValueBySelector & PropTouched & PropTooltipAlign & PropVariantClassName;
 type RequiredStates = {
     options: RadioOption<StencilUnknown>[];
 } & PropId & PropHideMsg & PropLabelWithExpertSlot & PropOrientation;
 type OptionalStates = {
     on: InputTypeOnDefault;
     value: StencilUnknown;
-} & PropDisabled & PropHideLabel & PropHint & PropMsg & PropName & PropRequired & PropTouched;
+} & PropDisabled & PropHideLabel & PropHint & PropMsg & PropName & PropRequired & PropTouched & PropVariantClassName;
 export type InputRadioProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type InputRadioStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type InputRadioWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

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

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched } from '../props';
+import type { MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMsg, PropName, PropShortKey, PropSuggestions, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
 import type { InputTypeOnDefault, KoliBriHIcons, NumberString, Stringified, W3CInputValue } from '../types';
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
@@ -9,7 +9,7 @@ type OptionalProps = {
     on: InputTypeOnDefault;
     step: number | NumberString;
     value: number | NumberString;
-} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropName & PropSuggestions & PropSyncValueBySelector & PropShortKey & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropName & PropSuggestions & PropSyncValueBySelector & PropShortKey & PropTouched & PropVariantClassName;
 type RequiredStates = {
     suggestions: W3CInputValue[];
 } & PropId & PropHideMsg & PropLabelWithExpertSlot;
@@ -19,7 +19,7 @@ type OptionalStates = {
     on: InputTypeOnDefault;
     step: number;
     value: number;
-} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropMsg & PropName & PropShortKey & PropTouched;
+} & PropAccessKey & PropAutoComplete & PropDisabled & PropHideLabel & PropHint & KoliBriHIcons & PropMsg & PropName & PropShortKey & PropTouched & PropVariantClassName;
 export type InputRangeProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type InputRangeStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type InputRangeWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;