@uh-design-system/component-library 1.6.0 → 1.7.0

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-17T10:52:38",
+  "timestamp": "2026-06-25T12:12:31",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -13117,6 +13117,7 @@
         "ds-options-message",
         "ds-select",
         "ds-select-native",
+        "ds-step-bullet-base",
         "ds-tab",
         "ds-tag",
         "ds-text-input"
@@ -13189,6 +13190,9 @@
         "ds-select-native": [
           "ds-icon"
         ],
+        "ds-step-bullet-base": [
+          "ds-icon"
+        ],
         "ds-tab": [
           "ds-icon"
         ],
@@ -56694,7 +56698,7 @@
       "filePath": "src/components/01-base-components/ds-link-logo/ds-link-logo.tsx",
       "encapsulation": "shadow",
       "tag": "ds-link-logo",
-      "readme": "# ds-link-logo\n\nLogo link component for displaying site logo and name. Used primarily in navigation ribbons and headers.\n",
+      "readme": "# ds-link-logo\n\n\n",
       "docs": "Logo link component for displaying site logo and name.\nUsed primarily in navigation ribbons and headers.",
       "docsTags": [],
       "usage": {},
@@ -57674,7 +57678,7 @@
           "mutable": false,
           "attr": "ds-autoplay",
           "reflectToAttr": false,
