@mgdis/mg-components 6.16.0 → 6.18.0

package/dist/types/components/molecules/mg-fieldset/mg-fieldset.d.ts

@@ -0,0 +1,105 @@
+import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
+import { labelHeading } from '../inputs/mg-input/mg-input.conf';
+export declare class MgFieldset {
+    /************
+     * Internal *
+     ************/
+    private mgInputs;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgFieldsetElement;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     */
+    identifier: string;
+    /**
+     * Fieldset name
+     * If not set the value equals the identifier
+     */
+    name: string;
+    /**
+     * Fieldset legend
+     */
+    legend: string;
+    /**
+     * Define if legend is visible
+     */
+    legendHide: boolean;
+    /**
+     * Define legend heading, use to define legend with associated semantic
+     */
+    legendHeading?: labelHeading;
+    /**
+     * Define if legend border is visible.
+     */
+    legendBorderDisplay: boolean;
+    watchLegendBorderDisplay(newValue: MgFieldset['legendBorderDisplay']): void;
+    /**
+     * Define if inputs are readonly
+     */
+    readonly: boolean;
+    watchReadonly(newValue: MgFieldset['readonly']): void;
+    /**
+     * Define if inputs are disabled
+     */
+    disabled: boolean;
+    handleAttributeChange(): void;
+    /**
+     * Add a tooltip message next to the fieldset
+     */
+    tooltip?: string;
+    /**
+     * Add a help text under the fieldset, usually expected data format and example
+     */
+    helpText?: string;
+    /**
+     * Define custom error message to display
+     */
+    errorMessage?: string;
+    /**
+     * Define fieldset valid state
+     */
+    valid: boolean;
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /**
+     * Component is not a candidate for constraint validation.
+     * You can use this method to define the `errorMessage` and set the `valid` state to `false`.
+     * @param errorMessage - error message to display. Use a valid `string` to define an error or `undefined` to delete the error
+     */
+    setCustomValidity(errorMessage?: string): Promise<void>;
+    /**
+     * Display inputs error if it exists.
+     */
+    displayError(): Promise<void>;
+    /**
+     * Check if fieldset is valid
+     */
+    private checkValidity;
+    /**
+     * Set mgInputs
+     */
+    private setMgInputs;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad(): void;
+    /**
+     * Add slot listeners
+     */
+    componentDidLoad(): void;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
+}

package/dist/types/components/molecules/mg-form/mg-form.d.ts

