@maggioli-design-system/mds-progress 2.0.0 → 2.1.0

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-06-22T09:20:00",
+  "timestamp": "2022-11-18T09:22:31",
   "compiler": {
     "name": "node",
     "version": "18.3.0"
@@ -9,12 +9,13 @@
     "fsNamespace": "mds-progress",
     "components": 1,
     "entries": 1,
-    "bundles": 65,
+    "bundles": 66,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 24,
+        "files": 25,
         "generatedFiles": [
+          "./dist/collection/common/aria.js",
           "./dist/collection/components/mds-progress/mds-progress.js",
           "./dist/collection/components/mds-progress/meta/dictionary.js",
           "./dist/collection/components/mds-progress/meta/types.js",
@@ -55,17 +56,17 @@
         "name": "dist-lazy",
         "files": 35,
         "generatedFiles": [
-          "./dist/cjs/index-70bc96f7.js",
+          "./dist/cjs/index-db3031a9.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-38630cc3.js",
+          "./dist/esm-es5/index-c2cf8238.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-38630cc3.js",
+          "./dist/esm/index-c2cf8238.js",
           "./dist/esm/index.js",
           "./dist/esm/loader.js",
           "./dist/esm/mds-progress.entry.js",
@@ -75,21 +76,21 @@
           "./dist/mds-progress/index.esm.js",
           "./dist/mds-progress/mds-progress.esm.js",
           "./dist/mds-progress/mds-progress.js",
-          "./dist/mds-progress/p-284f97ac.entry.js",
           "./dist/mds-progress/p-50ea2036.system.js",
-          "./dist/mds-progress/p-d402cd92.system.js",
-          "./dist/mds-progress/p-d64b07f9.system.js",
-          "./dist/mds-progress/p-dadd4466.js",
-          "./dist/mds-progress/p-f93dfdf4.system.entry.js",
+          "./dist/mds-progress/p-763baf47.js",
+          "./dist/mds-progress/p-c94616ee.system.js",
+          "./dist/mds-progress/p-ccaf7022.system.entry.js",
+          "./dist/mds-progress/p-e91b0c4d.entry.js",
+          "./dist/mds-progress/p-f219ebba.system.js",
           "./www/build/index.esm.js",
           "./www/build/mds-progress.esm.js",
           "./www/build/mds-progress.js",
-          "./www/build/p-284f97ac.entry.js",
           "./www/build/p-50ea2036.system.js",
-          "./www/build/p-d402cd92.system.js",
-          "./www/build/p-d64b07f9.system.js",
-          "./www/build/p-dadd4466.js",
-          "./www/build/p-f93dfdf4.system.entry.js"
+          "./www/build/p-763baf47.js",
+          "./www/build/p-c94616ee.system.js",
+          "./www/build/p-ccaf7022.system.entry.js",
+          "./www/build/p-e91b0c4d.entry.js",
+          "./www/build/p-f219ebba.system.js"
         ]
       },
       {
@@ -122,12 +123,12 @@
         "components": [
           "mds-progress"
         ],
-        "bundleId": "p-284f97ac",
-        "fileName": "p-284f97ac.entry.js",
+        "bundleId": "p-e91b0c4d",
+        "fileName": "p-e91b0c4d.entry.js",
         "imports": [
-          "p-dadd4466.js"
+          "p-763baf47.js"
         ],
-        "originalByteSize": 3552
+        "originalByteSize": 4458
       }
     ],
     "esm": [
@@ -139,9 +140,9 @@
         "bundleId": "mds-progress",
         "fileName": "mds-progress.entry.js",
         "imports": [
-          "index-38630cc3.js"
+          "index-c2cf8238.js"
         ],
-        "originalByteSize": 3556
+        "originalByteSize": 4462
       }
     ],
     "es5": [
@@ -153,9 +154,9 @@
         "bundleId": "mds-progress",
         "fileName": "mds-progress.entry.js",
         "imports": [
-          "index-38630cc3.js"
+          "index-c2cf8238.js"
         ],
-        "originalByteSize": 3556
+        "originalByteSize": 4462
       }
     ],
     "system": [
@@ -164,12 +165,12 @@
         "components": [
           "mds-progress"
         ],
-        "bundleId": "p-f93dfdf4.system",
-        "fileName": "p-f93dfdf4.system.entry.js",
+        "bundleId": "p-ccaf7022.system",
+        "fileName": "p-ccaf7022.system.entry.js",
         "imports": [
-          "p-d402cd92.system.js"
+          "p-c94616ee.system.js"
         ],
-        "originalByteSize": 3897
+        "originalByteSize": 4983
       }
     ],
     "commonjs": [
@@ -181,9 +182,9 @@
         "bundleId": "mds-progress.cjs",
         "fileName": "mds-progress.cjs.entry.js",
         "imports": [
-          "index-70bc96f7.js"
+          "index-db3031a9.js"
         ],
-        "originalByteSize": 3626
+        "originalByteSize": 4521
       }
     ]
   },
