@dubai-design-system/components-js 5.0.3 → 5.1.1

package/dist/collection/components/dda-ui-card/dda-ui-card.js

@@ -1,17 +1,34 @@
 import { h, Host } from "@stencil/core";
 export class DdaUiCard {
     constructor() {
+        /** `default` renders the icon, image, title, subtitle and link from props before the slot; `custom` renders only the slot. */
         this.type = 'default';
+        /** Material Icons name shown at the top of the card, e.g. `description`. */
         this.icon = '';
+        /** URL of an image shown at the top of the card. Its alt text is `maintitle`. */
         this.image = '';
+        /** Card title, rendered as a heading at `heading_level`. */
         this.maintitle = '';
+        /** Muted text shown below the title. */
         this.subtitle = '';
+        /** URL of the card link. The link shows only when this is set. */
         this.link = '';
+        /** Text of the card link. */
         this.linktext = '';
+        /** Material Icons name shown after the link text. Set it to an empty string to hide the icon. */
         this.linkicon = 'arrow_forward';
+        /** Heading level (1–6) of the title; pick the level that fits the page outline. */
+        this.heading_level = 3;
+    }
+    // The title was always an <h1>, so a page of cards had many h1s.
+    // Clamp to a valid heading level; anything unparsable falls back to 3.
+    get headingTag() {
+        const level = Math.round(Number(this.heading_level));
+        return `h${Number.isFinite(level) ? Math.min(6, Math.max(1, level)) : 3}`;
     }
     render() {
-        return (h(Host, { key: '23b67e77b8cb78795a684ad15030ac31918853e7' }, h("div", { key: 'abee006879a59559d7154c95c4d88ad1513c75b5', class: 'dda-card' }, h("div", { key: '33732334dafbc7bcaa4a0e24f972e8f04e62c46e', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '626c85266899eeef3690113f51ff06f330f3cf60' }, !!this.icon && (h("span", { key: 'e6a6ddb2ba041b3942f63967b6cce2d618e1a4ba', class: 'dda-card-icon' }, h("i", { key: '340c651b6fbf945d22b9b6405d2077996dcea0e5', class: 'material-icons' }, this.icon))), !!this.image && (h("span", { key: 'aa79e723ca9995cf8e71d33e480418a77ab44e9d', class: 'dda-card-icon' }, h("img", { key: 'c366fdb9f184680b0f94f0f05e7c102f5cf5daeb', src: this.image, alt: this.maintitle }))), !!this.maintitle && h("h1", { key: 'ad686e57e270a8bd12bdb5a98e49e0918a460dfc', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: '57dcc9ea2918b7075cd329d8a37ef87ada70fd31', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'f823984df47c3e48570e76c1cd67804d622626ae', href: this.link, class: 'dda-card-link' }, this.linktext, ' ', this.linkicon && (h("span", { key: '5a41b73f4c7b40d15bfeb47e756eabe70ccd49a4' }, h("i", { key: '6be0795bcde440b7274b7bb1d2314f7d453b403c', class: 'material-icons' }, this.linkicon))))))), h("slot", { key: '83e3e779ff67cadae63c41f36f1862a68093d24c' })))));
+        const HeadingTag = this.headingTag;
+        return (h(Host, { key: 'f2a0d78609b1432f94a712b2d69690ed10c422b3' }, h("div", { key: 'bc36fddf6be566d97d23530740e5de9f32bb192e', class: 'dda-card' }, h("div", { key: '55b2f3a35669305d0dcf5c3fe9bdd3dd70a444a1', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: 'e6298ad703d39c3ed69ab64070db7d2580529d33' }, !!this.icon && (h("span", { key: '2f1b9f7570d5ab46f857cebb594a1d71cf83a341', class: 'dda-card-icon' }, h("i", { key: 'efda1c1873e48cae86bbd9feb5a90c7529f3db49', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: '802a4ca867e351b24af54b4da78ec12c2d18b890', class: 'dda-card-icon' }, h("img", { key: 'ff6975cf36520a9c3ddbecc16252bcc0769a1597', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: 'd769a32b303d689217aa77973804347fb3488b02', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: '0bdaa58c5ea5db75c20c7b0031dad48ce7d1ed96', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: '87d11b05cef8ab0b01de355d22b1ef9297a80302', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '8cb9e3c6e51769fca7fa47d22d61a98164209002' }, h("i", { key: 'ba556e79ad6176ee2b79097a78ad826d9c02ecee', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: '11921fac820a992ed35e0dab39bcd36a39b2244f' })))));
     }
     static get is() { return "dda-ui-card"; }
     static get originalStyleUrls() {
@@ -38,7 +55,7 @@ export class DdaUiCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`default` renders the icon, image, title, subtitle and link from props before the slot; `custom` renders only the slot."
                 },
                 "getter": false,
                 "setter": false,
@@ -58,7 +75,7 @@ export class DdaUiCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Material Icons name shown at the top of the card, e.g. `description`."
                 },
                 "getter": false,
                 "setter": false,
@@ -78,7 +95,7 @@ export class DdaUiCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "URL of an image shown at the top of the card. Its alt text is `maintitle`."
                 },
                 "getter": false,
                 "setter": false,
@@ -98,7 +115,7 @@ export class DdaUiCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Card title, rendered as a heading at `heading_level`."
                 },
                 "getter": false,
                 "setter": false,
