@uh-design-system/component-library 0.5.2 → 0.6.0

package/dist/esm/{utils-cfc536bc.js → attributes-BD_lNRxn.js}

@@ -72,8 +72,8 @@ const inheritAriaAttributes = (el, ignoreList) => {
     }
     return inheritSpecifiedAttributes(el, attributesToInherit);
 };
-const inheritAttributes = (component, elem) => {
-    const attributesToIgnore = new Set(['class', 'style', ...ariaAttributes]);
+const inheritAttributes = (component, elem, attrsToIgnore = []) => {
+    const attributesToIgnore = new Set(['class', 'style', ...ariaAttributes, ...attrsToIgnore]);
     const propsToIgnore = new Set(Object.keys(component));
     const attributes = {};
     for (const attr of elem.attributes) {
@@ -84,27 +84,4 @@ const inheritAttributes = (component, elem) => {
     return attributes;
 };
 
-const formatAs = (value, suffix) => value.endsWith(suffix) ? value : `${value}${suffix}`;
-const formatAsPx = (value) => formatAs(value, 'px');
-const remToPx = (remString) => {
-    const rootFontSize = 16;
-    const rem = parseFloat(remString);
-    return formatAsPx(`${rem * rootFontSize}`);
-};
-function* idGenerator(id) {
-    let currentId = 1;
-    while (true) {
-        yield `${id}-${currentId++}`;
-    }
-}
-const getAriaLabel = (text, ariaLabel) => {
-    if (!ariaLabel) {
-        return undefined;
-    }
-    if (ariaLabel.startsWith(text)) {
-        return ariaLabel;
-    }
-    return [text, ariaLabel].join(' ');
-};
-
-export { inheritSpecifiedAttributes as a, inheritAttributes as b, idGenerator as c, getAriaLabel as g, inheritAriaAttributes as i, remToPx as r };
+export { inheritSpecifiedAttributes as a, inheritAriaAttributes as b, inheritAttributes as i };

package/dist/esm/component-library.js

@@ -1,10 +1,11 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-434995e1.js';
-export { s as setNonce } from './index-434995e1.js';
-import { g as globalScripts } from './app-globals-0f993ce5.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-Cm7V4EAn.js';
+export { s as setNonce } from './index-Cm7V4EAn.js';
+import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
- Stencil Client Patch Browser v4.27.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.30.0 | MIT Licensed | https://stenciljs.com
  */
+
 var patchBrowser = () => {
   const importMeta = import.meta.url;
   const opts = {};
@@ -16,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["ds-accordion_3",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[32]}]]],["ds-input-validity",[[0,"ds-input-validity",{"text":[1],"type":[1],"validityRole":[1,"role"],"identifier":[32]}]]],["ds-text-input",[[70,"ds-text-input",{"label":[1],"placeholder":[1],"identifier":[1,"id"],"name":[1],"disabled":[4],"optional":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledby":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"validationMessage":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-checkbox",[[65,"ds-checkbox",{"identifier":[1,"id"],"checked":[1028],"legend":[1],"assistiveText":[1,"assistive-text"],"text":[1],"indeterminate":[4],"disabled":[4],"errorText":[1,"error-text"],"errorsDisabled":[4,"data-errors-disabled"],"required":[4],"optional":[4],"optionalText":[1,"optional-text"],"ariaLabel":[1,"aria-label"],"value":[32],"validationMessage":[32]}]]],["ds-checkbox-group",[[1,"ds-checkbox-group",{"legend":[1],"assistiveText":[1,"assistive-text"],"direction":[1],"errorText":[1,"error-text"],"text":[1],"checked":[4],"disabled":[4],"childElementsCount":[32],"checkedChildElementCount":[32],"isIndeterminate":[32],"indeterminateChildCheckboxCount":[32],"setChecked":[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"dsCheckboxInput","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{"disabled":["watchCheckboxDisabledChange"],"checked":["watchCheckedChange"],"isIndeterminate":["watchIndeterminateChange"],"checkedChildElementCount":["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-link",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"iconTitle":[1,"icon-title"],"iconHidden":[4,"icon-hidden"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]]], options);
+  return bootstrapLazy([["ds-card",[[1,"ds-card",{"dsVariant":[1,"ds-variant"],"dsHeading":[1,"ds-heading"],"dsHeadingLevel":[2,"ds-heading-level"],"dsDescription":[1,"ds-description"],"dsUrl":[1,"ds-url"],"dsUrlTarget":[1,"ds-url-target"],"dsImageUrl":[1,"ds-image-url"],"dsImageAlt":[1,"ds-image-alt"],"dsEyebrow":[1,"ds-eyebrow"],"dsSubtitle":[1,"ds-subtitle"],"dsShowArrow":[4,"ds-show-arrow"]},[[2,"click","handleClick"],[2,"keydown","handleKeydown"]]]]],["ds-input-validity",[[0,"ds-input-validity",{"dsText":[1,"ds-text"],"dsType":[1,"ds-type"],"dsValidityRole":[1,"ds-validity-role"],"dsAriaLive":[1,"ds-aria-live"],"dsAriaAtomic":[1,"ds-aria-atomic"],"identifier":[32]}]]],["ds-radio-button",[[65,"ds-radio-button",{"dsId":[1,"ds-id"],"dsErrorsDisabled":[4,"ds-errors-disabled"],"dsValue":[1,"ds-value"],"dsLegend":[1,"ds-legend"],"dsAssistiveText":[1,"ds-assistive-text"],"dsText":[1,"ds-text"],"dsRequired":[4,"ds-required"],"dsDisabled":[4,"ds-disabled"],"dsChecked":[4,"ds-checked"],"dsErrorText":[1,"ds-error-text"],"focusable":[32],"invalid":[32],"initialChecked":[32],"validationMessage":[32],"dsFocus":[64],"setFocusable":[64],"setChecked":[64]},null,{"dsChecked":["dsCheckedObserver"]}]]],["ds-checkbox",[[65,"ds-checkbox",{"dsId":[1,"ds-id"],"dsChecked":[1028,"ds-checked"],"dsLegend":[1,"ds-legend"],"dsAssistiveText":[1,"ds-assistive-text"],"dsText":[1,"ds-text"],"dsIndeterminate":[4,"ds-indeterminate"],"dsDisabled":[4,"ds-disabled"],"dsErrorText":[1,"ds-error-text"],"dsErrorsDisabled":[4,"ds-errors-disabled"],"dsRequired":[4,"ds-required"],"dsOptional":[4,"ds-optional"],"dsOptionalText":[1,"ds-optional-text"],"dsAriaLabel":[1,"ds-aria-label"],"invalid":[32],"initialChecked":[32],"validationMessage":[32]},null,{"dsChecked":["dsCheckedObserver"]}]]],["ds-checkbox-group",[[65,"ds-checkbox-group",{"dsLegend":[1,"ds-legend"],"dsAssistiveText":[1,"ds-assistive-text"],"dsDirection":[1,"ds-direction"],"dsErrorText":[1,"ds-error-text"],"dsText":[1,"ds-text"],"dsChecked":[4,"ds-checked"],"dsDisabled":[4,"ds-disabled"],"dsRequired":[4,"ds-required"],"dsAllRequired":[4,"ds-all-required"],"dsOptional":[4,"ds-optional"],"dsOptionalText":[1,"ds-optional-text"],"childElementsCount":[32],"checkedChildElementCount":[32],"isIndeterminate":[32],"indeterminateChildCheckboxCount":[32],"showInternalsValidationMessage":[32],"setChecked":[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"input","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{"dsDisabled":["watchCheckboxDisabledChange"],"dsChecked":["watchCheckedChange"],"isIndeterminate":["watchIndeterminateChange"],"dsErrorText":["errorTextObserver"],"checkedChildElementCount":["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-spinner",[[1,"ds-spinner",{"dsText":[1,"ds-text"],"dsSize":[1,"ds-size"],"dsSpinnerTextPosition":[1,"ds-spinner-text-position"],"dsSpinnerColor":[1,"ds-spinner-color"],"dsUseRoleAlert":[4,"ds-use-role-alert"],"dsUseAriaLive":[4,"ds-use-aria-live"],"dsHiddenAssistiveText":[1,"ds-hidden-assistive-text"]}]]],["ds-icon",[[1,"ds-icon",{"dsName":[1,"ds-name"],"dsColour":[1,"ds-colour"],"dsSize":[1,"ds-size"],"dsTitle":[1,"ds-title"],"dsRole":[1,"ds-role"],"dsHidden":[4,"ds-hidden"],"message":[32]}]]],["ds-button",[[6,"ds-button",{"dsValue":[1,"ds-value"],"dsVariant":[1,"ds-variant"],"dsColour":[1,"ds-colour"],"dsSize":[1,"ds-size"],"dsIcon":[1,"ds-icon"],"dsIconPosition":[1,"ds-icon-position"],"dsType":[1,"ds-type"],"dsDisabled":[4,"ds-disabled"],"dsIsLoading":[4,"ds-is-loading"],"dsUseSpinner":[4,"ds-use-spinner"],"dsSpinnerHiddenText":[1,"ds-spinner-hidden-text"],"dsFullWidth":[4,"ds-full-width"],"dsAriaDisabled":[1,"ds-aria-disabled"],"dsFocus":[64]}]]],["ds-text-input",[[70,"ds-text-input",{"dsLabel":[1,"ds-label"],"dsPlaceholder":[1,"ds-placeholder"],"dsId":[1,"ds-id"],"dsName":[1,"ds-name"],"dsDisabled":[4,"ds-disabled"],"dsOptional":[4,"ds-optional"],"dsRequired":[4,"ds-required"],"dsReadonly":[4,"ds-readonly"],"dsValue":[1,"ds-value"],"dsMin":[2,"ds-min"],"dsMax":[2,"ds-max"],"dsMaxLength":[2,"ds-max-length"],"dsPattern":[1,"ds-pattern"],"dsAutocomplete":[1,"ds-autocomplete"],"dsOptionalText":[1,"ds-optional-text"],"dsErrorText":[1,"ds-error-text"],"dsSuccessText":[1,"ds-success-text"],"dsAssistiveText":[1,"ds-assistive-text"],"dsActionButtonAriaLabel":[1,"ds-action-button-aria-label"],"dsHiddenAssistiveText":[1,"ds-hidden-assistive-text"],"dsPrefixText":[1,"ds-prefix-text"],"dsSuffixText":[1,"ds-suffix-text"],"dsIcon":[1,"ds-icon"],"dsType":[1,"ds-type"],"dsAriaLabel":[1,"ds-aria-label"],"dsAriaLabelledby":[1,"ds-aria-labelledby"],"dsAriaDescribedby":[1,"ds-aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"validationMessage":[32],"togglePasswordVisibility":[64],"clearInput":[64]},null,{"value":["valueObserver"]}]]],["ds-accordion",[[1,"ds-accordion",{"dsVariant":[1,"ds-variant"],"dsBorderAligned":[4,"ds-border-aligned"],"dsOpenByDefault":[4,"ds-open-by-default"],"dsAccordionId":[1,"ds-accordion-id"],"dsHeadingLevel":[2,"ds-heading-level"],"dsUseCloseButton":[4,"ds-use-close-button"],"dsCloseButtonLabel":[1,"ds-close-button-label"],"dsHideTopBorder":[4,"ds-hide-top-border"],"dsHideBottomBorder":[4,"ds-hide-bottom-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}]]],["ds-link",[[1,"ds-link",{"dsText":[1,"ds-text"],"dsSize":[1,"ds-size"],"dsVariant":[1,"ds-variant"],"dsWeight":[1,"ds-weight"],"dsIcon":[1025,"ds-icon"],"dsIconPosition":[1025,"ds-icon-position"],"dsIconTitle":[1,"ds-icon-title"],"dsIconHidden":[4,"ds-icon-hidden"],"dsHref":[1,"ds-href"],"dsTarget":[1,"ds-target"],"dsDownload":[4,"ds-download"],"dsAriaLabel":[1,"ds-aria-label"],"dsColour":[1,"ds-colour"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{"dsText":[1,"ds-text"],"dsIconPosition":[1,"ds-icon-position"],"dsHref":[1,"ds-href"],"dsTarget":[1,"ds-target"],"dsAriaLabel":[1,"ds-aria-label"]}]]],["ds-radio-button-group",[[65,"ds-radio-button-group",{"dsLegend":[1,"ds-legend"],"dsAssistiveText":[1,"ds-assistive-text"],"dsValue":[1025,"ds-value"],"dsDirection":[1,"ds-direction"],"dsErrorText":[1,"ds-error-text"],"dsRequired":[4,"ds-required"],"showInternalsValidationMessage":[32],"getValue":[64]},[[0,"dsRadioButtonChecked","onInputChange"],[4,"keydown","onKeyDown"]],{"dsErrorText":["errorTextObserver"],"dsValue":["dsValueObserver"]}]]]], options);
 });

package/dist/esm/controlUtils-CNER0MvM.js

@@ -0,0 +1,37 @@
+import { g as getLanguage } from './index-DuYjhvTn.js';
+
+const getOptionalText = (text, optionalText) => {
+    let defaultText = '(optional)';
+    switch (getLanguage()) {
+        case 'fi':
+            defaultText = '(valinnainen)';
+            break;
+        case 'sv':
+            defaultText = '(valfritt)';
+            break;
+    }
+    return [text, optionalText || defaultText].join(' ');
+};
+const getRequiredText = (text) => [text, '*'].join(' ');
+const atLeastOneOption = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Valitse vähintään yksi vaihtoehto.';
+        case 'sv':
+            return 'Vänligen välj minst ett alternativ.';
+        default:
+            return 'Please select at least one option.';
+    }
+};
+const allOptions = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Valitse kaikki vaihtoehdot.';
+        case 'sv':
+            return 'Vänligen välj alla alternativ.';
+        default:
+            return 'Please select all options.';
+    }
+};
+
+export { getOptionalText as a, atLeastOneOption as b, allOptions as c, getRequiredText as g };

package/dist/esm/ds-accordion.entry.js

@@ -0,0 +1,77 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-Cm7V4EAn.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+
+const dsAccordionCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-accordion__open-button{color:var(--ds-palette-black-95);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-palette-black-95);position:relative;all:unset;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);position:relative;width:100%}.ds-accordion__open-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before,.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover{cursor:pointer}.ds-accordion__open-button:hover,.ds-accordion__open-button:hover::before,.ds-accordion__open-button:hover::after{background:var(--ds-overlay-black-10)}.ds-accordion__open-button:active,.ds-accordion__open-button:active::before,.ds-accordion__open-button:active::after{background:var(--ds-overlay-black-15)}.ds-accordion__open-button:focus-visible{z-index:1}.ds-accordion__open-button.ds-accordion--default{padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__open-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);line-height:var(--ds-lineHeight-large);font-weight:var(--ds-fontWeight-semibold)}.ds-accordion__open-button.ds-accordion--border-aligned:not(:focus-visible){padding-inline:0;margin-inline:var(--ds-spacing-small);position:relative;width:calc(100% - var(--ds-spacing-large))}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border){border-top:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20)}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible{border-top-color:transparent}.ds-accordion__open-button:not(.ds-accordion--hide-bottom-border)[aria-expanded=false]{border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20)}.ds-accordion__panel--border-aligned{position:relative;width:calc(100% - 32px)}.ds-accordion__panel--border-aligned::before{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;left:0;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--border-aligned::after{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;right:0;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--expanded{display:block;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);padding-inline:var(--ds-spacing-small)}.ds-accordion__panel--expanded.ds-accordion__panel--hide-bottom-border{border-bottom:0}::slotted([slot=header]){color:var(--ds-palette-black-95)}.ds-accordion__content{color:var(--ds-palette-black-95);font-family:var(--ds-fontFamily-body);padding-block:var(--ds-spacing-small)}.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-xLarge);letter-spacing:var(--ds-letterSpacing-wide)}@media (min-width: 30rem){.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-18)}}.ds-accordion__content .ds-accordion--compact{font-size:var(--fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button{display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:max-content}";
+
+const DsAccordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsToggle = createEvent(this, "dsToggle");
+    }
+    dsVariant = 'default';
+    dsBorderAligned = false;
+    dsOpenByDefault = false;
+    dsAccordionId = 'dsaccordion';
+    dsHeadingLevel = 2;
+    dsUseCloseButton = false;
+    dsCloseButtonLabel = 'Close';
+    dsHideTopBorder = false;
+    dsHideBottomBorder = false;
+    isExpanded = false;
+    get host() { return getElement(this); }
+    dsToggle;
+    headerButtonRef;
+    shouldMoveFocus = false;
+    componentWillLoad() {
+        if (this.dsOpenByDefault) {
+            this.isExpanded = true;
+        }
+    }
+    watchHandler(isExpanded) {
+        if (!isExpanded && this.shouldMoveFocus && this.headerButtonRef) {
+            this.headerButtonRef.focus();
+            this.shouldMoveFocus = false;
+        }
+        this.dsToggle.emit(isExpanded);
+    }
+    handleClick = (event) => {
+        const isCloseButton = event.target.closest('.ds-accordion__close-button');
+        this.shouldMoveFocus = isCloseButton ? true : false;
+        this.isExpanded = !this.isExpanded;
+    };
+    handleKeyDown = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                const isCloseButton = event.target.closest('.ds-accordion__close-button');
+                this.shouldMoveFocus = isCloseButton ? true : false;
+                this.isExpanded = !this.isExpanded;
+                break;
+            }
+        }
+    };
+    render() {
+        const iconSize = this.dsVariant === 'compact' ? '1.5rem' : '2rem';
+        const buttonSize = this.dsVariant === 'compact' ? 'small' : 'medium';
+        return (h("div", { key: '3f11aeec4a4941f0dcce0380b05a515c3b9c89e6', class: classNames('ds-accordion', `ds-accordion--${this.dsVariant}`, {
+                'ds-accordion--border-aligned': this.dsBorderAligned,
+            }) }, h("div", { key: '6a8ca7a66d2f43c970b359972cc5e2830252edb1', class: "ds-accordion__item" }, h("div", { key: '378a67aa57baf72f491370e2e357828d516832d2', role: "heading", "aria-level": this.dsHeadingLevel, class: "ds-accordion__title" }, h("button", { key: '3d495833ea4e1b31ac730947268850d7ba04a15d', class: classNames('ds-accordion__open-button', `ds-accordion--${this.dsVariant}`, {
+                'ds-accordion--border-aligned': this.dsBorderAligned,
+                'ds-accordion--hide-top-border': this.dsHideTopBorder,
+                'ds-accordion--hide-bottom-border': this.dsHideBottomBorder,
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.dsAccordionId}-panel`, id: this.dsAccordionId, ref: el => (this.headerButtonRef = el) }, h("span", { key: 'e720c9480de197083d4c3c956c6129caeb01a033', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ? h("ds-icon", { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_up" }) : h("ds-icon", { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_down" })), h("slot", { key: 'b406436f9de56d89e343150a19c0d133e8b9e2da', name: "header" }))), h("div", { key: 'a51a019dbc6e9401aaf1552edc127226cecb0b7c', id: `${this.dsAccordionId}-panel`, role: "region", "aria-labelledby": this.dsAccordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.dsVariant}`, {
+                'ds-accordion__panel--border-aligned': this.dsBorderAligned,
+                'ds-accordion__panel--expanded': this.isExpanded,
+                'ds-accordion__panel--hide-bottom-border': this.dsHideBottomBorder,
+            }), hidden: !this.isExpanded }, h("div", { key: 'a7d46ee04bbe43fbfdea6ac0ec3a760aeb17ba64', class: "ds-accordion__content" }, h("slot", { key: '00e8c609cc32ed726226547af724295884e40bb7', name: "content" })), this.dsUseCloseButton && (h("ds-button", { key: '7b03bc58471493bc89501753e35238b770eaf563', "aria-labelledby": `${this.dsAccordionId}-close-button ${this.dsAccordionId}`, id: `${this.dsAccordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.dsVariant}`, {
+                'ds-accordion--border-aligned': this.dsBorderAligned,
+            }), dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsValue: this.dsCloseButtonLabel, dsSize: buttonSize, dsType: "button" }))))));
+    }
+    static get watchers() { return {
+        "isExpanded": ["watchHandler"]
+    }; }
+};
+DsAccordion.style = dsAccordionCss;
+
+export { DsAccordion as ds_accordion };

