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

package/dist/cjs/ds-media.cjs.entry.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-CmX4GdqZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-Ddclbzw3.js');
+var cx = require('./cx-B9luWO9I.js');
 var utils = require('./utils-DK6WJuOa.js');
 var attributes = require('./attributes-5eBKMo1N.js');
-var store = require('./store-DT9Wk6N2.js');
-var componentFactory = require('./componentFactory-BNqkQcfi.js');
+var store = require('./store-Bc8GbxUL.js');
+var componentFactory = require('./componentFactory-Cw20ncNZ.js');
 
-const dsMediaCss = () => `.ds-media__MsKlb0{position:relative;width:100%;height:auto;overflow:hidden;background-color:var(--ds-palette-black-05)}.ds-media__MsKlb0 .ds-media__image,.ds-media__MsKlb0 .ds-media__video,.ds-media__MsKlb0 .ds-media__youtube{width:100%;height:100%;object-fit:cover;display:block;max-height:var(--horizontal-image-max-height, auto);aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__MsKlb0 .ds-media__image--fluid,.ds-media__MsKlb0 .ds-media__video--fluid,.ds-media__MsKlb0 .ds-media__youtube--fluid{aspect-ratio:unset}.ds-media__MsKlb0__youtube{border:none;object-fit:initial}.ds-media__MsKlb0--loading .ds-media__image,.ds-media__MsKlb0--loading .ds-media__video{opacity:0}.ds-media__MsKlb0--error{aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__MsKlb0--error .ds-media__image,.ds-media__MsKlb0--error .ds-media__video{display:none}.ds-media__MsKlb0--error .ds-media__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background-color:var(--ds-bgColor-secondary);color:var(--ds-bgColor-danger-bold);z-index:1;padding:16px;text-align:center}.ds-media__MsKlb0--error .ds-media__error-icon{width:48px;height:48px;color:var(--ds-bgColor-danger-bold);flex-shrink:0}.ds-media__MsKlb0--error .ds-media__error-text{font-size:14px;font-weight:500;line-height:1.4}.ds-media__MsKlb0--image .ds-media__image{transition:opacity 0.3s ease}.ds-media__MsKlb0--video .ds-media__video{transition:opacity 0.3s ease}.ds-media__MsKlb0--youtube .ds-media__youtube{transition:opacity 0.3s ease}.ds-media__MsKlb0--fluid{width:100%;height:100%}.ds-media__MsKlb0--fluid .ds-media__MsKlb0__image,.ds-media__MsKlb0--fluid .ds-media__MsKlb0__video,.ds-media__MsKlb0--fluid .ds-media__MsKlb0__youtube{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.ds-media__MsKlb0{border-radius:2px}.ds-media__MsKlb0__loading-spinner{width:24px;height:24px;border-width:2px}.ds-media__MsKlb0__loading-text{font-size:12px}.ds-media__MsKlb0__error-icon{width:40px;height:40px}.ds-media__MsKlb0__error-text{font-size:12px}}`;
+const dsMediaCss = () => `.ds-media__cpPWV0{position:relative;width:100%;height:auto;overflow:hidden;background-color:var(--ds-palette-black-05)}.ds-media__cpPWV0 .ds-media__image,.ds-media__cpPWV0 .ds-media__video,.ds-media__cpPWV0 .ds-media__youtube{width:100%;height:100%;object-fit:cover;display:block;max-height:var(--horizontal-image-max-height, auto);aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__cpPWV0 .ds-media__image--fluid,.ds-media__cpPWV0 .ds-media__video--fluid,.ds-media__cpPWV0 .ds-media__youtube--fluid{aspect-ratio:unset}.ds-media__cpPWV0__youtube{border:none;object-fit:initial}.ds-media__cpPWV0--loading .ds-media__image,.ds-media__cpPWV0--loading .ds-media__video{opacity:0}.ds-media__cpPWV0--error{aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__cpPWV0--error .ds-media__image,.ds-media__cpPWV0--error .ds-media__video{display:none}.ds-media__cpPWV0--error .ds-media__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background-color:var(--ds-bgColor-secondary);color:var(--ds-bgColor-danger-bold);z-index:1;padding:16px;text-align:center}.ds-media__cpPWV0--error .ds-media__error-icon{width:48px;height:48px;color:var(--ds-bgColor-danger-bold);flex-shrink:0}.ds-media__cpPWV0--error .ds-media__error-text{font-size:14px;font-weight:500;line-height:1.4}.ds-media__cpPWV0--image .ds-media__image{transition:opacity 0.3s ease}.ds-media__cpPWV0--video .ds-media__video{transition:opacity 0.3s ease}.ds-media__cpPWV0--youtube .ds-media__youtube{transition:opacity 0.3s ease}.ds-media__cpPWV0--fluid{width:100%;height:100%}.ds-media__cpPWV0--fluid .ds-media__cpPWV0__image,.ds-media__cpPWV0--fluid .ds-media__cpPWV0__video,.ds-media__cpPWV0--fluid .ds-media__cpPWV0__youtube{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.ds-media__cpPWV0{border-radius:2px}.ds-media__cpPWV0__loading-spinner{width:24px;height:24px;border-width:2px}.ds-media__cpPWV0__loading-text{font-size:12px}.ds-media__cpPWV0__error-icon{width:40px;height:40px}.ds-media__cpPWV0__error-text{font-size:12px}}`;
 
 const DsMedia = class extends index.Mixin(componentFactory.componentFactory('ds-media')) {
     constructor(hostRef) {

package/dist/cjs/ds-modal.cjs.entry.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-CmX4GdqZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-Ddclbzw3.js');
+var cx = require('./cx-B9luWO9I.js');
 var utils$1 = require('./utils-DK6WJuOa.js');
-var store = require('./store-DT9Wk6N2.js');
+var store = require('./store-Bc8GbxUL.js');
 var constants = require('./constants-DQ8n-aJY.js');
 var utils = require('./utils-CRkX9b81.js');
-var componentFactory = require('./componentFactory-BNqkQcfi.js');
+var componentFactory = require('./componentFactory-Cw20ncNZ.js');
 
-const dsModalCss = () => `.ds-modal__MsKlb0{position:fixed;padding:0;border:0;margin:0;max-height:100vh;max-height:100dvh;min-height:100vh;min-height:100dvh;width:100vw;background-color:var(--ds-bgColor-transparent-onLight);overflow-y:hidden;inset:0}.ds-modal__MsKlb0--open{overflow-y:auto}.ds-modal__MsKlb0__positioner{pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100dvh;padding-block:var(--ds-spacing-small) 0;margin-block:auto 0}@media (min-width: 30rem){.ds-modal__MsKlb0__positioner{justify-content:center;padding-block:var(--ds-spacing-small);margin-block:auto}}@media (min-width: 60rem){.ds-modal__MsKlb0__positioner{padding-block:var(--ds-spacing-xLarge)}}.ds-modal__MsKlb0__container{pointer-events:auto;cursor:unset;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white);box-shadow:var(--ds-shadow-overlay);scale:0.98;opacity:0;transform:translateY(0.75rem);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__MsKlb0__container{margin:auto;width:fit-content;max-width:calc(100vw - 2 * var(--ds-spacing-small))}}@media (min-width: 60rem){.ds-modal__MsKlb0__container{max-width:calc(100vw - 2 * var(--ds-spacing-xLarge))}}.ds-modal__MsKlb0__container--full{width:100%}@media (min-width: 30rem){.ds-modal__MsKlb0__container--small{width:480px}.ds-modal__MsKlb0__container--medium{width:640px}.ds-modal__MsKlb0__container--large{width:800px}}.ds-modal__MsKlb0__container--scrollable{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100vh + calc(-1 * var(--ds-spacing-small)));max-height:calc(100dvh + calc(-1 * var(--ds-spacing-small)));min-height:calc(320px - 2 * var(--ds-spacing-small))}@media (min-width: 30rem){.ds-modal__MsKlb0__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__MsKlb0__container--scrollable{max-height:calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));max-height:calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)))}}.ds-modal__MsKlb0--open .ds-modal__MsKlb0__container{scale:1;opacity:1;transform:translateY(0)}.ds-modal__MsKlb0--in .ds-modal__MsKlb0__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__MsKlb0__container,.ds-modal__MsKlb0--in .ds-modal__MsKlb0__container{transition:none}}.ds-modal__MsKlb0__header{position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-spacing-2xSmall);padding-block:var(--ds-spacing-small);padding-inline:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__MsKlb0__header{padding-block:var(--ds-spacing-medium) var(--ds-spacing-small);padding-inline:var(--ds-spacing-medium)}}.ds-modal__MsKlb0__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__MsKlb0__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__MsKlb0__header__heading{display:flex;gap:var(--ds-spacing-xSmall)}.ds-modal__MsKlb0__header__heading__text{margin-block:var(--ds-spacing-4xSmall)}@media (min-width: 60rem){.ds-modal__MsKlb0__header__heading__text{margin-block:calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}}.ds-modal__MsKlb0__header__heading__icon{display:block;margin-block:var(--ds-spacing-4xSmall);margin-inline-end:var(--ds-spacing-3xSmall)}@media (min-width: 60rem){.ds-modal__MsKlb0__header__heading__icon{margin-block:var(--ds-spacing-3xSmall)}}.ds-modal__MsKlb0__header__close-button{margin-inline-start:auto}@media (min-width: 60rem){.ds-modal__MsKlb0__header__close-button{margin-block:var(--ds-spacing-4xSmall)}}.ds-modal__MsKlb0__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__MsKlb0__content{position:relative;padding-inline:var(--ds-spacing-small);flex:1;min-height:0}@media (min-width: 30rem){.ds-modal__MsKlb0__content{padding-inline:var(--ds-spacing-medium)}}.ds-modal__MsKlb0__content--padded{padding-block-end:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__MsKlb0__content--padded{padding-block-end:var(--ds-spacing-medium)}}.ds-modal__MsKlb0__content--scrollable{overflow-y:auto;padding-block-end:unset}.ds-modal__MsKlb0__content--scrollable__top-scrim,.ds-modal__MsKlb0__content--scrollable__bottom-scrim{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-modal__MsKlb0__content--scrollable__top-scrim--open,.ds-modal__MsKlb0__content--scrollable__bottom-scrim--open{display:block}.ds-modal__MsKlb0__content--scrollable__top-scrim{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__MsKlb0__content--scrollable__bottom-scrim{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__MsKlb0__content--scrollable:focus-visible .ds-modal__MsKlb0__content--scrollable__top-scrim{top:var(--ds-borderWidth-thin)}.ds-modal__MsKlb0__content--scrollable:focus-visible .ds-modal__MsKlb0__content--scrollable__bottom-scrim{bottom:var(--ds-borderWidth-thin)}.ds-modal__MsKlb0__footer{position:relative}.ds-modal__MsKlb0__footer:not(:empty){display:flex;flex-direction:column;padding:var(--ds-spacing-small);gap:var(--ds-spacing-xSmall)}@media (min-width: 30rem){.ds-modal__MsKlb0__footer:not(:empty){flex-direction:row;padding:var(--ds-spacing-medium);gap:var(--ds-spacing-small)}}.ds-modal__MsKlb0__footer:not(:empty)+.ds-modal__MsKlb0__content{border-block-end:0}.ds-modal__MsKlb0__footer--sticky:not(:empty){position:sticky;bottom:0;background-color:var(--ds-bgColor-white);border-block-start:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}`;
+const dsModalCss = () => `.ds-modal__cpPWV0{position:fixed;padding:0;border:0;margin:0;max-height:100vh;max-height:100dvh;min-height:100vh;min-height:100dvh;width:100vw;background-color:var(--ds-bgColor-transparent-onLight);overflow-y:hidden;inset:0}.ds-modal__cpPWV0--open{overflow-y:auto}.ds-modal__cpPWV0__positioner{pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100dvh;padding-block:var(--ds-spacing-small) 0;margin-block:auto 0}@media (min-width: 30rem){.ds-modal__cpPWV0__positioner{justify-content:center;padding-block:var(--ds-spacing-small);margin-block:auto}}@media (min-width: 60rem){.ds-modal__cpPWV0__positioner{padding-block:var(--ds-spacing-xLarge)}}.ds-modal__cpPWV0__container{pointer-events:auto;cursor:unset;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white);box-shadow:var(--ds-shadow-overlay);scale:0.98;opacity:0;transform:translateY(0.75rem);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{margin:auto;width:fit-content;max-width:calc(100vw - 2 * var(--ds-spacing-small))}}@media (min-width: 60rem){.ds-modal__cpPWV0__container{max-width:calc(100vw - 2 * var(--ds-spacing-xLarge))}}.ds-modal__cpPWV0__container--full{width:100%}@media (min-width: 30rem){.ds-modal__cpPWV0__container--small{width:480px}.ds-modal__cpPWV0__container--medium{width:640px}.ds-modal__cpPWV0__container--large{width:800px}}.ds-modal__cpPWV0__container--scrollable{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100vh + calc(-1 * var(--ds-spacing-small)));max-height:calc(100dvh + calc(-1 * var(--ds-spacing-small)));min-height:calc(320px - 2 * var(--ds-spacing-small))}@media (min-width: 30rem){.ds-modal__cpPWV0__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{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{scale:1;opacity:1;transform:translateY(0)}.ds-modal__cpPWV0--in .ds-modal__cpPWV0__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{transition:none}}.ds-modal__cpPWV0__header{position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-spacing-2xSmall);padding-block:var(--ds-spacing-small);padding-inline:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__cpPWV0__header{padding-block:var(--ds-spacing-medium) var(--ds-spacing-small);padding-inline:var(--ds-spacing-medium)}}.ds-modal__cpPWV0__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{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{display:flex;gap:var(--ds-spacing-xSmall)}.ds-modal__cpPWV0__header__heading__text{margin-block:var(--ds-spacing-4xSmall)}@media (min-width: 60rem){.ds-modal__cpPWV0__header__heading__text{margin-block:calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}}.ds-modal__cpPWV0__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{margin-block:var(--ds-spacing-3xSmall)}}.ds-modal__cpPWV0__header__close-button{margin-inline-start:auto}@media (min-width: 60rem){.ds-modal__cpPWV0__header__close-button{margin-block:var(--ds-spacing-4xSmall)}}.ds-modal__cpPWV0__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{position:relative;padding-inline:var(--ds-spacing-small);flex:1;min-height:0}@media (min-width: 30rem){.ds-modal__cpPWV0__content{padding-inline:var(--ds-spacing-medium)}}.ds-modal__cpPWV0__content--padded{padding-block-end:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__cpPWV0__content--padded{padding-block-end:var(--ds-spacing-medium)}}.ds-modal__cpPWV0__content--scrollable{overflow-y:auto;padding-block-end:unset}.ds-modal__cpPWV0__content--scrollable__top-scrim,.ds-modal__cpPWV0__content--scrollable__bottom-scrim{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-modal__cpPWV0__content--scrollable__top-scrim--open,.ds-modal__cpPWV0__content--scrollable__bottom-scrim--open{display:block}.ds-modal__cpPWV0__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{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{top:var(--ds-borderWidth-thin)}.ds-modal__cpPWV0__content--scrollable:focus-visible .ds-modal__cpPWV0__content--scrollable__bottom-scrim{bottom:var(--ds-borderWidth-thin)}.ds-modal__cpPWV0__footer{position:relative}.ds-modal__cpPWV0__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){flex-direction:row;padding:var(--ds-spacing-medium);gap:var(--ds-spacing-small)}}.ds-modal__cpPWV0__footer:not(:empty)+.ds-modal__cpPWV0__content{border-block-end:0}.ds-modal__cpPWV0__footer--sticky:not(:empty){position:sticky;bottom:0;background-color:var(--ds-bgColor-white);border-block-start:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}`;
 
 const DsModal = class extends index.Mixin(componentFactory.componentFactory('ds-modal', { stopRootTracking: true })) {
     constructor(hostRef) {
@@ -219,11 +219,11 @@ const DsModal = class extends index.Mixin(componentFactory.componentFactory('ds-
         });
         const contentAriaLabel = this.dsScrollable ? this.contentScrollArea : undefined;
         const contentTabIndex = this.dsScrollable ? 0 : undefined;
-        return (index.h(this.DsBackdrop, { key: '937e89060be8652b7a5e27eea7c2f2e2586604e7', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, index.h("div", { key: 'c24c5cbe65e8111a9ecb6417bf06c2a94568090f', class: `${baseClass}__positioner` }, index.h("div", { key: 'b6bf573d926a37fda88adea353e2aab0869eda10', class: containerClasses, style: { '--ds-modal-transition-in-duration': `${constants.MODAL_TRANSITION_IN_DURATION}ms`, '--ds-modal-transition-out-duration': `${constants.MODAL_TRANSITION_OUT_DURATION}ms` } }, index.h("slot", { key: '802affcb12c2c59ee1f77f69dfe00d22b58e98f9', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (index.h("div", { key: 'ab3f15653104929578e31754f43e987d1af41a9b', class: headerClasses }, this.dsHeadingText && (index.h("span", { key: '8e9c57f974893caa3e58a1ba9796283ab14203d3', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (index.h(this.DsIcon, { key: '33c3cef078b3baf2d020fedca243ad8c04b2879f', 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 })), index.h("span", { key: '40f2255f36c83b8da5202d08caa3f2bee86b3573', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (index.h(this.DsButton, { key: '6bad9269962475a5d455c2e885de43fbd292eb15', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), index.h("div", { key: '7da28c17478a5ce8a6c1290ba32fddd8500c5496', ref: el => (this.contentRef = el), class: contentClasses, ...utils$1.ifDefined('aria-label', contentAriaLabel), ...utils$1.ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (index.h("div", { key: 'ab5f42d46124d3f3b86b4e15bae5871483d44cef', class: index$1.classNames(`${baseClass}__content--scrollable__top-scrim`, {
+        return (index.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 }, index.h("div", { key: '95b45b2a2c70b1918817df845a5c81604ac79f82', class: `${baseClass}__positioner` }, index.h("div", { key: '7fc50b03ec5aa8d508d16427cd820547514818f6', class: containerClasses, style: { '--ds-modal-transition-in-duration': `${constants.MODAL_TRANSITION_IN_DURATION}ms`, '--ds-modal-transition-out-duration': `${constants.MODAL_TRANSITION_OUT_DURATION}ms` } }, index.h("slot", { key: '647b0f26723f281a7b7d938d2b4ffa611a28bffc', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (index.h("div", { key: 'a05bee315b5532fc44e2eaaa61e5e23159509af4', class: headerClasses }, this.dsHeadingText && (index.h("span", { key: 'f53134c9492f1556ca743249f60579fbcecee7ee', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (index.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 })), index.h("span", { key: '1ed1790642d653a43c76c70d1860b5baea201f9b', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (index.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 }))))), index.h("div", { key: '2a5e105d6b5a59e13750863b1b29cf57f895b482', ref: el => (this.contentRef = el), class: contentClasses, ...utils$1.ifDefined('aria-label', contentAriaLabel), ...utils$1.ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (index.h("div", { key: '57d4250df4c6bc6bf7e666bf632791eb0ec30a54', class: index$1.classNames(`${baseClass}__content--scrollable__top-scrim`, {
                 [`${baseClass}__content--scrollable__top-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atTop,
-            }), "aria-hidden": "true" })), index.h("slot", { key: '5d52c8c2bc581bf51ea14912ad44fabea75beee2', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (index.h("div", { key: 'fbfd7f45b29e26fed24c2c73d0f169c8bcf5652f', class: index$1.classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
+            }), "aria-hidden": "true" })), index.h("slot", { key: '7d52546d93ec5b6699c0e5b772d3136caab044ec', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (index.h("div", { key: 'a55e6d54d338bbc19e3cc2cf921b6f6d29936d9a', class: index$1.classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
                 [`${baseClass}__content--scrollable__bottom-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atBottom,
-            }), "aria-hidden": "true" }))), index.h("div", { key: '51cd0ca3e9a87040ad6280171defbc97f7159338', class: footerClasses }, index.h("slot", { key: '2d0854ee9b3573951c61b8b246317fb08fa455ee', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
+            }), "aria-hidden": "true" }))), index.h("div", { key: '427b527c3c60ccd6e3948879e5673a8eb605fb4e', class: footerClasses }, index.h("slot", { key: 'ad9764f5651cead785a24433c7c47e3ffb93092b', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
     }
     static get watchers() { return {
         "hasContentSlot": [{

package/dist/cjs/ds-notification.cjs.entry.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-CmX4GdqZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-Ddclbzw3.js');
+var cx = require('./cx-B9luWO9I.js');
 var utils = require('./utils-DK6WJuOa.js');
 var attributes = require('./attributes-5eBKMo1N.js');
-var store = require('./store-DT9Wk6N2.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-DXnYDFcg.js');
-var componentFactory = require('./componentFactory-BNqkQcfi.js');
+var store = require('./store-Bc8GbxUL.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-ovkM9FIg.js');
+var componentFactory = require('./componentFactory-Cw20ncNZ.js');
 
-const dsNotificationCss = () => `.sc-ds-notification-h{display:block;width:100%}.ds-notification__MsKlb0.sc-ds-notification{padding:var(--ds-spacing-xSmall, 12px)}.ds-notification__MsKlb0.ds-notification__MsKlb0--neutral.sc-ds-notification{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__MsKlb0.ds-notification__MsKlb0--neutral.sc-ds-notification .ds-notification__MsKlb0__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__MsKlb0.ds-notification__MsKlb0--neutralWhite.sc-ds-notification{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__MsKlb0.ds-notification__MsKlb0--neutralWhite.sc-ds-notification .ds-notification__MsKlb0__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__MsKlb0.ds-notification__MsKlb0--info.sc-ds-notification{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__MsKlb0.ds-notification__MsKlb0--info.sc-ds-notification .ds-notification__MsKlb0__icon.sc-ds-notification{color:var(--ds-iconColor-info);margin-bottom:auto}.ds-notification__MsKlb0.ds-notification__MsKlb0--success.sc-ds-notification{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__MsKlb0.ds-notification__MsKlb0--success.sc-ds-notification .ds-notification__MsKlb0__icon.sc-ds-notification{color:var(--ds-iconColor-success);margin-bottom:auto}.ds-notification__MsKlb0.ds-notification__MsKlb0--attention.sc-ds-notification{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__MsKlb0.ds-notification__MsKlb0--attention.sc-ds-notification .ds-notification__MsKlb0__icon.sc-ds-notification{color:var(--ds-iconColor-attention);margin-bottom:auto}.ds-notification__MsKlb0.ds-notification__MsKlb0--danger.sc-ds-notification{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__MsKlb0.ds-notification__MsKlb0--danger.sc-ds-notification .ds-notification__MsKlb0__icon.sc-ds-notification{color:var(--ds-iconColor-danger);margin-bottom:auto}.ds-notification__MsKlb0__content.sc-ds-notification{display:flex;gap:var(--ds-spacing-2xSmall, 8px);max-width:1376px;margin:0 auto}.ds-notification__MsKlb0__content__text.sc-ds-notification{display:flex;padding:var(--ds-spacing-4xSmall, 2px) 0;flex-direction:column;align-items:flex-start;gap:var(--ds-spacing-4xSmall, 2px);flex:1 0 0}.ds-notification__MsKlb0__content__text__heading.sc-ds-notification,.ds-notification__MsKlb0__content__text__description.sc-ds-notification{font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-notification__MsKlb0__content__text__description.sc-ds-notification{max-width:var(--ds-notification-description-max-width, 550px)}`;
+const dsNotificationCss = () => `.sc-ds-notification-h{display:block;width:100%}.ds-notification__cpPWV0.sc-ds-notification{padding:var(--ds-spacing-xSmall, 12px)}.ds-notification__cpPWV0.ds-notification__cpPWV0--neutral.sc-ds-notification{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.sc-ds-notification .ds-notification__cpPWV0__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__cpPWV0.ds-notification__cpPWV0--neutralWhite.sc-ds-notification{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.sc-ds-notification .ds-notification__cpPWV0__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__cpPWV0.ds-notification__cpPWV0--info.sc-ds-notification{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.sc-ds-notification .ds-notification__cpPWV0__icon.sc-ds-notification{color:var(--ds-iconColor-info);margin-bottom:auto}.ds-notification__cpPWV0.ds-notification__cpPWV0--success.sc-ds-notification{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.sc-ds-notification .ds-notification__cpPWV0__icon.sc-ds-notification{color:var(--ds-iconColor-success);margin-bottom:auto}.ds-notification__cpPWV0.ds-notification__cpPWV0--attention.sc-ds-notification{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.sc-ds-notification .ds-notification__cpPWV0__icon.sc-ds-notification{color:var(--ds-iconColor-attention);margin-bottom:auto}.ds-notification__cpPWV0.ds-notification__cpPWV0--danger.sc-ds-notification{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.sc-ds-notification .ds-notification__cpPWV0__icon.sc-ds-notification{color:var(--ds-iconColor-danger);margin-bottom:auto}.ds-notification__cpPWV0__content.sc-ds-notification{display:flex;gap:var(--ds-spacing-2xSmall, 8px);max-width:1376px;margin:0 auto}.ds-notification__cpPWV0__content__text.sc-ds-notification{display:flex;padding:var(--ds-spacing-4xSmall, 2px) 0;flex-direction:column;align-items:flex-start;gap:var(--ds-spacing-4xSmall, 2px);flex:1 0 0}.ds-notification__cpPWV0__content__text__heading.sc-ds-notification,.ds-notification__cpPWV0__content__text__description.sc-ds-notification{font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-notification__cpPWV0__content__text__description.sc-ds-notification{max-width:var(--ds-notification-description-max-width, 550px)}`;
 
 const variants = ['neutral', 'neutralWhite', 'info', 'success', 'attention', 'danger'];
 const customizableIconVariants = ['neutral', 'neutralWhite', 'info'];
@@ -159,7 +159,7 @@ const DsNotification = class extends index.Mixin(componentFactory.componentFacto
         const ariaLabelledby = this.dsAriaLabelledby ?? this.inheritedAttributes['aria-labelledby'] ?? this.ariaLabelledBy;
         const role = this.dsRole ?? this.inheritedAttributes['role'] ?? 'group';
         const restAttributes = utils.omit(this.inheritedAttributes, ['aria-labelledby', 'aria-label', 'role']);
-        return (index.h("div", { key: '1b127bfbf8682ddc132597ab9d076fd9bb2e178b', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, index.h("div", { key: '9c065c209815d5d169dcda3a8304c2b4ec3554e4', class: contentClass }, index.h("div", { key: 'dd8ebcae11527e8f19ec9dedaa11ffdef794ee70', class: `${baseClass}__icon ds-p-3xs` }, index.h(this.DsIcon, { key: '791bedfc190ef9b8b6e9447ad6b1c24c080c2020', dsName: this.icon })), index.h("div", { key: '69fb517e3f2e9f836448f856a3814b5ddcfd343e', class: textClass }, index.h("slot", { key: '6d0fea417b1ba529ae2b0d6455b0773dcdb1c282', name: "heading" }, this.dsHeading && (index.h("div", { key: '8216f324647ba19a55bf52c121da33f95ac6033f', class: `${textClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), index.h("slot", { key: '8e78e68b96b5262e03b663f3d290be56b84db1cc', name: "description" }, this.dsDescription && (index.h("div", { key: 'b6d058bfb696b3cd1bd38facecc9cc71cc9d6493', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), index.h("slot", { key: 'e5b44ec27865c3d1b8fdc7a74e98d36cbddc90a6' })), this.dsDismissable && (index.h(this.DsButton, { key: 'd45b6cc4ed0e6a327d0585b8fbaa503904fe7c7d', 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 }, index.h(this.DsVisuallyHidden, { key: '55b54131e78fffb47e01e97c8b7ca7918a3cfdf9', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
+        return (index.h("div", { key: '162c1c8b4321c00118069067c9486dcbb02a0fd0', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, index.h("div", { key: 'ec667507d53aa772a429ac6ea33947b29a9f5503', class: contentClass }, index.h("div", { key: 'c774b6b86952e2d825fd6d4306cc6462f0f4d91f', class: `${baseClass}__icon ds-p-3xs` }, index.h(this.DsIcon, { key: '17b4e3c422bcea87b3f289653a32adbbb4cf6357', dsName: this.icon })), index.h("div", { key: 'c25b5c48f2613be80f1d5573fb92ed5dafbf622b', class: textClass }, index.h("slot", { key: '1118cb18dbe0c8e483558d89ba14a2b61bfc6716', name: "heading" }, this.dsHeading && (index.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))), index.h("slot", { key: '6a21cf4285260e5170cdd8eada1f274832296b9d', name: "description" }, this.dsDescription && (index.h("div", { key: '89e015f2b62c23d16e0c9477c80b4ed3aa88ee1b', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), index.h("slot", { key: 'd91cdf542f9088521a771b0204c73b2e5c98b093' })), this.dsDismissable && (index.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 }, index.h(this.DsVisuallyHidden, { key: 'd2136e3c7aa20140cd4b9256610d5d1f4f9b4ba5', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
     }
     static get watchers() { return {
         "aria-label": [{

package/dist/cjs/ds-option_2.cjs.entry.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-CmX4GdqZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-DK6WJuOa.js');
-var cx = require('./cx-Ddclbzw3.js');
+var cx = require('./cx-B9luWO9I.js');
 var attributes = require('./attributes-5eBKMo1N.js');
-var componentFactory = require('./componentFactory-BNqkQcfi.js');
-require('./store-DT9Wk6N2.js');
+var componentFactory = require('./componentFactory-Cw20ncNZ.js');
+require('./store-Bc8GbxUL.js');
 
-const dsOptionCss = () => `.ds-option__MsKlb0.sc-ds-option{display:flex;align-items:center;justify-content:normal;min-height:2.5rem;padding:0.625rem var(--ds-spacing-xSmall);position:relative;cursor:pointer;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-default);font-weight:var(--ds-fontWeight-regular);font-size:var(--ds-fontSize-16);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-option__MsKlb0.sc-ds-option:not(.ds-option__MsKlb0--multiple){justify-content:space-between}.ds-option__MsKlb0--hidden.sc-ds-option{display:none}.ds-option__MsKlb0--disabled.sc-ds-option{cursor:not-allowed;user-select:none;color:var(--ds-textColor-disabled-onLight)}.ds-option__MsKlb0.sc-ds-option:hover:not(.ds-option__MsKlb0--disabled){background-color:var(--ds-bgColor-white-hover)}.ds-option__MsKlb0.sc-ds-option:active:not(.ds-option__MsKlb0--disabled){background-color:var(--ds-bgColor-white-active)}.ds-option__MsKlb0--active.sc-ds-option{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__MsKlb0--active.ds-option__MsKlb0--selected.sc-ds-option:not(.ds-option__MsKlb0--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__MsKlb0--multiple.ds-option__MsKlb0--disabled.sc-ds-option{color:var(--ds-textColor-default)}.ds-option__MsKlb0--multiple.sc-ds-option .ds-option__MsKlb0__checkbox.sc-ds-option{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-option__MsKlb0--multiple.ds-option__MsKlb0--disabled.sc-ds-option .ds-option__MsKlb0__checkbox.sc-ds-option{border-color:var(--ds-borderColor-transparent);background-color:var(--ds-bgColor-disabled-onLight)}.ds-option__MsKlb0--multiple.ds-option__MsKlb0--disabled.sc-ds-option:not(.ds-option__MsKlb0--selected) .ds-option__MsKlb0__checkbox.sc-ds-option{border-color:var(--ds-borderColor-disabled-onLight)}.ds-option__MsKlb0--selected.sc-ds-option .ds-option__MsKlb0__checkbox.sc-ds-option{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent);color:var(--ds-textColor-white);padding:var(--ds-spacing-4xSmall)}.ds-option__MsKlb0--selected.sc-ds-option:not(.ds-option__MsKlb0--multiple){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option__MsKlb0--selected.sc-ds-option:not(.ds-option__MsKlb0--multiple).ds-option__MsKlb0--disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-option__MsKlb0--selected.sc-ds-option:not(.ds-option__MsKlb0--multiple) .ds-option__MsKlb0__description.sc-ds-option{color:var(--ds-textColor-white)}.ds-option__MsKlb0--selected.sc-ds-option:not(.ds-option__MsKlb0--multiple) .ds-option__MsKlb0__check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option__MsKlb0--selected.sc-ds-option:not(.ds-option__MsKlb0--multiple).ds-option__MsKlb0--disabled .ds-option__MsKlb0__check-icon.sc-ds-option{color:var(--ds-textColor-disabled-onLight)}.ds-option__MsKlb0--selected.sc-ds-option:not(.ds-option__MsKlb0--multiple):hover:not(.ds-option__MsKlb0--disabled){background-color:var(--ds-bgColor-primary-hover)}.ds-option__MsKlb0--selected.sc-ds-option:not(.ds-option__MsKlb0--multiple):active:not(.ds-option__MsKlb0--disabled){background-color:var(--ds-bgColor-primary-active)}.ds-option__MsKlb0__label.sc-ds-option{display:flex;flex-direction:column;flex:1 1 auto;font-family:var(--ds-fontFamily-body);min-width:0;grid-column:1;grid-row:1}.ds-option__MsKlb0__check-icon.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}.ds-option__MsKlb0__description.sc-ds-option{color:var(--ds-textColor-secondary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.ds-option__MsKlb0__description.sc-ds-option:not(:empty){display:block}`;
+const dsOptionCss = () => `.ds-option__cpPWV0.sc-ds-option{display:flex;align-items:center;justify-content:normal;min-height:2.5rem;padding:0.625rem var(--ds-spacing-xSmall);position:relative;cursor:pointer;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-default);font-weight:var(--ds-fontWeight-regular);font-size:var(--ds-fontSize-16);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-option__cpPWV0.sc-ds-option:not(.ds-option__cpPWV0--multiple){justify-content:space-between}.ds-option__cpPWV0--hidden.sc-ds-option{display:none}.ds-option__cpPWV0--disabled.sc-ds-option{cursor:not-allowed;user-select:none;color:var(--ds-textColor-disabled-onLight)}.ds-option__cpPWV0.sc-ds-option:hover:not(.ds-option__cpPWV0--disabled){background-color:var(--ds-bgColor-white-hover)}.ds-option__cpPWV0.sc-ds-option:active:not(.ds-option__cpPWV0--disabled){background-color:var(--ds-bgColor-white-active)}.ds-option__cpPWV0--active.sc-ds-option{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.sc-ds-option:not(.ds-option__cpPWV0--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.sc-ds-option{color:var(--ds-textColor-default)}.ds-option__cpPWV0--multiple.sc-ds-option .ds-option__cpPWV0__checkbox.sc-ds-option{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-option__cpPWV0--multiple.ds-option__cpPWV0--disabled.sc-ds-option .ds-option__cpPWV0__checkbox.sc-ds-option{border-color:var(--ds-borderColor-transparent);background-color:var(--ds-bgColor-disabled-onLight)}.ds-option__cpPWV0--multiple.ds-option__cpPWV0--disabled.sc-ds-option:not(.ds-option__cpPWV0--selected) .ds-option__cpPWV0__checkbox.sc-ds-option{border-color:var(--ds-borderColor-disabled-onLight)}.ds-option__cpPWV0--selected.sc-ds-option .ds-option__cpPWV0__checkbox.sc-ds-option{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.sc-ds-option:not(.ds-option__cpPWV0--multiple){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option__cpPWV0--selected.sc-ds-option:not(.ds-option__cpPWV0--multiple).ds-option__cpPWV0--disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-option__cpPWV0--selected.sc-ds-option:not(.ds-option__cpPWV0--multiple) .ds-option__cpPWV0__description.sc-ds-option{color:var(--ds-textColor-white)}.ds-option__cpPWV0--selected.sc-ds-option:not(.ds-option__cpPWV0--multiple) .ds-option__cpPWV0__check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option__cpPWV0--selected.sc-ds-option:not(.ds-option__cpPWV0--multiple).ds-option__cpPWV0--disabled .ds-option__cpPWV0__check-icon.sc-ds-option{color:var(--ds-textColor-disabled-onLight)}.ds-option__cpPWV0--selected.sc-ds-option:not(.ds-option__cpPWV0--multiple):hover:not(.ds-option__cpPWV0--disabled){background-color:var(--ds-bgColor-primary-hover)}.ds-option__cpPWV0--selected.sc-ds-option:not(.ds-option__cpPWV0--multiple):active:not(.ds-option__cpPWV0--disabled){background-color:var(--ds-bgColor-primary-active)}.ds-option__cpPWV0__label.sc-ds-option{display:flex;flex-direction:column;flex:1 1 auto;font-family:var(--ds-fontFamily-body);min-width:0;grid-column:1;grid-row:1}.ds-option__cpPWV0__check-icon.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}.ds-option__cpPWV0__description.sc-ds-option{color:var(--ds-textColor-secondary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.ds-option__cpPWV0__description.sc-ds-option:not(:empty){display:block}`;
 
 const DsOption = class extends index.Mixin(componentFactory.componentFactory('ds-option')) {
     constructor(hostRef) {
@@ -129,7 +129,7 @@ const DsOption = class extends index.Mixin(componentFactory.componentFactory('ds
 utils.declareComponentDependencies([index.h("ds-icon", { dsName: "" })]);
 DsOption.style = dsOptionCss();
 
-const dsOptionGroupCss = () => `.ds-option-group__MsKlb0.sc-ds-option-group{display:block;font-family:var(--ds-fontFamily-body)}.ds-option-group__MsKlb0--hidden.sc-ds-option-group{display:none}.ds-option-group__MsKlb0.sc-ds-option-group ul.sc-ds-option-group{padding:0}.ds-option-group__MsKlb0__label.sc-ds-option-group{position:sticky;display:block;top:0;background-color:var(--ds-bgColor-neutralLight);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large)}.ds-option-group__MsKlb0__label__shadow.sc-ds-option-group{box-shadow:var(--ds-shadow-overflow)}`;
+const dsOptionGroupCss = () => `.ds-option-group__cpPWV0.sc-ds-option-group{display:block;font-family:var(--ds-fontFamily-body)}.ds-option-group__cpPWV0--hidden.sc-ds-option-group{display:none}.ds-option-group__cpPWV0.sc-ds-option-group ul.sc-ds-option-group{padding:0}.ds-option-group__cpPWV0__label.sc-ds-option-group{position:sticky;display:block;top:0;background-color:var(--ds-bgColor-neutralLight);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large)}.ds-option-group__cpPWV0__label__shadow.sc-ds-option-group{box-shadow:var(--ds-shadow-overflow)}`;
 
 const DsOptionGroup = class extends index.Mixin(componentFactory.componentFactory('ds-option-group')) {
     constructor(hostRef) {
@@ -164,9 +164,9 @@ const DsOptionGroup = class extends index.Mixin(componentFactory.componentFactor
     }
     render() {
         const baseClass = cx.cx('ds-option-group');
-        return (index.h("div", { key: 'e57448cbaa27601c03a1fe9f162a26e0cbd0571c', class: index$1.classNames(`${baseClass}`, {
+        return (index.h("div", { key: '9f58c998e41d55253eb55243e6cf0e5215c86d3e', class: index$1.classNames(`${baseClass}`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, index.h("div", { key: '34d8e066f87f3b83d1e1eb162c1bc272383e82e5', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), index.h("slot", { key: '7b7d9ead024d2450c86432db80e035e04ef99578' })));
+            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, index.h("div", { key: 'df7eb37a8e1feface2de0098440445a3cd03f544', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), index.h("slot", { key: '2b2be58346783c89c2f4e1c3ec449b0309fdfb3c' })));
     }
 };
 DsOptionGroup.style = dsOptionGroupCss();

package/dist/cjs/ds-options-message.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
-var store = require('./store-DT9Wk6N2.js');
-var controlUtils = require('./controlUtils-UVPS1EQ_.js');
+var index = require('./index-CmX4GdqZ.js');
+var store = require('./store-Bc8GbxUL.js');
+var controlUtils = require('./controlUtils-DKHcFVTq.js');
 var utils = require('./utils-DK6WJuOa.js');
-var cx = require('./cx-Ddclbzw3.js');
-var componentFactory = require('./componentFactory-BNqkQcfi.js');
+var cx = require('./cx-B9luWO9I.js');
+var componentFactory = require('./componentFactory-Cw20ncNZ.js');
 
-const dsOptionsMessageCss = () => `.ds-options-message__MsKlb0.sc-ds-options-message{display:flex;flex-direction:column;padding:var(--ds-spacing-2xSmall);height:18.5rem;overflow:hidden;box-sizing:border-box;align-items:center;justify-content:center;font-family:var(--ds-fontFamily-body)}.ds-options-message__MsKlb0__error.sc-ds-options-message{color:var(--ds-textColor-danger);text-align:center}.ds-options-message__MsKlb0__error__icon.sc-ds-options-message{display:inline-block}.ds-options-message__MsKlb0__error__title.sc-ds-options-message,.ds-options-message__MsKlb0__no-results__title.sc-ds-options-message{text-align:center;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.ds-options-message__MsKlb0__no-results__title.sc-ds-options-message{hyphens:auto}.ds-options-message__MsKlb0__error__text.sc-ds-options-message,.ds-options-message__MsKlb0__no-results__text.sc-ds-options-message{color:var(--ds-textColor-default);text-align:center;font-size:var(--ds-fontSize-16)}`;
+const dsOptionsMessageCss = () => `.ds-options-message__cpPWV0.sc-ds-options-message{display:flex;flex-direction:column;padding:var(--ds-spacing-2xSmall);height:18.5rem;overflow:hidden;box-sizing:border-box;align-items:center;justify-content:center;font-family:var(--ds-fontFamily-body)}.ds-options-message__cpPWV0__error.sc-ds-options-message{color:var(--ds-textColor-danger);text-align:center}.ds-options-message__cpPWV0__error__icon.sc-ds-options-message{display:inline-block}.ds-options-message__cpPWV0__error__title.sc-ds-options-message,.ds-options-message__cpPWV0__no-results__title.sc-ds-options-message{text-align:center;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.ds-options-message__cpPWV0__no-results__title.sc-ds-options-message{hyphens:auto}.ds-options-message__cpPWV0__error__text.sc-ds-options-message,.ds-options-message__cpPWV0__no-results__text.sc-ds-options-message{color:var(--ds-textColor-default);text-align:center;font-size:var(--ds-fontSize-16)}`;
 
 const defaultTextFns = {
     dsErrorTitle: controlUtils.weCouldNotLoadOptions,

package/dist/cjs/ds-options_2.cjs.entry.js

@@ -1,18 +1,18 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-CmX4GdqZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-DK6WJuOa.js');
-var cx = require('./cx-Ddclbzw3.js');
+var cx = require('./cx-B9luWO9I.js');
 var attributes = require('./attributes-5eBKMo1N.js');
 var constants = require('./constants-DQ8n-aJY.js');
-var controlUtils = require('./controlUtils-UVPS1EQ_.js');
-var componentFactory = require('./componentFactory-BNqkQcfi.js');
-var multipleValueFactory = require('./multipleValueFactory-CmqUMa3v.js');
-var disableEventsFactory = require('./disableEventsFactory-2MBMHg5a.js');
-require('./store-DT9Wk6N2.js');
+var controlUtils = require('./controlUtils-DKHcFVTq.js');
+var componentFactory = require('./componentFactory-Cw20ncNZ.js');
+var multipleValueFactory = require('./multipleValueFactory-D1ktNvV9.js');
+var disableEventsFactory = require('./disableEventsFactory-c9n5p8Yp.js');
+require('./store-Bc8GbxUL.js');
 
-const dsOptionsCss = () => `.ds-options__MsKlb0__inner.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.ds-options__MsKlb0.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0;font-family:var(--ds-fontFamily-body)}.ds-options__MsKlb0.sc-ds-options:focus{outline:none}.ds-options__MsKlb0__inner.sc-ds-options{overflow-y:auto;list-style-type:none;padding:0;margin:0;width:100%;position:relative;display:flex;flex-direction:column}.ds-options__MsKlb0__top-scrim.sc-ds-options,.ds-options__MsKlb0__bottom-scrim.sc-ds-options{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.ds-options__MsKlb0__top-scrim.sc-ds-options{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__MsKlb0__bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__MsKlb0.has-top-scrim.sc-ds-options .ds-options__MsKlb0__top-scrim.sc-ds-options{display:block}.ds-options__MsKlb0.has-bottom-scrim.sc-ds-options .ds-options__MsKlb0__bottom-scrim.sc-ds-options{display:block}.ds-options__MsKlb0.sc-ds-options li.sc-ds-options{cursor:pointer}.ds-options__MsKlb0.sc-ds-options li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}`;
+const dsOptionsCss = () => `.ds-options__cpPWV0__inner.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.ds-options__cpPWV0.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0;font-family:var(--ds-fontFamily-body)}.ds-options__cpPWV0.sc-ds-options:focus{outline:none}.ds-options__cpPWV0__inner.sc-ds-options{overflow-y:auto;list-style-type:none;padding:0;margin:0;width:100%;position:relative;display:flex;flex-direction:column}.ds-options__cpPWV0__top-scrim.sc-ds-options,.ds-options__cpPWV0__bottom-scrim.sc-ds-options{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.ds-options__cpPWV0__top-scrim.sc-ds-options{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__cpPWV0__bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__cpPWV0.has-top-scrim.sc-ds-options .ds-options__cpPWV0__top-scrim.sc-ds-options{display:block}.ds-options__cpPWV0.has-bottom-scrim.sc-ds-options .ds-options__cpPWV0__bottom-scrim.sc-ds-options{display:block}.ds-options__cpPWV0.sc-ds-options li.sc-ds-options{cursor:pointer}.ds-options__cpPWV0.sc-ds-options li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}`;
 
 const DsOptions = class extends index.Mixin(componentFactory.componentFactory('ds-options')) {
     constructor(hostRef) {
@@ -157,7 +157,7 @@ const DsOptions = class extends index.Mixin(componentFactory.componentFactory('d
 };
 DsOptions.style = dsOptionsCss();
 
-const dsSelectCss = () => `.sc-ds-select-h{display:inline-block;width:var(--ds-select-narrow-width, 100%)}@media (min-width: 30rem){:not(:has(.ds-select__MsKlb0--full-width)).sc-ds-select-h{width:var(--ds-select-wide-width, 20rem)}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.ds-select__MsKlb0-custom.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-select-borderWidth, var(--ds-borderWidth-thin)) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:var(--ds-select-height, 2.75rem);width:100%}.ds-select__MsKlb0-custom__dropdown-icon.sc-ds-select{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-select-dropdown-icon-border-left, var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight));color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:var(--ds-select-dropdown-icon-padding, 0 var(--ds-spacing-2xSmall))}.ds-select__MsKlb0-custom-wrapper.sc-ds-select{position:relative}.ds-select__MsKlb0-custom.sc-ds-select .ds-options__MsKlb0.sc-ds-select{display:block}.ds-select__MsKlb0-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__MsKlb0-custom-input-container.sc-ds-select:has(.ds-select__MsKlb0-custom__clear-button:hover) .ds-select__MsKlb0-custom.sc-ds-select{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__MsKlb0-custom.sc-ds-select:not(.ds-select__MsKlb0-custom--open,.ds-select__MsKlb0-custom--invalid.sc-ds-select,.ds-select__MsKlb0-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__MsKlb0-custom.sc-ds-select:active:not(.ds-select__MsKlb0-custom--open,.ds-select__MsKlb0-custom--invalid.sc-ds-select,.ds-select__MsKlb0-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__MsKlb0-custom--open.sc-ds-select,.ds-select__MsKlb0-custom.sc-ds-select: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-select__MsKlb0-custom--open.sc-ds-select:not(.ds-select__MsKlb0-custom--open--invalid,.ds-select__MsKlb0-custom.sc-ds-select:focus-visible--invalid),.ds-select__MsKlb0-custom.sc-ds-select:focus-visible:not(.ds-select__MsKlb0-custom--open--invalid,.ds-select__MsKlb0-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__MsKlb0-custom--disabled.sc-ds-select{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-select__MsKlb0-custom--disabled.sc-ds-select .ds-select__MsKlb0-custom__dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__MsKlb0-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__MsKlb0-custom--invalid.sc-ds-select:not(.ds-select__MsKlb0-custom--invalid--open,.ds-select__MsKlb0-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__MsKlb0-custom--invalid.sc-ds-select:not(.ds-select__MsKlb0-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__MsKlb0-custom__dropdown-icon--has-clear-button.sc-ds-select{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__MsKlb0-custom__selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-select-selected-option-font-size, var(--ds-fontSize-16));font-weight:var(--ds-select-selected-option-font-weight, var(--ds-fontWeight-regular));color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-select-selected-option-padding, var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px)));padding-right:var(--ds-select-selected-option-padding, var(--ds-spacing-xSmall))}.ds-select__MsKlb0-custom--has-icon.sc-ds-select .ds-select__MsKlb0-custom__selected-option.sc-ds-select{padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-2xSmall)}.ds-select__MsKlb0-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__MsKlb0-custom__selected-option__text.sc-ds-select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;color:var(--ds-textColor-default)}.ds-select__MsKlb0-custom__selected-option__text--none-selected.sc-ds-select{color:var(--ds-textColor-secondary)}.ds-select__MsKlb0-custom__selected-option__text--disabled.sc-ds-select{color:var(--ds-textColor-disabled-onLight)}.ds-select__MsKlb0-custom.sc-ds-select input.sc-ds-select{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__MsKlb0-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__MsKlb0-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__MsKlb0-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__MsKlb0-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__MsKlb0-custom__clear-button.sc-ds-select{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);top:2px;bottom:2px;cursor:pointer}.ds-select__MsKlb0-custom__clear-button.sc-ds-select:has(button:focus){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 * 2)}.ds-select__MsKlb0-custom__badge-container.sc-ds-select{position:absolute;z-index:2;pointer-events:none;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);padding:10px 0}.ds-select__MsKlb0-custom__options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__MsKlb0-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__MsKlb0-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__MsKlb0-custom__options-container__options__inner.sc-ds-select{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__MsKlb0-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__MsKlb0-custom__options-container__options__inner__bottom-scrim.sc-ds-select{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__MsKlb0-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__MsKlb0-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__MsKlb0-custom__options-container__options__inner__top-scrim.sc-ds-select{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__MsKlb0-custom__options-container__options__inner__top-scrim--dark.sc-ds-select{height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));background:none;margin-top:calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));box-shadow:0 -2px 7px var(--ds-overlay-black-50)}.ds-select__MsKlb0-custom__options-container__options__inner__bottom-scrim.sc-ds-select{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}`;
+const dsSelectCss = () => `.sc-ds-select-h{display:inline-block;width:var(--ds-select-narrow-width, 100%)}@media (min-width: 30rem){:not(:has(.ds-select__cpPWV0--full-width)).sc-ds-select-h{width:var(--ds-select-wide-width, 20rem)}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.ds-select__cpPWV0-custom.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-select-borderWidth, var(--ds-borderWidth-thin)) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:var(--ds-select-height, 2.75rem);width:100%}.ds-select__cpPWV0-custom__dropdown-icon.sc-ds-select{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-select-dropdown-icon-border-left, var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight));color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:var(--ds-select-dropdown-icon-padding, 0 var(--ds-spacing-2xSmall))}.ds-select__cpPWV0-custom-wrapper.sc-ds-select{position:relative}.ds-select__cpPWV0-custom.sc-ds-select .ds-options__cpPWV0.sc-ds-select{display:block}.ds-select__cpPWV0-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__cpPWV0-custom-input-container.sc-ds-select:has(.ds-select__cpPWV0-custom__clear-button:hover) .ds-select__cpPWV0-custom.sc-ds-select{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__cpPWV0-custom.sc-ds-select:not(.ds-select__cpPWV0-custom--open,.ds-select__cpPWV0-custom--invalid.sc-ds-select,.ds-select__cpPWV0-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__cpPWV0-custom.sc-ds-select:active:not(.ds-select__cpPWV0-custom--open,.ds-select__cpPWV0-custom--invalid.sc-ds-select,.ds-select__cpPWV0-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__cpPWV0-custom--open.sc-ds-select,.ds-select__cpPWV0-custom.sc-ds-select: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-select__cpPWV0-custom--open.sc-ds-select:not(.ds-select__cpPWV0-custom--open--invalid,.ds-select__cpPWV0-custom.sc-ds-select:focus-visible--invalid),.ds-select__cpPWV0-custom.sc-ds-select:focus-visible:not(.ds-select__cpPWV0-custom--open--invalid,.ds-select__cpPWV0-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__cpPWV0-custom--disabled.sc-ds-select{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-select__cpPWV0-custom--disabled.sc-ds-select .ds-select__cpPWV0-custom__dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__cpPWV0-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__cpPWV0-custom--invalid.sc-ds-select:not(.ds-select__cpPWV0-custom--invalid--open,.ds-select__cpPWV0-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__cpPWV0-custom--invalid.sc-ds-select:not(.ds-select__cpPWV0-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__cpPWV0-custom__dropdown-icon--has-clear-button.sc-ds-select{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__cpPWV0-custom__selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-select-selected-option-font-size, var(--ds-fontSize-16));font-weight:var(--ds-select-selected-option-font-weight, var(--ds-fontWeight-regular));color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-select-selected-option-padding, var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px)));padding-right:var(--ds-select-selected-option-padding, var(--ds-spacing-xSmall))}.ds-select__cpPWV0-custom--has-icon.sc-ds-select .ds-select__cpPWV0-custom__selected-option.sc-ds-select{padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-2xSmall)}.ds-select__cpPWV0-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__cpPWV0-custom__selected-option__text.sc-ds-select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;color:var(--ds-textColor-default)}.ds-select__cpPWV0-custom__selected-option__text--none-selected.sc-ds-select{color:var(--ds-textColor-secondary)}.ds-select__cpPWV0-custom__selected-option__text--disabled.sc-ds-select{color:var(--ds-textColor-disabled-onLight)}.ds-select__cpPWV0-custom.sc-ds-select input.sc-ds-select{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__cpPWV0-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__cpPWV0-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__cpPWV0-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__cpPWV0-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__cpPWV0-custom__clear-button.sc-ds-select{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);top:2px;bottom:2px;cursor:pointer}.ds-select__cpPWV0-custom__clear-button.sc-ds-select:has(button:focus){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 * 2)}.ds-select__cpPWV0-custom__badge-container.sc-ds-select{position:absolute;z-index:2;pointer-events:none;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);padding:10px 0}.ds-select__cpPWV0-custom__options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-select__cpPWV0-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__cpPWV0-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__cpPWV0-custom__options-container__options__inner.sc-ds-select{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__cpPWV0-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__cpPWV0-custom__options-container__options__inner__bottom-scrim.sc-ds-select{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__cpPWV0-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__cpPWV0-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__cpPWV0-custom__options-container__options__inner__top-scrim.sc-ds-select{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__cpPWV0-custom__options-container__options__inner__top-scrim--dark.sc-ds-select{height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));background:none;margin-top:calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));box-shadow:0 -2px 7px var(--ds-overlay-black-50)}.ds-select__cpPWV0-custom__options-container__options__inner__bottom-scrim.sc-ds-select{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}`;
 
 const defaultTextFns = {
     dsPlaceholder: controlUtils.selectAnOption,
@@ -536,7 +536,7 @@ const DsSelect = class extends index.Mixin(componentFactory.componentFactory('ds
                 [`${customSelectClass}--disabled`]: this.dsDisabled,
                 [`${customSelectClass}--invalid`]: !!this.dsErrorText,
                 [`${customSelectClass}--has-icon`]: !!this.dsIcon,
-            }), tabIndex: this.dsDisabled ? -1 : 0, role: "combobox", "aria-required": this.dsRequired ? 'true' : 'false', "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-disabled": String(this.dsDisabled), "aria-label": this.dsAriaLabel, "aria-labelledby": this.isMultiple && this.selectedOptions?.length > 0 ? `${labelId} ${badgeId}` : labelId, "aria-describedby": ariaDescribedBy, "aria-controls": optionsContainerId, "aria-activedescendant": this.activeIndex !== null ? `${this.dsId}-option-${this.activeIndex}` : undefined, onClick: () => {
+            }), tabIndex: this.dsDisabled ? -1 : 0, role: "combobox", "aria-required": this.dsRequired ? 'true' : 'false', "aria-invalid": this.dsErrorText ? 'true' : 'false', "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-disabled": String(this.dsDisabled), "aria-label": this.dsAriaLabel, "aria-labelledby": this.isMultiple && this.selectedOptions?.length > 0 ? `${labelId} ${badgeId}` : labelId, "aria-describedby": ariaDescribedBy, "aria-controls": optionsContainerId, "aria-activedescendant": this.activeIndex !== null ? `${this.dsId}-option-${this.activeIndex}` : undefined, onClick: () => {
                 if (!this.dsDisabled) {
                     this.toggleDropdown();
                 }
@@ -578,7 +578,7 @@ const DsSelect = class extends index.Mixin(componentFactory.componentFactory('ds
     }
     render() {
         const baseClass = cx.cx('ds-select');
-        return (index.h(index.Host, { key: '3c2dd72616c0c522d4c8bc90e24049fdbba9ba51', ...utils.ifDefined('name', this.isNative ? undefined : this.dsName) }, index.h("div", { key: 'b9c1004ca24fe0735b18f41a376c37d8c4b431d7', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
+        return (index.h(index.Host, { key: 'a06dd65f0b0f081c726344dfc83c13babfe6d379', ...utils.ifDefined('name', this.isNative ? undefined : this.dsName) }, index.h("div", { key: '0006a8e735ef3e3c46e3e6e6869d3434839a8b20', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/ds-pagination-ellipsis.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
-var cx = require('./cx-Ddclbzw3.js');
-var paginationFactory = require('./paginationFactory-CjShXI1I.js');
-require('./paginationContext-ipc_3HhT.js');
+var index = require('./index-CmX4GdqZ.js');
+var cx = require('./cx-B9luWO9I.js');
+var paginationFactory = require('./paginationFactory-Dqw8FWY0.js');
+require('./paginationContext-7Bvl9sTw.js');
 require('./utils-DK6WJuOa.js');
 
-const dsPaginationEllipsisCss = () => `.sc-ds-pagination-ellipsis-h{display:inline-flex;align-items:center;justify-content:center}.ds-pagination-ellipsis__MsKlb0.sc-ds-pagination-ellipsis{min-height:var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall)));min-width:var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall)));padding:0;color:var(--ds-textColor-default);font-size:var(--ds-pagination-font-size, var(--ds-fontSize-18));align-content:center;text-align:center;user-select:none}`;
+const dsPaginationEllipsisCss = () => `.sc-ds-pagination-ellipsis-h{display:inline-flex;align-items:center;justify-content:center}.ds-pagination-ellipsis__cpPWV0.sc-ds-pagination-ellipsis{min-height:var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall)));min-width:var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall)));padding:0;color:var(--ds-pagination-ellipsis-colour, var(--ds-textColor-default));font-size:var(--ds-pagination-font-size, var(--ds-fontSize-18));align-content:center;text-align:center;user-select:none}`;
 
 const DsPaginationEllipsis = class extends index.Mixin(paginationFactory.paginationFactory) {
     constructor(hostRef) {
@@ -19,7 +19,7 @@ const DsPaginationEllipsis = class extends index.Mixin(paginationFactory.paginat
         const variant = this.paginationContext?.variant || 'medium';
         const hostClass = cx.cx(`ds-pagination-ellipsis-variant--${variant}`);
         const ariaLabel = this.paginationContext?.texts.ellipsis || 'Ellipsis';
-        return (index.h(index.Host, { key: '37dba82fa26a90751ed6df473e90be5f38cdeeb8', class: hostClass }, index.h("span", { key: '1f5af2af65bca8c1d8526819308792c7cc463084', class: baseClass, role: "img", "aria-label": ariaLabel }, "\u2026")));
+        return (index.h(index.Host, { key: '0dae2f8012c4d38c9ee759d7c1996a9d19aba75e', class: hostClass }, index.h("span", { key: 'e29dba2e2908635a85b9b7017cdf0c73c64b3fb8', class: baseClass, role: "img", "aria-label": ariaLabel }, "\u2026")));
     }
 };
 DsPaginationEllipsis.style = dsPaginationEllipsisCss();

package/dist/cjs/ds-pagination-item.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-CmX4GdqZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-Ddclbzw3.js');
+var cx = require('./cx-B9luWO9I.js');
 var utils = require('./utils-DK6WJuOa.js');
-var paginationFactory = require('./paginationFactory-CjShXI1I.js');
-require('./paginationContext-ipc_3HhT.js');
+var paginationFactory = require('./paginationFactory-Dqw8FWY0.js');
+require('./paginationContext-7Bvl9sTw.js');
 
-const dsPaginationItemCss = () => `.ds-pagination-item__MsKlb0.sc-ds-pagination-item{display:inline-flex;align-items:center;gap:var(--ds-spacing-2xSmall);--ds-link-cta-padding-block:0;--ds-link-cta-text-decoration:none;--ds-link-cta-icon-size:1.25rem}.ds-pagination-item__MsKlb0--disabled.sc-ds-pagination-item{cursor:default}[slot=full].sc-ds-pagination-item-h .ds-pagination-item__MsKlb0--previous.sc-ds-pagination-item{--ds-link-cta-padding-inline-start:var(--ds-spacing-3xSmall)}[slot=full].sc-ds-pagination-item-h .ds-pagination-item__MsKlb0--next.sc-ds-pagination-item{--ds-link-cta-padding-inline-end:var(--ds-spacing-3xSmall)}`;
+const dsPaginationItemCss = () => `.ds-pagination-item__cpPWV0.sc-ds-pagination-item{display:inline-flex;align-items:center;gap:var(--ds-spacing-2xSmall);--ds-link-cta-padding-block:0;--ds-link-cta-text-decoration:none;--ds-link-cta-icon-size:1.25rem}.ds-pagination-item__cpPWV0--disabled.sc-ds-pagination-item{cursor:default}[slot=full].sc-ds-pagination-item-h .ds-pagination-item__cpPWV0--previous.sc-ds-pagination-item{--ds-link-cta-padding-inline-start:var(--ds-spacing-3xSmall)}[slot=full].sc-ds-pagination-item-h .ds-pagination-item__cpPWV0--next.sc-ds-pagination-item{--ds-link-cta-padding-inline-end:var(--ds-spacing-3xSmall)}`;
 
 const DsPaginationItem = class extends index.Mixin(paginationFactory.paginationFactory) {
     constructor(hostRef) {
@@ -99,6 +99,7 @@ const DsPaginationItem = class extends index.Mixin(paginationFactory.paginationF
         const linkProps = {
             class: classes,
             dsVariant: 'supplementary',
+            dsColour: this.paginationContext.colour,
             dsSize: this.paginationContext.variant,
             dsAriaLabel: this.ariaLabel,
             dsText: textToDisplay,
@@ -108,6 +109,7 @@ const DsPaginationItem = class extends index.Mixin(paginationFactory.paginationF
             dsHref: isSpan ? undefined : this.dsHref,
             dsDisabled: this.isDisabled,
             dsTag: (isSpan ? 'span' : 'a'),
+            dsTabIndex: this.isDisabled ? '-1' : undefined,
         };
         return (index.h(index.Host, null, index.h(this.DsLinkCta, { ...linkProps })));
     }

package/dist/cjs/ds-pagination-page-info.cjs.entry.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var index = require('./index-CmX4GdqZ.js');
+var cx = require('./cx-B9luWO9I.js');
+var paginationFactory = require('./paginationFactory-Dqw8FWY0.js');
+require('./paginationContext-7Bvl9sTw.js');
+require('./utils-DK6WJuOa.js');
+
+const dsPaginationPageInfoCss = () => `.ds-no-style-leak.sc-ds-pagination-page-info *.sc-ds-pagination-page-info{all:unset;box-sizing:border-box;display:block}.sc-ds-pagination-page-info-h{display:inline-flex;align-items:center;justify-content:center}.ds-pagination-page-info__cpPWV0.sc-ds-pagination-page-info{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);padding:0;font-size:var(--ds-pagination-font-size, var(--ds-fontSize-16));font-weight:var(--ds-fontWeight-semibold);text-align:center;align-self:center;white-space:nowrap}`;
+
+const DsPaginationPageInfo = class extends index.Mixin(paginationFactory.paginationFactory) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    render() {
+        if (!this.paginationContext) {
+            return index.h(index.Host, null);
+        }
+        const baseClass = cx.cx('ds-pagination-page-info');
+        const { currentPage, totalPages } = this.paginationContext;
+        return (index.h(index.Host, null, index.h("span", { class: baseClass }, currentPage, " / ", totalPages)));
+    }
+};
+DsPaginationPageInfo.style = dsPaginationPageInfoCss();
+
+exports.ds_pagination_page_info = DsPaginationPageInfo;

package/dist/cjs/ds-pagination-page.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-CmX4GdqZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-Ddclbzw3.js');
+var cx = require('./cx-B9luWO9I.js');
 var utils = require('./utils-DK6WJuOa.js');
-var paginationFactory = require('./paginationFactory-CjShXI1I.js');
-require('./paginationContext-ipc_3HhT.js');
+var paginationFactory = require('./paginationFactory-Dqw8FWY0.js');
+require('./paginationContext-7Bvl9sTw.js');
 
-const dsPaginationPageCss = () => `.sc-ds-pagination-page-h{display:inline-flex;align-items:center}.ds-pagination-page__MsKlb0.sc-ds-pagination-page{--ds-link-cta-padding-inline:var(--ds-spacing-2xSmall);--ds-link-cta-padding-block:0;--ds-link-cta-text-decoration:none;--ds-link-cta-icon-size:1.25rem}.ds-pagination-page__MsKlb0--current.sc-ds-pagination-page{pointer-events:none;--ds-link-cta-bg-color:var(--ds-bgColor-primary);--ds-link-cta-text-color:var(--ds-textColor-white)}`;
+const dsPaginationPageCss = () => `.sc-ds-pagination-page-h{display:inline-flex;align-items:center}.ds-pagination-page__cpPWV0.sc-ds-pagination-page{--ds-link-cta-padding-inline:var(--ds-spacing-2xSmall);--ds-link-cta-padding-block:0;--ds-link-cta-text-decoration:none;--ds-link-cta-icon-size:1.25rem}.ds-pagination-page__cpPWV0--current.sc-ds-pagination-page{pointer-events:none}`;
 
 const DsPaginationPage = class extends index.Mixin(paginationFactory.paginationFactory) {
     constructor(hostRef) {
@@ -18,6 +18,7 @@ const DsPaginationPage = class extends index.Mixin(paginationFactory.paginationF
     dsPage;
     dsHref;
     dsIsCurrent;
+    dsAriaLabel;
     dsTag;
     get isCurrent() {
         if (this.dsIsCurrent !== undefined)
@@ -26,6 +27,13 @@ const DsPaginationPage = class extends index.Mixin(paginationFactory.paginationF
             return false;
         return this.dsPage === this.paginationContext.currentPage;
     }
+    get ariaLabel() {
+        if (this.dsAriaLabel === '')
+            return undefined;
+        if (this.dsAriaLabel == null)
+            return this.paginationContext?.texts.pageNumber(this.dsPage);
+        return this.dsAriaLabel;
+    }
     get DsLinkCta() {
         return utils.transformTagName('ds-link-cta', 'ds-pagination-page', this.el);
     }
@@ -42,11 +50,13 @@ const DsPaginationPage = class extends index.Mixin(paginationFactory.paginationF
         const linkProps = {
             'class': classes,
             'dsVariant': variant,
+            'dsColour': this.paginationContext.colour,
             'dsSize': this.paginationContext.variant,
             'dsTag': (isSpan ? 'span' : 'a'),
             'dsHref': isSpan ? undefined : this.dsHref,
             'aria-current': this.isCurrent ? 'page' : undefined,
             'dsText': String(this.dsPage),
+            'dsAriaLabel': this.ariaLabel,
             'dsHideIcon': true,
         };
         const hostClass = cx.cx(`ds-pagination-page-variant--${this.paginationContext.variant}`);

package/dist/cjs/ds-pagination.cjs.entry.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-CmX4GdqZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-Ddclbzw3.js');
-var controlUtils = require('./controlUtils-UVPS1EQ_.js');
-var paginationUtils = require('./paginationUtils-_p1sVbho.js');
-var paginationContext = require('./paginationContext-ipc_3HhT.js');
-var componentFactory = require('./componentFactory-BNqkQcfi.js');
-require('./store-DT9Wk6N2.js');
+var cx = require('./cx-B9luWO9I.js');
+var controlUtils = require('./controlUtils-DKHcFVTq.js');
+var paginationUtils = require('./paginationUtils-BK7wl08-.js');
+var paginationContext = require('./paginationContext-7Bvl9sTw.js');
+var componentFactory = require('./componentFactory-Cw20ncNZ.js');
+require('./store-Bc8GbxUL.js');
 require('./utils-DK6WJuOa.js');
 
-const dsPaginationCss = () => `.ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}:host{display:block;width:100%}@media (min-width: 30rem){:host{width:auto}}.ds-pagination__MsKlb0{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:flex;align-items:center;justify-content:center;gap:var(--ds-spacing-3xSmall);flex-wrap:wrap}.ds-pagination__MsKlb0__compact slot,.ds-pagination__MsKlb0__full slot{display:flex;align-items:center;gap:var(--ds-spacing-3xSmall);flex-wrap:wrap}.ds-pagination__MsKlb0--compact .ds-pagination__MsKlb0__compact,.ds-pagination__MsKlb0--auto .ds-pagination__MsKlb0__compact{width:100%}@media (min-width: 30rem){.ds-pagination__MsKlb0--compact .ds-pagination__MsKlb0__compact,.ds-pagination__MsKlb0--auto .ds-pagination__MsKlb0__compact{width:auto}}.ds-pagination__MsKlb0--compact .ds-pagination__MsKlb0__compact slot,.ds-pagination__MsKlb0--auto .ds-pagination__MsKlb0__compact slot{display:grid;grid-template-columns:min-content min-content auto min-content min-content;gap:var(--ds-spacing-3xSmall);align-items:center;width:100%}.ds-pagination__MsKlb0 ::slotted([class*=pagination-page-info]){padding:0 var(--ds-spacing-small);font-size:var(--ds-pagination-font-size, var(--ds-fontSize-16));font-weight:var(--ds-fontWeight-semibold, 600);text-align:center;align-self:center}.ds-pagination__MsKlb0--compact .ds-pagination__MsKlb0__full{display:none}.ds-pagination__MsKlb0--full .ds-pagination__MsKlb0__compact{display:none}.ds-pagination__MsKlb0--auto .ds-pagination__MsKlb0__full{display:none}@media (min-width: 60rem){.ds-pagination__MsKlb0--auto .ds-pagination__MsKlb0__full{display:contents}.ds-pagination__MsKlb0--auto .ds-pagination__MsKlb0__compact{display:none}}`;
+const dsPaginationCss = () => `.ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}:host{display:block;width:100%}@media (min-width: 30rem){:host{width:auto}}.ds-pagination__cpPWV0{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:flex;align-items:center;justify-content:center;gap:var(--ds-spacing-3xSmall);flex-wrap:wrap}.ds-pagination__cpPWV0__compact slot,.ds-pagination__cpPWV0__full slot{display:flex;align-items:center;gap:var(--ds-spacing-3xSmall);flex-wrap:wrap}.ds-pagination__cpPWV0--compact .ds-pagination__cpPWV0__compact,.ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__compact{width:100%}@media (min-width: 30rem){.ds-pagination__cpPWV0--compact .ds-pagination__cpPWV0__compact,.ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__compact{width:auto}}.ds-pagination__cpPWV0--compact .ds-pagination__cpPWV0__compact slot,.ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__compact slot{display:grid;grid-template-columns:min-content min-content auto min-content min-content;gap:var(--ds-spacing-3xSmall);align-items:center;width:100%}.ds-pagination__cpPWV0 ::slotted([class*=pagination-page-info]){padding:0 var(--ds-spacing-small);font-size:var(--ds-pagination-font-size, var(--ds-fontSize-16));font-weight:var(--ds-fontWeight-semibold);text-align:center;align-self:center;white-space:nowrap}.ds-pagination__cpPWV0--white{--ds-pagination-ellipsis-colour:var(--ds-textColor-white)}.ds-pagination__cpPWV0--white ::slotted([class*=pagination-page-info]){color:var(--ds-textColor-white)}.ds-pagination__cpPWV0--compact .ds-pagination__cpPWV0__full{display:none}.ds-pagination__cpPWV0--full .ds-pagination__cpPWV0__compact{display:none}.ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__full{display:none}@media (min-width: 60rem){.ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__full{display:contents}.ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__compact{display:none}}`;
 
 const DsPagination = class extends index.Mixin(componentFactory.componentFactory('ds-pagination', { stopRootTracking: true })) {
     constructor(hostRef) {
@@ -22,6 +22,7 @@ const DsPagination = class extends index.Mixin(componentFactory.componentFactory
     dsTotalPages = 1;
     dsLayout = 'auto';
     dsVariant = 'medium';
+    dsColour = 'blue';
     dsAriaLabel;
     get texts() {
         return {
@@ -35,9 +36,10 @@ const DsPagination = class extends index.Mixin(componentFactory.componentFactory
             goToNextPage: paginationUtils.goToNextPage(),
             currentPage: paginationUtils.currentPage(),
             ellipsis: controlUtils.ellipsis(),
+            pageNumber: (page) => paginationUtils.pageNumber(page),
         };
     }
-    langObserver() {
+    configurationPropertyObserver() {
         this.updateContext();
     }
     dsCurrentPageObserver(newValue) {
@@ -77,6 +79,7 @@ const DsPagination = class extends index.Mixin(componentFactory.componentFactory
             currentPage: this.dsCurrentPage,
             totalPages: this.dsTotalPages,
             variant: this.dsVariant,
+            colour: this.dsColour,
             layout: this.dsLayout,
             isCompact: false,
             texts: this.texts,
@@ -84,17 +87,23 @@ const DsPagination = class extends index.Mixin(componentFactory.componentFactory
     }
     render() {
         const baseClass = cx.cx('ds-pagination');
-        const classes = index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsLayout}`);
+        const classes = index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsLayout}`, `${baseClass}--${this.dsColour}`);
         const fontSize = this.dsVariant === 'small' ? 'var(--ds-fontSize-16)' : 'var(--ds-fontSize-18)';
         const minSize = this.dsVariant === 'small' ? 'var(--ds-spacing-large)' : 'calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall))';
-        return (index.h("nav", { key: '37a0983233833510e18500c528483bf1bc01a3c1', class: classes, "aria-label": this.dsAriaLabel || paginationUtils.pagination(), style: {
+        return (index.h("nav", { key: 'd4e8f0e30aa6faa3948bc52016ef3936d608513b', class: classes, "aria-label": this.dsAriaLabel || paginationUtils.pagination(), style: {
                 '--ds-pagination-font-size': fontSize,
                 '--ds-link-cta-min-width': minSize,
-            } }, index.h("div", { key: 'd61235ad8e8c3f1886e5cf4a555e6cbaf80a7dab', class: `${baseClass}__compact` }, index.h("slot", { key: 'a478f9bbdeb51e59af0a11b8dc24a90ad77b2400', name: "compact", onSlotchange: () => this.updateContext() })), index.h("div", { key: 'dcf0e3b5ab81d3eec7f9ac614fe291901ff4f4cd', class: `${baseClass}__full` }, index.h("slot", { key: 'd4c69cbb062be42ed2af3b52764192348b332baa', name: "full", onSlotchange: () => this.updateContext() }))));
+            } }, index.h("div", { key: '0c5d0c00d6225f79a787c2a0682f7030e6813442', class: `${baseClass}__compact` }, index.h("slot", { key: '7d79b99bd138062bcf30aa931c5c77023ebbf0c4', name: "compact", onSlotchange: () => this.updateContext() })), index.h("div", { key: 'f51fa4c578bcd41657ee287605b53c107aa4984f', class: `${baseClass}__full` }, index.h("slot", { key: 'a58ca32a29e1492554136ca24d897058d1ce2913', name: "full", onSlotchange: () => this.updateContext() }))));
     }
     static get watchers() { return {
         "lang": [{
-                "langObserver": 0
+                "configurationPropertyObserver": 0
+            }],
+        "dsColour": [{
+                "configurationPropertyObserver": 0
+            }],
+        "dsVariant": [{
+                "configurationPropertyObserver": 0
             }],
         "dsCurrentPage": [{
                 "dsCurrentPageObserver": 0