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

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

@@ -133,8 +133,8 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
             /youtu\.be\/([^?&\n]+)/,
         ];
         for (const regex of regexes) {
-            const match = url.match(regex);
-            if (match && match[1]) {
+            const match = regex.exec(url);
+            if (match?.[1]) {
                 return `https://www.youtube.com/embed/${match[1]}`;
             }
         }
@@ -177,7 +177,7 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
         const aspectRatioParts = this.dsAspectRatio.split('/');
         const aspectRatioValue = aspectRatioParts.length === 2 ? `${aspectRatioParts[0]} / ${aspectRatioParts[1]}` : this.dsAspectRatio;
         const baseClass = cx('ds-media');
-        return (h("div", { key: 'a0a9b6ceae213cdae37c6a7bd4a39e1698635f95', class: classNames(baseClass, {
+        return (h("div", { key: 'a4a54c00277784252977f41e7476f2b44a48d546', class: classNames(baseClass, {
                 [`${baseClass}--loading`]: this.isLoading,
                 [`${baseClass}--error`]: this.hasError,
                 [`${baseClass}--image`]: this.dsType === 'image',
@@ -229,7 +229,7 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                     "references": {
                         "MediaType": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-media/ds-media.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-media/ds-media.tsx",
                             "id": "src/components/01-base-components/ds-media/ds-media.tsx::MediaType"
                         }
                     }
@@ -429,7 +429,7 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                     "references": {
                         "DsMediaLoadEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-media/ds-media.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-media/ds-media.tsx",
                             "id": "src/components/01-base-components/ds-media/ds-media.tsx::DsMediaLoadEvent"
                         }
                     }
@@ -450,7 +450,7 @@ export class DsMedia extends Mixin(componentFactory('ds-media')) {
                     "references": {
                         "DsMediaErrorEvent": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-media/ds-media.tsx",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-media/ds-media.tsx",
                             "id": "src/components/01-base-components/ds-media/ds-media.tsx::DsMediaErrorEvent"
                         }
                     }

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

@@ -1,4 +1,4 @@
-.ds-modal__cpPWV0 {
+.ds-modal__izAhxK {
   position: fixed;
   padding: 0;
   border: 0;
@@ -12,10 +12,10 @@
   overflow-y: hidden;
   inset: 0;
 }
-.ds-modal__cpPWV0--open {
+.ds-modal__izAhxK--open {
   overflow-y: auto;
 }
-.ds-modal__cpPWV0__positioner {
+.ds-modal__izAhxK__positioner {
   pointer-events: none;
   display: flex;
   flex-direction: column;
@@ -26,18 +26,18 @@
   margin-block: auto 0;
 }
 @media (min-width: 30rem) {
-  .ds-modal__cpPWV0__positioner {
+  .ds-modal__izAhxK__positioner {
     justify-content: center;
     padding-block: var(--ds-spacing-small);
     margin-block: auto;
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__cpPWV0__positioner {
+  .ds-modal__izAhxK__positioner {
     padding-block: var(--ds-spacing-xLarge);
   }
 }
-.ds-modal__cpPWV0__container {
+.ds-modal__izAhxK__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__cpPWV0__container {
+  .ds-modal__izAhxK__container {
     margin: auto;
     width: fit-content;
     max-width: calc(100vw - 2 * var(--ds-spacing-small));
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__cpPWV0__container {
+  .ds-modal__izAhxK__container {
     max-width: calc(100vw - 2 * var(--ds-spacing-xLarge));
   }
 }
-.ds-modal__cpPWV0__container--full {
+.ds-modal__izAhxK__container--full {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-modal__cpPWV0__container--small {
+  .ds-modal__izAhxK__container--small {
     width: 480px;
   }
-  .ds-modal__cpPWV0__container--medium {
+  .ds-modal__izAhxK__container--medium {
     width: 640px;
   }
-  .ds-modal__cpPWV0__container--large {
+  .ds-modal__izAhxK__container--large {
     width: 800px;
   }
 }
-.ds-modal__cpPWV0__container--scrollable {
+.ds-modal__izAhxK__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__cpPWV0__container--scrollable {
+  .ds-modal__izAhxK__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__cpPWV0__container--scrollable {
+  .ds-modal__izAhxK__container--scrollable {
     max-height: calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));
     max-height: calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)));
   }
 }
-.ds-modal__cpPWV0--open .ds-modal__cpPWV0__container {
+.ds-modal__izAhxK--open .ds-modal__izAhxK__container {
   scale: 1;
   opacity: 1;
   transform: translateY(0);
 }
-.ds-modal__cpPWV0--in .ds-modal__cpPWV0__container {
+.ds-modal__izAhxK--in .ds-modal__izAhxK__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__cpPWV0__container, .ds-modal__cpPWV0--in .ds-modal__cpPWV0__container {
+  .ds-modal__izAhxK__container, .ds-modal__izAhxK--in .ds-modal__izAhxK__container {
     transition: none;
   }
 }
-.ds-modal__cpPWV0__header {
+.ds-modal__izAhxK__header {
   position: relative;
   display: flex;
   flex-direction: row;
@@ -117,81 +117,81 @@
   padding-inline: var(--ds-spacing-small);
 }
 @media (min-width: 30rem) {
-  .ds-modal__cpPWV0__header {
+  .ds-modal__izAhxK__header {
     padding-block: var(--ds-spacing-medium) var(--ds-spacing-small);
     padding-inline: var(--ds-spacing-medium);
   }
 }
-.ds-modal__cpPWV0__header--sticky {
+.ds-modal__izAhxK__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__cpPWV0__header__heading:focus-visible {
+.ds-modal__izAhxK__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__cpPWV0__header__heading {
+.ds-modal__izAhxK__header__heading {
   display: flex;
   gap: var(--ds-spacing-xSmall);
 }
-.ds-modal__cpPWV0__header__heading__text {
+.ds-modal__izAhxK__header__heading__text {
   margin-block: var(--ds-spacing-4xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-modal__cpPWV0__header__heading__text {
+  .ds-modal__izAhxK__header__heading__text {
     margin-block: calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall));
   }
 }
-.ds-modal__cpPWV0__header__heading__icon {
+.ds-modal__izAhxK__header__heading__icon {
   display: block;
   margin-block: var(--ds-spacing-4xSmall);
   margin-inline-end: var(--ds-spacing-3xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-modal__cpPWV0__header__heading__icon {
+  .ds-modal__izAhxK__header__heading__icon {
     margin-block: var(--ds-spacing-3xSmall);
   }
 }
-.ds-modal__cpPWV0__header__close-button {
+.ds-modal__izAhxK__header__close-button {
   margin-inline-start: auto;
 }
 @media (min-width: 60rem) {
-  .ds-modal__cpPWV0__header__close-button {
+  .ds-modal__izAhxK__header__close-button {
     margin-block: var(--ds-spacing-4xSmall);
   }
 }
-.ds-modal__cpPWV0__content:focus-visible {
+.ds-modal__izAhxK__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__cpPWV0__content {
+.ds-modal__izAhxK__content {
   position: relative;
   padding-inline: var(--ds-spacing-small);
   flex: 1;
   min-height: 0;
 }
 @media (min-width: 30rem) {
-  .ds-modal__cpPWV0__content {
+  .ds-modal__izAhxK__content {
     padding-inline: var(--ds-spacing-medium);
   }
 }
-.ds-modal__cpPWV0__content--padded {
+.ds-modal__izAhxK__content--padded {
   padding-block-end: var(--ds-spacing-small);
 }
 @media (min-width: 30rem) {
-  .ds-modal__cpPWV0__content--padded {
+  .ds-modal__izAhxK__content--padded {
     padding-block-end: var(--ds-spacing-medium);
   }
 }
-.ds-modal__cpPWV0__content--scrollable {
+.ds-modal__izAhxK__content--scrollable {
   overflow-y: auto;
   padding-block-end: unset;
 }
-.ds-modal__cpPWV0__content--scrollable__top-scrim, .ds-modal__cpPWV0__content--scrollable__bottom-scrim {
+.ds-modal__izAhxK__content--scrollable__top-scrim, .ds-modal__izAhxK__content--scrollable__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -201,43 +201,43 @@
   z-index: 1;
   display: none;
 }
-.ds-modal__cpPWV0__content--scrollable__top-scrim--open, .ds-modal__cpPWV0__content--scrollable__bottom-scrim--open {
+.ds-modal__izAhxK__content--scrollable__top-scrim--open, .ds-modal__izAhxK__content--scrollable__bottom-scrim--open {
   display: block;
 }
-.ds-modal__cpPWV0__content--scrollable__top-scrim {
+.ds-modal__izAhxK__content--scrollable__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%);
 }
-.ds-modal__cpPWV0__content--scrollable__bottom-scrim {
+.ds-modal__izAhxK__content--scrollable__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%);
 }
-.ds-modal__cpPWV0__content--scrollable:focus-visible .ds-modal__cpPWV0__content--scrollable__top-scrim {
+.ds-modal__izAhxK__content--scrollable:focus-visible .ds-modal__izAhxK__content--scrollable__top-scrim {
   top: var(--ds-borderWidth-thin);
 }
-.ds-modal__cpPWV0__content--scrollable:focus-visible .ds-modal__cpPWV0__content--scrollable__bottom-scrim {
+.ds-modal__izAhxK__content--scrollable:focus-visible .ds-modal__izAhxK__content--scrollable__bottom-scrim {
   bottom: var(--ds-borderWidth-thin);
 }
-.ds-modal__cpPWV0__footer {
+.ds-modal__izAhxK__footer {
   position: relative;
 }
-.ds-modal__cpPWV0__footer:not(:empty) {
+.ds-modal__izAhxK__footer:not(:empty) {
   display: flex;
   flex-direction: column;
   padding: var(--ds-spacing-small);
   gap: var(--ds-spacing-xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-modal__cpPWV0__footer:not(:empty) {
+  .ds-modal__izAhxK__footer:not(:empty) {
     flex-direction: row;
     padding: var(--ds-spacing-medium);
     gap: var(--ds-spacing-small);
   }
 }
-.ds-modal__cpPWV0__footer:not(:empty) + .ds-modal__cpPWV0__content {
+.ds-modal__izAhxK__footer:not(:empty) + .ds-modal__izAhxK__content {
   border-block-end: 0;
 }
-.ds-modal__cpPWV0__footer--sticky:not(:empty) {
+.ds-modal__izAhxK__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

@@ -12,7 +12,7 @@ export class DsModal extends Mixin(componentFactory('ds-modal', { stopRootTracki
     }
     el;
     RESIZE_THROTTLE_TIMEOUT = 100;
-    reducedMotionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    reducedMotionMediaQuery = globalThis.matchMedia('(prefers-reduced-motion: reduce)');
     isGreaterThanEqualSmallMediaQuery = isGreaterThanEqualBreakpointMediaQuery('small');
     transitionTimeout = null;
     contentRef;
@@ -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: '103de744e412db537b1e552e983307d172c8568a', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, h("div", { key: '95b45b2a2c70b1918817df845a5c81604ac79f82', class: `${baseClass}__positioner` }, h("div", { key: '7fc50b03ec5aa8d508d16427cd820547514818f6', 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: '647b0f26723f281a7b7d938d2b4ffa611a28bffc', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (h("div", { key: 'a05bee315b5532fc44e2eaaa61e5e23159509af4', class: headerClasses }, this.dsHeadingText && (h("span", { key: 'f53134c9492f1556ca743249f60579fbcecee7ee', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (h(this.DsIcon, { key: 'c7bd86c2b9ab0f1012bf09652e84b144b2cc8d0b', 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: '1ed1790642d653a43c76c70d1860b5baea201f9b', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (h(this.DsButton, { key: 'b566b85abc89b4da0e3f4dd2b27c4a2c4d94ecb9', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), h("div", { key: '2a5e105d6b5a59e13750863b1b29cf57f895b482', ref: el => (this.contentRef = el), class: contentClasses, ...ifDefined('aria-label', contentAriaLabel), ...ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (h("div", { key: '57d4250df4c6bc6bf7e666bf632791eb0ec30a54', class: classNames(`${baseClass}__content--scrollable__top-scrim`, {
+        return (h(this.DsBackdrop, { key: 'bfaf73f8f4e05eebfdb4df5dbeb8bd1f118ea1eb', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, h("div", { key: '56be2ee31305feb04834061b26031b365e8efee1', class: `${baseClass}__positioner` }, h("div", { key: '9336dd2a04c5453a5761e0fb95b65fd594cf21fe', 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: '29e43de33f365323e1fb31766312abcec5e1a8ee', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (h("div", { key: 'a99d014929f50a800e8c762f4a27a89be78563e8', class: headerClasses }, this.dsHeadingText && (h("span", { key: 'a5071dbc1140285d8ba1c7704ea653ca65c73eff', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (h(this.DsIcon, { key: '7e26641ab24a344b618b54879dc270a73f5788a5', 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: '4e850c00a77fc53779de3618188fe01a6e19436e', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (h(this.DsButton, { key: 'f97001f855d799ff5824e4754c5a17da5349e47c', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), h("div", { key: 'c325266ec043ca1dfa5d9565d3f5429e50639740', ref: el => (this.contentRef = el), class: contentClasses, ...ifDefined('aria-label', contentAriaLabel), ...ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (h("div", { key: '8fd76e231a27e59fb20e7d0f9df9732ff57df7e8', class: classNames(`${baseClass}__content--scrollable__top-scrim`, {
                 [`${baseClass}__content--scrollable__top-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atTop,
-            }), "aria-hidden": "true" })), h("slot", { key: '7d52546d93ec5b6699c0e5b772d3136caab044ec', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (h("div", { key: 'a55e6d54d338bbc19e3cc2cf921b6f6d29936d9a', class: classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
+            }), "aria-hidden": "true" })), h("slot", { key: '14d53ae7c5fe203f4cae4e6c3ead2fb8fdd875e4', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (h("div", { key: '19d685b4ecdbd88d8201048bf3b364a7bbc420ca', class: classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
                 [`${baseClass}__content--scrollable__bottom-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atBottom,
-            }), "aria-hidden": "true" }))), h("div", { key: '427b527c3c60ccd6e3948879e5673a8eb605fb4e', class: footerClasses }, h("slot", { key: 'ad9764f5651cead785a24433c7c47e3ffb93092b', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
+            }), "aria-hidden": "true" }))), h("div", { key: '75b6d1a4ef7b70f67f76292698c0c3877899f890', class: footerClasses }, h("slot", { key: '9d3d22304daea296131060cbde944cee14b9dc28', 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__cpPWV0 {
+.ds-notification__izAhxK {
   padding: var(--ds-spacing-xSmall, 12px);
 }
-.ds-notification__cpPWV0.ds-notification__cpPWV0--neutral {
+.ds-notification__izAhxK.ds-notification__izAhxK--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__cpPWV0.ds-notification__cpPWV0--neutral .ds-notification__cpPWV0__icon {
+.ds-notification__izAhxK.ds-notification__izAhxK--neutral .ds-notification__izAhxK__icon {
   color: var(--ds-iconColor-default);
   margin-bottom: auto;
 }
-.ds-notification__cpPWV0.ds-notification__cpPWV0--neutralWhite {
+.ds-notification__izAhxK.ds-notification__izAhxK--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__cpPWV0.ds-notification__cpPWV0--neutralWhite .ds-notification__cpPWV0__icon {
+.ds-notification__izAhxK.ds-notification__izAhxK--neutralWhite .ds-notification__izAhxK__icon {
   color: var(--ds-iconColor-default);
   margin-bottom: auto;
 }
-.ds-notification__cpPWV0.ds-notification__cpPWV0--info {
+.ds-notification__izAhxK.ds-notification__izAhxK--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__cpPWV0.ds-notification__cpPWV0--info .ds-notification__cpPWV0__icon {
+.ds-notification__izAhxK.ds-notification__izAhxK--info .ds-notification__izAhxK__icon {
   color: var(--ds-iconColor-info);
   margin-bottom: auto;
 }
-.ds-notification__cpPWV0.ds-notification__cpPWV0--success {
+.ds-notification__izAhxK.ds-notification__izAhxK--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__cpPWV0.ds-notification__cpPWV0--success .ds-notification__cpPWV0__icon {
+.ds-notification__izAhxK.ds-notification__izAhxK--success .ds-notification__izAhxK__icon {
   color: var(--ds-iconColor-success);
   margin-bottom: auto;
 }
-.ds-notification__cpPWV0.ds-notification__cpPWV0--attention {
+.ds-notification__izAhxK.ds-notification__izAhxK--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__cpPWV0.ds-notification__cpPWV0--attention .ds-notification__cpPWV0__icon {
+.ds-notification__izAhxK.ds-notification__izAhxK--attention .ds-notification__izAhxK__icon {
   color: var(--ds-iconColor-attention);
   margin-bottom: auto;
 }
-.ds-notification__cpPWV0.ds-notification__cpPWV0--danger {
+.ds-notification__izAhxK.ds-notification__izAhxK--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__cpPWV0.ds-notification__cpPWV0--danger .ds-notification__cpPWV0__icon {
+.ds-notification__izAhxK.ds-notification__izAhxK--danger .ds-notification__izAhxK__icon {
   color: var(--ds-iconColor-danger);
   margin-bottom: auto;
 }
-.ds-notification__cpPWV0__content {
+.ds-notification__izAhxK__content {
   display: flex;
   gap: var(--ds-spacing-2xSmall, 8px);
   max-width: 1376px;
   margin: 0 auto;
 }
-.ds-notification__cpPWV0__content__text {
+.ds-notification__izAhxK__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__cpPWV0__content__text__heading, .ds-notification__cpPWV0__content__text__description {
+.ds-notification__izAhxK__content__text__heading, .ds-notification__izAhxK__content__text__description {
   font-family: var(--ds-fontFamily-body);
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-notification__cpPWV0__content__text__description {
+.ds-notification__izAhxK__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: '162c1c8b4321c00118069067c9486dcbb02a0fd0', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: 'ec667507d53aa772a429ac6ea33947b29a9f5503', class: contentClass }, h("div", { key: 'c774b6b86952e2d825fd6d4306cc6462f0f4d91f', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: '17b4e3c422bcea87b3f289653a32adbbb4cf6357', dsName: this.icon })), h("div", { key: 'c25b5c48f2613be80f1d5573fb92ed5dafbf622b', class: textClass }, h("slot", { key: '1118cb18dbe0c8e483558d89ba14a2b61bfc6716', name: "heading" }, this.dsHeading && (h("div", { key: '66a232a3d67383c9ed8eda09e765831f3ce87b7a', 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: '6a21cf4285260e5170cdd8eada1f274832296b9d', name: "description" }, this.dsDescription && (h("div", { key: '89e015f2b62c23d16e0c9477c80b4ed3aa88ee1b', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: 'd91cdf542f9088521a771b0204c73b2e5c98b093' })), this.dsDismissable && (h(this.DsButton, { key: '8cfe8f56f55976749b8043a32bebcb41d2143fa4', 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: 'd2136e3c7aa20140cd4b9256610d5d1f4f9b4ba5', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
+        return (h("div", { key: '216a502d23be202bdaba487fa3bf7d744382fb1c', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: '2a2c8e2da0343a99b53dc70db4c4de8fe7559985', class: contentClass }, h("div", { key: '1a5121062ec24e14c5bf157e337b5b20bf2936cf', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: 'cc84dc6993a07042c023ede95c995e586d5784ad', dsName: this.icon })), h("div", { key: '89f05ff73f24c3ab6b5c3eeb2f7c866d7c76d896', class: textClass }, h("slot", { key: '2f6ca3bc959986bdb82ebcc2f81834962d6b8674', name: "heading" }, this.dsHeading && (h("div", { key: '309db7428f9beacb965a87280c9b1cec24e98f56', 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: '322fb05d07b21993a0e828ffa67368442edb1caf', name: "description" }, this.dsDescription && (h("div", { key: 'b1a1b507e56a94370b743c0c0c413b619ea13b55', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: 'e1c0631f0f3fd1631d6f453348aaa771ef930d4d' })), this.dsDismissable && (h(this.DsButton, { key: 'e09ccdfe0f7bfbd787f25356735f8ef9a4e76a85', 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: '660fbc1ff5d18bfed45ddadfd0d92a303f64e55c', 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__cpPWV0 {
+.ds-option__izAhxK {
   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__cpPWV0:not(.ds-option__cpPWV0--multiple) {
+.ds-option__izAhxK:not(.ds-option__izAhxK--multiple) {
   justify-content: space-between;
 }
-.ds-option__cpPWV0--hidden {
+.ds-option__izAhxK--hidden {
   display: none;
 }
-.ds-option__cpPWV0--disabled {
+.ds-option__izAhxK--disabled {
   cursor: not-allowed;
   user-select: none;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__cpPWV0:hover:not(.ds-option__cpPWV0--disabled) {
+.ds-option__izAhxK:hover:not(.ds-option__izAhxK--disabled) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-option__cpPWV0:active:not(.ds-option__cpPWV0--disabled) {
+.ds-option__izAhxK:active:not(.ds-option__izAhxK--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-option__cpPWV0--active {
+.ds-option__izAhxK--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__cpPWV0--active.ds-option__cpPWV0--selected:not(.ds-option__cpPWV0--multiple) {
+.ds-option__izAhxK--active.ds-option__izAhxK--selected:not(.ds-option__izAhxK--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__cpPWV0--multiple.ds-option__cpPWV0--disabled {
+.ds-option__izAhxK--multiple.ds-option__izAhxK--disabled {
   color: var(--ds-textColor-default);
 }
-.ds-option__cpPWV0--multiple .ds-option__cpPWV0__checkbox {
+.ds-option__izAhxK--multiple .ds-option__izAhxK__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__cpPWV0--multiple.ds-option__cpPWV0--disabled .ds-option__cpPWV0__checkbox {
+.ds-option__izAhxK--multiple.ds-option__izAhxK--disabled .ds-option__izAhxK__checkbox {
   border-color: var(--ds-borderColor-transparent);
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-option__cpPWV0--multiple.ds-option__cpPWV0--disabled:not(.ds-option__cpPWV0--selected) .ds-option__cpPWV0__checkbox {
+.ds-option__izAhxK--multiple.ds-option__izAhxK--disabled:not(.ds-option__izAhxK--selected) .ds-option__izAhxK__checkbox {
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-option__cpPWV0--selected .ds-option__cpPWV0__checkbox {
+.ds-option__izAhxK--selected .ds-option__izAhxK__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__cpPWV0--selected:not(.ds-option__cpPWV0--multiple) {
+.ds-option__izAhxK--selected:not(.ds-option__izAhxK--multiple) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
 }
-.ds-option__cpPWV0--selected:not(.ds-option__cpPWV0--multiple).ds-option__cpPWV0--disabled {
+.ds-option__izAhxK--selected:not(.ds-option__izAhxK--multiple).ds-option__izAhxK--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__cpPWV0--selected:not(.ds-option__cpPWV0--multiple) .ds-option__cpPWV0__description {
+.ds-option__izAhxK--selected:not(.ds-option__izAhxK--multiple) .ds-option__izAhxK__description {
   color: var(--ds-textColor-white);
 }
-.ds-option__cpPWV0--selected:not(.ds-option__cpPWV0--multiple) .ds-option__cpPWV0__check-icon {
+.ds-option__izAhxK--selected:not(.ds-option__izAhxK--multiple) .ds-option__izAhxK__check-icon {
   visibility: visible;
   color: var(--ds-textColor-white);
 }
-.ds-option__cpPWV0--selected:not(.ds-option__cpPWV0--multiple).ds-option__cpPWV0--disabled .ds-option__cpPWV0__check-icon {
+.ds-option__izAhxK--selected:not(.ds-option__izAhxK--multiple).ds-option__izAhxK--disabled .ds-option__izAhxK__check-icon {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__cpPWV0--selected:not(.ds-option__cpPWV0--multiple):hover:not(.ds-option__cpPWV0--disabled) {
+.ds-option__izAhxK--selected:not(.ds-option__izAhxK--multiple):hover:not(.ds-option__izAhxK--disabled) {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-option__cpPWV0--selected:not(.ds-option__cpPWV0--multiple):active:not(.ds-option__cpPWV0--disabled) {
+.ds-option__izAhxK--selected:not(.ds-option__izAhxK--multiple):active:not(.ds-option__izAhxK--disabled) {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-option__cpPWV0__label {
+.ds-option__izAhxK__label {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
@@ -102,14 +102,14 @@
   grid-column: 1;
   grid-row: 1;
 }
-.ds-option__cpPWV0__check-icon {
+.ds-option__izAhxK__check-icon {
   margin-left: var(--ds-spacing-small);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   height: 100%;
 }
-.ds-option__cpPWV0__description {
+.ds-option__izAhxK__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__cpPWV0__description:not(:empty) {
+.ds-option__izAhxK__description:not(:empty) {
   display: block;
 }