@maggioli-design-system/magma 1.0.0-beta → 1.0.1

package/dist/types/common/aria.d.ts

@@ -1,5 +1,7 @@
 declare const unslugName: (name: string) => string;
 declare const setAttributeIfEmpty: (element: HTMLElement, attribute: string, value: string) => string;
+declare const removeAttributesIf: (element: HTMLElement, attribute: string, valueCheck: string | undefined, cleanAttributes: string | string[]) => boolean;
+declare const ifAttribute: (element: HTMLElement, attribute: string, valueCheck?: string) => boolean;
 declare const hashValue: (value: string) => string;
 declare const hashRandomValue: (value?: string) => string;
-export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };
+export { hashRandomValue, hashValue, removeAttributesIf, setAttributeIfEmpty, ifAttribute, unslugName, };

package/dist/types/common/date.d.ts

@@ -1,4 +1,4 @@
-import { ISO8601Date } from '@type/date';
+import { ISO8601Date } from "../type/date";
 declare const isISO8601Date: (dateString: string) => boolean;
 declare const sanitizeISO8601Date: (dateString: string) => ISO8601Date;
 export { sanitizeISO8601Date, isISO8601Date, };

package/dist/types/common/device.d.ts

@@ -0,0 +1,2 @@
+declare const isMobileDevice: () => boolean;
+export { isMobileDevice, };

package/dist/types/common/file.d.ts

@@ -1,5 +1,5 @@
-import { ExtensionInfo } from '@dictionary/file-extensions';
-import { ThemeFullVariantType } from '@type/variant';
+import { ExtensionInfo } from "../dictionary/file-extensions";
+import { ThemeFullVariantType } from "../type/variant";
 interface FileFormatsVariants {
     icon: string;
     variant: ThemeFullVariantType;

package/dist/types/common/locale.d.ts

@@ -9,9 +9,11 @@ export declare class Locale {
     language: string;
     config: LocaleConfig;
     closestElement: HTMLElement;
+    element: HTMLElement;
     constructor(configData?: LocaleConfig);
     set: (configData: LocaleConfig) => void;
-    lang: (element: HTMLElement) => string;
+    lang: (el: HTMLElement) => string;
+    update: (doc?: Document | ShadowRoot) => void;
     private pluralize;
     get: (tag: string | string[], context?: Record<string, string | number>) => string;
 }

package/dist/types/components/mds-accordion/mds-accordion.d.ts

@@ -1,4 +1,4 @@
-import { MdsAccordionItemEventDetail } from '@component/mds-accordion-item/meta/event-detail';
+import { MdsAccordionItemEventDetail } from "../mds-accordion-item/meta/event-detail";
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsAccordionEventDetail } from './meta/event-detail';
 /**

package/dist/types/components/mds-accordion-item/mds-accordion-item.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { TypographyTitleType } from '@type/typography';
+import { TypographyTitleType } from "../../type/typography";
 import { MdsAccordionItemEventDetail } from './meta/event-detail';
 /**
  * @slot default - Add contents like `text string`, `HTML elements` or `components` to this slot.

package/dist/types/components/mds-accordion-timer/mds-accordion-timer.d.ts

@@ -1,4 +1,4 @@
-import { MdsAccordionTimerItemEventDetail } from '@component/mds-accordion-timer-item/meta/event-detail';
+import { MdsAccordionTimerItemEventDetail } from "../mds-accordion-timer-item/meta/event-detail";
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsAccordionTimerEventDetail } from './meta/event-detail';
 /**

package/dist/types/components/mds-accordion-timer-item/mds-accordion-timer-item.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsAccordionTimerItemEventDetail } from './meta/event-detail';
-import { TypographyTitleType } from '@type/typography';
+import { TypographyTitleType } from "../../type/typography";
 /**
  * @slot default - Add content like `text string`, `HTML elements` or `components` to this slot
  * @part content - the content wrapper of the `default` slot

package/dist/types/components/mds-avatar/mds-avatar.d.ts

@@ -1,4 +1,4 @@
-import { ThemeFullVariantAvatarType, ToneMinimalVariantType } from '@type/variant';
+import { ThemeFullVariantAvatarType, ToneMinimalVariantType } from "../../type/variant";
 /**
  * @part icon - The selected icon of the avatar
  * @part wrapper - The wrapper which contains media displayed

package/dist/types/components/mds-badge/mds-badge.d.ts

@@ -1,5 +1,5 @@
-import { TypographyInfoType, TypographyReadType, TypographyVariants } from '@type/typography';
-import { ThemeFullVariantType, ToneVariantType } from '@type/variant';
+import { TypographyInfoType, TypographyReadType, TypographyVariants } from "../../type/typography";
+import { ThemeFullVariantType, ToneVariantType } from "../../type/variant";
 /**
  * @slot default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */

