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

package/dist/types/components/01-base-components/ds-media/ds-media.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export type MediaType = 'image' | 'video' | 'youtube';
+export type MediaType = 'image' | 'video' | 'youtube' | 'iframe';
 export type DsMediaLoadEvent = void;
 export type DsMediaErrorEvent = string;
 declare const DsMedia_base: abstract new (...args: any[]) => {
@@ -19,24 +19,26 @@ export declare class DsMedia extends DsMedia_base {
     dsAutoplay?: boolean;
     dsLoop?: boolean;
     dsMuted?: boolean;
+    dsControls?: boolean;
     dsUseLazy?: boolean;
     dsAspectRatio: string;
     dsFluid?: boolean;
+    dsCaptionText?: string;
+    dsSrcset?: string;
+    dsSizes?: string;
     el: HTMLElement;
     isLoading: boolean;
     hasError: boolean;
     errorMessage: string;
     dsLoad: EventEmitter<DsMediaLoadEvent>;
     dsError: EventEmitter<DsMediaErrorEvent>;
+    private get baseClass();
+    private get strings();
     componentWillLoad(): void;
     componentDidLoad(): void;
     onSrcChange(): void;
     onTypeChange(): void;
-    private get defaultLoadError();
-    private get loadAbortedError();
-    private get loadNetworkError();
-    private get loadDecodeError();
-    private get formatError();
+    private updateInheritedAttributes;
     private resetState;
     private readonly handleLoad;
     private readonly handleError;
@@ -44,9 +46,11 @@ export declare class DsMedia extends DsMedia_base {
     private renderImage;
     private renderVideo;
     private renderYouTube;
+    private renderIframe;
     private renderLoadingState;
     private renderErrorState;
     private renderMedia;
+    private renderCaption;
     render(): any;
 }
 export {};

package/dist/types/components/01-base-components/ds-media/ds-media.strings.d.ts

@@ -0,0 +1,8 @@
+export interface DsMediaStrings {
+    defaultError: string;
+    abortedError: string;
+    networkError: string;
+    decodeError: string;
+    formatError: string;
+}
+export declare function getDsMediaStrings(): DsMediaStrings;

package/dist/types/components/01-base-components/ds-tabs/ds-tab/ds-tab.d.ts

@@ -31,7 +31,9 @@ export declare class DsTab extends DsTab_base {
     dsTabPanelId: string;
     dsText?: string;
     dsIconStart?: string;
+    dsIconStartAriaLabel?: string;
     dsIconEnd?: string;
+    dsIconEndAriaLabel?: string;
     dsIconEndColour?: (typeof colourNames)[number];
     hasPrefixSlot: boolean;
     hasContentSlot: boolean;

package/dist/types/components.d.ts

@@ -5729,22 +5729,31 @@ export namespace Components {
          */
         "dsAspectRatio": string;
         /**
-          * Whether the media should autoplay (video/audio only).
+          * Whether the media should autoplay (video only).
           * @default false
          */
         "dsAutoplay"?: boolean;
+        /**
+          * Caption text displayed below the media. Renders a <figcaption> element when provided.
+         */
+        "dsCaptionText"?: string;
+        /**
+          * Whether to show native playback controls (video only).
+          * @default true
+         */
+        "dsControls"?: boolean;
         /**
           * Fluid size for taking full width or height of the container.
           * @default false
          */
         "dsFluid"?: boolean;
         /**
-          * Whether the media should loop (video/audio only).
+          * Whether the media should loop (video only).
           * @default false
          */
         "dsLoop"?: boolean;
         /**
-          * Whether the media should be muted (video/audio only).
+          * Whether the media should be muted (video only).
           * @default true
          */
         "dsMuted"?: boolean;
@@ -5753,15 +5762,23 @@ export namespace Components {
          */
         "dsPoster"?: string;
         /**
-          * Source URL for the media (image, video, audio, or YouTube).
+          * Sizes attribute for responsive images (e.g., '(max-width: 600px) 100vw, 50vw'). Only applies when dsType is 'image'. Used together with dsSrcset.
+         */
+        "dsSizes"?: string;
+        /**
+          * Source URL for the media (image, video, or YouTube).
          */
         "dsSrc": string;
         /**
-          * Type of media to display: 'image', 'video', 'audio', or 'youtube'.
+          * Srcset attribute for responsive images (e.g., 'img-800.jpg 800w, img-1200.jpg 1200w'). Only applies when dsType is 'image'.
+         */
+        "dsSrcset"?: string;
+        /**
+          * Type of media to display: 'image', 'video', or 'youtube'.
          */
         "dsType": MediaType;
         /**
-          * Whether the image should use lazy loading or not.
+          * Whether the image should use lazy loading.
           * @default true
          */
         "dsUseLazy"?: boolean;
@@ -6735,6 +6752,10 @@ export namespace Components {
           * The name of the icon to display at the end of the tab.
          */
         "dsIconEnd"?: string;
+        /**
+          * The aria-label for the end icon.
+         */
+        "dsIconEndAriaLabel"?: string;
         /**
           * The colour of the end icon.
          */
@@ -6743,6 +6764,10 @@ export namespace Components {
           * The name of the icon to display at the start of the tab.
          */
         "dsIconStart"?: string;
+        /**
+          * The aria-label for the start icon.
+         */
+        "dsIconStartAriaLabel"?: string;
         /**
           * The ID of the tab.
          */
@@ -16168,22 +16193,31 @@ declare namespace LocalJSX {
          */
         "dsAspectRatio"?: string;
         /**
-          * Whether the media should autoplay (video/audio only).
+          * Whether the media should autoplay (video only).
           * @default false
          */
         "dsAutoplay"?: boolean;
+        /**
+          * Caption text displayed below the media. Renders a <figcaption> element when provided.
+         */
+        "dsCaptionText"?: string;
+        /**
+          * Whether to show native playback controls (video only).
+          * @default true
+         */
+        "dsControls"?: boolean;
         /**
           * Fluid size for taking full width or height of the container.
           * @default false
          */
         "dsFluid"?: boolean;
         /**
-          * Whether the media should loop (video/audio only).
+          * Whether the media should loop (video only).
           * @default false
          */
         "dsLoop"?: boolean;
         /**
-          * Whether the media should be muted (video/audio only).
+          * Whether the media should be muted (video only).
           * @default true
          */
         "dsMuted"?: boolean;
@@ -16192,15 +16226,23 @@ declare namespace LocalJSX {
          */
         "dsPoster"?: string;
         /**
-          * Source URL for the media (image, video, audio, or YouTube).
+          * Sizes attribute for responsive images (e.g., '(max-width: 600px) 100vw, 50vw'). Only applies when dsType is 'image'. Used together with dsSrcset.
+         */
+        "dsSizes"?: string;
+        /**
+          * Source URL for the media (image, video, or YouTube).
          */
         "dsSrc": string;
         /**
-          * Type of media to display: 'image', 'video', 'audio', or 'youtube'.
+          * Srcset attribute for responsive images (e.g., 'img-800.jpg 800w, img-1200.jpg 1200w'). Only applies when dsType is 'image'.
+         */
+        "dsSrcset"?: string;
+        /**
+          * Type of media to display: 'image', 'video', or 'youtube'.
          */
         "dsType": MediaType;
         /**
-          * Whether the image should use lazy loading or not.
+          * Whether the image should use lazy loading.
           * @default true
          */
         "dsUseLazy"?: boolean;
@@ -17276,6 +17318,10 @@ declare namespace LocalJSX {
           * The name of the icon to display at the end of the tab.
          */
         "dsIconEnd"?: string;
+        /**
+          * The aria-label for the end icon.
+         */
+        "dsIconEndAriaLabel"?: string;
         /**
           * The colour of the end icon.
          */
@@ -17284,6 +17330,10 @@ declare namespace LocalJSX {
           * The name of the icon to display at the start of the tab.
          */
         "dsIconStart"?: string;
+        /**
+          * The aria-label for the start icon.
+         */
+        "dsIconStartAriaLabel"?: string;
         /**
           * The ID of the tab.
          */
@@ -20164,9 +20214,13 @@ declare namespace LocalJSX {
         "dsAutoplay": boolean;
         "dsLoop": boolean;
         "dsMuted": boolean;
+        "dsControls": boolean;
         "dsUseLazy": boolean;
         "dsAspectRatio": string;
         "dsFluid": boolean;
+        "dsCaptionText": string;
+        "dsSrcset": string;
+        "dsSizes": string;
     }
     interface DsModalAttributes {
         "dsId": string;
@@ -20400,7 +20454,9 @@ declare namespace LocalJSX {
         "dsTabPanelId": string;
         "dsText": string;
         "dsIconStart": string;
+        "dsIconStartAriaLabel": string;
         "dsIconEnd": string;
+        "dsIconEndAriaLabel": string;
         "dsIconEndColour": (typeof colourNames)[number];
     }
     interface DsTablistAttributes {

package/dist/types/global.d.ts

@@ -9,4 +9,5 @@ declare global {
    */
   var _uhdsMatomoCollectionProbability: number | undefined;
   var _uhdsMatomoAppName: string | undefined;
+  var __uhdsReservedIds: Set<string>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "1.7.0-rc.0",
+  "version": "1.7.0",
   "publishConfig": {
     "access": "public"
   },
@@ -89,7 +89,7 @@
     "@types/node": "^22.19.19",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
-    "@uh-design-system/storybook-stencil-docs-utils": "^1.7.0-rc.0",
+    "@uh-design-system/storybook-stencil-docs-utils": "^1.7.0",
     "@vitest/browser": "4.1.8",
     "@vitest/browser-playwright": "4.1.8",
     "@vitest/coverage-v8": "4.1.8",
@@ -111,5 +111,5 @@
     "vitest": "4.1.8"
   },
   "license": "MIT",
-  "gitHead": "8f8bbfba2282582fe5c083b2711245611241548e"
+  "gitHead": "95e9b6931917a027034c116be39d78866d607bc7"
 }

package/dist/cjs/ariaDeprecationFactory-j82aBIxx.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var index = require('./index-CSBE5f9n.js');
-var attributes = require('./attributes-DbNfxmvc.js');
-
-const ariaDeprecationFactory = (Base) => {
-    const AriaDeprecation = class extends Base {
-        constructor(hostRef) {
-            super();
-            index.registerInstance(this, hostRef);
-        }
-        dsMuteAriaDeprecationWarning = false;
-        getDeprecationWarningForAriaAttribute = (el, attr) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            if (el.hasAttribute(attr)) {
-                console.warn(`[DEPRECATION] The use of the '${attr}' attribute on <${el.tagName.toLowerCase()}> is deprecated and will be removed in a future version (tba). Please refer to the documentation for alternative ds-prefixed property name. If the attribute you are using does not have a corresponding ds-prefixed property name, please contact developers at #designsystem Slack channel. In the future, any aria-attributes set on the web component will remain on the host element. To mute all warnings on this component instance, set the "dsMuteAriaDeprecationWarning" property.`);
-            }
-        };
-        getDeprecationWarningsForAriaAttributes = (el) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            for (const attr of attributes.ariaAttributes)
-                this.getDeprecationWarningForAriaAttribute(el, attr);
-        };
-    };
-    return AriaDeprecation;
-};
-
-exports.ariaDeprecationFactory = ariaDeprecationFactory;

package/dist/cjs/componentFactory-tVOtxh8F.js

@@ -1,193 +0,0 @@
-'use strict';
-
-var utils = require('./utils-D94MuKO1.js');
-var store = require('./store-Dse4EhGQ.js');
-
-const state = new Map();
-const createDefaultStats = () => Object.freeze({
-    mountEventsTotal: 0,
-});
-const getOrCreateAppBucket = (appName) => {
-    const existing = state.get(appName);
-    const created = new Map();
-    if (!existing) {
-        state.set(appName, created);
-    }
-    return existing ?? created;
-};
-const getAll = () => {
-    const entries = [];
-    for (const [appName, components] of state.entries()) {
-        for (const [componentName, stats] of components.entries()) {
-            entries.push({ appName, componentName, stats });
-        }
-    }
-    return entries;
-};
-const getOne = (appName, componentName) => {
-    const appBucket = state.get(appName);
-    return appBucket?.get(componentName) ?? createDefaultStats();
-};
-const incrementMount = (appName, componentName) => {
-    const appBucket = getOrCreateAppBucket(appName);
-    const prev = getOne(appName, componentName);
-    appBucket.set(componentName, Object.freeze({
-        ...prev,
-        mountEventsTotal: prev.mountEventsTotal + 1,
-    }));
-};
-const clear = () => {
-    state.clear();
-};
-const analyticsState = {
-    getAll,
-    getOne,
-    incrementMount,
-    clear,
-};
-
-const FALLBACK_COLLECTION_PROBABILITY = 0.5;
-const COLLECTION_PROBABILITY = globalThis._uhdsMatomoCollectionProbability ?? FALLBACK_COLLECTION_PROBABILITY;
-const COLLECTION_STORAGE_KEY = 'uhds_collect_analytics';
-if (globalThis.sessionStorage?.getItem(COLLECTION_STORAGE_KEY) === null) {
-    globalThis.sessionStorage.setItem(COLLECTION_STORAGE_KEY, (Math.random() <= COLLECTION_PROBABILITY).toString());
-}
-const generators = new Map();
-let isFlushing = false;
-let isBatchTrackingInitialized = false;
-function flushState() {
-    if (isFlushing)
-        return;
-    const entries = analyticsState.getAll();
-    if (entries.length === 0)
-        return;
-    isFlushing = true;
-    try {
-        if (!Array.isArray(globalThis._mtm))
-            return;
-        const tracker = globalThis._mtm;
-        const appHost = globalThis.location.hostname;
-        for (const { appName, componentName, stats } of entries) {
-            tracker.push({
-                'event': 'uhds.components',
-                'uhds.action': 'mounted',
-                'uhds.component': componentName,
-                'uhds.app_name': appName,
-                'uhds.app_host': appHost,
-                'uhds.instance_key': `${appHost}::${appName}::${componentName}`,
-                'uhds.instances_seen': stats.mountEventsTotal,
-            });
-        }
-        analyticsState.clear();
-    }
-    finally {
-        isFlushing = false;
-    }
-}
-function initBatchTracking() {
-    if (isBatchTrackingInitialized)
-        return;
-    globalThis.addEventListener('visibilitychange', () => {
-        if (document.visibilityState === 'hidden')
-            flushState();
-    });
-    globalThis.addEventListener('pagehide', flushState);
-    globalThis.addEventListener('beforeunload', flushState);
-    isBatchTrackingInitialized = true;
-}
-const transparentRootTrackingAncestors = new Set();
-const rootTrackingStopTags = new Map();
-const rootTrackingStopSelectors = new Map();
-const designSystemComponentTags = new Set();
-const normalizeTag = (tag) => tag.trim().toLowerCase();
-function shouldStopRootTracking(el, tag) {
-    if (!rootTrackingStopTags.has(tag))
-        return false;
-    const selector = rootTrackingStopSelectors.get(tag) ?? '';
-    if (!selector)
-        return true;
-    return !utils.hasComposedClosest(utils.getComposedParent(el), selector);
-}
-function isBlockingAncestorTag(tag) {
-    return designSystemComponentTags.has(tag) && !transparentRootTrackingAncestors.has(tag);
-}
-function hasBlockingAncestor(el) {
-    const ownTag = normalizeTag(el.tagName);
-    if (isBlockingAncestorTag(ownTag) && shouldStopRootTracking(el, ownTag))
-        return false;
-    let current = utils.getComposedParent(el);
-    while (current) {
-        const tag = normalizeTag(current.tagName);
-        if (!isBlockingAncestorTag(tag)) {
-            current = utils.getComposedParent(current);
-            continue;
-        }
-        if (rootTrackingStopTags.has(tag) && !shouldStopRootTracking(current, tag)) {
-            current = utils.getComposedParent(current);
-            continue;
-        }
-        return true;
-    }
-    return false;
-}
-const componentFactory = (componentName, options = {}) => (Base) => {
-    const ownTag = normalizeTag(componentName);
-    designSystemComponentTags.add(ownTag);
-    if (options.stopRootTracking) {
-        const exceptions = new Set((options.stopRootTrackingExcept || []).map(normalizeTag));
-        rootTrackingStopTags.set(ownTag, exceptions);
-        rootTrackingStopSelectors.set(ownTag, Array.from(exceptions).join(','));
-    }
-    if (options.transparentForRootTracking) {
-        transparentRootTrackingAncestors.add(ownTag);
-    }
-    class BaseComponent extends Base {
-        constructor() {
-            super();
-        }
-        lang = store.getLanguage();
-        getGenerator() {
-            const name = componentName.trim() || 'ds-component';
-            if (!generators.has(name)) {
-                generators.set(name, utils.idGenerator(name));
-            }
-            return generators.get(name);
-        }
-        getUniqueId() {
-            return this.getGenerator().next().value;
-        }
-        componentMounted() {
-            const appName = utils.resolveMatomoAppName(this.el);
-            if (!appName)
-                return;
-            if (!globalThis.sessionStorage || globalThis.sessionStorage?.getItem(COLLECTION_STORAGE_KEY) === 'false')
-                return;
-            if (options.disableAnalytics)
-                return;
-            if (hasBlockingAncestor(this.el))
-                return;
-            initBatchTracking();
-            analyticsState.incrementMount(appName, componentName);
-        }
-        handleLanguageChange(newValue) {
-            this.lang = newValue.detail;
-        }
-        static get states() {
-            return {
-                "lang": {}
-            };
-        }
-        static get listeners() {
-            return [{
-                    "name": "dsLanguageChange",
-                    "method": "handleLanguageChange",
-                    "target": "body",
-                    "capture": false,
-                    "passive": false
-                }];
-        }
-    }
-    return BaseComponent;
-};
-
-exports.componentFactory = componentFactory;