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

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

@@ -0,0 +1,27 @@
+import { getLanguage } from "../../../store";
+const strings = {
+    fi: {
+        defaultError: 'Median lataus epäonnistui',
+        abortedError: 'Median lataus keskeytettiin',
+        networkError: 'Verkkovirhe tapahtui',
+        decodeError: 'Median dekoodaus epäonnistui',
+        formatError: 'Median formaatti ei ole tuettu',
+    },
+    sv: {
+        defaultError: 'Media laddning misslyckades',
+        abortedError: 'Media laddning avbröts',
+        networkError: 'Nätverksfel uppstod',
+        decodeError: 'Mediaavkodning misslyckades',
+        formatError: 'Mediaformatet stöds inte',
+    },
+};
+const fallback = {
+    defaultError: 'Failed to load media',
+    abortedError: 'Media loading aborted',
+    networkError: 'Network error occurred',
+    decodeError: 'Media decoding failed',
+    formatError: 'Media format not supported',
+};
+export function getDsMediaStrings() {
+    return strings[getLanguage()] ?? fallback;
+}

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

@@ -1,4 +1,4 @@
-.ds-modal__oJU1eo {
+.ds-modal__pA2cRq {
   position: fixed;
   padding: 0;
   border: 0;
@@ -12,10 +12,10 @@
   overflow-y: hidden;
   inset: 0;
 }
-.ds-modal__oJU1eo--open {
+.ds-modal__pA2cRq--open {
   overflow-y: auto;
 }
-.ds-modal__oJU1eo__positioner {
+.ds-modal__pA2cRq__positioner {
   pointer-events: none;
   display: flex;
   flex-direction: column;
@@ -26,18 +26,18 @@
   margin-block: auto 0;
 }
 @media (min-width: 30rem) {
-  .ds-modal__oJU1eo__positioner {
+  .ds-modal__pA2cRq__positioner {
     justify-content: center;
     padding-block: var(--ds-spacing-small);
     margin-block: auto;
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__oJU1eo__positioner {
+  .ds-modal__pA2cRq__positioner {
     padding-block: var(--ds-spacing-xLarge);
   }
 }
-.ds-modal__oJU1eo__container {
+.ds-modal__pA2cRq__container {
   pointer-events: auto;
   cursor: unset;
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
@@ -49,32 +49,32 @@
   transition: scale var(--ds-modal-transition-out-duration) ease-out, opacity var(--ds-modal-transition-out-duration) ease-out, transform var(--ds-modal-transition-out-duration) ease-out;
 }
 @media (min-width: 30rem) {
-  .ds-modal__oJU1eo__container {
+  .ds-modal__pA2cRq__container {
     margin: auto;
     width: fit-content;
     max-width: calc(100vw - 2 * var(--ds-spacing-small));
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__oJU1eo__container {
+  .ds-modal__pA2cRq__container {
     max-width: calc(100vw - 2 * var(--ds-spacing-xLarge));
   }
 }
-.ds-modal__oJU1eo__container--full {
+.ds-modal__pA2cRq__container--full {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-modal__oJU1eo__container--small {
+  .ds-modal__pA2cRq__container--small {
     width: 480px;
   }
-  .ds-modal__oJU1eo__container--medium {
+  .ds-modal__pA2cRq__container--medium {
     width: 640px;
   }
-  .ds-modal__oJU1eo__container--large {
+  .ds-modal__pA2cRq__container--large {
     width: 800px;
   }
 }
-.ds-modal__oJU1eo__container--scrollable {
+.ds-modal__pA2cRq__container--scrollable {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -83,31 +83,31 @@
   min-height: calc(320px - 2 * var(--ds-spacing-small));
 }
 @media (min-width: 30rem) {
-  .ds-modal__oJU1eo__container--scrollable {
+  .ds-modal__pA2cRq__container--scrollable {
     max-height: calc(100vh + calc(-2 * var(--ds-spacing-small)));
     max-height: calc(100dvh + calc(-2 * var(--ds-spacing-small)));
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__oJU1eo__container--scrollable {
+  .ds-modal__pA2cRq__container--scrollable {
     max-height: calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));
     max-height: calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)));
   }
 }
-.ds-modal__oJU1eo--open .ds-modal__oJU1eo__container {
+.ds-modal__pA2cRq--open .ds-modal__pA2cRq__container {
   scale: 1;
   opacity: 1;
   transform: translateY(0);
 }
-.ds-modal__oJU1eo--in .ds-modal__oJU1eo__container {
+.ds-modal__pA2cRq--in .ds-modal__pA2cRq__container {
   transition: scale var(--ds-modal-transition-in-duration) ease-out, opacity var(--ds-modal-transition-in-duration) ease-out, transform var(--ds-modal-transition-in-duration) ease-out;
 }
 @media (prefers-reduced-motion: reduce) {
-  .ds-modal__oJU1eo__container, .ds-modal__oJU1eo--in .ds-modal__oJU1eo__container {
+  .ds-modal__pA2cRq__container, .ds-modal__pA2cRq--in .ds-modal__pA2cRq__container {
     transition: none;
   }
 }
-.ds-modal__oJU1eo__header {
+.ds-modal__pA2cRq__header {
   position: relative;
   display: flex;
   flex-direction: row;
@@ -117,81 +117,81 @@
   padding-inline: var(--ds-spacing-small);
 }
 @media (min-width: 30rem) {
-  .ds-modal__oJU1eo__header {
+  .ds-modal__pA2cRq__header {
     padding-block: var(--ds-spacing-medium) var(--ds-spacing-small);
     padding-inline: var(--ds-spacing-medium);
   }
 }
-.ds-modal__oJU1eo__header--sticky {
+.ds-modal__pA2cRq__header--sticky {
   position: sticky;
   top: 0;
   background-color: var(--ds-bgColor-white);
   border-block-end: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-modal__oJU1eo__header__heading:focus-visible {
+.ds-modal__pA2cRq__header__heading: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-modal__oJU1eo__header__heading {
+.ds-modal__pA2cRq__header__heading {
   display: flex;
   gap: var(--ds-spacing-xSmall);
 }
-.ds-modal__oJU1eo__header__heading__text {
+.ds-modal__pA2cRq__header__heading__text {
   margin-block: var(--ds-spacing-4xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-modal__oJU1eo__header__heading__text {
+  .ds-modal__pA2cRq__header__heading__text {
     margin-block: calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall));
   }
 }
-.ds-modal__oJU1eo__header__heading__icon {
+.ds-modal__pA2cRq__header__heading__icon {
   display: block;
   margin-block: var(--ds-spacing-4xSmall);
   margin-inline-end: var(--ds-spacing-3xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-modal__oJU1eo__header__heading__icon {
+  .ds-modal__pA2cRq__header__heading__icon {
     margin-block: var(--ds-spacing-3xSmall);
   }
 }
-.ds-modal__oJU1eo__header__close-button {
+.ds-modal__pA2cRq__header__close-button {
   margin-inline-start: auto;
 }
 @media (min-width: 60rem) {
-  .ds-modal__oJU1eo__header__close-button {
+  .ds-modal__pA2cRq__header__close-button {
     margin-block: var(--ds-spacing-4xSmall);
   }
 }
-.ds-modal__oJU1eo__content:focus-visible {
+.ds-modal__pA2cRq__content:focus-visible {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.ds-modal__oJU1eo__content {
+.ds-modal__pA2cRq__content {
   position: relative;
   padding-inline: var(--ds-spacing-small);
   flex: 1;
   min-height: 0;
 }
 @media (min-width: 30rem) {
-  .ds-modal__oJU1eo__content {
+  .ds-modal__pA2cRq__content {
     padding-inline: var(--ds-spacing-medium);
   }
 }
-.ds-modal__oJU1eo__content--padded {
+.ds-modal__pA2cRq__content--padded {
   padding-block-end: var(--ds-spacing-small);
 }
 @media (min-width: 30rem) {
-  .ds-modal__oJU1eo__content--padded {
+  .ds-modal__pA2cRq__content--padded {
     padding-block-end: var(--ds-spacing-medium);
   }
 }
-.ds-modal__oJU1eo__content--scrollable {
+.ds-modal__pA2cRq__content--scrollable {
   overflow-y: auto;
   padding-block-end: unset;
 }
-.ds-modal__oJU1eo__content--scrollable__top-scrim, .ds-modal__oJU1eo__content--scrollable__bottom-scrim {
+.ds-modal__pA2cRq__content--scrollable__top-scrim, .ds-modal__pA2cRq__content--scrollable__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -201,43 +201,43 @@
   z-index: 1;
   display: none;
 }
-.ds-modal__oJU1eo__content--scrollable__top-scrim--open, .ds-modal__oJU1eo__content--scrollable__bottom-scrim--open {
+.ds-modal__pA2cRq__content--scrollable__top-scrim--open, .ds-modal__pA2cRq__content--scrollable__bottom-scrim--open {
   display: block;
 }
-.ds-modal__oJU1eo__content--scrollable__top-scrim {
+.ds-modal__pA2cRq__content--scrollable__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%);
 }
-.ds-modal__oJU1eo__content--scrollable__bottom-scrim {
+.ds-modal__pA2cRq__content--scrollable__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%);
 }
-.ds-modal__oJU1eo__content--scrollable:focus-visible .ds-modal__oJU1eo__content--scrollable__top-scrim {
+.ds-modal__pA2cRq__content--scrollable:focus-visible .ds-modal__pA2cRq__content--scrollable__top-scrim {
   top: var(--ds-borderWidth-thin);
 }
-.ds-modal__oJU1eo__content--scrollable:focus-visible .ds-modal__oJU1eo__content--scrollable__bottom-scrim {
+.ds-modal__pA2cRq__content--scrollable:focus-visible .ds-modal__pA2cRq__content--scrollable__bottom-scrim {
   bottom: var(--ds-borderWidth-thin);
 }
-.ds-modal__oJU1eo__footer {
+.ds-modal__pA2cRq__footer {
   position: relative;
 }
-.ds-modal__oJU1eo__footer:not(:empty) {
+.ds-modal__pA2cRq__footer:not(:empty) {
   display: flex;
   flex-direction: column;
   padding: var(--ds-spacing-small);
   gap: var(--ds-spacing-xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-modal__oJU1eo__footer:not(:empty) {
+  .ds-modal__pA2cRq__footer:not(:empty) {
     flex-direction: row;
     padding: var(--ds-spacing-medium);
     gap: var(--ds-spacing-small);
   }
 }
-.ds-modal__oJU1eo__footer:not(:empty) + .ds-modal__oJU1eo__content {
+.ds-modal__pA2cRq__footer:not(:empty) + .ds-modal__pA2cRq__content {
   border-block-end: 0;
 }
-.ds-modal__oJU1eo__footer--sticky:not(:empty) {
+.ds-modal__pA2cRq__footer--sticky:not(:empty) {
   position: sticky;
   bottom: 0;
   background-color: var(--ds-bgColor-white);

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

@@ -212,11 +212,11 @@ export class DsModal extends Mixin(componentFactory('ds-modal', { stopRootTracki
         });
         const contentAriaLabel = this.dsScrollable ? this.contentScrollArea : undefined;
         const contentTabIndex = this.dsScrollable ? 0 : undefined;
-        return (h(this.DsBackdrop, { key: '42413dd793d7040a7fd2e0db7d21b1aaf937504a', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, h("div", { key: '5f6eacaafbea9542b036adf5f9a6b1f6438a5bc0', class: `${baseClass}__positioner` }, h("div", { key: 'c5149230b5cb7c31f3650a12b9c85f3fb3bed8a0', class: containerClasses, style: { '--ds-modal-transition-in-duration': `${MODAL_TRANSITION_IN_DURATION}ms`, '--ds-modal-transition-out-duration': `${MODAL_TRANSITION_OUT_DURATION}ms` } }, h("slot", { key: 'a879fd830a8cd2ed898af28ff29701f8eee4936b', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (h("div", { key: '2abef7e7a70f5cf0dc2929278c6f73e27e78aa3c', class: headerClasses }, this.dsHeadingText && (h("span", { key: '34e2821e019826b908210918c2d5c5e2c7c8a1f3', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (h(this.DsIcon, { key: 'd4cc8e5367cb8856272fc5d2de8508a0fa2da419', class: `${baseClass}__header__heading__icon`, dsAriaHidden: this.icon.ariaHidden, dsAriaLabel: this.icon.ariaLabel, dsSize: this.icon.size, dsName: this.icon.name, dsColour: this.icon.colour })), h("span", { key: 'a3b77daf74437d84f4dd1346a2dfdcd55842fd18', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (h(this.DsButton, { key: '463a9db3e76f6db85b7d56746fb9c3d68af342bc', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), h("div", { key: '806de2042aaf8ab9eedbc9c6418f84b5d737db3d', ref: el => (this.contentRef = el), class: contentClasses, ...ifDefined('aria-label', contentAriaLabel), ...ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (h("div", { key: '6f4c8881745efdc222642ad91414b82d80c537fb', class: classNames(`${baseClass}__content--scrollable__top-scrim`, {
+        return (h(this.DsBackdrop, { key: '5a6666dceafdd836c488dca0b4267f696fae96ad', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, h("div", { key: 'b9e9259d7aa33542bdf96e1ba276ed47151de0f2', class: `${baseClass}__positioner` }, h("div", { key: '8c735f1c2172140e23b6c7ebac8db2ff3eebd58b', class: containerClasses, style: { '--ds-modal-transition-in-duration': `${MODAL_TRANSITION_IN_DURATION}ms`, '--ds-modal-transition-out-duration': `${MODAL_TRANSITION_OUT_DURATION}ms` } }, h("slot", { key: '2a2ac105c16055684e8c4887d57d674dbcc691eb', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (h("div", { key: 'cc388b665f36f1614d323aa264f736c273ca05ac', class: headerClasses }, this.dsHeadingText && (h("span", { key: '771a827000c9a7c005929c23021214f1db6c279d', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (h(this.DsIcon, { key: '438b20796c92a99f08491f936d3d5f287f090ea2', class: `${baseClass}__header__heading__icon`, dsAriaHidden: this.icon.ariaHidden, dsAriaLabel: this.icon.ariaLabel, dsSize: this.icon.size, dsName: this.icon.name, dsColour: this.icon.colour })), h("span", { key: '2d5c7996b8559cd495991cb0a459ca28e293cc6a', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (h(this.DsButton, { key: 'aa5ef6d2594b6064b9ae8a6ef005af68bcd449c1', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), h("div", { key: '47e06142d21b5286e9853e5a369a1761159e1a4e', ref: el => (this.contentRef = el), class: contentClasses, ...ifDefined('aria-label', contentAriaLabel), ...ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (h("div", { key: 'a5e145a50643d02dd801acb26e50a5486516e7f3', class: classNames(`${baseClass}__content--scrollable__top-scrim`, {
                 [`${baseClass}__content--scrollable__top-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atTop,
-            }), "aria-hidden": "true" })), h("slot", { key: '6561146e82a7a60b41c3975776d506f490388011', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (h("div", { key: '9461de8338172a11e2f70a871fb64d20f0c39a57', class: classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
+            }), "aria-hidden": "true" })), h("slot", { key: '45f6f1eecda2e9f1f8279ec0b3a274fcc187d9ab', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (h("div", { key: 'f5b6cb6fe2fed931d6540607807dcce3387f7c71', class: classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
                 [`${baseClass}__content--scrollable__bottom-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atBottom,
-            }), "aria-hidden": "true" }))), h("div", { key: '03c4038d7a3461e9595ad7993987dbd2e3529513', class: footerClasses }, h("slot", { key: '559da72c7e6aef4416e559769a0756d28718d4fd', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
+            }), "aria-hidden": "true" }))), h("div", { key: '4e62c73d5bf7b60205d999803708af9ec11538e5', class: footerClasses }, h("slot", { key: '68c2a8a0bd4be4a22ebe1cb728cabe3f1b5604c6', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
     }
     static get is() { return "ds-modal"; }
     static get originalStyleUrls() {

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

@@ -3,76 +3,76 @@
   width: 100%;
 }
 
-.ds-notification__oJU1eo {
+.ds-notification__pA2cRq {
   padding: var(--ds-spacing-xSmall, 12px);
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--neutral {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--neutral {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--neutral .ds-notification__oJU1eo__icon {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--neutral .ds-notification__pA2cRq__icon {
   color: var(--ds-iconColor-default);
   margin-bottom: auto;
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--neutralWhite {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--neutralWhite {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--neutralWhite .ds-notification__oJU1eo__icon {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--neutralWhite .ds-notification__pA2cRq__icon {
   color: var(--ds-iconColor-default);
   margin-bottom: auto;
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--info {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-info);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--info .ds-notification__oJU1eo__icon {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--info .ds-notification__pA2cRq__icon {
   color: var(--ds-iconColor-info);
   margin-bottom: auto;
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--success {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-success);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--success .ds-notification__oJU1eo__icon {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--success .ds-notification__pA2cRq__icon {
   color: var(--ds-iconColor-success);
   margin-bottom: auto;
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--attention {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-attention);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--attention .ds-notification__oJU1eo__icon {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--attention .ds-notification__pA2cRq__icon {
   color: var(--ds-iconColor-attention);
   margin-bottom: auto;
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--danger {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-danger);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__oJU1eo.ds-notification__oJU1eo--danger .ds-notification__oJU1eo__icon {
+.ds-notification__pA2cRq.ds-notification__pA2cRq--danger .ds-notification__pA2cRq__icon {
   color: var(--ds-iconColor-danger);
   margin-bottom: auto;
 }
-.ds-notification__oJU1eo__content {
+.ds-notification__pA2cRq__content {
   display: flex;
   gap: var(--ds-spacing-2xSmall, 8px);
   max-width: 1376px;
   margin: 0 auto;
 }
-.ds-notification__oJU1eo__content__text {
+.ds-notification__pA2cRq__content__text {
   display: flex;
   padding: var(--ds-spacing-4xSmall, 2px) 0;
   flex-direction: column;
@@ -80,11 +80,11 @@
   gap: var(--ds-spacing-4xSmall, 2px);
   flex: 1 0 0;
 }
-.ds-notification__oJU1eo__content__text__heading, .ds-notification__oJU1eo__content__text__description {
+.ds-notification__pA2cRq__content__text__heading, .ds-notification__pA2cRq__content__text__description {
   font-family: var(--ds-fontFamily-body);
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-notification__oJU1eo__content__text__description {
+.ds-notification__pA2cRq__content__text__description {
   max-width: var(--ds-notification-description-max-width, 550px);
 }

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

@@ -152,7 +152,7 @@ export class DsNotification extends Mixin(componentFactory('ds-notification', {
         const ariaLabelledby = this.dsAriaLabelledby ?? this.inheritedAttributes['aria-labelledby'] ?? this.ariaLabelledBy;
         const role = this.dsRole ?? this.inheritedAttributes['role'] ?? 'group';
         const restAttributes = omit(this.inheritedAttributes, ['aria-labelledby', 'aria-label', 'role']);
-        return (h("div", { key: 'da7dc416b3544bf88c8e430f5096760d578d6b2e', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: 'cc93c979d7ee7150d67e3a4694f1f21adcd66a33', class: contentClass }, h("div", { key: 'bf8403972e18bc332f5bf603b3396cf71af1c59c', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: '5a6ca762574fb8d030e9125d4359c98a846cc63d', dsName: this.icon })), h("div", { key: '247b10c7c31e21d5706f167115819d0e264ca8cd', class: textClass }, h("slot", { key: '832b560eba442d889d322ac1f0a6ad43f8545c8a', name: "heading" }, this.dsHeading && (h("div", { key: '5ed435ad98a1258b0be61a8c06ed7332ad5df990', class: `${textClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: 'e1a1c1463b2975873fa48226469fcf1a33c542c4', name: "description" }, this.dsDescription && (h("div", { key: '13eb68395d4633806941ede2066d86c8c50d04d0', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: '9dada7c528e67bf965ddcae728d717440bc40484' })), this.dsDismissable && (h(this.DsButton, { key: '6ffc560ffd9ddeaf6664da280ca3ec077c752e55', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsAriaLabelledby: [`${this.dsId}-dismiss-button`, ariaLabelledby].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: '88c24043208db16829f651540ae1a232536990e4', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
+        return (h("div", { key: '7b14408450830b5684feaae5112bb6d5ebd14ad0', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: '0b217857db9473deb8d4170dde2210c44678f564', class: contentClass }, h("div", { key: 'aa01e9f745e9e78816d5448cea369c917cd7e865', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: '055972a856b67cd4189ed9278fdf19c49726d808', dsName: this.icon })), h("div", { key: '04111ec788f7957075685cb0fd27a62b68ac88cb', class: textClass }, h("slot", { key: 'bde8bbc11c6d996264495c269a7e9fe53dd10b88', name: "heading" }, this.dsHeading && (h("div", { key: 'a1e9acfc2eedddba7b91e3bd50c3db3ce39095a1', class: `${textClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: '7b3a7679882494b12385180faa7b0372a4e27639', name: "description" }, this.dsDescription && (h("div", { key: 'b3528bf1e150bd89ca1fdc65906303f7a0ac45fe', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: '96f57e85be28e720d2cbb3d8e9dfb70e6cc2c701' })), this.dsDismissable && (h(this.DsButton, { key: '5aec0dbd01019afe590eb216e9e5041c5a5b5c1e', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsAriaLabelledby: [`${this.dsId}-dismiss-button`, ariaLabelledby].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: 'f9f222d9aab4de4a8fb68cad90c3c375434cd0d7', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
     }
     static get is() { return "ds-notification"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,4 +1,4 @@
-.ds-option__oJU1eo {
+.ds-option__pA2cRq {
   display: flex;
   align-items: center;
   justify-content: normal;
@@ -13,37 +13,37 @@
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-option__oJU1eo:not(.ds-option__oJU1eo--multiple) {
+.ds-option__pA2cRq:not(.ds-option__pA2cRq--multiple) {
   justify-content: space-between;
 }
-.ds-option__oJU1eo--hidden {
+.ds-option__pA2cRq--hidden {
   display: none;
 }
-.ds-option__oJU1eo--disabled {
+.ds-option__pA2cRq--disabled {
   cursor: not-allowed;
   user-select: none;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__oJU1eo:hover:not(.ds-option__oJU1eo--disabled) {
+.ds-option__pA2cRq:hover:not(.ds-option__pA2cRq--disabled) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-option__oJU1eo:active:not(.ds-option__oJU1eo--disabled) {
+.ds-option__pA2cRq:active:not(.ds-option__pA2cRq--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-option__oJU1eo--active {
+.ds-option__pA2cRq--active {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.ds-option__oJU1eo--active.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple) {
+.ds-option__pA2cRq--active.ds-option__pA2cRq--selected:not(.ds-option__pA2cRq--multiple) {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.ds-option__oJU1eo--multiple.ds-option__oJU1eo--disabled {
+.ds-option__pA2cRq--multiple.ds-option__pA2cRq--disabled {
   color: var(--ds-textColor-default);
 }
-.ds-option__oJU1eo--multiple .ds-option__oJU1eo__checkbox {
+.ds-option__pA2cRq--multiple .ds-option__pA2cRq__checkbox {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -56,44 +56,44 @@
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-option__oJU1eo--multiple.ds-option__oJU1eo--disabled .ds-option__oJU1eo__checkbox {
+.ds-option__pA2cRq--multiple.ds-option__pA2cRq--disabled .ds-option__pA2cRq__checkbox {
   border-color: var(--ds-borderColor-transparent);
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-option__oJU1eo--multiple.ds-option__oJU1eo--disabled:not(.ds-option__oJU1eo--selected) .ds-option__oJU1eo__checkbox {
+.ds-option__pA2cRq--multiple.ds-option__pA2cRq--disabled:not(.ds-option__pA2cRq--selected) .ds-option__pA2cRq__checkbox {
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-option__oJU1eo--selected .ds-option__oJU1eo__checkbox {
+.ds-option__pA2cRq--selected .ds-option__pA2cRq__checkbox {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
   color: var(--ds-textColor-white);
   padding: var(--ds-spacing-4xSmall);
 }
-.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple) {
+.ds-option__pA2cRq--selected:not(.ds-option__pA2cRq--multiple) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
 }
-.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple).ds-option__oJU1eo--disabled {
+.ds-option__pA2cRq--selected:not(.ds-option__pA2cRq--multiple).ds-option__pA2cRq--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple) .ds-option__oJU1eo__description {
+.ds-option__pA2cRq--selected:not(.ds-option__pA2cRq--multiple) .ds-option__pA2cRq__description {
   color: var(--ds-textColor-white);
 }
-.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple) .ds-option__oJU1eo__check-icon {
+.ds-option__pA2cRq--selected:not(.ds-option__pA2cRq--multiple) .ds-option__pA2cRq__check-icon {
   visibility: visible;
   color: var(--ds-textColor-white);
 }
-.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple).ds-option__oJU1eo--disabled .ds-option__oJU1eo__check-icon {
+.ds-option__pA2cRq--selected:not(.ds-option__pA2cRq--multiple).ds-option__pA2cRq--disabled .ds-option__pA2cRq__check-icon {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple):hover:not(.ds-option__oJU1eo--disabled) {
+.ds-option__pA2cRq--selected:not(.ds-option__pA2cRq--multiple):hover:not(.ds-option__pA2cRq--disabled) {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple):active:not(.ds-option__oJU1eo--disabled) {
+.ds-option__pA2cRq--selected:not(.ds-option__pA2cRq--multiple):active:not(.ds-option__pA2cRq--disabled) {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-option__oJU1eo__label {
+.ds-option__pA2cRq__label {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
@@ -102,14 +102,14 @@
   grid-column: 1;
   grid-row: 1;
 }
-.ds-option__oJU1eo__check-icon {
+.ds-option__pA2cRq__check-icon {
   margin-left: var(--ds-spacing-small);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   height: 100%;
 }
-.ds-option__oJU1eo__description {
+.ds-option__pA2cRq__description {
   color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
@@ -118,6 +118,6 @@
   grid-column: 1;
   grid-row: 2;
 }
-.ds-option__oJU1eo__description:not(:empty) {
+.ds-option__pA2cRq__description:not(:empty) {
   display: block;
 }

package/dist/collection/components/01-base-components/ds-option-group/ds-option-group.css

@@ -1,14 +1,14 @@
-.ds-option-group__oJU1eo {
+.ds-option-group__pA2cRq {
   display: block;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-option-group__oJU1eo--hidden {
+.ds-option-group__pA2cRq--hidden {
   display: none;
 }
-.ds-option-group__oJU1eo ul {
+.ds-option-group__pA2cRq ul {
   padding: 0;
 }
-.ds-option-group__oJU1eo__label {
+.ds-option-group__pA2cRq__label {
   position: sticky;
   display: block;
   top: 0;
@@ -19,6 +19,6 @@
   font-weight: var(--ds-fontWeight-semibold);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-option-group__oJU1eo__label__shadow {
+.ds-option-group__pA2cRq__label__shadow {
   box-shadow: var(--ds-shadow-overflow);
 }

package/dist/collection/components/01-base-components/ds-option-group/ds-option-group.js

@@ -36,9 +36,9 @@ export class DsOptionGroup extends Mixin(componentFactory('ds-option-group')) {
     }
     render() {
         const baseClass = cx('ds-option-group');
-        return (h("div", { key: '8023b873b342fb6ed068e04d1c5a90e7a0abbd08', class: classNames(`${baseClass}`, {
+        return (h("div", { key: '52223bab5fbf6ebc5f2704df1fd6d8d5d1ae9175', class: classNames(`${baseClass}`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, h("div", { key: '1dba0efdf6a067e140f293b632af322bbf0ccd4b', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: '57684ac864169f1a515d038026caba48f3f8fb52' })));
+            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, h("div", { key: '7909f575ab855df82dac8957c46c42e14468e64c', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: '0102c6419e9cdbe821a284f573877673306c60e4' })));
     }
     static get is() { return "ds-option-group"; }
     static get encapsulation() { return "scoped"; }