-          "docs": "Whether the media should autoplay (video/audio only).",
+          "docs": "Whether the media should autoplay (video only).",
           "docsTags": [
             {
               "name": "default",
@@ -57692,6 +57696,58 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "dsCaptionText",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-caption-text",
+          "reflectToAttr": false,
+          "docs": "Caption text displayed below the media. Renders a <figcaption> element when provided.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsControls",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-controls",
+          "reflectToAttr": false,
+          "docs": "Whether to show native playback controls (video only).",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "dsFluid",
           "type": "boolean",
@@ -57732,7 +57788,7 @@
           "mutable": false,
           "attr": "ds-loop",
           "reflectToAttr": false,
-          "docs": "Whether the media should loop (video/audio only).",
+          "docs": "Whether the media should loop (video only).",
           "docsTags": [
             {
               "name": "default",
@@ -57761,7 +57817,7 @@
           "mutable": false,
           "attr": "ds-muted",
           "reflectToAttr": false,
-          "docs": "Whether the media should be muted (video/audio only).",
+          "docs": "Whether the media should be muted (video only).",
           "docsTags": [
             {
               "name": "default",
@@ -57802,6 +57858,29 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "dsSizes",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-sizes",
+          "reflectToAttr": false,
+          "docs": "Sizes attribute for responsive images (e.g., '(max-width: 600px) 100vw, 50vw').\nOnly applies when dsType is 'image'. Used together with dsSrcset.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "dsSrc",
           "type": "string",
@@ -57813,7 +57892,7 @@
           "mutable": false,
           "attr": "ds-src",
           "reflectToAttr": false,
-          "docs": "Source URL for the media (image, video, audio, or YouTube).",
+          "docs": "Source URL for the media (image, video, or YouTube).",
           "docsTags": [],
           "values": [
             {
@@ -57825,12 +57904,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "dsSrcset",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-srcset",
+          "reflectToAttr": false,
+          "docs": "Srcset attribute for responsive images (e.g., 'img-800.jpg 800w, img-1200.jpg 1200w').\nOnly applies when dsType is 'image'.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "dsType",
-          "type": "\"image\" | \"video\" | \"youtube\"",
+          "type": "\"iframe\" | \"image\" | \"video\" | \"youtube\"",
           "complexType": {
             "original": "MediaType",
-            "resolved": "\"image\" | \"video\" | \"youtube\"",
+            "resolved": "\"iframe\" | \"image\" | \"video\" | \"youtube\"",
             "references": {
               "MediaType": {
                 "location": "local",
@@ -57842,9 +57944,13 @@
           "mutable": false,
           "attr": "ds-type",
           "reflectToAttr": false,
-          "docs": "Type of media to display: 'image', 'video', 'audio', or 'youtube'.",
+          "docs": "Type of media to display: 'image', 'video', or 'youtube'.",
           "docsTags": [],
           "values": [
+            {
+              "value": "iframe",
+              "type": "string"
+            },
             {
               "value": "image",
               "type": "string"
@@ -57874,7 +57980,7 @@
           "mutable": false,
           "attr": "ds-use-lazy",
           "reflectToAttr": false,
-          "docs": "Whether the image should use lazy loading or not.",
+          "docs": "Whether the image should use lazy loading.",
           "docsTags": [
             {
               "name": "default",
@@ -64026,309 +64132,384 @@
       }
     },
     {
-      "filePath": "src/components/01-base-components/ds-store/ds-store.tsx",
-      "encapsulation": "none",
-      "tag": "ds-store",
-      "readme": "# ds-headless-language-select\n\n\n",
+      "filePath": "src/components/01-base-components/ds-steps/ds-step/ds-step.tsx",
+      "encapsulation": "scoped",
+      "tag": "ds-step",
+      "readme": "# ds-step\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "bullet - The bullet."
+        },
+        {
+          "name": "slot",
+          "text": "content - The content."
+        }
+      ],
       "usage": {},
       "props": [
         {
-          "name": "dsLanguage",
-          "type": "\"en\" | \"fi\" | \"sv\"",
+          "name": "dsFullWidth",
+          "type": "boolean",
           "complexType": {
-            "original": "Language",
-            "resolved": "\"en\" | \"fi\" | \"sv\"",
-            "references": {
-              "Language": {
-                "location": "import",
-                "path": "../../../store",
-                "id": "src/store.ts::Language",
-                "referenceLocation": "Language"
-              }
-            }
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
           },
-          "mutable": true,
-          "attr": "ds-language",
-          "reflectToAttr": true,
-          "docs": "",
+          "mutable": false,
+          "attr": "ds-full-width",
+          "reflectToAttr": false,
+          "docs": "Passed to the `dsFullWidth` property of the `ds-step-base` element.",
           "docsTags": [
             {
               "name": "default",
-              "text": "'en'"
+              "text": "false"
             }
           ],
-          "default": "'en'",
+          "default": "false",
           "values": [
             {
-              "value": "en",
-              "type": "string"
-            },
-            {
-              "value": "fi",
-              "type": "string"
-            },
-            {
-              "value": "sv",
-              "type": "string"
+              "type": "boolean"
             }
           ],
           "optional": false,
           "required": false,
           "getter": false,
           "setter": false
-        }
-      ],
-      "methods": [
+        },
         {
-          "name": "getLanguage",
-          "returns": {
-            "type": "Promise<\"fi\" | \"sv\" | \"en\">",
-            "docs": ""
-          },
+          "name": "dsOrdinal",
+          "type": "number",
           "complexType": {
-            "signature": "() => Promise<\"fi\" | \"sv\" | \"en\">",
-            "parameters": [],
-            "references": {
-              "Promise": {
-                "location": "global",
-                "id": "global::Promise"
-              }
-            },
-            "return": "Promise<\"fi\" | \"sv\" | \"en\">"
+            "original": "number",
+            "resolved": "number",
+            "references": {}
           },
-          "signature": "getLanguage() => Promise<\"fi\" | \"sv\" | \"en\">",
-          "parameters": [],
-          "docs": "",
-          "docsTags": []
+          "mutable": false,
+          "attr": "ds-ordinal",
+          "reflectToAttr": false,
+          "docs": "Ordinal number of the step.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
         },
         {
-          "name": "setLanguage",
-          "returns": {
-            "type": "Promise<void>",
-            "docs": ""
-          },
+          "name": "dsOrientation",
+          "type": "\"horizontal\" | \"vertical\"",
           "complexType": {
-            "signature": "(language: Language) => Promise<void>",
-            "parameters": [
-              {
-                "name": "language",
-                "type": "\"fi\" | \"sv\" | \"en\"",
-                "docs": ""
-              }
-            ],
-            "references": {
-              "Promise": {
-                "location": "global",
-                "id": "global::Promise"
-              },
-              "Language": {
-                "location": "import",
-                "path": "../../../store",
-                "id": "src/store.ts::Language",
-                "referenceLocation": "Language"
-              }
-            },
-            "return": "Promise<void>"
+            "original": "'horizontal' | 'vertical'",
+            "resolved": "\"horizontal\" | \"vertical\"",
+            "references": {}
           },
-          "signature": "setLanguage(language: Language) => Promise<void>",
-          "parameters": [
+          "mutable": false,
+          "attr": "ds-orientation",
+          "reflectToAttr": false,
+          "docs": "Passed to the `dsOrientation` property of the `ds-step-base` element.",
+          "docsTags": [],
+          "values": [
             {
-              "name": "language",
-              "type": "\"fi\" | \"sv\" | \"en\"",
-              "docs": ""
+              "value": "horizontal",
+              "type": "string"
+            },
+            {
+              "value": "vertical",
+              "type": "string"
             }
           ],
-          "docs": "",
-          "docsTags": []
-        }
-      ],
-      "events": [
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
-          "event": "dsLanguageChange",
-          "detail": "\"en\" | \"fi\" | \"sv\"",
-          "bubbles": true,
+          "name": "dsPhase",
+          "type": "\"complete\" | \"current\" | \"incomplete\" | \"static\"",
           "complexType": {
-            "original": "Language",
-            "resolved": "\"en\" | \"fi\" | \"sv\"",
-            "references": {
-              "Language": {
-                "location": "import",
-                "path": "../../../store",
-                "id": "src/store.ts::Language",
-                "referenceLocation": "Language"
-              }
-            }
+            "original": "'static' | 'incomplete' | 'current' | 'complete'",
+            "resolved": "\"complete\" | \"current\" | \"incomplete\" | \"static\"",
+            "references": {}
           },
-          "cancelable": true,
-          "composed": true,
-          "docs": "",
-          "docsTags": []
+          "mutable": false,
+          "attr": "ds-phase",
+          "reflectToAttr": false,
+          "docs": "Phase of the step.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'static'"
+            }
+          ],
+          "default": "'static'",
+          "values": [
+            {
+              "value": "complete",
+              "type": "string"
+            },
+            {
+              "value": "current",
+              "type": "string"
+            },
+            {
+              "value": "incomplete",
+              "type": "string"
+            },
+            {
+              "value": "static",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
+      "methods": [],
+      "events": [],
       "listeners": [],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "bullet",
+          "docs": "The bullet."
+        },
+        {
+          "name": "content",
+          "docs": "The content."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "ds-step-base"
+      ],
+      "dependencyGraph": {
+        "ds-step": [
+          "ds-step-base"
+        ]
+      }
     },
     {
-      "filePath": "src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx",
+      "filePath": "src/components/01-base-components/ds-steps/ds-step-base/ds-step-base.tsx",
       "encapsulation": "scoped",
-      "tag": "ds-tab",
-      "readme": "# ds-tab\n\n\n",
+      "tag": "ds-step-base",
+      "readme": "# ds-step-base\n\n\n",
       "docs": "",
       "docsTags": [
         {
           "name": "slot",
-          "text": "prefix - The content to display before the main tab content (e.g., a descriptive icon)."
-        },
-        {
-          "name": "slot",
-          "text": "content - The content to display within the tab."
+          "text": "bullet - The bullet."
         },
         {
           "name": "slot",
-          "text": "suffix - The content to display after the main tab content (e.g., a status icon)."
+          "text": "content - The content."
         }
       ],
       "usage": {},
       "props": [
         {
-          "name": "dsIconEnd",
-          "type": "string",
+          "name": "dsFullWidth",
+          "type": "boolean",
           "complexType": {
-            "original": "string",
-            "resolved": "string",
+            "original": "boolean",
+            "resolved": "boolean",
             "references": {}
           },
           "mutable": false,
-          "attr": "ds-icon-end",
+          "attr": "ds-full-width",
           "reflectToAttr": false,
-          "docs": "The name of the icon to display at the end of the tab.",
-          "docsTags": [],
+          "docs": "If true, the step will take the full width of its container.\nCan be used to achieve same size for all steps in a horizontal stepper.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
           "values": [
             {
-              "type": "string"
+              "type": "boolean"
             }
           ],
-          "optional": true,
+          "optional": false,
           "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "dsIconEndColour",
-          "type": "\"attention\" | \"danger\" | \"default\" | \"disabled-onDark\" | \"disabled-onLight\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"white\"",
+          "name": "dsOrientation",
+          "type": "\"horizontal\" | \"vertical\"",
           "complexType": {
-            "original": "(typeof colourNames)[number]",
-            "resolved": "\"attention\" | \"danger\" | \"default\" | \"disabled-onDark\" | \"disabled-onLight\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"white\"",
+            "original": "'horizontal' | 'vertical'",
+            "resolved": "\"horizontal\" | \"vertical\"",
             "references": {}
           },
           "mutable": false,
-          "attr": "ds-icon-end-colour",
+          "attr": "ds-orientation",
           "reflectToAttr": false,
-          "docs": "The colour of the end icon.",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "attention",
-              "type": "string"
-            },
-            {
-              "value": "danger",
-              "type": "string"
-            },
-            {
-              "value": "default",
-              "type": "string"
-            },
-            {
-              "value": "disabled-onDark",
-              "type": "string"
-            },
-            {
-              "value": "disabled-onLight",
-              "type": "string"
-            },
-            {
-              "value": "info",
-              "type": "string"
-            },
-            {
-              "value": "neutral",
-              "type": "string"
-            },
+          "docs": "Orientation of the step bullet and line. Should match the `dsOrientation` property of the `ds-steps` component.",
+          "docsTags": [
             {
-              "value": "primary",
-              "type": "string"
-            },
+              "name": "default",
+              "text": "'vertical'"
+            }
+          ],
+          "default": "'vertical'",
+          "values": [
             {
-              "value": "success",
+              "value": "horizontal",
               "type": "string"
             },
             {
-              "value": "white",
+              "value": "vertical",
               "type": "string"
             }
           ],
-          "optional": true,
+          "optional": false,
           "required": false,
           "getter": false,
           "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "bullet",
+          "docs": "The bullet."
         },
         {
-          "name": "dsIconStart",
-          "type": "string",
+          "name": "content",
+          "docs": "The content."
+        }
+      ],
+      "parts": [],
+      "states": [],
+      "dependents": [
+        "ds-step"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "ds-step": [
+          "ds-step-base"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/01-base-components/ds-steps/ds-step/ds-step-bullet/ds-step-bullet.tsx",
+      "encapsulation": "scoped",
+      "tag": "ds-step-bullet",
+      "readme": "# ds-step-bullet\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "dsShowLine",
+          "type": "boolean",
           "complexType": {
-            "original": "string",
-            "resolved": "string",
+            "original": "boolean",
+            "resolved": "boolean",
             "references": {}
           },
           "mutable": false,
-          "attr": "ds-icon-start",
+          "attr": "ds-show-line",
           "reflectToAttr": false,
-          "docs": "The name of the icon to display at the start of the tab.",
-          "docsTags": [],
+          "docs": "If true, a line will be shown.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
           "values": [
             {
-              "type": "string"
+              "type": "boolean"
             }
           ],
-          "optional": true,
+          "optional": false,
           "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "dsId",
-          "type": "string",
+          "name": "dsSize",
+          "type": "\"medium\" | \"small\"",
           "complexType": {
-            "original": "string",
-            "resolved": "string",
+            "original": "'small' | 'medium'",
+            "resolved": "\"medium\" | \"small\"",
             "references": {}
           },
           "mutable": false,
-          "attr": "ds-id",
+          "attr": "ds-size",
           "reflectToAttr": false,
-          "docs": "The ID of the tab.",
-          "docsTags": [],
+          "docs": "Passed to the `dsSize` property of the `ds-step-bullet-base` element.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'medium'"
+            }
+          ],
+          "default": "'medium'",
           "values": [
             {
+              "value": "medium",
+              "type": "string"
+            },
+            {
+              "value": "small",
               "type": "string"
             }
           ],
           "optional": false,
-          "required": true,
+          "required": false,
           "getter": false,
           "setter": false
-        },
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [
+        "ds-step-bullet-base"
+      ],
+      "dependencyGraph": {
+        "ds-step-bullet": [
+          "ds-step-bullet-base"
+        ],
+        "ds-step-bullet-base": [
+          "ds-icon"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/01-base-components/ds-steps/ds-step-base/ds-step-bullet-base/ds-step-bullet-base.tsx",
+      "encapsulation": "scoped",
+      "tag": "ds-step-bullet-base",
+      "readme": "# ds-step-bullet-custom\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
         {
-          "name": "dsTabPanelId",
+          "name": "dsBorderColour",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -64336,43 +64517,1147 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "ds-tab-panel-id",
+          "attr": "ds-border-colour",
           "reflectToAttr": false,
-          "docs": "The ID of the associated tab panel.",
+          "docs": "Border colour of the step bullet.",
           "docsTags": [],
           "values": [
             {
               "type": "string"
             }
           ],
-          "optional": false,
-          "required": true,
+          "optional": true,
+          "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "dsText",
-          "type": "string",
+          "name": "dsBorderWidth",
+          "type": "\"hairline\" | \"none\" | \"thick\" | \"thin\" | \"xThick\"",
           "complexType": {
-            "original": "string",
-            "resolved": "string",
+            "original": "'none' | 'hairline' | 'thin' | 'thick' | 'xThick'",
+            "resolved": "\"hairline\" | \"none\" | \"thick\" | \"thin\" | \"xThick\"",
             "references": {}
           },
           "mutable": false,
-          "attr": "ds-text",
+          "attr": "ds-border-width",
           "reflectToAttr": false,
-          "docs": "The text content of the tab.",
-          "docsTags": [],
-          "values": [
+          "docs": "Width of the border of the step bullet.",
+          "docsTags": [
             {
-              "type": "string"
+              "name": "default",
+              "text": "'none'"
             }
           ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        }
+          "default": "'none'",
+          "values": [
+            {
+              "value": "hairline",
+              "type": "string"
+            },
+            {
+              "value": "none",
+              "type": "string"
+            },
+            {
+              "value": "thick",
+              "type": "string"
+            },
+            {
+              "value": "thin",
+              "type": "string"
+            },
+            {
+              "value": "xThick",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsFillColour",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-fill-colour",
+          "reflectToAttr": false,
+          "docs": "Fill colour of the step bullet.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsIcon",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-icon",
+          "reflectToAttr": false,
+          "docs": "Name of the icon to display inside the step bullet.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsIconColour",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-icon-colour",
+          "reflectToAttr": false,
+          "docs": "Colour of the icon inside the step bullet.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsLineColour",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-line-colour",
+          "reflectToAttr": false,
+          "docs": "Colour of the line.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsLineWidth",
+          "type": "\"hairline\" | \"none\" | \"thick\" | \"thin\" | \"xThick\"",
+          "complexType": {
+            "original": "'none' | 'hairline' | 'thin' | 'thick' | 'xThick'",
+            "resolved": "\"hairline\" | \"none\" | \"thick\" | \"thin\" | \"xThick\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-line-width",
+          "reflectToAttr": false,
+          "docs": "Width of the line.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'none'"
+            }
+          ],
+          "default": "'none'",
+          "values": [
+            {
+              "value": "hairline",
+              "type": "string"
+            },
+            {
+              "value": "none",
+              "type": "string"
+            },
+            {
+              "value": "thick",
+              "type": "string"
+            },
+            {
+              "value": "thin",
+              "type": "string"
+            },
+            {
+              "value": "xThick",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsOrientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "complexType": {
+            "original": "'horizontal' | 'vertical'",
+            "resolved": "\"horizontal\" | \"vertical\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-orientation",
+          "reflectToAttr": false,
+          "docs": "Orientation of the step. Should match the `dsOrientation` property of the `ds-steps` component.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'vertical'"
+            }
+          ],
+          "default": "'vertical'",
+          "values": [
+            {
+              "value": "horizontal",
+              "type": "string"
+            },
+            {
+              "value": "vertical",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsSize",
+          "type": "\"medium\" | \"small\"",
+          "complexType": {
+            "original": "'small' | 'medium'",
+            "resolved": "\"medium\" | \"small\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-size",
+          "reflectToAttr": false,
+          "docs": "Size of the step bullet.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'medium'"
+            }
+          ],
+          "default": "'medium'",
+          "values": [
+            {
+              "value": "medium",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsText",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-text",
+          "reflectToAttr": false,
+          "docs": "Text to display inside the step bullet.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsTextColour",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-text-colour",
+          "reflectToAttr": false,
+          "docs": "Colour of the text inside the step bullet.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [
+        "ds-step-bullet"
+      ],
+      "dependencies": [
+        "ds-icon"
+      ],
+      "dependencyGraph": {
+        "ds-step-bullet-base": [
+          "ds-icon"
+        ],
+        "ds-step-bullet": [
+          "ds-step-bullet-base"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/01-base-components/ds-steps/ds-step/ds-step-content/ds-step-content.tsx",
+      "encapsulation": "scoped",
+      "tag": "ds-step-content",
+      "readme": "# ds-step-content\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "heading - The heading content for the step."
+        },
+        {
+          "name": "slot",
+          "text": "content - The main content for the step."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "dsFullWidth",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-full-width",
+          "reflectToAttr": false,
+          "docs": "Passed to the `dsFullWidth` property of the `ds-step-content-base` element.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsHeading",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-heading",
+          "reflectToAttr": false,
+          "docs": "Passed to the `dsHeading` property of the `ds-step-content-base` element.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "content",
+          "docs": "The main content for the step."
+        },
+        {
+          "name": "heading",
+          "docs": "The heading content for the step."
+        }
+      ],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [
+        "ds-step-content-base"
+      ],
+      "dependencyGraph": {
+        "ds-step-content": [
+          "ds-step-content-base"
+        ],
+        "ds-step-content-base": [
+          "ds-visually-hidden"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/01-base-components/ds-steps/ds-step-base/ds-step-content-base/ds-step-content-base.tsx",
+      "encapsulation": "scoped",
+      "tag": "ds-step-content-base",
+      "readme": "# ds-step-content\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "heading - The heading content for the step."
+        },
+        {
+          "name": "slot",
+          "text": "content - The main content for the step."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "dsAriaCurrent",
+          "type": "\"step\"",
+          "complexType": {
+            "original": "'step' | undefined",
+            "resolved": "\"step\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-aria-current",
+          "reflectToAttr": false,
+          "docs": "Passed to the `aria-current` attribute of the heading element. Should be set to \"step\" for the current step.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "undefined"
+            }
+          ],
+          "default": "undefined",
+          "values": [
+            {
+              "value": "step",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsFullWidth",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-full-width",
+          "reflectToAttr": false,
+          "docs": "If true, the step content takes the full width of its container.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsHeading",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-heading",
+          "reflectToAttr": false,
+          "docs": "Heading text for the step content.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsHeadingColour",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-heading-colour",
+          "reflectToAttr": false,
+          "docs": "Colour of the heading text.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsHiddenAssistiveText",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-hidden-assistive-text",
+          "reflectToAttr": false,
+          "docs": "Assistive text for screen readers. Provide additional context for the step, e.g., a status text.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsOrdinal",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-ordinal",
+          "reflectToAttr": false,
+          "docs": "Ordinal number of the step.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsOrientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "complexType": {
+            "original": "'horizontal' | 'vertical'",
+            "resolved": "\"horizontal\" | \"vertical\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-orientation",
+          "reflectToAttr": false,
+          "docs": "Orientation of the step. Should match the `dsOrientation` property of the `ds-steps` component.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'vertical'"
+            }
+          ],
+          "default": "'vertical'",
+          "values": [
+            {
+              "value": "horizontal",
+              "type": "string"
+            },
+            {
+              "value": "vertical",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "content",
+          "docs": "The main content for the step."
+        },
+        {
+          "name": "heading",
+          "docs": "The heading content for the step."
+        }
+      ],
+      "parts": [],
+      "states": [],
+      "dependents": [
+        "ds-step-content"
+      ],
+      "dependencies": [
+        "ds-visually-hidden"
+      ],
+      "dependencyGraph": {
+        "ds-step-content-base": [
+          "ds-visually-hidden"
+        ],
+        "ds-step-content": [
+          "ds-step-content-base"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/01-base-components/ds-steps/ds-steps.tsx",
+      "encapsulation": "scoped",
+      "tag": "ds-steps",
+      "readme": "# ds-steps\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - The steps."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "dsOrientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "complexType": {
+            "original": "'horizontal' | 'vertical'",
+            "resolved": "\"horizontal\" | \"vertical\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-orientation",
+          "reflectToAttr": false,
+          "docs": "Orientation of the steps.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'vertical'"
+            }
+          ],
+          "default": "'vertical'",
+          "values": [
+            {
+              "value": "horizontal",
+              "type": "string"
+            },
+            {
+              "value": "vertical",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "The steps."
+        }
+      ],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/01-base-components/ds-store/ds-store.tsx",
+      "encapsulation": "none",
+      "tag": "ds-store",
+      "readme": "# ds-headless-language-select\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "dsLanguage",
+          "type": "\"en\" | \"fi\" | \"sv\"",
+          "complexType": {
+            "original": "Language",
+            "resolved": "\"en\" | \"fi\" | \"sv\"",
+            "references": {
+              "Language": {
+                "location": "import",
+                "path": "../../../store",
+                "id": "src/store.ts::Language",
+                "referenceLocation": "Language"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "ds-language",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'en'"
+            }
+          ],
+          "default": "'en'",
+          "values": [
+            {
+              "value": "en",
+              "type": "string"
+            },
+            {
+              "value": "fi",
+              "type": "string"
+            },
+            {
+              "value": "sv",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "getLanguage",
+          "returns": {
+            "type": "Promise<\"fi\" | \"sv\" | \"en\">",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<\"fi\" | \"sv\" | \"en\">",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<\"fi\" | \"sv\" | \"en\">"
+          },
+          "signature": "getLanguage() => Promise<\"fi\" | \"sv\" | \"en\">",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "setLanguage",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(language: Language) => Promise<void>",
+            "parameters": [
+              {
+                "name": "language",
+                "type": "\"fi\" | \"sv\" | \"en\"",
+                "docs": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "Language": {
+                "location": "import",
+                "path": "../../../store",
+                "id": "src/store.ts::Language",
+                "referenceLocation": "Language"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "setLanguage(language: Language) => Promise<void>",
+          "parameters": [
+            {
+              "name": "language",
+              "type": "\"fi\" | \"sv\" | \"en\"",
+              "docs": ""
+            }
+          ],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "dsLanguageChange",
+          "detail": "\"en\" | \"fi\" | \"sv\"",
+          "bubbles": true,
+          "complexType": {
+            "original": "Language",
+            "resolved": "\"en\" | \"fi\" | \"sv\"",
+            "references": {
+              "Language": {
+                "location": "import",
+                "path": "../../../store",
+                "id": "src/store.ts::Language",
+                "referenceLocation": "Language"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx",
+      "encapsulation": "scoped",
+      "tag": "ds-tab",
+      "readme": "# ds-tab\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "prefix - The content to display before the main tab content (e.g., a descriptive icon)."
+        },
+        {
+          "name": "slot",
+          "text": "content - The content to display within the tab."
+        },
+        {
+          "name": "slot",
+          "text": "suffix - The content to display after the main tab content (e.g., a status icon)."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "dsIconEnd",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-icon-end",
+          "reflectToAttr": false,
+          "docs": "The name of the icon to display at the end of the tab.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsIconEndAriaLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-icon-end-aria-label",
+          "reflectToAttr": false,
+          "docs": "The aria-label for the end icon.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsIconEndColour",
+          "type": "\"attention\" | \"danger\" | \"default\" | \"disabled-onDark\" | \"disabled-onLight\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"white\"",
+          "complexType": {
+            "original": "(typeof colourNames)[number]",
+            "resolved": "\"attention\" | \"danger\" | \"default\" | \"disabled-onDark\" | \"disabled-onLight\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"white\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-icon-end-colour",
+          "reflectToAttr": false,
+          "docs": "The colour of the end icon.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "attention",
+              "type": "string"
+            },
+            {
+              "value": "danger",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled-onDark",
+              "type": "string"
+            },
+            {
+              "value": "disabled-onLight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "neutral",
+              "type": "string"
+            },
+            {
+              "value": "primary",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "white",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsIconStart",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-icon-start",
+          "reflectToAttr": false,
+          "docs": "The name of the icon to display at the start of the tab.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsIconStartAriaLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-icon-start-aria-label",
+          "reflectToAttr": false,
+          "docs": "The aria-label for the start icon.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-id",
+          "reflectToAttr": false,
+          "docs": "The ID of the tab.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsTabPanelId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-tab-panel-id",
+          "reflectToAttr": false,
+          "docs": "The ID of the associated tab panel.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dsText",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-text",
+          "reflectToAttr": false,
+          "docs": "The text content of the tab.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
       ],
       "methods": [
         {
@@ -67360,6 +68645,7 @@
         "ds-radio-button",
         "ds-ribbon",
         "ds-spinner",
+        "ds-step-content-base",
         "ds-text-area"
       ],
       "dependencies": [],
@@ -67403,6 +68689,9 @@
         "ds-spinner": [
           "ds-visually-hidden"
         ],
+        "ds-step-content-base": [
+          "ds-visually-hidden"
+        ],
         "ds-text-area": [
           "ds-visually-hidden"
         ]
@@ -67586,7 +68875,7 @@
       "path": "src/components/01-base-components/ds-datepicker/ds-datepicker.tsx"
     },
     "src/components/01-base-components/ds-media/ds-media.tsx::MediaType": {
-      "declaration": "export type MediaType = 'image' | 'video' | 'youtube';",
+      "declaration": "export type MediaType = 'image' | 'video' | 'youtube' | 'iframe';",
       "docstring": "",
       "path": "src/components/01-base-components/ds-media/ds-media.tsx"
     },