package/dist/types/components/mds-banner/mds-banner.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { ToneSimpleVariantType, ThemeVariantType } from '@type/variant';
+import { ToneSimpleVariantType, ThemeVariantType } from "../../type/variant";
 /**
  * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
@@ -9,6 +9,8 @@ export declare class MdsBanner {
     private actions;
     private km;
     private t;
+    language: string;
+    updateLang(): Promise<void>;
     /**
      * Sets the theme variant colors
      */

package/dist/types/components/mds-benchmark-bar/mds-benchmark-bar.d.ts

@@ -1,4 +1,4 @@
-import { ThemeVariantType } from '@type/variant';
+import { ThemeVariantType } from "../../type/variant";
 import { BenchmarkBarTypographyType } from './meta/types';
 /**
  * @slot default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.

package/dist/types/components/mds-bibliography/mds-bibliography.d.ts

@@ -1,5 +1,5 @@
 import { BibliographyFormatType, BibliographyRelationshipType } from './meta/types';
-import { TypographyInfoType, TypographyReadType, TypographyVariants } from '@type/typography';
+import { TypographyInfoType, TypographyReadType, TypographyVariants } from "../../type/typography";
 export declare class MdsBibliography {
     private separator;
     /**

package/dist/types/components/mds-breadcrumb/mds-breadcrumb.d.ts

@@ -1,12 +1,15 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsBreadcrumbEventDetail } from './meta/event-detail';
-import { MdsBreadcrumbItemEventDetail } from '@component/mds-breadcrumb-item/meta/event-detail';
+import { MdsBreadcrumbItemEventDetail } from "../mds-breadcrumb-item/meta/event-detail";
 /**
  * @slot default - Add `mds-breadcrumb-item` element/s.
  */
 export declare class MdsBreadcrumb {
     private element;
     private kb;
+    private t;
+    language: string;
+    updateLang(): Promise<void>;
     /**
      * Choose to display or not the back arrow button
      */
@@ -19,6 +22,7 @@ export declare class MdsBreadcrumb {
     private updateBackButton;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    componentWillRender(): void;
     disconnectedCallback(): void;
     activedEventHandler(event: CustomEvent<MdsBreadcrumbItemEventDetail>): void;
     private togglePrevious;

package/dist/types/components/mds-button/mds-button.d.ts

@@ -1,5 +1,5 @@
-import { ButtonIconPositionType, ButtonSizeType, ButtonTargetType, ButtonType, ButtonVariantType } from '@type/button';
-import { ToneVariantType } from '@type/variant';
+import { ButtonIconPositionType, ButtonSizeType, ButtonTargetType, ButtonType, ButtonVariantType } from "../../type/button";
+import { ToneVariantType } from "../../type/variant";
 /**
  * @slot default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  * @slot notification - Add `HTML elements` or `components`, it is **recommended** to use `mds-notification` element.

package/dist/types/components/mds-chip/mds-chip.d.ts

@@ -1,20 +1,20 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsChipEvent } from './meta/interface';
+import { ChipVariantType, ToneMinimalVariantType } from "../../type/variant";
 export declare class MdsChip {
     host: HTMLMdsChipElement;
     private km;
+    private t;
+    language: string;
+    updateLang(): Promise<void>;
     /**
      * Adds ARIA support to the element if has interaction
      */
-    readonly clickable?: boolean;
+    clickable?: boolean;
     /**
      * Shows the cross icon to perform cancel/delete action on element
      */
     readonly deletable?: boolean;
-    /**
-     * Sets the cross icon accessibility label to perform cancel/delete action on element
-     */
-    readonly deleteLabel?: string | undefined;
     /**
      * Sets the component disabled status
      */
@@ -30,7 +30,19 @@ export declare class MdsChip {
     /**
      * Sets the component selected
      */
-    selected: boolean;
+    selected?: boolean;
+    /**
+     * Sets if the component change is status to selected when is clicked
+     */
+    readonly selectable?: boolean;
+    /**
+     * Sets the color variant of the component
+     */
+    readonly variant?: ChipVariantType;
+    /**
+     * Sets the color variant tone of the component
+     */
+    readonly tone?: ToneMinimalVariantType;
     /**
      * Emits when the component's label is clicked
      */
@@ -39,14 +51,17 @@ export declare class MdsChip {
      * Emits when the component's delete button is clicked
      */
     deleteEvent: EventEmitter<MdsChipEvent>;
+    handleSelectableProp(newValue: boolean): void;
+    handleClickableProp(newValue: boolean): void;
+    handleDeletableProp(newValue: boolean): void;
     private onClickLabelHandler;
     private onDeleteHandler;
     private handleClickableKeyboard;
     private handleDeletableKeyboard;
     private handleClickableElement;
     private handleDeletableElement;
+    componentWillLoad(): void;
     componentDidLoad(): void;
-    componentDidUpdate(): void;
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/mds-chip/test/mds-chip.stories.d.ts

@@ -41,12 +41,38 @@ declare const _default: {
             };
             description: string;
         };
+        selectable: {
+            type: {
+                name: string;
+            };
+            description: string;
+        };
+        tone: {
+            type: {
+                name: string;
+            };
+            options: string[];
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        variant: {
+            type: {
+                name: string;
+            };
+            options: string[];
+            control: {
+                type: string;
+            };
+            description: string;
+        };
     };
 };
 export default _default;
 export declare const Default: any;
-export declare const selected: any;
+export declare const Selected: any;
 export declare const Icon: any;
-export declare const deletable: any;
-export declare const clickable: any;
-export declare const fullyInteractive: any;
+export declare const Deletable: any;
+export declare const Clickable: any;
+export declare const FullyInteractive: any;

package/dist/types/components/mds-dropdown/mds-dropdown.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { FloatingUIPlacement, FloatingUIStrategy } from '@type/floating-ui';
+import { FloatingUIPlacement, FloatingUIStrategy } from "../../type/floating-ui";
 import { MdsDropdownEventDetail } from './meta/event-detail';
 import { DropdownInteractionType } from './meta/types';
 /**

package/dist/types/components/mds-entity/mds-entity.d.ts

@@ -1,4 +1,4 @@
-import { ThemeFullVariantAvatarType, ToneMinimalVariantType } from '@type/variant';
+import { ThemeFullVariantAvatarType, ToneMinimalVariantType } from "../../type/variant";
 /**
  * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot default - Add `text string`, `HTML elements` or `components` to this slot.

package/dist/types/components/mds-file/mds-file.d.ts

@@ -1,8 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { ExtensionSuffixType } from '@type/file-types';
+import { ExtensionSuffixType } from "../../type/file-types";
 import { MdsFileEventDetail } from './meta/event-detail';
 export declare class MdsFile {
     private host;
+    private t;
+    language: string;
+    updateLang(): Promise<void>;
     private wasDownloaded;
     /**
      * Overrides the automatic filetype recongition by forcing the suffix to one of the available formats choosen
@@ -12,10 +15,6 @@ export declare class MdsFile {
      * Overrides the default filetype description
      */
     readonly description?: string;
-    /**
-     * Sets a label which is shown when the file is downloaded
-     */
-    readonly downloadedLabel?: string;
     /**
      * The filename shown as component title, is used to auto assign one of the filetype known in the filetype dictionary
      */

package/dist/types/components/mds-file-preview/mds-file-preview.d.ts

@@ -1,10 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { ExtensionSuffixType } from '@type/file-types';
+import { ExtensionSuffixType } from "../../type/file-types";
 import { MdsFilePreviewEventDetail } from './meta/event-detail';
-import { TypographyTruncateType } from '@type/text';
-import { ThemeFullVariantAvatarType } from '@type/variant';
+import { TypographyTruncateType } from "../../type/text";
+import { ThemeFullVariantAvatarType } from "../../type/variant";
 export declare class MdsFilePreview {
     host: HTMLMdsFilePreviewElement;
+    private t;
+    language: string;
+    updateLang(): Promise<void>;
     /**
      * Enables the cross icon to perform cancel/delete action on element
      */
@@ -61,7 +64,7 @@ export declare class MdsFilePreview {
      * Emits when the component is removed, returning file infos
      */
     deletedEvent: EventEmitter<MdsFilePreviewEventDetail>;
-    private getDefaultDescription;
+    private getDefaultKeyDescription;
     private onClickDeletedEvent;
     private onClickDownloadEvent;
     componentWillLoad(): void;

package/dist/types/components/mds-file-preview/meta/event-detail.d.ts

@@ -1,5 +1,5 @@
 export interface MdsFilePreviewEventDetail {
     extension: string;
     filename: string;
-    target: HTMLMdsFileElement;
+    target: HTMLMdsFilePreviewElement;
 }

package/dist/types/components/mds-filter/mds-filter.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsFilterEventDetail } from './meta/event-detail';
-import { MdsFilterItemEventDetail } from '@component/mds-filter-item/meta/event-detail';
+import { MdsFilterItemEventDetail } from "../mds-filter-item/meta/event-detail";
 /**
  * @slot default - Add `mds-filter-item` element/s.
  */

package/dist/types/components/mds-header/mds-header.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsHeaderEventDetail } from './meta/event-detail';
-import { HeaderBarMenuType, HeaderBarNavType } from '@type/header-bar';
+import { HeaderBarMenuType, HeaderBarNavType } from "../../type/header-bar";
 /**
  * @part menu - The container element of the modal
  * @slot default - Add `mds-header-bar` element/s.

package/dist/types/components/mds-header-bar/mds-header-bar.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { HeaderBarMenuType, HeaderBarNavType } from '@type/header-bar';
+import { HeaderBarMenuType, HeaderBarNavType } from "../../type/header-bar";
 /**
  * @part actions - Selects the element which wraps `nav` and `hamburger` parts
  * @part hamburger - Selects the `hamburger` menu action element

package/dist/types/components/mds-help/mds-help.d.ts

@@ -1,4 +1,4 @@
-import { FloatingUIPlacement } from '@type/floating-ui';
+import { FloatingUIPlacement } from "../../type/floating-ui";
 /**
   * @slot default - Add `text string` to this slot, **avoid** `HTML elements` or `components`.
   */

package/dist/types/components/mds-icon/services/icons-set.service.d.ts

@@ -1,12 +1,12 @@
 import { IconNameResolverFn, MdsIconSet } from '../meta/icon-set';
 declare class IconsSetController {
-    private _svgPath;
-    private _iconsSets;
     readonly _svgPathKey = "mdsIconSvgPath";
+    private readonly _iconsSets;
     private readonly _svgPathUpdate;
     private readonly cacheExp;
+    private readonly listeners;
+    private _svgPath;
     private memoryCache;
-    private listeners;
     constructor();
     addIconSet(name: string, path: string, resolveIconName: IconNameResolverFn): boolean;
     getIconSet(iconName: string): {
@@ -14,13 +14,29 @@ declare class IconsSetController {
     } | {
         set: MdsIconSet | undefined;
     };
+    /**
+     * recognize svg path pattern and set host and svgPath variable
+     *
+     * input path: https://www.abc.com/svg/path
+     * svgPath =  https://www.abc.com/svg/path
+     *
+     * input path: localhost:9000/svg/path
+     * svgPath = localhost:9000/svg/path
+     *
+     * input path: /svg/path
+     * svgPath = {window.location.host}/svg/path
+     *
+     * input path: svg/path
+     * throw error
+     *
+     */
     setSvgPath(svgPath: string): void;
     getSvgPath(): string;
     registerListener(callback: () => void): void;
     private isCacheAvailable;
     private setCache;
     private setUpListener;
-    fetchSvg(src: string): Promise<string>;
+    fetchSvg(name: string): Promise<string>;
 }
 export declare const IconsSetService: IconsSetController;
 export {};

package/dist/types/components/mds-icon/test/mds-icon.stories.d.ts

@@ -20,3 +20,4 @@ export declare const NameSVGIcon: any;
 export declare const ExternalSVG: any;
 export declare const NoIcon: any;
 export declare const StorageTest: any;
+export declare const ListIcons: any;

package/dist/types/components/mds-img/mds-img.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { CrossoriginType, ReferrerpolicyType } from './meta/types';
-import { LoadingType } from '@type/loading';
+import { LoadingType } from "../../type/loading";
 import { MdsImgEventDetail } from './meta/event-detail';
 export declare class MdsImg {
     private host;
@@ -10,6 +10,8 @@ export declare class MdsImg {
     private image;
     private srcsetConsumptionData?;
     private t;
+    language: string;
+    updateLang(): Promise<void>;
     /**
      * Specifies an alternate text for an image
      */

package/dist/types/components/mds-input/mds-input.d.ts

@@ -1,10 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { AutocompleteType } from '@type/autocomplete';
-import { InputTextType, InputControlsLayoutType, InputControlsIconType } from '@type/input';
-import { MdsInputEventDetail } from './meta/event-detail';
-import { ThemeStatusVariantType } from '@type/variant';
-import { TypographyInputType } from '@type/typography';
-import { LanguageType } from '@type/language';
+import { AutocompleteType } from "../../type/autocomplete";
+import { InputTextType, InputControlsLayoutType, InputControlsIconType, MdsInputEventDetail } from "../../type/input";
+import { ThemeStatusVariantType } from "../../type/variant";
+import { TypographyInputType } from "../../type/typography";
 export interface MdsInputInterface {
     autocomplete?: AutocompleteType;
     autofocus?: boolean;
@@ -35,9 +33,10 @@ export declare class MdsInput {
     private tabindex?;
     el: HTMLMdsInputElement;
     hasFocus: boolean;
-    language: LanguageType;
+    language: string;
     isPasswordVisible: boolean;
     private t;
+    updateLang(): Promise<void>;
     internals: ElementInternals;
     /**
      * Specifies whether the element should have autocomplete enabled

package/dist/types/components/mds-input/test/mds-input.stories.d.ts

@@ -189,4 +189,5 @@ export declare const Tip: any;
 export declare const Password: any;
 export declare const Search: any;
 export declare const Icon: any;
+export declare const TestLanguageChange: any;
 export declare const FormIntegration: any;

package/dist/types/components/mds-input-field/mds-input-field.d.ts

@@ -1,10 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { AutocompleteType } from '@type/autocomplete';
-import { InputControlsLayoutType, InputControlsIconType } from '@type/input';
-import { MdsInputEventDetail } from '@component/mds-input/meta/event-detail';
-import { MdsInputInterface } from '@component/mds-input/mds-input';
-import { ThemeStatusVariantType } from '@type/variant';
-import { TypographyInputType } from '@type/typography';
+import { AutocompleteType } from "../../type/autocomplete";
+import { InputControlsLayoutType, InputControlsIconType, MdsInputEventDetail } from "../../type/input";
+import { MdsInputInterface } from "../mds-input/mds-input";
+import { ThemeStatusVariantType } from "../../type/variant";
+import { TypographyInputType } from "../../type/typography";
 import { MdsValidatorFn, MdsValidationErrors } from './meta/validators';
 import { InputFieldType } from './meta/types';
 export interface MdsInputFieldInterface extends MdsInputInterface {

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

@@ -4,6 +4,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  */
 export declare class MdsInputRange {
     private progress;
+    private label;
     private inputElement;
     private element;
     internals: ElementInternals;

package/dist/types/components/mds-input-range/test/mds-input-range.stories.d.ts

@@ -4,28 +4,24 @@ declare const _default: {
         min: {
             type: {
                 name: string;
-                required: boolean;
             };
             description: string;
         };
         max: {
             type: {
                 name: string;
-                required: boolean;
             };
             description: string;
         };
         step: {
             type: {
                 name: string;
-                required: boolean;
             };
             description: string;
         };
         value: {
             type: {
                 name: string;
-                required: boolean;
             };
             description: string;
         };

package/dist/types/components/mds-input-select/mds-input-select.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { InputValue } from '@interface/input-value';
-import { ThemeStatusVariantType } from '@type/variant';
+import { MdsInputEventDetail } from "../../type/input";
+import { ThemeStatusVariantType } from "../../type/variant";
 /**
  * @part select - The select HTML element
  */
@@ -52,7 +52,7 @@ export declare class MdsInputSelect {
     /**
      * Emits an InputChangeEventDetail when the value of the input element changes
      */
-    changeEvent: EventEmitter<InputValue>;
+    changeEvent: EventEmitter<MdsInputEventDetail>;
     /**
      * Emits the change event when the component value changes
      */

package/dist/types/components/mds-input-switch/mds-input-switch.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { InputSwitchType, InputSwitchSizeType } from './meta/types';
 import { MdsInputSwitchEventDetail } from './meta/event-detail';
-import { TypographyInfoType, TypographyReadType, TypographyVariants } from '@type/typography';
+import { TypographyInfoType, TypographyReadType, TypographyVariants } from "../../type/typography";
 /**
  * @slot default - Put text string or elements here
  */
@@ -9,6 +9,7 @@ export declare class MdsInputSwitch {
     internals: ElementInternals;
     host: HTMLMdsInputSwitchElement;
     private km;
+    private label;
     dirty: boolean;
     /**
      * Sets or returns whether a checkbox should automatically

package/dist/types/components/mds-input-switch/meta/interfaces.d.ts

@@ -1,4 +1,4 @@
-import { InputValueType } from '@type/input';
+import { InputValueType } from "../../../type/input";
 export interface InputValue {
     value: InputValueType;
 }

package/dist/types/components/mds-input-tip-item/mds-input-tip-item.d.ts

@@ -1,7 +1,9 @@
-import { InputTipItemVariantType } from '@component/mds-input-tip-item/meta/types';
+import { InputTipItemVariantType } from './meta/types';
 export declare class MdsInputTipItem {
     private element;
     private t;
+    language: string;
+    updateLang(): Promise<void>;
     componentWillRender(): void;
     /**
      * Specifies the variant of the element