package/dist/esm/ds-button.entry.js

@@ -0,0 +1,105 @@
+import { r as registerInstance, g as getElement, h, F as Fragment } from './index-Cm7V4EAn.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { i as inheritAttributes, a as inheritSpecifiedAttributes, b as inheritAriaAttributes } from './attributes-BD_lNRxn.js';
+
+const dsButtonCss = ".sc-ds-button-h *.sc-ds-button,.ds-no-style-leak.sc-ds-button *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-button-h{display:inline-block}[dsFullWidth].sc-ds-button-h,[ds-full-width].sc-ds-button-h{width:100%}.ds-button.sc-ds-button{width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button:not(.supplementary) .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.supplementary.sc-ds-button:has(ds-spinner) .button-value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.sc-ds-button:has(ds-spinner):not(.small) .button-value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.ds-button.sc-ds-button:not(.small):not(.secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button.sc-ds-button:not(.small).icon-only{padding-left:0;padding-right:0}.ds-button.small.sc-ds-button:not(.secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button.small.secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button.small.icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-palette-mainBlue-70);border-color:transparent;color:var(--ds-palette-white)}.ds-button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-90)}.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-overlay-black-10);border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-palette-black-95);border-color:transparent;color:var(--ds-palette-white)}.ds-button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.primary.black.sc-ds-button:hover{background-color:var(--ds-palette-black-80)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-palette-white-70)}.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-overlay-black-10);border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-palette-white);border-color:transparent;color:var(--ds-palette-black-95)}.ds-button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-palette-black-10)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-palette-black-20)}.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-overlay-white-10);border-color:transparent;color:var(--ds-overlay-white-40)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-palette-white);border-color:var(--ds-palette-mainBlue-70);color:var(--ds-palette-mainBlue-70)}.ds-button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-05)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-10)}.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-palette-white);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-palette-black-95);color:var(--ds-palette-black-95)}.ds-button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-overlay-black-10)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-overlay-black-15)}.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-palette-white);color:var(--ds-palette-white)}.ds-button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-overlay-white-30)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-overlay-white-40)}.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-overlay-white-15);color:var(--ds-overlay-white-40)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-mainBlue-70);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-05)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-10)}.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-95);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-overlay-black-10)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-overlay-black-15)}.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-white);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-overlay-white-30)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-overlay-white-40)}.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-overlay-white-40)}";
+
+const DsButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    inheritedAttributes = {};
+    buttonEl;
+    pressedKeys = new Set();
+    get el() { return getElement(this); }
+    dsValue = '';
+    dsVariant = 'primary';
+    dsColour = 'blue';
+    dsSize = 'medium';
+    dsIcon = '';
+    dsIconPosition = 'start';
+    dsType = 'button';
+    dsDisabled = false;
+    dsIsLoading = false;
+    dsUseSpinner = false;
+    dsSpinnerHiddenText;
+    dsFullWidth = false;
+    dsAriaDisabled = 'false';
+    async dsFocus() {
+        this.buttonEl.focus();
+    }
+    componentWillLoad() {
+        if (this.dsUseSpinner && !this.dsSpinnerHiddenText) {
+            throw new Error('dsSpinnerHiddenText is required when dsUseSpinner is true.');
+        }
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-disabled']),
+            ...inheritSpecifiedAttributes(this.el, [
+                'autofocus',
+                'form',
+                'formaction',
+                'formenctype',
+                'formmethod',
+                'formnovalidate',
+                'formtarget',
+                'name',
+                'popovertarget',
+                'popovertargetaction',
+            ]),
+            ...inheritAttributes(this, this.el),
+        };
+    }
+    handleKeyDown = (event) => {
+        if (event.repeat) {
+            return;
+        }
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                this.pressedKeys.add(event.key);
+                this.buttonEl.classList.add(`${this.dsColour}--active`);
+                break;
+        }
+    };
+    handleKeyUp = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                this.pressedKeys.delete(event.key);
+                if (this.pressedKeys.size === 0) {
+                    this.buttonEl.classList.remove(`${this.dsColour}--active`);
+                }
+                break;
+        }
+    };
+    getSpinnerColour = () => {
+        if (this.dsVariant === 'primary') {
+            if (this.dsColour === 'blue')
+                return 'white';
+            if (this.dsColour === 'white')
+                return 'black';
+            if (this.dsColour === 'black')
+                return 'white';
+        }
+        return this.dsColour;
+    };
+    renderButton = () => {
+        const classes = classNames(`ds-button ${this.dsVariant} ${this.dsColour} ${this.dsSize}`, {
+            'icon-start': this.dsIcon && this.dsIconPosition === 'start' && this.dsValue,
+            'icon-end': this.dsIcon && this.dsIconPosition === 'end' && this.dsValue,
+            'icon-only': this.dsIcon && !this.dsValue,
+        });
+        const iconSize = this.dsSize === 'small' ? '1rem' : undefined;
+        return (h("button", { ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, type: this.dsType, "aria-disabled": this.dsAriaDisabled == 'true' ? 'true' : 'false', disabled: this.dsDisabled, ...this.inheritedAttributes }, this.dsIsLoading ? (h(Fragment, null, h("ds-spinner", { dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsSpinnerColor: this.getSpinnerColour(), dsSize: this.dsSize == 'small' ? 'small' : 'medium' }), this.dsValue && h("span", { class: "button-value" }, this.dsValue))) : (h(Fragment, null, h("slot", { name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && h("ds-icon", { dsName: this.dsIcon, dsSize: iconSize })), this.dsValue && h("span", { class: "button-value" }, this.dsValue), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && h("ds-icon", { dsName: this.dsIcon, dsSize: iconSize }))))));
+    };
+    render() {
+        const buttonElement = this.renderButton();
+        return (this.dsUseSpinner ?
+            h("div", { "aria-live": "polite" }, buttonElement)
+            :
+                buttonElement);
+    }
+};
+DsButton.style = dsButtonCss;
+
+export { DsButton as ds_button };