@@ -192,7 +193,7 @@
       "tag": "mds-progress",
       "path": "./src/components/mds-progress/mds-progress.js",
       "source": "./src/components/mds-progress/mds-progress.tsx",
-      "elementRef": null,
+      "elementRef": "element",
       "componentClassName": "MdsProgress",
       "assetsDirs": [],
       "dependencies": [],
@@ -237,7 +238,7 @@
           "name": "direction",
           "type": "string",
           "attribute": "direction",
-          "reflect": false,
+          "reflect": true,
           "mutable": false,
           "required": false,
           "optional": true,
@@ -282,10 +283,34 @@
             "text": "Sets the theme variant colors"
           },
           "internal": false
+        },
+        {
+          "name": "steps",
+          "type": "string",
+          "attribute": "steps",
+          "reflect": false,
+          "mutable": false,
+          "required": false,
+          "optional": true,
+          "defaultValue": "'Inizio,Un quarto,Metà,Tre quarti,Fine'",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "docs": {
+            "tags": [],
+            "text": "Sets the steps that can be pronounced by accessibility technologies"
+          },
+          "internal": false
         }
       ],
       "shadowDelegatesFocus": false,
-      "states": []
+      "states": [
+        {
+          "name": "currentStep"
+        }
+      ]
     }
   ],
   "entries": [
@@ -296,7 +321,7 @@
           "excludeFromCollection": false,
           "isCollectionDependency": false,
           "componentClassName": "MdsProgress",
-          "elementRef": null,
+          "elementRef": "element",
           "encapsulation": "shadow",
           "shadowDelegatesFocus": false,
           "properties": [
@@ -324,7 +349,7 @@
               "name": "direction",
               "type": "string",
               "attribute": "direction",
-              "reflect": false,
+              "reflect": true,
               "mutable": false,
               "required": false,
               "optional": true,
@@ -369,14 +394,47 @@
                 "text": "Sets the theme variant colors"
               },
               "internal": false
+            },
+            {
+              "name": "steps",
+              "type": "string",
+              "attribute": "steps",
+              "reflect": false,
+              "mutable": false,
+              "required": false,
+              "optional": true,
+              "defaultValue": "'Inizio,Un quarto,Metà,Tre quarti,Fine'",
+              "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+              },
+              "docs": {
+                "tags": [],
+                "text": "Sets the steps that can be pronounced by accessibility technologies"
+              },
+              "internal": false
             }
           ],
           "virtualProperties": [],
-          "states": [],
+          "states": [
+            {
+              "name": "currentStep"
+            }
+          ],
           "methods": [],
           "listeners": [],
           "events": [],
