@maggioli-design-system/mds-progress 2.9.2 → 2.10.1

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-04-18T15:17:33",
+  "timestamp": "2024-09-13T08:54:04",
   "compiler": {
     "name": "node",
     "version": "20.10.0"
@@ -9,16 +9,17 @@
     "fsNamespace": "mds-progress",
     "components": 1,
     "entries": 1,
-    "bundles": 83,
+    "bundles": 92,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 42,
+        "files": 44,
         "generatedFiles": [
           "./dist/collection/common/aria.js",
           "./dist/collection/common/file.js",
           "./dist/collection/common/icon.js",
           "./dist/collection/common/keyboard-manager.js",
+          "./dist/collection/common/locale.js",
           "./dist/collection/common/unit.js",
           "./dist/collection/common/yugop/core.js",
           "./dist/collection/common/yugop/index.js",
@@ -30,7 +31,6 @@
           "./dist/collection/components/mds-progress/mds-progress.js",
           "./dist/collection/components/mds-progress/meta/dictionary.js",
           "./dist/collection/components/mds-progress/meta/types.js",
-          "./dist/collection/components/mds-progress/test/mds-progress.e2e.js",
           "./dist/collection/components/mds-progress/test/mds-progress.stories.js",
           "./dist/collection/dictionary/autocomplete.js",
           "./dist/collection/dictionary/button.js",
@@ -52,7 +52,9 @@
           "./dist/collection/type/floating-ui.js",
           "./dist/collection/type/form-rel.js",
           "./dist/collection/type/input.js",
+          "./dist/collection/type/language.js",
           "./dist/collection/type/loading.js",
+          "./dist/collection/type/preference.js",
           "./dist/collection/type/text.js",
           "./dist/collection/type/typography.js",
           "./dist/collection/type/variant-file-format.js",
@@ -71,19 +73,22 @@
       },
       {
         "name": "dist-lazy",
-        "files": 35,
+        "files": 42,
         "generatedFiles": [
-          "./dist/cjs/index-ef941864.js",
+          "./dist/cjs/app-globals-3a1e7e63.js",
+          "./dist/cjs/index-2c37527a.js",
           "./dist/cjs/index.cjs.js",
           "./dist/cjs/loader.cjs.js",
           "./dist/cjs/mds-progress.cjs.entry.js",
           "./dist/cjs/mds-progress.cjs.js",
-          "./dist/esm-es5/index-370f577b.js",
+          "./dist/esm-es5/app-globals-0f993ce5.js",
+          "./dist/esm-es5/index-2c599ac6.js",
           "./dist/esm-es5/index.js",
           "./dist/esm-es5/loader.js",
           "./dist/esm-es5/mds-progress.entry.js",
           "./dist/esm-es5/mds-progress.js",
-          "./dist/esm/index-370f577b.js",
+          "./dist/esm/app-globals-0f993ce5.js",
+          "./dist/esm/index-2c599ac6.js",
           "./dist/esm/index.js",
           "./dist/esm/loader.js",
           "./dist/esm/mds-progress.entry.js",
@@ -93,21 +98,25 @@
           "./dist/mds-progress/index.esm.js",
           "./dist/mds-progress/mds-progress.esm.js",
           "./dist/mds-progress/mds-progress.js",
-          "./dist/mds-progress/p-20cc5857.system.entry.js",
+          "./dist/mds-progress/p-247bfa7b.system.js",
+          "./dist/mds-progress/p-313d3f72.js",
           "./dist/mds-progress/p-50ea2036.system.js",
-          "./dist/mds-progress/p-87430859.js",
-          "./dist/mds-progress/p-91249106.system.js",
-          "./dist/mds-progress/p-b8ddb760.entry.js",
-          "./dist/mds-progress/p-bf3c5077.system.js",
+          "./dist/mds-progress/p-56ba5cbf.system.js",
+          "./dist/mds-progress/p-63b6c1a0.system.entry.js",
+          "./dist/mds-progress/p-a9121660.entry.js",
+          "./dist/mds-progress/p-e1255160.js",
+          "./dist/mds-progress/p-ecdde885.system.js",
           "./www/build/index.esm.js",
           "./www/build/mds-progress.esm.js",
           "./www/build/mds-progress.js",
-          "./www/build/p-20cc5857.system.entry.js",
+          "./www/build/p-247bfa7b.system.js",
+          "./www/build/p-313d3f72.js",
           "./www/build/p-50ea2036.system.js",
-          "./www/build/p-87430859.js",
-          "./www/build/p-91249106.system.js",
-          "./www/build/p-b8ddb760.entry.js",
-          "./www/build/p-bf3c5077.system.js"
+          "./www/build/p-56ba5cbf.system.js",
+          "./www/build/p-63b6c1a0.system.entry.js",
+          "./www/build/p-a9121660.entry.js",
+          "./www/build/p-e1255160.js",
+          "./www/build/p-ecdde885.system.js"
         ]
       },
       {
@@ -140,12 +149,12 @@
         "components": [
           "mds-progress"
         ],
-        "bundleId": "p-b8ddb760",
-        "fileName": "p-b8ddb760.entry.js",
+        "bundleId": "p-a9121660",
+        "fileName": "p-a9121660.entry.js",
         "imports": [
-          "p-87430859.js"
+          "p-313d3f72.js"
         ],
-        "originalByteSize": 7305
+        "originalByteSize": 13025
       }
     ],
     "esm": [
@@ -157,9 +166,9 @@
         "bundleId": "mds-progress",
         "fileName": "mds-progress.entry.js",
         "imports": [
-          "index-370f577b.js"
+          "index-2c599ac6.js"
         ],
-        "originalByteSize": 7309
+        "originalByteSize": 13029
       }
     ],
     "es5": [
@@ -171,9 +180,9 @@
         "bundleId": "mds-progress",
         "fileName": "mds-progress.entry.js",
         "imports": [
-          "index-370f577b.js"
+          "index-2c599ac6.js"
         ],
-        "originalByteSize": 7309
+        "originalByteSize": 13029
       }
     ],
     "system": [
@@ -182,12 +191,12 @@
         "components": [
           "mds-progress"
         ],
-        "bundleId": "p-20cc5857.system",
-        "fileName": "p-20cc5857.system.entry.js",
+        "bundleId": "p-63b6c1a0.system",
+        "fileName": "p-63b6c1a0.system.entry.js",
         "imports": [
-          "p-bf3c5077.system.js"
+          "p-ecdde885.system.js"
         ],
-        "originalByteSize": 7764
+        "originalByteSize": 13490
       }
     ],
     "commonjs": [
@@ -199,9 +208,9 @@
         "bundleId": "mds-progress.cjs",
         "fileName": "mds-progress.cjs.entry.js",
         "imports": [
-          "index-ef941864.js"
+          "index-2c37527a.js"
         ],
-        "originalByteSize": 7368
+        "originalByteSize": 13094
       }
     ]
   },