package/dist/esm/ds-card.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, g as getElement, h } from './index-Cm7V4EAn.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { s as slugifyText } from './utils-CqaqnfY4.js';
+
+const dsCardCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:block}.ds-card{background-color:var(--ds-palette-white);border:1px solid var(--ds-palette-black-20);color:var(--ds-palette-black-95);display:flex;flex-direction:column;hyphens:auto;margin-bottom:var(--ds-spacing-2xSmall)}.ds-card:focus-within{box-shadow:false 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * -1)}.ds-card:focus-within .ds-card__heading{text-decoration:underline;text-underline-offset:2px}.ds-card.ds-card--link:hover{border-color:var(--ds-palette-black-50);cursor:pointer}.ds-card.ds-card--link:hover ds-icon{color:var(--ds-palette-black-80)}.ds-card.ds-card--link:hover .ds-card__heading{text-decoration:underline;text-underline-offset:2px}.ds-card.ds-card--link:active{border-color:var(--ds-palette-black-95)}.ds-card.ds-card--link:active ds-icon{color:var(--ds-palette-black-80)}.ds-card.ds-card--link{text-decoration:none}.ds-card.ds-card--link:focus-within ds-icon{color:var(--ds-palette-black-80)}.ds-card--filled{background-color:var(--ds-palette-black-05)}.ds-card__image-container{aspect-ratio:16/9;position:relative;width:100%;overflow:hidden}.ds-card__image{width:100%;height:100%;object-fit:cover}.ds-card__content--top{align-items:center;display:flex;gap:var(--ds-spacing-small);justify-content:space-between;padding:var(--ds-spacing-xSmall) var(--ds-spacing-small)}.ds-card__content--top__text{display:flex;flex-direction:column;gap:var(--ds-spacing-3xSmall)}.ds-card__eyebrow{color:var(--ds-palette-black-70);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:1px;line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);margin-bottom:var(--ds-spacing-3xSmall);order:1}.ds-card__heading{align-items:center;color:var(--ds-palette-black-95);display:flex;font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold);margin:0;order:2;justify-content:space-between;text-wrap:balance}.ds-card__heading__link{all:unset}.ds-card__subtitle{font-size:var(--ds-fontSize-16);font-family:var(--ds-fontFamily-body);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);order:3}.ds-card__description{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);color:var(--ds-palette-black-95);padding:0 var(--ds-spacing-small);margin:0 0 var(--ds-spacing-small) 0;text-wrap:pretty}.ds-card ds-icon{color:var(--ds-palette-mainBlue-70);font-size:var(--ds-fontSize-20);font-weight:normal}";
+
+const DsCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    dsVariant = 'filled';
+    dsHeading;
+    dsHeadingLevel = 3;
+    dsDescription;
+    dsUrl;
+    dsUrlTarget = '_blank';
+    dsImageUrl;
+    dsImageAlt = '';
+    dsEyebrow;
+    dsSubtitle;
+    dsShowArrow = true;
+    get el() { return getElement(this); }
+    handleClick(e) {
+        const clickedLink = e.composedPath().find((el) => el.tagName === 'A');
+        if (!clickedLink && this.dsUrl) {
+            const headingLink = this.el.shadowRoot?.querySelector('a.ds-card__heading__link');
+            if (headingLink) {
+                headingLink.click();
+            }
+        }
+    }
+    handleKeydown(e) {
+        if ((e.key === 'Enter') && this.dsUrl) {
+            e.preventDefault();
+            const headingLink = this.el.shadowRoot?.querySelector('a.ds-card__heading__link');
+            if (headingLink) {
+                headingLink.click();
+            }
+        }
+    }
+    render() {
+        const classes = classNames('ds-card', `ds-card--${this.dsVariant}`, {
+            [`ds-card--link`]: Boolean(this.dsUrl),
+        });
+        const HeadingTag = `h${this.dsHeadingLevel}`;
+        const randomId = Math.random().toString(36).substring(2, 9);
+        const headingId = `${slugifyText(this.dsHeading)}-${randomId}`;
+        return (h("article", { key: '39fa69acafabb5201adbfe5f361bbb6a82fbad66', "aria-labelledby": headingId, class: classes, onClick: (e) => this.handleClick(e), onKeyDown: (e) => this.handleKeydown(e) }, this.dsImageUrl && (h("div", { key: '47207c839c55179082f3b8060a93ab4622fefa08', class: "ds-card__image-container" }, h("img", { key: 'df83bfd1a75845752f746235b12df453de51ee04', class: "ds-card__image", src: this.dsImageUrl, alt: this.dsImageAlt }))), h("div", { key: 'c2e3f31bfc20d8b97d6c7485e348b60c84d9f9ae', class: "ds-card__content" }, h("div", { key: '70612da3145bf79f0a1e07c7b3cddbb309247286', class: "ds-card__content--top" }, h("div", { key: '0813a2eee2575371b561ce260215c0fc8175e4a0', class: "ds-card__content--top__text" }, this.dsUrl ?
+            h(HeadingTag, { class: "ds-card__heading", id: headingId }, h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: "ds-card__heading__link" }, this.dsHeading))
+            :
+                h(HeadingTag, { class: "ds-card__heading" }, this.dsHeading), this.dsEyebrow && h("div", { key: '7b93368c780b3df3fd8634f65af2589810ac9953', class: "ds-card__eyebrow" }, this.dsEyebrow), this.dsSubtitle && h("div", { key: 'edc5f5a6e05b1c901a69a2ff6ccde88b7a1f9c57', class: "ds-card__subtitle" }, this.dsSubtitle)), (this.dsUrl && this.dsShowArrow) && h("ds-icon", { key: '38fdc6581093d4ae820100b61c61d94b92690646', "ds-name": "arrow_forward" })), h("div", { key: '2b068303f4880827800ec6dad5eb86bc8365bda5', class: "ds-card__content--bottom" }, this.dsDescription && h("p", { key: 'e62f55d389866099320ffc28846adff926e204d2', class: "ds-card__description" }, this.dsDescription), h("div", { key: '202aeba23c27b074dffdddbe7e6d5b59ab8e90eb', class: "ds-card__slot--content" }, h("slot", { key: '76c41243b723e124d91f5ac7b33c9f6baa99ae27', name: "content" })), h("div", { key: 'f728bd9c984773f930972181694ebb67bdad5cf6', class: "ds-card__slot--footer" }, h("slot", { key: '8ea95152f2a4fe8ff45f331c371de2d93e8e45fa', name: "footer" }))))));
+    }
+};
+DsCard.style = dsCardCss;
+
+export { DsCard as ds_card };