@@ -92,7 +92,7 @@ export declare class MgForm {
      */
     formReset: EventEmitter<boolean>;
     /**
-     * Display input error if it exists.
+     * Display inputs/fieldsets errors if it exists.
      */
     displayError(): Promise<void>;
     /**

package/dist/types/components/molecules/mg-panel/mg-panel.d.ts

@@ -3,6 +3,7 @@ import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
 import { type ExpandToggleDisplayType, type TitlePositionType } from './mg-panel.conf';
 /**
  * @slot - Panel content
+ * @slot panel-title - Panel title content (replaces panel-title prop when used)
  * @slot header-right - Header right panel content
  */
 export declare class MgPanel {
@@ -27,7 +28,7 @@ export declare class MgPanel {
     /**
      * Panel title
      */
-    panelTitle: string;
+    panelTitle?: string;
     validatePanelTitle(newValue: MgPanel['panelTitle']): void;
     /**
      * Panel title pattern
@@ -42,6 +43,7 @@ export declare class MgPanel {
      * Define if panel title is editable
      */
     titleEditable: boolean;
+    validateTitleEditable(newValue: MgPanel['titleEditable']): void;
     /**
      * Define title position
      */
@@ -88,6 +90,11 @@ export declare class MgPanel {
     /************
      * Methods *
      ************/
+    /**
+     * Check if panel-title slot is used
+     * @returns true if slot is used
+     */
+    private hasPanelTitleSlot;
     /**
      * Toggle is editing state
      */

package/dist/types/components.d.ts

@@ -10,10 +10,10 @@ import { VariantStyleType, VariantType } from "./components/molecules/mg-alert/m
 import { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 import { ButtonType, SizeType, VariantType as VariantType1 } from "./components/atoms/mg-button/mg-button.conf";
 import { RadiusSizeType } from "./components/atoms/mg-card/mg-card.conf";
+import { labelHeading, TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 import { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 import { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 import { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
-import { TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 import { CheckboxItem, CheckboxType, CheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 import { Direction, Option } from "./types";
 import { RequestMappingType, ResponseMappingType } from "./components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf";
@@ -42,10 +42,10 @@ export { VariantStyleType, VariantType } from "./components/molecules/mg-alert/m
 export { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 export { ButtonType, SizeType, VariantType as VariantType1 } from "./components/atoms/mg-button/mg-button.conf";
 export { RadiusSizeType } from "./components/atoms/mg-card/mg-card.conf";
+export { labelHeading, TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 export { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 export { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 export { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
-export { TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 export { CheckboxItem, CheckboxType, CheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 export { Direction, Option } from "./types";
 export { RequestMappingType, ResponseMappingType } from "./components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf";
@@ -223,6 +223,62 @@ export namespace Components {
          */
         "fullWidth": boolean;
     }
+    interface MgFieldset {
+        /**
+          * Define if inputs are disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Display inputs error if it exists.
+         */
+        "displayError": () => Promise<void>;
+        /**
+          * Add a help text under the fieldset, usually expected data format and example
+         */
+        "helpText"?: string;
+        /**
+          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         */
+        "identifier": string;
+        /**
+          * Fieldset legend
+         */
+        "legend": string;
+        /**
+          * Define if legend border is visible.
+          * @default false
+         */
+        "legendBorderDisplay": boolean;
+        /**
+          * Define legend heading, use to define legend with associated semantic
+         */
+        "legendHeading"?: labelHeading;
+        /**
+          * Define if legend is visible
+          * @default false
+         */
+        "legendHide": boolean;
+        /**
+          * Fieldset name If not set the value equals the identifier
+          * @default this.identifier
+         */
+        "name": string;
+        /**
+          * Define if inputs are readonly
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Component is not a candidate for constraint validation. You can use this method to define the `errorMessage` and set the `valid` state to `false`.
+          * @param errorMessage - error message to display. Use a valid `string` to define an error or `undefined` to delete the error
+         */
+        "setCustomValidity": (errorMessage?: string) => Promise<void>;
+        /**
+          * Add a tooltip message next to the fieldset
+         */
+        "tooltip"?: string;
+    }
     interface MgForm {
         /**
           * Define `<form/>` element aria role see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
@@ -234,7 +290,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Display input error if it exists.
+          * Display inputs/fieldsets errors if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -328,10 +384,24 @@ export namespace Components {
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          */
         "identifier": string;
+        /**
+          * Display inputs after help-text and error message
+          * @default false
+         */
+        "inputsOnBottom"?: boolean;
         /**
           * Define input label
          */
         "label": string;
+        /**
+          * Define if label border is visible You must pair this mode with `labelOnTop`and `fieldset` class
+          * @default false
+         */
+        "labelBorderDisplay": boolean;
+        /**
+          * Define label heading, use to define label with associated semantic You must pair this mode with `labelOnTop`and `fieldset` class
+         */
+        "labelHeading"?: labelHeading;
         /**
           * Define if label is visible
           * @default false
@@ -434,8 +504,9 @@ export namespace Components {
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
           * @param errorMessage - the error message to display
+          * @param errorMessageLock - lock the error message and validity state
          */
-        "setError": (valid: MgInputCheckbox["valid"], errorMessage: string) => Promise<void>;
+        "setError": (valid: MgInputCheckbox["valid"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>;
         /**
           * Set focus on input.
          */
@@ -594,8 +665,9 @@ export namespace Components {
           * Set an error and display a custom error message. This method can be used to set the component's error state from its concombobox by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given concombobox. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
           * @param errorMessage - the error message to display
+          * @param errorMessageLock - lock the error message and validity state
          */
-        "setError": (valid: MgInputCombobox["valid"], errorMessage: string) => Promise<void>;
+        "setError": (valid: MgInputCombobox["valid"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>;
         /**
           * Set focus on input.
          */
@@ -686,8 +758,9 @@ export namespace Components {
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
           * @param errorMessage - the error message to display
+          * @param errorMessageLock - lock the error message and validity state
          */
-        "setError": (valid: MgInputDate["valid"], errorMessage: string) => Promise<void>;
+        "setError": (valid: MgInputDate["valid"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>;
         /**
           * Set focus on input.
          */
@@ -805,8 +878,9 @@ export namespace Components {
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
           * @param errorMessage - the error message to display
+          * @param errorMessageLock - lock the error message and validity state
          */
-        "setError": (valid: MgInputNumeric["valid"], errorMessage: string) => Promise<void>;
+        "setError": (valid: MgInputNumeric["valid"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>;
         /**
           * Set focus on input.
          */
@@ -915,8 +989,9 @@ export namespace Components {
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
           * @param errorMessage - the error message to display
+          * @param errorMessageLock - lock the error message and validity state
          */
-        "setError": (valid: MgInputPassword["valid"], errorMessage: string) => Promise<void>;
+        "setError": (valid: MgInputPassword["valid"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>;
         /**
           * Set focus on input.
          */
@@ -1007,8 +1082,9 @@ export namespace Components {
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
           * @param errorMessage - the error message to display
+          * @param errorMessageLock - lock the error message and validity state
          */
-        "setError": (valid: MgInputRadio["valid"], errorMessage: string) => Promise<void>;
+        "setError": (valid: MgInputRadio["valid"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>;
         /**
           * Set focus on input.
          */
@@ -1116,8 +1192,9 @@ export namespace Components {
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
           * @param errorMessage - the error message to display
+          * @param errorMessageLock - lock the error message and validity state
          */
-        "setError": (valid: MgInputRichTextEditor["valid"], errorMessage: string) => Promise<void>;
+        "setError": (valid: MgInputRichTextEditor["valid"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>;
         /**
           * Set focus on input.
          */
@@ -1222,8 +1299,9 @@ export namespace Components {
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
           * @param errorMessage - the error message to display
+          * @param errorMessageLock - lock the error message and validity state
          */
-        "setError": (valid: MgInputSelect["valid"], errorMessage: string) => Promise<void>;
+        "setError": (valid: MgInputSelect["valid"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>;
         /**
           * Set focus on input.
          */
@@ -1340,8 +1418,9 @@ export namespace Components {
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
           * @param errorMessage - the error message to display
+          * @param errorMessageLock - lock the error message and validity state
          */
-        "setError": (valid: MgInputText["valid"], errorMessage: string) => Promise<void>;
+        "setError": (valid: MgInputText["valid"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>;
         /**
           * Set focus on input.
          */
@@ -1465,8 +1544,9 @@ export namespace Components {
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
           * @param errorMessage - the error message to display
+          * @param errorMessageLock - lock the error message and validity state
          */
-        "setError": (valid: MgInputTextarea["valid"], errorMessage: string) => Promise<void>;
+        "setError": (valid: MgInputTextarea["valid"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>;
         /**
           * Set focus on input.
          */
@@ -1528,7 +1608,7 @@ export namespace Components {
          */
         "isIcon": boolean;
         /**
-          * Define if toggle have on/off style
+          * Define if toggle have on/off style, the left icon is hidden. Only available in combination with the "isIcon" prop.
           * @default false
          */
         "isOnOff": boolean;
@@ -1569,7 +1649,7 @@ export namespace Components {
           * @param valid - value indicating the validity
           * @param errorMessage - the error message to display
          */
-        "setError": (valid: boolean, errorMessage: string) => Promise<void>;
+        "setError": (valid: boolean, errorMessage?: string) => Promise<void>;
         /**
           * Set focus on input.
          */
@@ -1757,7 +1837,7 @@ export namespace Components {
         /**
           * Panel title
          */
-        "panelTitle": string;
+        "panelTitle"?: string;
         /**
           * Add box-shadow style
           * @default false
@@ -2119,6 +2199,12 @@ declare global {
         prototype: HTMLMgDividerElement;
         new (): HTMLMgDividerElement;
     };
+    interface HTMLMgFieldsetElement extends Components.MgFieldset, HTMLStencilElement {
+    }
+    var HTMLMgFieldsetElement: {
+        prototype: HTMLMgFieldsetElement;
+        new (): HTMLMgFieldsetElement;
+    };
     interface HTMLMgFormElementEventMap {
         "form-valid": HTMLMgFormElement['valid'];
         "form-submit": boolean;
@@ -2581,6 +2667,7 @@ declare global {
         "mg-character-left": HTMLMgCharacterLeftElement;
         "mg-details": HTMLMgDetailsElement;
         "mg-divider": HTMLMgDividerElement;
+        "mg-fieldset": HTMLMgFieldsetElement;
         "mg-form": HTMLMgFormElement;
         "mg-icon": HTMLMgIconElement;
         "mg-illustrated-message": HTMLMgIllustratedMessageElement;
@@ -2791,6 +2878,53 @@ declare namespace LocalJSX {
          */
         "fullWidth"?: boolean;
     }
+    interface MgFieldset {
+        /**
+          * Define if inputs are disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Add a help text under the fieldset, usually expected data format and example
+         */
+        "helpText"?: string;
+        /**
+          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         */
+        "identifier": string;
+        /**
+          * Fieldset legend
+         */
+        "legend": string;
+        /**
+          * Define if legend border is visible.
+          * @default false
+         */
+        "legendBorderDisplay"?: boolean;
+        /**
+          * Define legend heading, use to define legend with associated semantic
+         */
+        "legendHeading"?: labelHeading;
+        /**
+          * Define if legend is visible
+          * @default false
+         */
+        "legendHide"?: boolean;
+        /**
+          * Fieldset name If not set the value equals the identifier
+          * @default this.identifier
+         */
+        "name"?: string;
+        /**
+          * Define if inputs are readonly
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Add a tooltip message next to the fieldset
+         */
+        "tooltip"?: string;
+    }
     interface MgForm {
         /**
           * Define `<form/>` element aria role see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
@@ -2900,10 +3034,24 @@ declare namespace LocalJSX {
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          */
         "identifier": string;
+        /**
+          * Display inputs after help-text and error message
+          * @default false
+         */
+        "inputsOnBottom"?: boolean;
         /**
           * Define input label
          */
         "label": string;
+        /**
+          * Define if label border is visible You must pair this mode with `labelOnTop`and `fieldset` class
+          * @default false
+         */
+        "labelBorderDisplay"?: boolean;
+        /**
+          * Define label heading, use to define label with associated semantic You must pair this mode with `labelOnTop`and `fieldset` class
+         */
+        "labelHeading"?: labelHeading;
         /**
           * Define if label is visible
           * @default false
@@ -3998,7 +4146,7 @@ declare namespace LocalJSX {
          */
         "isIcon"?: boolean;
         /**
-          * Define if toggle have on/off style
+          * Define if toggle have on/off style, the left icon is hidden. Only available in combination with the "isIcon" prop.
           * @default false
          */
         "isOnOff"?: boolean;
@@ -4253,7 +4401,7 @@ declare namespace LocalJSX {
         /**
           * Panel title
          */
-        "panelTitle": string;
+        "panelTitle"?: string;
         /**
           * Add box-shadow style
           * @default false
@@ -4467,6 +4615,7 @@ declare namespace LocalJSX {
         "mg-character-left": MgCharacterLeft;
         "mg-details": MgDetails;
         "mg-divider": MgDivider;
+        "mg-fieldset": MgFieldset;
         "mg-form": MgForm;
         "mg-icon": MgIcon;
         "mg-illustrated-message": MgIllustratedMessage;
@@ -4515,6 +4664,7 @@ declare module "@stencil/core" {
             "mg-character-left": LocalJSX.MgCharacterLeft & JSXBase.HTMLAttributes<HTMLMgCharacterLeftElement>;
             "mg-details": LocalJSX.MgDetails & JSXBase.HTMLAttributes<HTMLMgDetailsElement>;
             "mg-divider": LocalJSX.MgDivider & JSXBase.HTMLAttributes<HTMLMgDividerElement>;
+            "mg-fieldset": LocalJSX.MgFieldset & JSXBase.HTMLAttributes<HTMLMgFieldsetElement>;
             "mg-form": LocalJSX.MgForm & JSXBase.HTMLAttributes<HTMLMgFormElement>;
             "mg-icon": LocalJSX.MgIcon & JSXBase.HTMLAttributes<HTMLMgIconElement>;
             "mg-illustrated-message": LocalJSX.MgIllustratedMessage & JSXBase.HTMLAttributes<HTMLMgIllustratedMessageElement>;

package/dist/types/stencil-public-runtime.d.ts

@@ -1,4 +1,5 @@
-declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -151,7 +152,13 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: string): CustomMethodDecorator<any>;
+    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+}
+export interface PropSerializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
+}
+export interface AttrDeserializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => any>;
 }
 export interface UserBuildConditionals {
     isDev: boolean;
@@ -233,6 +240,14 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
+/**
+ * Decorator to serialize a property to an attribute string.
+ */
+export declare const PropSerialize: PropSerializeDecorator;
+/**
+ * Decorator to deserialize an attribute string to a property.
+ */
+export declare const AttrDeserialize: AttrDeserializeDecorator;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
@@ -349,6 +364,28 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type MixinFactory = <TBase extends new (...args: any[]) => any>(base: TBase) => abstract new (...args: ConstructorParameters<TBase>) => any;
+/**
+ * Compose multiple mixin classes into a single constructor.
+ * The resulting class has the combined instance types of all mixed-in classes.
+ *
+ * Example:
+ * ```
+ * import { Mixin, MixinFactory } from '@stencil/core';
+ *
+ * const AWrap: MixinFactory = (Base) => {class A extends Base { propA = A }; return A;}
+ * const BWrap: MixinFactory = (Base) => {class B extends Base { propB = B }; return B;}
+ * const CWrap: MixinFactory = (Base) => {class C extends Base { propC = C }; return C;}
+ *
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
+ *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
+ * }
+ * ```
+ *
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
+ * @returns a class that that is composed from extending each of the provided classes in the order they were provided.
+ */
+export declare function Mixin<TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<InstanceType<ReturnType<TMixins[number]>>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports

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

@@ -5,7 +5,7 @@ export type Size = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge
 /**
  * Defines the possible values for variant
  */
-export type Variant = 'info' | 'success' | 'warning' | 'danger' | 'danger-alt' | 'primary' | 'secondary' | 'app' | 'light' | 'dark' | 'flat' | 'text-color' | 'link';
+export type Variant = 'info' | 'success' | 'warning' | 'danger' | 'danger-alt' | 'primary' | 'secondary' | 'app' | 'light' | 'dark' | 'flat' | 'text-color' | 'link' | 'neutral';
 /**
  * Defines the possible values for directions
  */