@@ -477,27 +486,32 @@
             {
               "name": "--mds-progress-background",
               "docs": "Sets the background-color of the component",
-              "annotation": "prop"
+              "annotation": "prop",
+              "mode": "$"
             },
             {
               "name": "--mds-progress-color",
               "docs": "Sets the background-color of the progress",
-              "annotation": "prop"
+              "annotation": "prop",
+              "mode": "$"
             },
             {
               "name": "--mds-progress-duration",
               "docs": "Sets the duration of the progress bar animation",
-              "annotation": "prop"
+              "annotation": "prop",
+              "mode": "$"
             },
             {
               "name": "--mds-progress-radius",
               "docs": "Sets the border-radius of the component",
-              "annotation": "prop"
+              "annotation": "prop",
+              "mode": "$"
             },
             {
               "name": "--mds-progress-thickness",
               "docs": "Sets the thickness of the progress bar",
-              "annotation": "prop"
+              "annotation": "prop",
+              "mode": "$"
             }
           ],
           "docs": {
@@ -544,7 +558,7 @@
           "hasVdomXlink": false,
           "hasVdomClass": true,
           "hasVdomFunctional": false,
-          "hasVdomKey": false,
+          "hasVdomKey": true,
           "hasVdomListener": false,
           "hasVdomPropOrAttr": true,
           "hasVdomRef": false,
@@ -554,6 +568,7 @@
           "hasWatchCallback": true,
           "isPlain": false,
           "htmlAttrNames": [
+            "key",
             "aria-valuemax",
             "aria-valuemin",
             "aria-valuenow",
@@ -578,7 +593,7 @@
   ],
   "componentGraph": {
     "sc-mds-progress": [
-      "p-87430859.js"
+      "p-313d3f72.js"
     ]
   },
   "sourceGraph": {
@@ -586,6 +601,7 @@
     "./src/common/file.ts": [],
     "./src/common/icon.ts": [],
     "./src/common/keyboard-manager.ts": [],
+    "./src/common/locale.ts": [],
     "./src/common/unit.ts": [],
     "./src/common/yugop/core.ts": [
       "./src/common/yugop/utils/math",
@@ -606,7 +622,6 @@
     "./src/components/mds-progress/mds-progress.tsx": [],
     "./src/components/mds-progress/meta/dictionary.ts": [],
     "./src/components/mds-progress/meta/types.ts": [],
-    "./src/components/mds-progress/test/mds-progress.e2e.ts": [],
     "./src/components/mds-progress/test/mds-progress.stories.tsx": [
       "./src/components/mds-progress/meta/dictionary"
     ],
@@ -633,7 +648,9 @@
     "./src/type/floating-ui.ts": [],
     "./src/type/form-rel.ts": [],
     "./src/type/input.ts": [],
+    "./src/type/language.ts": [],
     "./src/type/loading.ts": [],
+    "./src/type/preference.ts": [],
     "./src/type/text.ts": [],
     "./src/type/typography.ts": [],
     "./src/type/variant-file-format.ts": [],

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

@@ -0,0 +1,17 @@
+type LocaleConfig = {
+    el?: Record<string, string | string[]>;
+    en: Record<string, string | string[]>;
+    es?: Record<string, string | string[]>;
+    it?: Record<string, string | string[]>;
+};
+export declare class Locale {
+    rollbackLanguage: string;
+    language: string;
+    config: LocaleConfig;
+    closestElement: HTMLElement;
+    constructor(configData: LocaleConfig);
+    lang: (element: HTMLElement) => void;
+    private pluralize;
+    get: (tag: string | string[], context?: Record<string, string | number>) => string;
+}
+export {};

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

@@ -768,6 +768,7 @@ export declare namespace JSXBase {
         hrefLang?: string;
         hreflang?: string;
         media?: string;
+        ping?: string;
         rel?: string;
         target?: string;
         referrerPolicy?: ReferrerPolicy;
@@ -794,7 +795,6 @@ export declare namespace JSXBase {
         cite?: string;
     }
     interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         formAction?: string;
@@ -921,8 +921,6 @@ export declare namespace JSXBase {
         autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         capture?: string;
         checked?: boolean;
         crossOrigin?: string;
@@ -979,8 +977,6 @@ export declare namespace JSXBase {
         popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         challenge?: string;
         disabled?: boolean;
         form?: string;
@@ -993,7 +989,6 @@ export declare namespace JSXBase {
     interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
     }
     interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
         value?: string | string[] | number;
@@ -1104,7 +1099,6 @@ export declare namespace JSXBase {
     interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
         name?: string;
     }
     interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1129,7 +1123,6 @@ export declare namespace JSXBase {
         type?: string;
     }
     interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         multiple?: boolean;
@@ -1164,8 +1157,6 @@ export declare namespace JSXBase {
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         cols?: number;
         disabled?: boolean;
         form?: string;
@@ -1218,6 +1209,8 @@ export declare namespace JSXBase {
     interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
         innerHTML?: string;
         accessKey?: string;
+        autoFocus?: boolean;
+        autofocus?: boolean | string;
         class?: string | {
             [className: string]: boolean;
         };

package/dist/types/type/language.d.ts

@@ -0,0 +1 @@
+export type LanguageType = 'auto' | `${Lowercase<string>}${Lowercase<string>}` | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`;

package/dist/types/type/preference.d.ts

@@ -0,0 +1,2 @@
+export type UIPreferenceType = 'animation' | 'consumption' | 'contrast' | 'theme' | 'language';
+export type ConsumptionModeType = 'high' | 'medium' | 'low';

package/documentation.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2024-04-18T15:04:37",
+  "timestamp": "2024-09-13T08:12:14",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.10.0",
-    "typescriptVersion": "5.3.3"
+    "version": "4.21.0",
+    "typescriptVersion": "5.5.3"
   },
   "components": [
     {
@@ -326,7 +326,7 @@
       "path": "src/components/mds-chip/meta/interface.ts"
     },
     "src/components/mds-dropdown/meta/types.ts::DropdownInteractionType": {
-      "declaration": "export type DropdownInteractionType =\n  | 'click'\n  | 'mouseover'",
+      "declaration": "export type DropdownInteractionType =\n  | 'click'\n  | 'none'\n  | 'mouseover'",
       "docstring": "",
       "path": "src/components/mds-dropdown/meta/types.ts"
     },
@@ -375,26 +375,6 @@
       "docstring": "",
       "path": "src/components/mds-filter-item/meta/event-detail.ts"
     },
-    "src/components/mds-form/meta/types.ts::CharacterSetType": {
-      "declaration": "export type CharacterSetType =\n  | '8859-1'\n  | 'ansi'\n  | 'ascii'\n  | 'utf-8'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::FormAutocompleteType": {
-      "declaration": "export type FormAutocompleteType =\n  | 'off'\n  | 'on'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::EnctypeType": {
-      "declaration": "export type EnctypeType =\n  | 'application/x-www-form-urlencoded'\n  | 'multipart/form-data'\n  | 'text/plain'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::FormMethodType": {
-      "declaration": "export type FormMethodType =\n  | 'get'\n  | 'post'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
     "src/components/mds-header-bar/meta/types.ts::MenuType": {
       "declaration": "export type MenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
       "docstring": "",
@@ -505,11 +485,26 @@
       "docstring": "",
       "path": "src/components/mds-input-switch/meta/event-detail.ts"
     },
+    "src/components/mds-input-tip/meta/types.ts::InputTipPositionType": {
+      "declaration": "export type InputTipPositionType =\n  | 'top'\n  | 'bottom'",
+      "docstring": "",
+      "path": "src/components/mds-input-tip/meta/types.ts"
+    },
+    "src/components/mds-input-tip-item/meta/types.ts::InputTipItemVariantType": {
+      "declaration": "export type InputTipItemVariantType =\n  | 'required'\n  | 'required-success'\n  | 'disabled'\n  | 'readonly'\n  | 'text'",
+      "docstring": "",
+      "path": "src/components/mds-input-tip-item/meta/types.ts"
+    },
     "src/components/mds-input-upload/meta/types.ts::AttachmentSort": {
       "declaration": "type AttachmentSort =\n  'status' |\n  'date'",
       "docstring": "",
       "path": "src/components/mds-input-upload/meta/types.ts"
     },
+    "src/components/mds-input-upload/meta/types.ts::FileError": {
+      "declaration": "interface FileError {\n  filename: string,\n  errorMessage: string,\n}",
+      "docstring": "",
+      "path": "src/components/mds-input-upload/meta/types.ts"
+    },
     "src/type/typography.ts::TypographyType": {
       "declaration": "export type TypographyType =\n  | 'action'\n  | 'caption'\n  | 'snippet'\n  | 'detail'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'hack'\n  | 'label'\n  | 'option'\n  | 'paragraph'\n  | 'tip'",
       "docstring": "",
@@ -540,6 +535,46 @@
       "docstring": "",
       "path": "src/components/mds-paginator/meta/event-detail.ts"
     },
+    "src/components/mds-pref-animation/meta/types.ts::AnimationModeType": {
+      "declaration": "export type AnimationModeType =\n  | 'reduce'\n  | 'no-preference'\n  | 'system'",
+      "docstring": "",
+      "path": "src/components/mds-pref-animation/meta/types.ts"
+    },
+    "src/event-detail/preference.ts::MdsPrefChangeEventDetail": {
+      "declaration": "export interface MdsPrefChangeEventDetail {\n  preference: UIPreferenceType\n}",
+      "docstring": "",
+      "path": "src/event-detail/preference.ts"
+    },
+    "src/type/preference.ts::ConsumptionModeType": {
+      "declaration": "export type ConsumptionModeType =\n  | 'high'\n  | 'medium'\n  | 'low'",
+      "docstring": "",
+      "path": "src/type/preference.ts"
+    },
+    "src/components/mds-pref-contrast/meta/types.ts::ContrastModeType": {
+      "declaration": "export type ContrastModeType =\n  | 'more'\n  | 'no-preference'\n  | 'system'",
+      "docstring": "",
+      "path": "src/components/mds-pref-contrast/meta/types.ts"
+    },
+    "src/type/language.ts::LanguageType": {
+      "declaration": "export type LanguageType =\n  | 'auto'\n  | `${Lowercase<string>}${Lowercase<string>}`\n  | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`",
+      "docstring": "",
+      "path": "src/type/language.ts"
+    },
+    "src/event-detail/language.ts::MdsPrefLanguageEventDetail": {
+      "declaration": "export interface MdsPrefLanguageEventDetail {\n  language?: LanguageType\n}",
+      "docstring": "",
+      "path": "src/event-detail/language.ts"
+    },
+    "src/components/mds-pref-theme/meta/types.ts::ThemeModeType": {
+      "declaration": "export type ThemeModeType =\n  | 'light'\n  | 'dark'\n  | 'system'",
+      "docstring": "",
+      "path": "src/components/mds-pref-theme/meta/types.ts"
+    },
+    "src/components/mds-pref-theme/meta/types.ts::ThemeTransitionType": {
+      "declaration": "export type ThemeTransitionType =\n  | 'none'\n  | 'flash'\n  | 'smooth'",
+      "docstring": "",
+      "path": "src/components/mds-pref-theme/meta/types.ts"
+    },
     "src/components/mds-price-table-features-cell/meta/types.ts::PriceTableFeaturesCellType": {
       "declaration": "export type PriceTableFeaturesCellType =\n  | 'custom'\n  | 'label'\n  | 'supported'\n  | 'text'\n  | 'unsupported'",
       "docstring": "",

package/loader/cdn.js

@@ -1,3 +1,2 @@
-
 module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -1,3 +1,2 @@
-
 module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -9,6 +9,9 @@ export interface CustomElementsDefineOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
 export declare function applyPolyfills(): Promise<void>;
 
 /**

package/loader/index.es2017.js

@@ -1,3 +1,2 @@
-
 export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -1,4 +1,3 @@
-
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm-es5/loader.js';
+export * from '../dist/esm-es5/loader.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-progress",
-  "version": "2.9.2",
+  "version": "2.10.1",
   "description": "mds-progress is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,8 +24,8 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "14.3.2",
-    "@stencil/core": "4.10.0"
+    "@maggioli-design-system/styles": "15.3.1",
+    "@stencil/core": "4.21.0"
   },
   "license": "MIT",
   "author": {

package/src/common/locale.ts

@@ -0,0 +1,70 @@
+import Handlebars from 'handlebars'
+
+type LocaleConfig = {
+  el?: Record<string, string | string[]>
+  en: Record<string, string | string[]>
+  es?: Record<string, string | string[]>
+  it?: Record<string, string | string[]>
+}
+
+export class Locale {
+  rollbackLanguage: string = 'en'
+  language: string
+  config: LocaleConfig
+  closestElement:HTMLElement
+
+  constructor (configData: LocaleConfig) {
+    this.config = configData
+  }
+
+  lang = (element: HTMLElement): void => {
+    this.closestElement = element.closest('[lang]') as HTMLElement
+
+    
+    if (this.closestElement) {
+      if (this.closestElement.lang) {
+        this.language = this.closestElement.lang
+        return
+      }
+    }
+
+    this.language = this.rollbackLanguage
+  }
+
+  private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
+
+    const languagePhrase: string | string[] = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
+    const phrases: string[] = []
+    
+    if (Array.isArray(languagePhrase)) {
+      phrases.push(languagePhrase[0])
+      phrases.push(languagePhrase[1])
+    } else {
+      phrases.push(languagePhrase)
+      phrases.push(languagePhrase)
+    }
+
+    const [ defaultPhrase ] = phrases
+    let translatePhrase: string = defaultPhrase
+
+    const keys = Object.keys(context)
+    if (keys.length > 0) {
+      const [firstKey] = keys
+      if (typeof context[firstKey] === 'number') {
+        if (context[firstKey] !== 1) {
+          translatePhrase = phrases[1]
+        }
+      }
+    }
+
+    const template = Handlebars.compile(translatePhrase)
+    return template(context)
+  }
+
+  get = (tag: string | string[], context?: Record<string, string | number>): string => {
+    if (context) {
+      return this.pluralize(tag, context)
+    }
+    return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
+  }
+}

package/src/components/mds-progress/css/mds-progress-pref-animation.css

@@ -0,0 +1,18 @@
+@tailwind utilities;
+
+@container style(--magma-pref-animation: reduce) {
+  :host,
+  .progress {
+    transition-duration: 0s;
+  }
+}
+
+@container style(--magma-pref-animation: system) {
+
+  @media (prefers-reduced-motion) {
+    :host,
+    .progress {
+      transition-duration: 0s;
+    }
+  }
+}

package/src/components/mds-progress/css/mds-progress-pref-contrast.css

@@ -0,0 +1,23 @@
+@tailwind utilities;
+
+@container style(--magma-pref-contrast: more) {
+  :host,
+  :host( [variant="primary"] ) {
+
+    --mds-progress-color: theme('colors.brand-maggioli-05');
+    --mds-progress-background: theme('colors.tone-neutral-07');
+  }
+}
+
+@container style(--magma-pref-contrast: system) {
+
+  @media (prefers-contrast: more) {
+    :host,
+    :host( [variant="primary"] ) {
+
+      --mds-progress-color: theme('colors.brand-maggioli-05');
+      --mds-progress-background: theme('colors.tone-neutral-07');
+    }
+  }
+}
+