@mgdis/mg-components 6.10.1 → 6.11.0

package/dist/components/mg-button2.js.map

@@ -1 +1 @@
-{"file":"mg-button2.js","mappings":"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","names":["__stencil_proxyCustomElement","ClassList","toString","isValidString","nextTick"],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","../styles/dist/components/mg-button.css?tag=mg-button&encapsulation=shadow","src/components/atoms/mg-button/mg-button.tsx"],"sourcesContent":["import type { Variant, Size } from '../../../types';\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['medium', 'large'] as const;\n\n/**\n * SizeType type from button sizes\n */\nexport type SizeType = Size & (typeof sizes)[number];\n\n/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/**\n * VariantType type from button variants\n */\nexport type VariantType = Variant & (typeof variants)[number];\n\n/**\n * List of all possibles button types\n */\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/**\n * ButtonType type from buttonTypes\n */\nexport type ButtonType = (typeof buttonTypes)[number];\n","/*!\n * @prop --mg-c-button-border-radius: Defines the border radius of the button. The default value is `--mg-b-size-radius`.\n * @prop --mg-c-button-border-top-width: Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-right-width: Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-bottom-width: Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-left-width: Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-radius-top-left: Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-top-right: Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-right: Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-left: Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-font-weight: Defines the font weight of the button. Unset by default, fallback on `normal`.\n * @prop --mg-c-button-icon-border-radius: Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`.\n */:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{/*!\n * @prop --mg-c-button-color-background-primary: Defines the background color for the primary variant button.\n * @prop --mg-c-button-color-border-primary: Defines the border color for the primary variant button.\n * @prop --mg-c-button-color-gradient-primary: Defines the gradient color for the primary variant button.\n * @prop --mg-c-button-color-text-primary: Defines the font color for the primary variant button.\n */border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{/*!\n * @prop --mg-c-button-color-background-secondary: Defines the background color for the secondary variant button.\n * @prop --mg-c-button-color-border-secondary: Defines the border color for the secondary variant button.\n * @prop --mg-c-button-color-gradient-secondary: Defines the gradient color for the secondary variant button.\n * @prop --mg-c-button-color-text-secondary: Defines the font color for the secondary variant button.\n */border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{/*!\n * @prop --mg-c-button-color-background-danger: Defines the background color for the danger variant button.\n * @prop --mg-c-button-color-border-danger: Defines the border color for the danger variant button.\n * @prop --mg-c-button-color-gradient-danger: Defines the gradient color for the danger variant button.\n * @prop --mg-c-button-color-text-danger: Defines the font color for the danger variant button.\n */border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{/*!\n * @prop --mg-c-button-color-background-info: Defines the background color for the info variant button.\n * @prop --mg-c-button-color-border-info: Defines the border color for the info variant button.\n * @prop --mg-c-button-color-gradient-info: Defines the gradient color for the info variant button.\n * @prop --mg-c-button-color-text-info: Defines the font color for the info variant button.\n */border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{/*!\n * @prop --mg-c-button-color-background-success: Defines the background color for the success variant button.\n * @prop --mg-c-button-color-border-success: Defines the border color for the success variant button.\n * @prop --mg-c-button-color-gradient-success: Defines the gradient color for the success variant button.\n * @prop --mg-c-button-color-text-success: Defines the font color for the success variant button.\n */border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{/*!\n * @prop --mg-c-button-color-background-warning: Defines the background color for the warning variant button.\n * @prop --mg-c-button-color-border-warning: Defines the border color for the warning variant button.\n * @prop --mg-c-button-color-gradient-warning: Defines the gradient color for the warning variant button.\n * @prop --mg-c-button-color-text-warning: Defines the font color for the warning variant button.\n */border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{/*!\n * @prop --mg-c-button-color-background-danger-alt: Defines the background color for the danger-alt variant button.\n * @prop --mg-c-button-color-border-danger-alt: Defines the border color for the danger-alt variant button.\n * @prop --mg-c-button-color-gradient-danger-alt: Defines the gradient color for the danger-alt variant button.\n * @prop --mg-c-button-color-text-danger-alt: Defines the font color for the danger-alt variant button.\n */border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}/*# sourceMappingURL=mg-button.css.map */\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType, SizeType, sizes } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport { Keys } from '../../../utils/events.utils';\n\n/**\n * @slot - Button content\n */\n@Component({\n  tag: 'mg-button',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n  shadow: true,\n})\nexport class MgButton {\n  /************\n   * Internal *\n   ************/\n\n  private onClickElementFn = null;\n  private readonly classDisabled = 'mg-c-button--disabled';\n  private readonly classLoading = 'mg-c-button--loading';\n  private readonly classFullWidth = 'mg-c-button--full-width';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgButtonElement;\n\n  /**\n   * Define button variant\n   */\n  @Prop({ mutable: true }) variant: VariantType = 'primary';\n  @Watch('variant')\n  validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n    // validate new value\n    if (!variants.includes(newValue)) {\n      if ((newValue as string) === '') {\n        // Reactive framework like VUE render with `\"\"` when prop is update to undefined\n        this.variant = variants[0];\n        return;\n      }\n      throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-button--${newValue}`);\n    }\n  }\n\n  /**\n   * aria-label\n   * In case button text is not explicit enough\n   */\n  @Prop() label?: string;\n\n  /**\n   * Define button type\n   */\n  @Prop() type?: ButtonType;\n\n  /**\n   * Define button size\n   */\n  @Prop() size: SizeType = 'medium';\n  @Watch('size')\n  validateSize(newValue: MgButton['size'], oldValue?: MgButton['size']): void {\n    // validate new value\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<mg-button> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-button--${newValue}`);\n      this.setIconSize();\n    }\n  }\n\n  /**\n   * Set button to full-width\n   */\n  @Prop() fullWidth = false;\n  @Watch('fullWidth')\n  validateFullWidth(newValue: MgButton['fullWidth']): void {\n    if (newValue && this.isIcon) {\n      throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n    } else if (newValue) {\n      this.classCollection.add(this.classFullWidth);\n    } else {\n      this.classCollection.delete(this.classFullWidth);\n    }\n  }\n\n  /**\n   * Define form id to attach button with.\n   * If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n   */\n  @Prop() form?: string;\n\n  /**\n   * Disable button\n   */\n  @Prop({ mutable: true }) disabled?: boolean;\n  @Watch('disabled')\n  disabledHandler(isDisabled: MgButton['disabled']): void {\n    // Remove loading when enable\n    // Will be set back onclick\n    if (!isDisabled && this.disableOnClick) {\n      this.loading = false;\n    }\n    // Manage if onclick\n    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n    // apply style\n    if (isDisabled) {\n      this.classCollection.add(this.classDisabled);\n    } else {\n      this.classCollection.delete(this.classDisabled);\n    }\n\n    // emit value update\n    this.disabledChange.emit(isDisabled);\n  }\n  /**\n   * Define if button is round.\n   * Used for icon button.\n   */\n  @Prop() isIcon = false;\n  @Watch('isIcon')\n  watchIsIcon(newValue: boolean): void {\n    if (newValue) {\n      this.classCollection.add(`mg-c-button--icon`);\n      if (!isValidString(this.label)) {\n        throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n      }\n    }\n    this.setIconSize();\n  }\n\n  /**\n   * Option to set input disable on click, in order to prevent multi-click.\n   * Parent component have to remove the attribute 'disabled' when the process ends.\n   */\n  @Prop() disableOnClick = false;\n\n  /**\n   * Define if button is loading, default to false.\n   * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n   * It's required to reset to false when action/promise in parent is done to stop the loading state\n   */\n  @State() loading = false;\n  @Watch('loading')\n  loadingHandler(newValue: MgButton['loading']): void {\n    // we add loading style if it newvalue is true else we remove it\n    if (newValue) {\n      this.classCollection.add(this.classLoading);\n    } else {\n      this.classCollection.delete(this.classLoading);\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n  /**\n   * Emmited event when disabled change\n   */\n  @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n  /**\n   * Trigger actions onClick event\n   * @param event - click event\n   */\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) event.stopPropagation();\n    // Used to prevent multi-click.\n    else if (this.disableOnClick) {\n      this.loading = true;\n      this.disabled = true;\n    }\n  };\n\n  /**\n   * Handle onKeydown event\n   * @param event - keyboard event\n   */\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n    } else if (!this.disabled && [Keys.ENTER, Keys.NUMPADENTER, Keys.SPACE].includes(event.key)) {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Handle onKeyup event\n   * @param event - keyboard event\n   */\n  private handleKeyup = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Set child `<mg-icon>` element `size` prop to follow the current `size` prop\n   */\n  private setIconSize = (): void => {\n    if (this.size === 'medium') {\n      this.element.querySelector('mg-icon[size]')?.removeAttribute('size');\n    } else if (this.isIcon) {\n      this.element.querySelector('mg-icon')?.setAttribute('size', this.size);\n    }\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateFullWidth(this.fullWidth);\n    this.validateSize(this.size);\n    this.watchIsIcon(this.isIcon);\n\n    // Store the onclick fn\n    this.onClickElementFn = this.element.onclick;\n    this.disabledHandler(this.disabled);\n  }\n\n  /**\n   * Add listners\n   */\n  componentDidLoad(): void {\n    nextTick(() => {\n      const closestForm = this.element.closest('form') || this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n      // submit buttons should trigger form submition;\n      if (closestForm && ['submit', undefined].includes(this.type)) {\n        this.element.addEventListener('click', () => {\n          closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n        });\n      }\n    });\n  }\n\n  /**\n   * Render component\n   * @returns html element\n   */\n  render(): HTMLElement {\n    return (\n      <Host\n        role=\"button\"\n        tabIndex={0}\n        type={this.type}\n        form={this.form}\n        full-width={this.fullWidth}\n        aria-label={this.label}\n        aria-disabled={this.disabled?.toString()}\n        onClick={this.handleClick}\n        onKeyup={this.handleKeyup}\n        onKeydown={this.handleKeydown}\n      >\n        <div class={this.classCollection.join()}>\n          {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n          <div class=\"mg-c-button__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-button2.js","mappings":"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","names":["__stencil_proxyCustomElement","ClassList","toString","isValidString","nextTick"],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","../styles/dist/components/mg-button.css?tag=mg-button&encapsulation=shadow","src/components/atoms/mg-button/mg-button.tsx"],"sourcesContent":["import type { Variant, Size } from '../../../types';\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['medium', 'large'] as const;\n\n/**\n * SizeType type from button sizes\n */\nexport type SizeType = Size & (typeof sizes)[number];\n\n/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/**\n * VariantType type from button variants\n */\nexport type VariantType = Variant & (typeof variants)[number];\n\n/**\n * List of all possibles button types\n */\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/**\n * ButtonType type from buttonTypes\n */\nexport type ButtonType = (typeof buttonTypes)[number];\n","/*!\n * @prop --mg-c-button-border-radius: Defines the border radius of the button. The default value is `--mg-b-size-radius`.\n * @prop --mg-c-button-border-top-width: Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-right-width: Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-bottom-width: Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-left-width: Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-radius-top-left: Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-top-right: Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-right: Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-left: Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-font-weight: Defines the font weight of the button. Unset by default, fallback on `normal`.\n * @prop --mg-c-button-icon-border-radius: Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`.\n */:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{/*!\n * @prop --mg-c-button-color-background-primary: Defines the background color for the primary variant button.\n * @prop --mg-c-button-color-border-primary: Defines the border color for the primary variant button.\n * @prop --mg-c-button-color-gradient-primary: Defines the gradient color for the primary variant button.\n * @prop --mg-c-button-color-text-primary: Defines the font color for the primary variant button.\n */border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{/*!\n * @prop --mg-c-button-color-background-secondary: Defines the background color for the secondary variant button.\n * @prop --mg-c-button-color-border-secondary: Defines the border color for the secondary variant button.\n * @prop --mg-c-button-color-gradient-secondary: Defines the gradient color for the secondary variant button.\n * @prop --mg-c-button-color-text-secondary: Defines the font color for the secondary variant button.\n */border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{/*!\n * @prop --mg-c-button-color-background-danger: Defines the background color for the danger variant button.\n * @prop --mg-c-button-color-border-danger: Defines the border color for the danger variant button.\n * @prop --mg-c-button-color-gradient-danger: Defines the gradient color for the danger variant button.\n * @prop --mg-c-button-color-text-danger: Defines the font color for the danger variant button.\n */border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{/*!\n * @prop --mg-c-button-color-background-info: Defines the background color for the info variant button.\n * @prop --mg-c-button-color-border-info: Defines the border color for the info variant button.\n * @prop --mg-c-button-color-gradient-info: Defines the gradient color for the info variant button.\n * @prop --mg-c-button-color-text-info: Defines the font color for the info variant button.\n */border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{/*!\n * @prop --mg-c-button-color-background-success: Defines the background color for the success variant button.\n * @prop --mg-c-button-color-border-success: Defines the border color for the success variant button.\n * @prop --mg-c-button-color-gradient-success: Defines the gradient color for the success variant button.\n * @prop --mg-c-button-color-text-success: Defines the font color for the success variant button.\n */border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{/*!\n * @prop --mg-c-button-color-background-warning: Defines the background color for the warning variant button.\n * @prop --mg-c-button-color-border-warning: Defines the border color for the warning variant button.\n * @prop --mg-c-button-color-gradient-warning: Defines the gradient color for the warning variant button.\n * @prop --mg-c-button-color-text-warning: Defines the font color for the warning variant button.\n */border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{/*!\n * @prop --mg-c-button-color-background-danger-alt: Defines the background color for the danger-alt variant button.\n * @prop --mg-c-button-color-border-danger-alt: Defines the border color for the danger-alt variant button.\n * @prop --mg-c-button-color-gradient-danger-alt: Defines the gradient color for the danger-alt variant button.\n * @prop --mg-c-button-color-text-danger-alt: Defines the font color for the danger-alt variant button.\n */border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}/*# sourceMappingURL=mg-button.css.map */\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType, SizeType, sizes } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport { Keys } from '../../../utils/events.utils';\n\n/**\n * @slot - Button content\n */\n@Component({\n  tag: 'mg-button',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n  shadow: true,\n})\nexport class MgButton {\n  /************\n   * Internal *\n   ************/\n\n  private onClickElementFn = null;\n  private readonly classDisabled = 'mg-c-button--disabled';\n  private readonly classLoading = 'mg-c-button--loading';\n  private readonly classFullWidth = 'mg-c-button--full-width';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgButtonElement;\n\n  /**\n   * Define button variant\n   */\n  @Prop({ mutable: true }) variant: VariantType = 'primary';\n  @Watch('variant')\n  validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n    // validate new value\n    if (!variants.includes(newValue)) {\n      if ((newValue as string) === '') {\n        // Reactive framework like VUE render with `\"\"` when prop is update to undefined\n        this.variant = variants[0];\n        return;\n      }\n      throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-button--${newValue}`);\n    }\n  }\n\n  /**\n   * aria-label\n   * In case button text is not explicit enough\n   */\n  @Prop() label?: string;\n\n  /**\n   * Define button type\n   */\n  @Prop() type?: ButtonType;\n\n  /**\n   * Define button size\n   */\n  @Prop() size: SizeType = 'medium';\n  @Watch('size')\n  validateSize(newValue: MgButton['size'], oldValue?: MgButton['size']): void {\n    // validate new value\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<mg-button> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-button--${newValue}`);\n      this.setIconSize();\n    }\n  }\n\n  /**\n   * Set button to full-width\n   */\n  @Prop() fullWidth = false;\n  @Watch('fullWidth')\n  validateFullWidth(newValue: MgButton['fullWidth']): void {\n    if (newValue && this.isIcon) {\n      throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n    } else if (newValue) {\n      this.classCollection.add(this.classFullWidth);\n    } else {\n      this.classCollection.delete(this.classFullWidth);\n    }\n  }\n\n  /**\n   * Define form id to attach button with.\n   * If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n   */\n  @Prop() form?: string;\n\n  /**\n   * Disable button\n   */\n  @Prop({ mutable: true }) disabled?: boolean;\n  @Watch('disabled')\n  disabledHandler(isDisabled: MgButton['disabled']): void {\n    // Remove loading when enable\n    // Will be set back onclick\n    if (!isDisabled && this.disableOnClick) {\n      this.loading = false;\n    }\n    // Manage if onclick\n    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n    // apply style\n    if (isDisabled) {\n      this.classCollection.add(this.classDisabled);\n    } else {\n      this.classCollection.delete(this.classDisabled);\n    }\n\n    // emit value update\n    this.disabledChange.emit(isDisabled);\n  }\n  /**\n   * Define if button is round.\n   * Used for icon button.\n   */\n  @Prop() isIcon = false;\n  @Watch('isIcon')\n  watchIsIcon(newValue: boolean): void {\n    if (newValue) {\n      this.classCollection.add(`mg-c-button--icon`);\n      if (!isValidString(this.label)) {\n        throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n      }\n    }\n    this.setIconSize();\n  }\n\n  /**\n   * Option to set input disable on click, in order to prevent multi-click.\n   * Parent component have to remove the attribute 'disabled' when the process ends.\n   */\n  @Prop() disableOnClick = false;\n\n  /**\n   * Define if button is loading, default to false.\n   * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n   * It's required to reset to false when action/promise in parent is done to stop the loading state\n   */\n  @State() loading = false;\n  @Watch('loading')\n  loadingHandler(newValue: MgButton['loading']): void {\n    // we add loading style if it newvalue is true else we remove it\n    if (newValue) {\n      this.classCollection.add(this.classLoading);\n    } else {\n      this.classCollection.delete(this.classLoading);\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n  /**\n   * Emmited event when disabled change\n   */\n  @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n  /**\n   * Trigger actions onClick event\n   * @param event - click event\n   */\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) event.stopPropagation();\n    // Used to prevent multi-click.\n    else if (this.disableOnClick) {\n      this.loading = true;\n      this.disabled = true;\n    }\n  };\n\n  /**\n   * Handle onKeydown event\n   * @param event - keyboard event\n   */\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n    } else if (!this.disabled && [Keys.ENTER, Keys.NUMPADENTER, Keys.SPACE].includes(event.key)) {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Handle onKeyup event\n   * @param event - keyboard event\n   */\n  private handleKeyup = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Set child `<mg-icon>` element `size` prop to follow the current `size` prop\n   */\n  private setIconSize = (): void => {\n    if (this.size === 'medium') {\n      this.element.querySelector('mg-icon[size]')?.removeAttribute('size');\n    } else if (this.isIcon) {\n      this.element.querySelector('mg-icon')?.setAttribute('size', this.size);\n    }\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateFullWidth(this.fullWidth);\n    this.validateSize(this.size);\n    this.watchIsIcon(this.isIcon);\n\n    // Store the onclick fn\n    this.onClickElementFn = this.element.onclick;\n    this.disabledHandler(this.disabled);\n  }\n\n  /**\n   * Add listners\n   */\n  componentDidLoad(): void {\n    nextTick(() => {\n      const closestForm = this.element.closest('form') || this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n      // submit buttons should trigger form submition;\n      if (closestForm && ['submit', undefined].includes(this.type)) {\n        this.element.addEventListener('click', () => {\n          closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n        });\n      }\n    });\n  }\n\n  /**\n   * Render component\n   * @returns html element\n   */\n  render(): HTMLElement {\n    return (\n      <Host\n        role=\"button\"\n        tabIndex={this.element.getAttribute('tabindex') || 0}\n        type={this.type}\n        form={this.form}\n        full-width={this.fullWidth}\n        aria-label={this.label}\n        aria-disabled={this.disabled?.toString()}\n        onClick={this.handleClick}\n        onKeyup={this.handleKeyup}\n        onKeydown={this.handleKeydown}\n      >\n        <div class={this.classCollection.join()}>\n          {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n          <div class=\"mg-c-button__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-character-left2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
-import { D as Dt, X as Xt } from './index.es.js';
+import { B as Bt, Y as Yt } from './index.es.js';
 
 const mgCharacterLeftCss = ".mg-u-visually-hidden.sc-mg-character-left{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*.sc-mg-character-left:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*.sc-mg-character-left{animation:none !important;transition:none !important}}mg-character-left.sc-mg-character-left{display:block}";
 
@@ -14,13 +14,13 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft e
         this.characters = '';
     }
     watchIdentifier(newValue) {
-        if (newValue !== undefined && !Dt(newValue)) {
-            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        if (newValue !== undefined && !Bt(newValue)) {
+            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateMaxlength(newValue) {
         if (typeof newValue !== 'number') {
-            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Yt(newValue)}.`);
         }
     }
     /*************

package/dist/components/mg-details.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { q as qe } from './index.es.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
-const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
+const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
 
 const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
     constructor() {
@@ -42,6 +42,10 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
     componentWillLoad() {
         this.validateTitles(this.toggleClosed);
         this.validateTitles(this.toggleOpened);
+        // Check if summary slot is empty
+        const summarySlot = this.element.querySelector('[slot="summary"]');
+        this.isEmptySummary = summarySlot === null || !qe(summarySlot.textContent);
+        // Add event listener to prevent default action on summary click
         this.element.addEventListener('click', (event) => {
             if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
                 event.preventDefault();
@@ -53,7 +57,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: 'e43aa4f4262d7006b9fdd0e75666649498081d55', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '050d5c0a645a017aaa784a4034201122b27238f0' }, h("slot", { key: 'e0d7ed83952bdd74a23ecabe93c4d0c922cda286', name: "summary" }), h("span", { key: '27238089072f0f0ca8f3263ec39e41291ab89907', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'f1702911d70e2a95ecaac17a7a0c43a075ea8c18', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '6854f4ecd77d04e297b807060a0d064401d6537f', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '85e57b346ff8327d31f92a1e86c42fd8f131f6dc', class: "mg-c-details__details" }, h("slot", { key: 'bd016ab29d695bb1ccd99b9fd402ed23bbdc19ea', name: "details" }))));
+        return (h("details", { key: '7ec633056f7e127154b9d8f30f77bd9d03a78591', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '4947a7a5d1971feb4f7b27c5bc161b0599b640c1' }, h("slot", { key: '6505ae282f5cc53ac3b5f924caee6347e958b03f', name: "summary" }), h("span", { key: 'fcf391abf5a99f3ff9f5a006698e9ef646ca159e', class: "mg-c-details__toggle" }, h("mg-icon", { key: '5d02b782ce1f762612ae5881cd85d65680addaa9', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '0dbd12e051714756a633146a99303088cbab4fa7', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '607ae907cce5efd3fa56d9ed62cf9f4091abf262', class: "mg-c-details__details" }, h("slot", { key: '0e1eda9ec27c618aee1929727676d9450e457b42', name: "details" }))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-details.js.map

@@ -1 +1 @@
-{"file":"mg-details.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,k3CAAk3C;;MCY13CA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;;AAyCE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE3B;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAWzC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,MAAW;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI;AACnC,SAAC;AAuCF;AAvEC,IAAA,cAAc,CAAC,QAAgB,EAAA;AAC7B,QAAA,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;AAC5B,YAAA,MAAM,IAAI,KAAK,CACb,CAAA,yHAAA,EAA4H,IAAI,CAAC,YAAY,CAAA,sBAAA,EAAyB,IAAI,CAAC,YAAY,CAAA,GAAA,CAAK,CAC7L;;;AAcL,IAAA,cAAc,CAAC,QAAiB,EAAA;AAC9B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAepC;;AAEe;AAEf;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC;AACtC,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC;QACtC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAA2C,KAAI;YACrF,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,uDAAuD,CAAC,KAAK,IAAI,EAAE;gBAC1F,KAAK,CAAC,cAAc,EAAE;;AAE1B,SAAC,CAAC;;AAGJ;;;AAGG;IACH,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,cAAc,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAA,EAClI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAQ,CAAA,EAC5B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAY,CAAA,EACzI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,EAAG,EAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,CACpH,CACC,EACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails","__stencil_proxyCustomElement","isValidString"],"sources":["../styles/dist/components/mg-details.css?tag=mg-details&encapsulation=shadow","src/components/molecules/mg-details/mg-details.tsx"],"sourcesContent":[".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media(width < 43.75rem){.mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}/*# sourceMappingURL=mg-details.css.map */\n","import { Component, Event, EventEmitter, h, Prop, Watch, Element } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/**\n * @slot summary - Summary content\n * @slot details - Details content\n */\n@Component({\n  tag: 'mg-details',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-details.css',\n  shadow: true,\n})\nexport class MgDetails {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private details: HTMLDetailsElement;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgDetailsElement;\n\n  /**\n   * Displayed title when details are closed\n   */\n  @Prop() toggleClosed!: string;\n\n  /**\n   * Displayed title when details are opened\n   */\n  @Prop() toggleOpened!: string;\n  @Watch('toggleClosed')\n  @Watch('toggleOpened')\n  validateTitles(newValue: string): void {\n    if (!isValidString(newValue)) {\n      throw new Error(\n        `<mg-details> prop \"toggleClosed\" and \"toggleOpened\" is required and must be a valid string. Passed value: \"toggleClosed='${this.toggleClosed}'\" and \"toggleOpened='${this.toggleOpened}'\".`,\n      );\n    }\n  }\n\n  /**\n   * Hide summary element\n   */\n  @Prop() hideSummary = false;\n\n  /**\n   * Define if details are diplayed\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: boolean): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgDetailsElement['expanded']>;\n\n  /**\n   * Handle details toggle\n   */\n  private handleToggle = (): void => {\n    this.expanded = this.details.open;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateTitles(this.toggleClosed);\n    this.validateTitles(this.toggleOpened);\n    this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }) => {\n      if (event.target.closest('[slot=\"summary\"] mg-button, mg-button[slot=\"summary\"]') !== null) {\n        event.preventDefault();\n      }\n    });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <details class=\"mg-c-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n        <summary>\n          <slot name=\"summary\"></slot>\n          <span class=\"mg-c-details__toggle\">\n            <mg-icon icon=\"chevron-up\" class={{ 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n          </span>\n        </summary>\n        <div class=\"mg-c-details__details\">\n          <slot name=\"details\"></slot>\n        </div>\n      </details>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-details.js","mappings":"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","names":["MgDetails","__stencil_proxyCustomElement","isValidString"],"sources":["../styles/dist/components/mg-details.css?tag=mg-details&encapsulation=shadow","src/components/molecules/mg-details/mg-details.tsx"],"sourcesContent":[".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media(width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}/*# sourceMappingURL=mg-details.css.map */\n","import { Component, Event, EventEmitter, h, Prop, Watch, Element } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/**\n * @slot summary - Summary content\n * @slot details - Details content\n */\n@Component({\n  tag: 'mg-details',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-details.css',\n  shadow: true,\n})\nexport class MgDetails {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private details: HTMLDetailsElement;\n  private isEmptySummary: boolean;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgDetailsElement;\n\n  /**\n   * Displayed title when details are closed\n   */\n  @Prop() toggleClosed!: string;\n\n  /**\n   * Displayed title when details are opened\n   */\n  @Prop() toggleOpened!: string;\n  @Watch('toggleClosed')\n  @Watch('toggleOpened')\n  validateTitles(newValue: string): void {\n    if (!isValidString(newValue)) {\n      throw new Error(\n        `<mg-details> prop \"toggleClosed\" and \"toggleOpened\" is required and must be a valid string. Passed value: \"toggleClosed='${this.toggleClosed}'\" and \"toggleOpened='${this.toggleOpened}'\".`,\n      );\n    }\n  }\n\n  /**\n   * Hide summary element\n   */\n  @Prop() hideSummary = false;\n\n  /**\n   * Define if details are diplayed\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: boolean): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgDetailsElement['expanded']>;\n\n  /**\n   * Handle details toggle\n   */\n  private handleToggle = (): void => {\n    this.expanded = this.details.open;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateTitles(this.toggleClosed);\n    this.validateTitles(this.toggleOpened);\n\n    // Check if summary slot is empty\n    const summarySlot = this.element.querySelector('[slot=\"summary\"]');\n    this.isEmptySummary = summarySlot === null || !isValidString(summarySlot.textContent);\n\n    // Add event listener to prevent default action on summary click\n    this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }) => {\n      if (event.target.closest('[slot=\"summary\"] mg-button, mg-button[slot=\"summary\"]') !== null) {\n        event.preventDefault();\n      }\n    });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <details\n        class={{ 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }}\n        onToggle={this.handleToggle}\n        open={this.expanded}\n        ref={(el: HTMLDetailsElement) => (this.details = el)}\n      >\n        <summary>\n          <slot name=\"summary\"></slot>\n          <span class=\"mg-c-details__toggle\">\n            <mg-icon icon=\"chevron-up\" class={{ 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n          </span>\n        </summary>\n        <div class=\"mg-c-details__details\">\n          <slot name=\"details\"></slot>\n        </div>\n      </details>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-form.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { Z as Zt, H as Ht, D as Dt, X as Xt } from './index.es.js';
+import { D as Dt, a as qt, B as Bt, Y as Yt } from './index.es.js';
 import { i as initLocales } from './index2.js';
 
 /**
@@ -27,7 +27,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = Zt('mg-form');
+        this.identifier = Dt('mg-form');
         /**
          * Input name
          * If not set the value equals the identifier
@@ -48,7 +48,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-form']);
+        this.classCollection = new qt(['mg-c-form']);
         /**
          * Define required message based on mg-inputs required elements
          */
@@ -136,18 +136,18 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         };
     }
     watchIdentifier(newValue) {
-        if (!Dt(newValue)) {
-            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        if (!Bt(newValue)) {
+            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateRequiredMessage(newValue) {
         if (newValue && !requiredMessageStatus.includes(newValue)) {
-            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateAriaRole(newValue) {
         if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
     }
     handlelabelOnTop(newValue) {

package/dist/components/mg-icon2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { H as Ht, X as Xt } from './index.es.js';
+import { a as qt, Y as Yt } from './index.es.js';
 
 /**
  * List of all possibles sizes
@@ -34,7 +34,7 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class MgIcon extends HTMLElement
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-icon']);
+        this.classCollection = new qt(['mg-c-icon']);
         /**
          * Method to set default varianStyle props
          * needeed has stencil doesn't know that props is mutated when updated in prop watcher
@@ -65,7 +65,7 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class MgIcon extends HTMLElement
     }
     validateIcon(newValue, oldValue) {
         if (!Object.keys(icons).includes(newValue)) {
-            throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -81,7 +81,7 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class MgIcon extends HTMLElement
             newValue = 'medium';
         }
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -93,7 +93,7 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class MgIcon extends HTMLElement
     validateVariant(newValue, oldValue) {
         if (newValue !== undefined) {
             if (!variants.includes(newValue))
-                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Xt(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Yt(newValue)}.`);
             else {
                 this.setDefaultVariantStyle();
                 if (oldValue !== undefined)
@@ -105,7 +105,7 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class MgIcon extends HTMLElement
     validateVariantStyle(newValue, oldValue) {
         if (newValue !== undefined) {
             if (!variantStyles.includes(newValue))
-                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${Xt(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${Yt(newValue)}.`);
             else {
                 if (oldValue !== undefined)
                     this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);

package/dist/components/mg-illustrated-message.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { H as Ht, X as Xt, B as Bt } from './index.es.js';
+import { a as qt, Y as Yt, J as Jt } from './index.es.js';
 
 /**
  * List of all possibles sizes
@@ -28,11 +28,11 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-illustrated-message']);
+        this.classCollection = new qt(['mg-c-illustrated-message']);
     }
     watchSize(newValue, oldValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -43,7 +43,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
     }
     watchDirection(newValue, oldValue) {
         if (newValue !== undefined && !directions.includes(newValue)) {
-            throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else if (newValue === 'horizontal') {
             this.classCollection.add('mg-c-illustrated-message--direction-horizontal');
@@ -66,7 +66,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
         if (slottedDetails.length === 0 && slottedTitle === null) {
             throw new Error('<mg-illustrated-message> Slot "title" or "details" must be present.');
         }
-        else if (slottedTitle !== null && !Bt(slottedTitle, headingTags)) {
+        else if (slottedTitle !== null && !Jt(slottedTitle, headingTags)) {
             throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
         }
         else if (slottedIllustrations.length !== 1) {

package/dist/components/mg-input-checkbox.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { H as Ht, Y as Yt, q as qe, X as Xt } from './index.es.js';
+import { a as qt, V as Vt, q as qe, Y as Yt } from './index.es.js';
 import { d as defineCustomElement$a, S as SectionKind, a as MgInputCheckboxList, c as checkboxTypes } from './mg-input-checkbox-paginated2.js';
 import { d as defineCustomElement$b, b as classFieldset, e as classVerticalList, c as classReadonly, a as classDisabled } from './mg-input2.js';
 import { i as initLocales } from './index2.js';
@@ -86,7 +86,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         /**
          * Component classes
          */
-        this.classCollection = new Ht([this.baseClassName, classFieldset]);
+        this.classCollection = new qt([this.baseClassName, classFieldset]);
         /**
          * Formated value to display in list
          */
@@ -204,7 +204,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => Yt(item.title).includes(Yt(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => Vt(item.title).includes(Vt(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -298,12 +298,12 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
             this.valueChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateType(newValue) {
         if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
-            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${Yt(newValue)}.`);
         }
         else if (newValue === undefined) {
             this.mode = 'auto';