-          "watchers": [],
+          "watchers": [
+            {
+              "propName": "progress",
+              "methodName": "progressChanged"
+            },
+            {
+              "propName": "steps",
+              "methodName": "stepsChanged"
+            }
+          ],
           "styles": [
             {
               "modeName": "$",
@@ -385,7 +443,7 @@
               "styleIdentifier": "mdsProgressStyle",
               "externalStyles": [
                 {
-                  "absolutePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/design-system/projects/stencil/.build/mds-progress/src/components/mds-progress/mds-progress.css",
+                  "absolutePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/magma/design-system/projects/stencil/.build/mds-progress/src/components/mds-progress/mds-progress.css",
                   "relativePath": "mds-progress.css",
                   "originalComponentPath": "mds-progress.css"
                 }
@@ -401,11 +459,11 @@
             "tags": [],
             "text": ""
           },
-          "jsFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/design-system/projects/stencil/.build/mds-progress/src/components/mds-progress/mds-progress.js",
-          "sourceFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/design-system/projects/stencil/.build/mds-progress/src/components/mds-progress/mds-progress.tsx",
+          "jsFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/magma/design-system/projects/stencil/.build/mds-progress/src/components/mds-progress/mds-progress.js",
+          "sourceFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/magma/design-system/projects/stencil/.build/mds-progress/src/components/mds-progress/mds-progress.tsx",
           "sourceMapPath": null,
           "hasAttributeChangedCallbackFn": false,
-          "hasComponentWillLoadFn": false,
+          "hasComponentWillLoadFn": true,
           "hasComponentDidLoadFn": false,
           "hasComponentShouldUpdateFn": false,
           "hasComponentWillUpdateFn": false,
@@ -417,7 +475,7 @@
           "hasDisconnectedCallbackFn": false,
           "hasElement": false,
           "hasEvent": false,
-          "hasLifecycle": false,
+          "hasLifecycle": true,
           "hasListener": false,
           "hasListenerTarget": false,
           "hasListenerTargetWindow": false,
@@ -435,7 +493,7 @@
           "hasPropMutable": false,
           "hasReflect": true,
           "hasRenderFn": true,
-          "hasState": false,
+          "hasState": true,
           "hasStyle": true,
           "hasVdomAttribute": true,
           "hasVdomXlink": false,
@@ -443,14 +501,18 @@
           "hasVdomFunctional": false,
           "hasVdomKey": false,
           "hasVdomListener": false,
-          "hasVdomPropOrAttr": false,
+          "hasVdomPropOrAttr": true,
           "hasVdomRef": false,
           "hasVdomRender": true,
           "hasVdomStyle": true,
           "hasVdomText": false,
-          "hasWatchCallback": false,
+          "hasWatchCallback": true,
           "isPlain": false,
           "htmlAttrNames": [
+            "aria-valuemax",
+            "aria-valuemin",
+            "aria-valuenow",
+            "role",
             "class",
             "style"
           ],
@@ -471,10 +533,11 @@
   ],
   "componentGraph": {
     "sc-mds-progress": [
-      "p-dadd4466.js"
+      "p-763baf47.js"
     ]
   },
   "sourceGraph": {
+    "./src/common/aria.ts": [],
     "./src/components/mds-progress/mds-progress.tsx": [],
     "./src/components/mds-progress/meta/dictionary.ts": [],
     "./src/components/mds-progress/meta/types.ts": [],

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

@@ -0,0 +1,4 @@
+declare const unslugName: (name: string) => string;
+declare const setAttributeIfEmpty: (element: HTMLElement, attribute: string, value: string) => string;
+declare const hashValue: (value: string) => string;
+export { unslugName, setAttributeIfEmpty, hashValue, };

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

@@ -1,6 +1,9 @@
 import { DirectionType } from './meta/types';
 import { ThemeVariantType } from '../../types/variant';
 export declare class MdsProgress {
+  private element;
+  currentStep: string;
+  private stepsList;
   /**
    * A value between 0 and 1 that rapresents the status progress
    */
@@ -13,5 +16,13 @@ export declare class MdsProgress {
    * Sets the theme variant colors
    */
   readonly variant?: ThemeVariantType;
+  /**
+   * Sets the steps that can be pronounced by accessibility technologies
+   */
+  readonly steps?: string;
+  componentWillLoad(): void;
+  private setProgress;
+  progressChanged(progress: number): void;
+  stepsChanged(steps: string): void;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -17,6 +17,10 @@ export namespace Components {
           * A value between 0 and 1 that rapresents the status progress
          */
         "progress"?: number;
+        /**
+          * Sets the steps that can be pronounced by accessibility technologies
+         */
+        "steps"?: string;
         /**
           * Sets the theme variant colors
          */
@@ -44,6 +48,10 @@ declare namespace LocalJSX {
           * A value between 0 and 1 that rapresents the status progress
          */
         "progress"?: number;
+        /**
+          * Sets the steps that can be pronounced by accessibility technologies
+         */
+        "steps"?: string;
         /**
           * Sets the theme variant colors
          */

package/dist/types/dictionary/typography.d.ts

@@ -1,7 +1,9 @@
 declare const typographyDictionary: string[];
+declare const typographyVariationsDictionary: string[];
 declare const typographyMonoDictionary: string[];
-declare const typographyPrimaryDictionary: string[];
-declare const typographySecondaryDictionary: string[];
+declare const typographyTitleDictionary: string[];
+declare const typographyInfoDictionary: string[];
+declare const typographyReadDictionary: string[];
 declare const typographySmallerDictionary: string[];
 declare const typographyTooltipDictionary: string[];
-export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, typographySmallerDictionary, typographyTooltipDictionary, };
+export { typographyDictionary, typographyVariationsDictionary, typographyMonoDictionary, typographyTitleDictionary, typographyInfoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTooltipDictionary, };

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

@@ -221,7 +221,8 @@ export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
  */
 export declare const setMode: (handler: ResolutionHandler) => void;
 /**
- * getMode
+ * `getMode()` is used for libraries which provide multiple "modes" for styles.
+ * @param ref a reference to the node to get styles for
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -234,6 +235,8 @@ export declare function setPlatformHelpers(helpers: {
 /**
  * Get the base path to where the assets can be found. Use `setAssetPath(path)`
  * if the path needs to be customized.
+ * @param path the path to use in calculating the asset path. this value will be
+ * used in conjunction with the base asset path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -246,18 +249,22 @@ export declare function getAssetPath(path: string): string;
  * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
  * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
+ * @param path the asset path to set
  */
 export declare function setAssetPath(path: string): string;
 /**
- * getElement
+ * Retrieve a Stencil element for a given reference
+ * @param ref the ref to get the Stencil element for
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
  * Schedules a new render of the given instance or element even if no state changed.
  *
- * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
+ * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
+ *
+ * @param ref the node/element to force the re-render of
  */
 export declare function forceUpdate(ref: any): void;
 /**
@@ -272,6 +279,8 @@ export interface HTMLStencilElement extends HTMLElement {
  * in the best moment to perform DOM mutation without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-write to schedule
  */
 export declare function writeTask(task: RafCallback): void;
 /**
@@ -279,6 +288,8 @@ export declare function writeTask(task: RafCallback): void;
  * in the best moment to perform DOM reads without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-read to schedule
  */
 export declare function readTask(task: RafCallback): void;
 /**

package/dist/types/types/typography.d.ts

@@ -1,6 +1,8 @@
 export declare type TypographyType = 'action' | 'caption' | 'code' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph' | 'tip';
-export declare type TypographyPrimaryType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export declare type TypographySecondaryType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';
+export declare type TypographyVariants = 'title' | 'info' | 'read' | 'mono';
+export declare type TypographyTitleType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare type TypographyInfoType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';
+export declare type TypographyReadType = 'caption' | 'detail' | 'paragraph';
 export declare type TypographySmallerType = 'tip' | 'option';
 export declare type TypographyMonoType = 'code' | 'hack';
 export declare type TypographyTooltipType = 'caption' | 'detail' | 'tip';

package/loader/package.json

@@ -1,5 +1,6 @@
 {
   "name": "mds-progress-loader",
+  "private": true,
   "typings": "./index.d.ts",
   "module": "./index.js",
   "main": "./index.cjs.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-progress",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "mds-progress is a web-component from Maggioli Design System Magma, 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",
@@ -23,8 +23,8 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "^7.0.0",
-    "@stencil/core": "^2.16.1"
+    "@maggioli-design-system/styles": "^9.0.0",
+    "@stencil/core": "^2.18.1"
   },
   "license": "MIT",
   "author": {

package/readme.md

@@ -7,11 +7,12 @@
 
 ## Properties
 
-| Property    | Attribute   | Description                                                            | Type                                                                            | Default        |
-| ----------- | ----------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------- | -------------- |
-| `direction` | `direction` | Specifies the direction of the progress bar, if horizonatl or vertical | `"horizontal" \| "vertical"`                                                    | `'horizontal'` |
-| `progress`  | `progress`  | A value between 0 and 1 that rapresents the status progress            | `number`                                                                        | `0`            |
-| `variant`   | `variant`   | Sets the theme variant colors                                          | `"dark" \| "error" \| "info" \| "light" \| "primary" \| "success" \| "warning"` | `'dark'`       |
+| Property    | Attribute   | Description                                                            | Type                                                                            | Default                                   |
+| ----------- | ----------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------- |
+| `direction` | `direction` | Specifies the direction of the progress bar, if horizonatl or vertical | `"horizontal" \| "vertical"`                                                    | `'horizontal'`                            |
+| `progress`  | `progress`  | A value between 0 and 1 that rapresents the status progress            | `number`                                                                        | `0`                                       |
+| `steps`     | `steps`     | Sets the steps that can be pronounced by accessibility technologies    | `string`                                                                        | `'Inizio,Un quarto,Metà,Tre quarti,Fine'` |
+| `variant`   | `variant`   | Sets the theme variant colors                                          | `"dark" \| "error" \| "info" \| "light" \| "primary" \| "success" \| "warning"` | `'dark'`                                  |
 
 
 ## Dependencies

package/src/common/aria.ts

@@ -0,0 +1,27 @@
+const hash = (s: string): string => {
+  let i: number, h: number
+  for (i = 0, h = 0; i < s.length; i ++) {
+    h = Math.imul(31, h) + s.charCodeAt(i) | 0
+  }
+  return h.toString()
+}
+
+const unslugName = (name: string): string => {
+  return name.split('/').slice(-1).pop().replace(/-/g, ' ')
+}
+
+const setAttributeIfEmpty = (element: HTMLElement, attribute: string, value: string): string => {
+  if (element.hasAttribute(attribute)) {
+    return element.getAttribute(attribute)
+  }
+  element.setAttribute(attribute, value)
+  return value
+}
+
+const hashValue = (value: string): string => `${value}-${hash(value)}`
+
+export {
+  unslugName,
+  setAttributeIfEmpty,
+  hashValue,
+}

package/src/components/mds-progress/.gitlab-ci.yml

@@ -21,5 +21,5 @@ progress-publish:
 # INSTALL TEST
 progress-install-test:
   extends: [.base-stencil-install-test, .base-progress]
-  dependencies: [progress-publish, progress-isolate]
-
+  dependencies: [base-stencil-build, progress-isolate]
+  needs: [base-stencil-build, progress-isolate, progress-publish]

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

@@ -19,27 +19,24 @@
   @apply
     flex
     overflow-hidden
-    transition-colors;
+    transition-colors
+    w-full;
 
   background-color: var(--background);
   border-radius: var(--radius);
   height: var(--thickness);
-}
-
-:host ( .horizontal ) {
-  @apply w-full;
-
-  height: var(--thickness);
   min-width: var(--thickness);
 }
 
-:host ( .vertical ) {
+:host ( [direction=vertical] ) {
   @apply
     h-full
-    min-h-8
-    flex-col;
+    flex-col
+    w-auto;
 
+  height: unset;
   width: var(--thickness);
+  min-height: var(--thickness);
 }
 
 .progress {

package/src/components/mds-progress/mds-progress.tsx

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop } from '@stencil/core'
+import { Component, Element, Host, h, Prop, Watch, State } from '@stencil/core'
 import { DirectionType } from './meta/types'
 import { ThemeVariantType } from '../../types/variant'
 
@@ -8,6 +8,9 @@ import { ThemeVariantType } from '../../types/variant'
   shadow: true,
 })
 export class MdsProgress {
+  @Element() private element: HTMLMdsAccordionTimerElement
+  @State() currentStep: string
+  private stepsList = []
 
   /**
    * A value between 0 and 1 that rapresents the status progress
@@ -17,16 +20,43 @@ export class MdsProgress {
   /**
    * Specifies the direction of the progress bar, if horizonatl or vertical
    */
-  @Prop() readonly direction?: DirectionType = 'horizontal'
+  @Prop({ reflect: true }) readonly direction?: DirectionType = 'horizontal'
 
   /**
    * Sets the theme variant colors
    */
   @Prop({ reflect: true }) readonly variant?: ThemeVariantType = 'dark'
 
+  /**
+   * Sets the steps that can be pronounced by accessibility technologies
+   */
+  @Prop() readonly steps?: string = 'Inizio,Un quarto,Metà,Tre quarti,Fine'
+
+  componentWillLoad (): void {
+    this.stepsList = this.steps.split(',')
+    this.setProgress(this.progress)
+  }
+
+  private setProgress (progress: number): void {
+    if (this.steps) {
+      this.currentStep = this.stepsList[Math.round(progress * (this.stepsList.length - 1))]
+      this.element.setAttribute('aria-valuetext', this.currentStep)
+    }
+  }
+
+  @Watch('progress')
+  progressChanged (progress: number): void {
+    this.setProgress(progress)
+  }
+
+  @Watch('steps')
+  stepsChanged (steps: string): void {
+    this.stepsList = steps.split(',')
+  }
+
   render () {
     return (
-      <Host class={this.direction}>
+      <Host aria-valuemax="100" aria-valuemin="0" aria-valuenow={ Math.round(this.progress * 100) } role="progressbar">
         <div class="progress" style={
           this.direction === 'horizontal'
             ? { flexGrow: `${this.progress}` }