@@ -118,7 +135,7 @@ export class DdaUiCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Muted text shown below the title."
                 },
                 "getter": false,
                 "setter": false,
@@ -138,7 +155,7 @@ export class DdaUiCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "URL of the card link. The link shows only when this is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -158,7 +175,7 @@ export class DdaUiCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text of the card link."
                 },
                 "getter": false,
                 "setter": false,
@@ -178,13 +195,33 @@ export class DdaUiCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Material Icons name shown after the link text. Set it to an empty string to hide the icon."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "linkicon",
                 "defaultValue": "'arrow_forward'"
+            },
+            "heading_level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading level (1\u20136) of the title; pick the level that fits the page outline."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading_level",
+                "defaultValue": "3"
             }
         };
     }
@@ -197,12 +234,17 @@ export class DdaUiCard {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the user clicks the card link. `detail` is the original click `MouseEvent`; call `detail.preventDefault()` to stop the navigation."
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
                 }
             }];
     }

package/dist/collection/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DdaSegmentedTabs {
     constructor() {
-        /** Index of the segment selected by default. Clamped to a valid item index. */
+        /** Index of the selected segment, from 0. Changing it after load moves the selection. An out-of-range value selects the first segment. */
         this.selected_index = 0;
         /** F-004 repair: the currently-selected segment. Exactly one segment is
          * selected at a time; this is what makes the component interactive at all. */
@@ -9,9 +9,30 @@ export class DdaSegmentedTabs {
         this.parsedItems = [];
     }
     componentWillLoad() {
-        this.parsedItems = JSON.parse(this.items);
+        this.parseItems();
         this.active_index = this.clampIndex(this.selected_index);
     }
+    /** Re-parses `items` when it changes after load, and keeps the current
+     * selection if it is still in range (else selects the first segment). */
+    itemsChanged() {
+        this.parseItems();
+        this.active_index = this.clampIndex(this.active_index);
+    }
+    /** Moves the selection when `selected_index` changes after load. */
+    selectedIndexChanged() {
+        this.active_index = this.clampIndex(this.selected_index);
+    }
+    parseItems() {
+        var _a;
+        try {
+            const items = JSON.parse((_a = this.items) !== null && _a !== void 0 ? _a : '[]');
+            // Segment labels are strings; numbers in the JSON would otherwise break rendering.
+            this.parsedItems = Array.isArray(items) ? items.map(item => String(item)) : [];
+        }
+        catch (_b) {
+            this.parsedItems = [];
+        }
+    }
     clampIndex(index) {
         if (!Array.isArray(this.parsedItems) || this.parsedItems.length === 0) {
             return 0;
@@ -21,6 +42,25 @@ export class DdaSegmentedTabs {
         }
         return index;
     }
+    get parsedIconLabels() {
+        if (!this.icon_labels) {
+            return [];
+        }
+        try {
+            const labels = JSON.parse(this.icon_labels);
+            return Array.isArray(labels) ? labels : [];
+        }
+        catch (error) {
+            console.error('Error parsing icon_labels:', error);
+            return [];
+        }
+    }
+    /** Accessible name of an icon-only segment: the matching `icon_labels`
+     * entry, else the item text with underscores read as spaces. */
+    iconLabel(item, index) {
+        const label = this.parsedIconLabels[index];
+        return typeof label === 'string' && label.trim() ? label : item.replace(/_/g, ' ');
+    }
     selectSegment(index) {
         if (index === this.active_index) {
             return;
@@ -29,10 +69,10 @@ export class DdaSegmentedTabs {
         this.segmentChange.emit(index);
     }
     render() {
-        return (h("div", { key: '83b176643df1781211b5ec722d0c057002c6bc72', role: "group", "aria-label": this.aria_label, class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map((item, index) => {
+        return (h("div", { key: '023156550fa2d88603176644fc99b4cb3950c275', role: "group", "aria-label": this.aria_label, class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map((item, index) => {
             const isSelected = index === this.active_index;
             const className = `dda-segmented-item${isSelected ? ' active' : ''}`;
-            return item.startsWith('fo') ? (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', onClick: () => this.selectSegment(index) }, h("i", { class: "material-icons  material-symbols-outlined" }, item))) : (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', onClick: () => this.selectSegment(index) }, item));
+            return item.startsWith('fo') ? (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', "aria-label": this.iconLabel(item, index), onClick: () => this.selectSegment(index) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, item))) : (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', onClick: () => this.selectSegment(index) }, item));
         })));
     }
     static get is() { return "dda-segmented-tabs"; }
@@ -60,7 +100,7 @@ export class DdaSegmentedTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Segments, as a JSON string array, e.g. `'[\"All\", \"Pending\", \"Approved\"]'`. A missing or invalid value renders no segments. An item that starts with `fo` renders as a Material Symbols icon name (e.g. `format_align_left`)."
                 },
                 "getter": false,
                 "setter": false,
@@ -79,7 +119,7 @@ export class DdaSegmentedTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Corner shape of the group: `square` or `rounded`."
                 },
                 "getter": false,
                 "setter": false,
@@ -98,7 +138,7 @@ export class DdaSegmentedTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the group."
                 },
                 "getter": false,
                 "setter": false,
@@ -117,7 +157,7 @@ export class DdaSegmentedTabs {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class on the group, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -136,7 +176,7 @@ export class DdaSegmentedTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` set on every segment button."
                 },
                 "getter": false,
                 "setter": false,
@@ -174,13 +214,32 @@ export class DdaSegmentedTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Index of the segment selected by default. Clamped to a valid item index."
+                    "text": "Index of the selected segment, from 0. Changing it after load moves the selection. An out-of-range value selects the first segment."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "selected_index",
                 "defaultValue": "0"
+            },
+            "icon_labels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible names for icon-only segments, as a JSON string array in the same order as `items`, e.g. `'[\"Align left\", \"Align center\"]'`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon_labels"
             }
         };
     }
@@ -198,7 +257,7 @@ export class DdaSegmentedTabs {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits the newly-selected index whenever the selection changes."
+                    "text": "Fires when the user selects a different segment. `detail` is the new index, from 0."
                 },
                 "complexType": {
                     "original": "number",
@@ -207,4 +266,13 @@ export class DdaSegmentedTabs {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "itemsChanged"
+            }, {
+                "propName": "selected_index",
+                "methodName": "selectedIndexChanged"
+            }];
+    }
 }

package/dist/collection/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.css

@@ -95,7 +95,10 @@
   transform: translate(0%, -50%);
 }
 
-
+/* Nothing follows the last step, so its line would run past the stepper. */
+.h-step:last-child .h-step-indicator::after {
+  content: none;
+}
 
 .h-step.completed .h-step-title{
   color: var(--dda-color-success-40);

package/dist/collection/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.js

@@ -1,14 +1,26 @@
 import { h, Host } from "@stencil/core";
 export class DdaHorizontalStepper {
     constructor() {
+        /** Index of the active step, from 0. Steps before it show as completed. */
         this.current_step = 1;
         this.parsedSteps = [];
     }
     componentWillLoad() {
-        this.parsedSteps = JSON.parse(this.steps);
+        this.parseSteps();
+    }
+    /** Re-parses `steps` when it changes after load. A missing or invalid value renders no steps. */
+    parseSteps() {
+        var _a;
+        try {
+            const steps = JSON.parse((_a = this.steps) !== null && _a !== void 0 ? _a : '[]');
+            this.parsedSteps = Array.isArray(steps) ? steps : [];
+        }
+        catch (_b) {
+            this.parsedSteps = [];
+        }
     }
     render() {
-        return (h(Host, { key: '5b6bf0b6d79e08768c25d78f15e14bb449f3f9d4' }, h("div", { key: 'f3c2ef7bd4ae7685747fe4194b143c2fc962d3bb', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
+        return (h(Host, { key: 'a5f2c88bb692cb7b5dafa69664f2e8f864ef7891' }, h("div", { key: '17a44cd43fa1d20bb34509c5d5e1722c47937a12', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
     }
     static get is() { return "dda-horizontal-stepper"; }
     static get originalStyleUrls() {
@@ -35,7 +47,7 @@ export class DdaHorizontalStepper {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Steps, as a JSON string array of `{ title, subtitle, description }` objects."
                 },
                 "getter": false,
                 "setter": false,
@@ -54,7 +66,7 @@ export class DdaHorizontalStepper {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Index of the active step, from 0. Steps before it show as completed."
                 },
                 "getter": false,
                 "setter": false,
@@ -74,7 +86,7 @@ export class DdaHorizontalStepper {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the stepper container."
                 },
                 "getter": false,
                 "setter": false,
@@ -93,7 +105,7 @@ export class DdaHorizontalStepper {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class on the stepper container, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -107,4 +119,10 @@ export class DdaHorizontalStepper {
             "parsedSteps": {}
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "steps",
+                "methodName": "parseSteps"
+            }];
+    }
 }

package/dist/collection/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.stories.js

@@ -31,8 +31,8 @@ export default {
 <dda-horizontal-stepper
     steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."}]'
     current_step="1"
-    custom_class=''
-    mode='light'
+    custom_class=""
+    component_mode="light-mode"
 ></dda-horizontal-stepper>
     \`\`\`
   `,

package/dist/collection/components/stepper/dda-vertical-stepper/dda-vertical-stepper.js

@@ -1,15 +1,30 @@
 import { h, Host } from "@stencil/core";
 export class DdaVerticalStepper {
     constructor() {
+        /** @deprecated Use `current_step`. Its attribute is `current_-step`, so it never worked in HTML. */
         this.current_Step = 0;
+        /** Extra CSS classes added to the stepper container. */
         this.custom_class = '';
         this.parsedSteps = [];
     }
     componentWillLoad() {
-        this.parsedSteps = JSON.parse(this.steps);
+        this.parseSteps();
+    }
+    /** Re-parses `steps` when it changes after load. A missing or invalid value renders no steps. */
+    parseSteps() {
+        var _a;
+        try {
+            const steps = JSON.parse((_a = this.steps) !== null && _a !== void 0 ? _a : '[]');
+            this.parsedSteps = Array.isArray(steps) ? steps : [];
+        }
+        catch (_b) {
+            this.parsedSteps = [];
+        }
     }
     render() {
-        return (h(Host, { key: '2cc0fba05a159beb85c51bc0d27a81a1714ad3de' }, h("div", { key: 'b9b4f452fb34f825dd30581fa976ccf183b7921f', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= this.current_Step ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons` }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined" }, "chevron_right"))))))));
+        var _a;
+        const current = (_a = this.current_step) !== null && _a !== void 0 ? _a : this.current_Step;
+        return (h(Host, { key: '35d930b7e0eef90b1f0c6e8dce9fa49065b4fb6e' }, h("div", { key: '690ea598a073d296066e661d31a769802a5bcbdf', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= current ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons` }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined" }, "chevron_right"))))))));
     }
     static get is() { return "dda-vertical-stepper"; }
     static get originalStyleUrls() {
@@ -36,13 +51,32 @@ export class DdaVerticalStepper {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Steps, as a JSON string array of `{ icon, title, subtitle, description }` objects. `icon` is a Material Icons name."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "steps"
             },
+            "current_step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of the current step, from 0. Steps up to and including it are active."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current_step"
+            },
             "current_Step": {
                 "type": "number",
                 "mutable": false,
@@ -54,7 +88,10 @@ export class DdaVerticalStepper {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `current_step`. Its attribute is `current_-step`, so it never worked in HTML."
+                        }],
                     "text": ""
                 },
                 "getter": false,
@@ -75,7 +112,7 @@ export class DdaVerticalStepper {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the stepper container."
                 },
                 "getter": false,
                 "setter": false,
@@ -95,7 +132,7 @@ export class DdaVerticalStepper {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Class added to the stepper container, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -109,4 +146,10 @@ export class DdaVerticalStepper {
             "parsedSteps": {}
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "steps",
+                "methodName": "parseSteps"
+            }];
+    }
 }

package/dist/collection/components/stepper/dda-vertical-stepper/dda-vertical-stepper.stories.js

@@ -30,8 +30,8 @@ export default {
 <dda-vertical-stepper
     steps='[{"icon":"sentiment_satisfied","title":"Step 1","subtitle":"Subtitle 1","description":"Description 1"},{"icon":"sentiment_satisfied","title":"Step 2","subtitle":"Subtitle 2","description":"Description 2"},{"icon":"sentiment_satisfied","title":"Step 3","subtitle":"Subtitle 3","description":"Description 3"}]'
     current_step="1"
-    custom_class='""'
-    mode='"light"'
+    custom_class=""
+    component_mode="light-mode"
 ></dda-vertical-stepper>
   \`\`\`
   `,