@uh-design-system/component-library 1.7.0-rc.0 → 1.7.0

package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css

@@ -4,19 +4,19 @@
   display: block;
 }
 
-.ds-link-with-arrow__oJU1eo {
+.ds-link-with-arrow__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-link-with-arrow__oJU1eo:focus-visible {
+.ds-link-with-arrow__pA2cRq:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-link-with-arrow__oJU1eo {
+.ds-link-with-arrow__pA2cRq {
   display: inline-flex;
   align-items: center;
   color: var(--ds-textColor-link);
@@ -27,15 +27,15 @@
   text-decoration-line: none;
 }
 @media (min-width: 30rem) {
-  .ds-link-with-arrow__oJU1eo {
+  .ds-link-with-arrow__pA2cRq {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-link-with-arrow__oJU1eo--full-width {
+.ds-link-with-arrow__pA2cRq--full-width {
   width: 100%;
   justify-content: space-between;
 }
-.ds-link-with-arrow__oJU1eo__icon {
+.ds-link-with-arrow__pA2cRq__icon {
   display: inline-flex;
   flex-shrink: 0;
   width: 2rem;
@@ -47,18 +47,18 @@
   background-color: var(--ds-bgColor-primary);
 }
 @media (min-width: 30rem) {
-  .ds-link-with-arrow__oJU1eo__icon {
+  .ds-link-with-arrow__pA2cRq__icon {
     width: 2.5rem;
     height: 2.5rem;
   }
 }
-.ds-link-with-arrow__oJU1eo__icon--start {
+.ds-link-with-arrow__pA2cRq__icon--start {
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-link-with-arrow__oJU1eo__icon--end {
+.ds-link-with-arrow__pA2cRq__icon--end {
   margin-left: var(--ds-spacing-xSmall);
 }
-.ds-link-with-arrow__oJU1eo:hover, .ds-link-with-arrow__oJU1eo:active {
+.ds-link-with-arrow__pA2cRq:hover, .ds-link-with-arrow__pA2cRq:active {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -66,16 +66,16 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link-with-arrow__oJU1eo:hover {
+.ds-link-with-arrow__pA2cRq:hover {
   cursor: pointer;
   color: var(--ds-textColor-link-hover);
 }
-.ds-link-with-arrow__oJU1eo:hover .ds-link-with-arrow__oJU1eo__icon {
+.ds-link-with-arrow__pA2cRq:hover .ds-link-with-arrow__pA2cRq__icon {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-link-with-arrow__oJU1eo:active, .ds-link-with-arrow__oJU1eo:focus-visible {
+.ds-link-with-arrow__pA2cRq:active, .ds-link-with-arrow__pA2cRq:focus-visible {
   color: var(--ds-textColor-link-active);
 }
-.ds-link-with-arrow__oJU1eo:active .ds-link-with-arrow__oJU1eo__icon {
+.ds-link-with-arrow__pA2cRq:active .ds-link-with-arrow__pA2cRq__icon {
   background-color: var(--ds-bgColor-primary-active);
 }

package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js

@@ -78,7 +78,7 @@ export class DsLinkWithArrow extends Mixin(componentFactory('ds-link-with-arrow'
         const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
-        return (h(this.dsTag, { key: '3e7200ff059ad4ba18bca6f51be2dd64d36e954c', class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: 'a1df9653811580869013f5d39dbcf3d5a46537ea', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: '1a3f309f236700c53beed173c635256cf807527c', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: 'caeeb904f1af41f0e4afc53f39309fa70156c8ef', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: '35be26fc38924d10b3305bb853b8133a745c82c8', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '806ebc69ec707c71fc3eb15a9ea3c03e690a7cbe', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: '1d23feca569fa2a2bf438db4446283f12215eba8', class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: 'acc62c6dd5cf5a0262c10ffa1f0d1723a7f4e4ea', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: '4ff8d012d980e5ba799adfcc0fc0d442f2ea7599', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: 'a68628f775ae39b7942543ce982aeeddc7c1ea59', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: 'cd849008980aea45c6166bdf43641218ff394619', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '450738f6df19a886c122f984bf7fff34345383d7', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-with-arrow"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-media/ds-media.css

@@ -1,13 +1,27 @@
-.ds-media__oJU1eo {
+.ds-media__pA2cRq {
+  position: relative;
+  width: 100%;
+  height: auto;
+  margin: 0;
+  padding: 0;
+}
+.ds-media__pA2cRq__media-wrapper {
   position: relative;
   width: 100%;
   height: auto;
   overflow: hidden;
   background-color: var(--ds-palette-black-05);
 }
-.ds-media__oJU1eo .ds-media__image,
-.ds-media__oJU1eo .ds-media__video,
-.ds-media__oJU1eo .ds-media__youtube {
+.ds-media__pA2cRq__caption {
+  display: block;
+  padding-top: var(--ds-spacing-2xSmall);
+  font-size: var(--ds-fontSize-14);
+  font-weight: var(--ds-fontWeight-regular);
+  font-family: var(--ds-fontFamily-body);
+  line-height: var(--ds-lineHeight-large);
+  color: var(--ds-textColor-secondary);
+}
+.ds-media__pA2cRq__image, .ds-media__pA2cRq__video, .ds-media__pA2cRq__youtube, .ds-media__pA2cRq__iframe {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -15,88 +29,87 @@
   max-height: var(--horizontal-image-max-height, auto);
   aspect-ratio: var(--ds-media-aspect-ratio);
 }
-.ds-media__oJU1eo .ds-media__image--fluid,
-.ds-media__oJU1eo .ds-media__video--fluid,
-.ds-media__oJU1eo .ds-media__youtube--fluid {
-  aspect-ratio: unset;
-}
-.ds-media__oJU1eo__youtube {
+.ds-media__pA2cRq__youtube, .ds-media__pA2cRq__iframe {
   border: none;
   object-fit: initial;
 }
-.ds-media__oJU1eo--loading .ds-media__image,
-.ds-media__oJU1eo--loading .ds-media__video {
+.ds-media__pA2cRq__spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+.ds-media__pA2cRq--loading .ds-media__pA2cRq__media-wrapper {
+  aspect-ratio: var(--ds-media-aspect-ratio);
+}
+.ds-media__pA2cRq--loading .ds-media__pA2cRq__image,
+.ds-media__pA2cRq--loading .ds-media__pA2cRq__video,
+.ds-media__pA2cRq--loading .ds-media__pA2cRq__youtube,
+.ds-media__pA2cRq--loading .ds-media__pA2cRq__iframe {
   opacity: 0;
 }
-.ds-media__oJU1eo--error {
+.ds-media__pA2cRq--error .ds-media__pA2cRq__media-wrapper {
   aspect-ratio: var(--ds-media-aspect-ratio);
 }
-.ds-media__oJU1eo--error .ds-media__image,
-.ds-media__oJU1eo--error .ds-media__video {
+.ds-media__pA2cRq--error .ds-media__pA2cRq__image,
+.ds-media__pA2cRq--error .ds-media__pA2cRq__video,
+.ds-media__pA2cRq--error .ds-media__pA2cRq__youtube,
+.ds-media__pA2cRq--error .ds-media__pA2cRq__iframe {
   display: none;
 }
-.ds-media__oJU1eo--error .ds-media__error {
+.ds-media__pA2cRq--error .ds-media__pA2cRq__error {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 12px;
+  gap: var(--ds-spacing-xSmall);
   background-color: var(--ds-bgColor-secondary);
   color: var(--ds-bgColor-danger-bold);
   z-index: 1;
-  padding: 16px;
+  padding: var(--ds-spacing-small);
   text-align: center;
 }
-.ds-media__oJU1eo--error .ds-media__error-icon {
-  width: 48px;
-  height: 48px;
-  color: var(--ds-bgColor-danger-bold);
-  flex-shrink: 0;
-}
-.ds-media__oJU1eo--error .ds-media__error-text {
-  font-size: 14px;
+.ds-media__pA2cRq--error .ds-media__pA2cRq__error-text {
+  font-size: var(--ds-fontSize-14);
   font-weight: 500;
-  line-height: 1.4;
+  line-height: var(--ds-lineHeight-large);
+}
+.ds-media__pA2cRq--image .ds-media__pA2cRq__image {
+  transition: opacity 0.3s ease;
 }
-.ds-media__oJU1eo--image .ds-media__image {
+.ds-media__pA2cRq--video .ds-media__pA2cRq__video {
   transition: opacity 0.3s ease;
 }
-.ds-media__oJU1eo--video .ds-media__video {
+.ds-media__pA2cRq--youtube .ds-media__pA2cRq__youtube {
   transition: opacity 0.3s ease;
 }
-.ds-media__oJU1eo--youtube .ds-media__youtube {
+.ds-media__pA2cRq--iframe .ds-media__pA2cRq__iframe {
   transition: opacity 0.3s ease;
 }
-.ds-media__oJU1eo--fluid {
+.ds-media__pA2cRq--fluid {
   width: 100%;
   height: 100%;
 }
-.ds-media__oJU1eo--fluid .ds-media__oJU1eo__image,
-.ds-media__oJU1eo--fluid .ds-media__oJU1eo__video,
-.ds-media__oJU1eo--fluid .ds-media__oJU1eo__youtube {
+.ds-media__pA2cRq--fluid .ds-media__pA2cRq__media-wrapper {
+  height: 100%;
+}
+.ds-media__pA2cRq--fluid .ds-media__pA2cRq__image,
+.ds-media__pA2cRq--fluid .ds-media__pA2cRq__video,
+.ds-media__pA2cRq--fluid .ds-media__pA2cRq__youtube,
+.ds-media__pA2cRq--fluid .ds-media__pA2cRq__iframe {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 @media (max-width: 768px) {
-  .ds-media__oJU1eo {
+  .ds-media__pA2cRq .ds-media__pA2cRq__media-wrapper {
     border-radius: 2px;
   }
-  .ds-media__oJU1eo__loading-spinner {
-    width: 24px;
-    height: 24px;
-    border-width: 2px;
-  }
-  .ds-media__oJU1eo__loading-text {
-    font-size: 12px;
-  }
-  .ds-media__oJU1eo__error-icon {
-    width: 40px;
-    height: 40px;
-  }
-  .ds-media__oJU1eo__error-text {
-    font-size: 12px;
+  .ds-media__pA2cRq .ds-media__pA2cRq__error-text {
+    font-size: var(--ds-fontSize-12);
   }
 }

package/dist/collection/components/01-base-components/ds-media/ds-media.js

@@ -3,9 +3,9 @@ import classNames from "classnames";
 import { cx } from "../../../utils/cx";
 import { declareComponentDependencies, ifDefined, transformTagName } from "../../../utils/utils";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
-import { getLanguage } from "../../../store";
 import { componentFactory } from "../../00-foundations/factories/componentFactory";
-export class DsMedia extends Mixin(componentFactory('ds-media')) {
+import { getDsMediaStrings } from "./ds-media.strings";
+export class DsMedia extends Mixin(componentFactory('ds-media', { stopRootTracking: true })) {
     constructor() {
         super();
     }
@@ -17,20 +17,30 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
     dsAutoplay = false;
     dsLoop = false;
     dsMuted = true;
+    dsControls = true;
     dsUseLazy = true;
     dsAspectRatio = '';
     dsFluid = false;
+    dsCaptionText;
+    dsSrcset;
+    dsSizes;
     el;
     isLoading = true;
     hasError = false;
     errorMessage = '';
     dsLoad;
     dsError;
+    get baseClass() {
+        return cx('ds-media');
+    }
+    get strings() {
+        return getDsMediaStrings();
+    }
     componentWillLoad() {
-        this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el, this.dsType === 'video' ? ['aria-label'] : []),
-        };
+        this.updateInheritedAttributes();
+        if (this.dsType === 'image' && this.dsAlt === undefined) {
+            console.warn('ds-media: dsAlt is missing for image type. Provide alt text or an empty string for decorative images.');
+        }
     }
     componentDidLoad() {
         this.componentMounted();
@@ -40,56 +50,16 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
     }
     onTypeChange() {
         this.resetState();
-    }
-    get defaultLoadError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median lataus epäonnistui';
-            case 'sv':
-                return 'Media laddning misslyckades';
-            default:
-                return 'Failed to load media';
-        }
-    }
-    get loadAbortedError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median lataus keskeytettiin';
-            case 'sv':
-                return 'Media laddning avbröts';
-            default:
-                return 'Media loading aborted';
+        this.updateInheritedAttributes();
+        if (this.dsType === 'image' && this.dsAlt === undefined) {
+            console.warn('ds-media: dsAlt is missing for image type. Provide alt text or an empty string for decorative images.');
         }
     }
-    get loadNetworkError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Verkkovirhe tapahtui';
-            case 'sv':
-                return 'Nätverksfel uppstod';
-            default:
-                return 'Network error occurred';
-        }
-    }
-    get loadDecodeError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median dekoodaus epäonnistui';
-            case 'sv':
-                return 'Mediaavkodning misslyckades';
-            default:
-                return 'Media decoding failed';
-        }
-    }
-    get formatError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median formaatti ei ole tuettu';
-            case 'sv':
-                return 'Mediaformatet stöds inte';
-            default:
-                return 'Media format not supported';
-        }
+    updateInheritedAttributes() {
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+            ...inheritAriaAttributes(this.el, this.dsType === 'video' ? ['aria-label'] : []),
+        };
     }
     resetState() {
         this.isLoading = true;
@@ -104,21 +74,22 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
     handleError = (event) => {
         this.isLoading = false;
         this.hasError = true;
-        let errorMessage = this.defaultLoadError;
+        const strings = this.strings;
+        let errorMessage = strings.defaultError;
         const target = event.target;
         if (target.error) {
             switch (target.error.code) {
                 case target.error.MEDIA_ERR_ABORTED:
-                    errorMessage = this.loadAbortedError;
+                    errorMessage = strings.abortedError;
                     break;
                 case target.error.MEDIA_ERR_NETWORK:
-                    errorMessage = this.loadNetworkError;
+                    errorMessage = strings.networkError;
                     break;
                 case target.error.MEDIA_ERR_DECODE:
-                    errorMessage = this.loadDecodeError;
+                    errorMessage = strings.decodeError;
                     break;
                 case target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
-                    errorMessage = this.formatError;
+                    errorMessage = strings.formatError;
                     break;
             }
         }
@@ -126,40 +97,37 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
         this.dsError.emit(errorMessage);
     };
     getYouTubeEmbedUrl(url) {
-        const regexes = [
-            /(?:youtube\.com\/watch\?v=|youtube\.com\/embed\/|youtu\.be\/|youtube\.com\/v\/|youtube\.com\/watch\?.*?&v=)([^&\n?#]+)/,
-            /youtube\.com\/embed\/([^?&\n]+)/,
-            /youtube\.com\/v\/([^?&\n]+)/,
-            /youtu\.be\/([^?&\n]+)/,
-        ];
-        for (const regex of regexes) {
-            const match = regex.exec(url);
-            if (match?.[1]) {
-                return `https://www.youtube.com/embed/${match[1]}`;
-            }
-        }
-        if (url.includes('youtube.com/embed/')) {
-            return url;
+        const match = /(?:youtube\.com\/watch\?v=|youtube\.com\/embed\/|youtu\.be\/|youtube\.com\/v\/|youtube\.com\/watch\?.*?&v=)([^&\n?#]+)/.exec(url);
+        if (match?.[1]) {
+            return `https://www.youtube.com/embed/${match[1]}`;
         }
         return url;
     }
     renderImage() {
-        return (h("img", { src: this.dsSrc, alt: this.dsAlt || '', class: "ds-media__image", onLoad: this.handleLoad, onError: this.handleError, loading: this.dsUseLazy ? 'lazy' : 'eager', ...this.inheritedAttributes }));
+        const baseClass = this.baseClass;
+        return (h("img", { src: this.dsSrc, alt: this.dsAlt || '', class: `${baseClass}__image`, onLoad: this.handleLoad, onError: this.handleError, loading: this.dsUseLazy ? 'lazy' : 'eager', srcset: this.dsSrcset || undefined, sizes: this.dsSizes || undefined, ...this.inheritedAttributes }));
     }
     renderVideo() {
-        return (h("video", { src: this.dsSrc, poster: this.dsPoster, autoplay: this.dsAutoplay, loop: this.dsLoop, muted: this.dsMuted, class: "ds-media__video", onLoadedData: this.handleLoad, onError: this.handleError, preload: "metadata", ...ifDefined('aria-label', this.dsAlt), ...this.inheritedAttributes }, "Your browser does not support the video tag."));
+        const baseClass = this.baseClass;
+        return (h("video", { src: this.dsSrc, poster: this.dsPoster, autoplay: this.dsAutoplay, loop: this.dsLoop, muted: this.dsMuted, controls: this.dsControls, class: `${baseClass}__video`, onLoadedData: this.handleLoad, onError: this.handleError, preload: this.dsAutoplay ? 'auto' : 'metadata', ...ifDefined('aria-label', this.dsAlt), ...this.inheritedAttributes }, "Your browser does not support the video tag."));
     }
     renderYouTube() {
+        const baseClass = this.baseClass;
         const embedUrl = this.getYouTubeEmbedUrl(this.dsSrc);
-        return (h("iframe", { src: embedUrl, class: "ds-media__youtube", frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowfullScreen: true, title: this.dsAlt, onLoad: this.handleLoad, onError: this.handleError, ...this.inheritedAttributes }));
+        return (h("iframe", { src: embedUrl, class: `${baseClass}__youtube`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen", title: this.dsAlt, onLoad: this.handleLoad, onError: this.handleError, ...this.inheritedAttributes }));
+    }
+    renderIframe() {
+        const baseClass = this.baseClass;
+        return h("iframe", { src: this.dsSrc, class: `${baseClass}__iframe`, title: this.dsAlt, onLoad: this.handleLoad, onError: this.handleError, ...this.inheritedAttributes });
     }
     renderLoadingState() {
         const DsSpinner = transformTagName('ds-spinner', 'ds-media', this.el);
-        return h(DsSpinner, { dsSize: "2xLarge" });
+        return (h("div", { class: `${this.baseClass}__spinner` }, h(DsSpinner, { dsSize: "2xLarge" })));
     }
     renderErrorState() {
+        const baseClass = this.baseClass;
         const DsIcon = transformTagName('ds-icon', 'ds-media', this.el);
-        return (h("div", { class: "ds-media__error", role: "alert", "aria-live": "polite" }, h(DsIcon, { dsName: "warning", dsSize: "2rem", dsColour: "ds-bgColor-danger-bold" }), h("span", { class: "ds-media__error-text" }, this.errorMessage)));
+        return (h("div", { class: `${baseClass}__error`, role: "alert", "aria-live": "polite" }, h(DsIcon, { dsName: "warning", dsSize: "2rem", dsColour: "ds-bgColor-danger-bold" }), h("span", { class: `${baseClass}__error-text` }, this.errorMessage)));
     }
     renderMedia() {
         switch (this.dsType) {
@@ -169,24 +137,30 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                 return this.renderVideo();
             case 'youtube':
                 return this.renderYouTube();
+            case 'iframe':
+                return this.renderIframe();
             default:
                 return null;
         }
     }
+    renderCaption() {
+        if (!this.dsCaptionText)
+            return null;
+        return h("figcaption", { class: `${this.baseClass}__caption` }, this.dsCaptionText);
+    }
     render() {
         const aspectRatioParts = this.dsAspectRatio.split('/');
         const aspectRatioValue = aspectRatioParts.length === 2 ? `${aspectRatioParts[0]} / ${aspectRatioParts[1]}` : this.dsAspectRatio;
-        const baseClass = cx('ds-media');
-        return (h("div", { key: 'a4a54c00277784252977f41e7476f2b44a48d546', class: classNames(baseClass, {
+        const baseClass = this.baseClass;
+        return (h("figure", { key: 'e4e51d5286d8f405fc07ff94c0ab4cae960ccd88', class: classNames(baseClass, {
                 [`${baseClass}--loading`]: this.isLoading,
                 [`${baseClass}--error`]: this.hasError,
                 [`${baseClass}--image`]: this.dsType === 'image',
                 [`${baseClass}--video`]: this.dsType === 'video',
                 [`${baseClass}--youtube`]: this.dsType === 'youtube',
+                [`${baseClass}--iframe`]: this.dsType === 'iframe',
                 [`${baseClass}--fluid`]: this.dsFluid,
-            }), style: {
-                '--ds-media-aspect-ratio': aspectRatioValue,
-            } }, this.isLoading && this.renderLoadingState(), this.hasError && this.renderErrorState(), !this.hasError && this.renderMedia()));
+            }), style: aspectRatioValue ? { '--ds-media-aspect-ratio': aspectRatioValue } : {} }, h("div", { key: 'a7a95782f086bcf3dd2212ef8aa38aa2fc659cd0', class: `${baseClass}__media-wrapper` }, this.isLoading && this.renderLoadingState(), this.hasError && this.renderErrorState(), !this.hasError && this.renderMedia()), this.renderCaption()));
     }
     static get is() { return "ds-media"; }
     static get originalStyleUrls() {
@@ -213,7 +187,7 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Source URL for the media (image, video, audio, or YouTube)."
+                    "text": "Source URL for the media (image, video, or YouTube)."
                 },
                 "getter": false,
                 "setter": false,
@@ -225,7 +199,7 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                 "mutable": false,
                 "complexType": {
                     "original": "MediaType",
-                    "resolved": "\"image\" | \"video\" | \"youtube\"",
+                    "resolved": "\"iframe\" | \"image\" | \"video\" | \"youtube\"",
                     "references": {
                         "MediaType": {
                             "location": "local",
@@ -238,7 +212,7 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Type of media to display: 'image', 'video', 'audio', or 'youtube'."
+                    "text": "Type of media to display: 'image', 'video', or 'youtube'."
                 },
                 "getter": false,
                 "setter": false,
@@ -295,7 +269,7 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the media should autoplay (video/audio only)."
+                    "text": "Whether the media should autoplay (video only)."
                 },
                 "getter": false,
                 "setter": false,
@@ -315,7 +289,7 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the media should loop (video/audio only)."
+                    "text": "Whether the media should loop (video only)."
                 },
                 "getter": false,
                 "setter": false,
@@ -335,7 +309,7 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the media should be muted (video/audio only)."
+                    "text": "Whether the media should be muted (video only)."
                 },
                 "getter": false,
                 "setter": false,
@@ -343,6 +317,26 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                 "attribute": "ds-muted",
                 "defaultValue": "true"
             },
+            "dsControls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show native playback controls (video only)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-controls",
+                "defaultValue": "true"
+            },
             "dsUseLazy": {
                 "type": "boolean",
                 "mutable": false,
@@ -355,7 +349,7 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the image should use lazy loading or not."
+                    "text": "Whether the image should use lazy loading."
                 },
                 "getter": false,
                 "setter": false,
@@ -402,6 +396,63 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                 "reflect": false,
                 "attribute": "ds-fluid",
                 "defaultValue": "false"
+            },
+            "dsCaptionText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Caption text displayed below the media. Renders a <figcaption> element when provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-caption-text"
+            },
+            "dsSrcset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Srcset attribute for responsive images (e.g., 'img-800.jpg 800w, img-1200.jpg 1200w').\nOnly applies when dsType is 'image'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-srcset"
+            },
+            "dsSizes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizes attribute for responsive images (e.g., '(max-width: 600px) 100vw, 50vw').\nOnly applies when dsType is 'image'. Used together with dsSrcset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-sizes"
             }
         };
     }