npm - @uh-design-system/component-library - Versions diffs - 1.4.0 → 1.5.0 - Mend

@uh-design-system/component-library 1.4.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2350) hide show

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

@@ -1,20 +1,20 @@
 'use strict';
-var index = require('./index-BSwr4Ukh.js');
+var index = require('./index-BNOD57K-.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-D-SFhp5j.js');
-var utils = require('./utils-DOIzXqfM.js');
+var cx = require('./cx-Bz5Mpvyi.js');
+var utils = require('./utils-DMgbvnde.js');
 var attributes = require('./attributes-5eBKMo1N.js');
-var store = require('./store-X-DFw257.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-xH9mSaws.js');
+var store = require('./store-DNuNXgOq.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-BkrxJQA9.js');
+var componentFactory = require('./componentFactory-BmBVCz8f.js');
-const dsNotificationCss = () => `.sc-ds-notification-h{display:block;width:100%}.ds-notification__SPFJ1E.sc-ds-notification{padding:var(--ds-spacing-xSmall, 12px)}.ds-notification__SPFJ1E.ds-notification__SPFJ1E--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__SPFJ1E.ds-notification__SPFJ1E--neutral.sc-ds-notification .ds-notification__SPFJ1E__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__SPFJ1E.ds-notification__SPFJ1E--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__SPFJ1E.ds-notification__SPFJ1E--neutralWhite.sc-ds-notification .ds-notification__SPFJ1E__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__SPFJ1E.ds-notification__SPFJ1E--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__SPFJ1E.ds-notification__SPFJ1E--info.sc-ds-notification .ds-notification__SPFJ1E__icon.sc-ds-notification{color:var(--ds-iconColor-info);margin-bottom:auto}.ds-notification__SPFJ1E.ds-notification__SPFJ1E--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__SPFJ1E.ds-notification__SPFJ1E--success.sc-ds-notification .ds-notification__SPFJ1E__icon.sc-ds-notification{color:var(--ds-iconColor-success);margin-bottom:auto}.ds-notification__SPFJ1E.ds-notification__SPFJ1E--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__SPFJ1E.ds-notification__SPFJ1E--attention.sc-ds-notification .ds-notification__SPFJ1E__icon.sc-ds-notification{color:var(--ds-iconColor-attention);margin-bottom:auto}.ds-notification__SPFJ1E.ds-notification__SPFJ1E--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__SPFJ1E.ds-notification__SPFJ1E--danger.sc-ds-notification .ds-notification__SPFJ1E__icon.sc-ds-notification{color:var(--ds-iconColor-danger);margin-bottom:auto}.ds-notification__SPFJ1E__content.sc-ds-notification{display:flex;gap:var(--ds-spacing-2xSmall, 8px);max-width:1376px;margin:0 auto}.ds-notification__SPFJ1E__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__SPFJ1E__content__text__heading.sc-ds-notification,.ds-notification__SPFJ1E__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__SPFJ1E__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__GqWYnG.sc-ds-notification{padding:var(--ds-spacing-xSmall, 12px)}.ds-notification__GqWYnG.ds-notification__GqWYnG--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__GqWYnG.ds-notification__GqWYnG--neutral.sc-ds-notification .ds-notification__GqWYnG__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__GqWYnG.ds-notification__GqWYnG--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__GqWYnG.ds-notification__GqWYnG--neutralWhite.sc-ds-notification .ds-notification__GqWYnG__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__GqWYnG.ds-notification__GqWYnG--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__GqWYnG.ds-notification__GqWYnG--info.sc-ds-notification .ds-notification__GqWYnG__icon.sc-ds-notification{color:var(--ds-iconColor-info);margin-bottom:auto}.ds-notification__GqWYnG.ds-notification__GqWYnG--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__GqWYnG.ds-notification__GqWYnG--success.sc-ds-notification .ds-notification__GqWYnG__icon.sc-ds-notification{color:var(--ds-iconColor-success);margin-bottom:auto}.ds-notification__GqWYnG.ds-notification__GqWYnG--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__GqWYnG.ds-notification__GqWYnG--attention.sc-ds-notification .ds-notification__GqWYnG__icon.sc-ds-notification{color:var(--ds-iconColor-attention);margin-bottom:auto}.ds-notification__GqWYnG.ds-notification__GqWYnG--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__GqWYnG.ds-notification__GqWYnG--danger.sc-ds-notification .ds-notification__GqWYnG__icon.sc-ds-notification{color:var(--ds-iconColor-danger);margin-bottom:auto}.ds-notification__GqWYnG__content.sc-ds-notification{display:flex;gap:var(--ds-spacing-2xSmall, 8px);max-width:1376px;margin:0 auto}.ds-notification__GqWYnG__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__GqWYnG__content__text__heading.sc-ds-notification,.ds-notification__GqWYnG__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__GqWYnG__content__text__description.sc-ds-notification{max-width:var(--ds-notification-description-max-width, 550px)}`;
-const notificationIdGenerator = utils.idGenerator('ds-notification');
 const variants = ['neutral', 'neutralWhite', 'info', 'success', 'attention', 'danger'];
 const customizableIconVariants = ['neutral', 'neutralWhite', 'info'];
 const isCustomizableIconVariant = (variant) => customizableIconVariants.includes(variant);
-const DsNotification = class extends index.Mixin(ariaDeprecationFactory.ariaDeprecationFactory) {
+const DsNotification = class extends index.Mixin(componentFactory.componentFactory('ds-notification'), ariaDeprecationFactory.ariaDeprecationFactory) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -26,7 +26,7 @@ const DsNotification = class extends index.Mixin(ariaDeprecationFactory.ariaDepr
     inheritedAttributes = {};
     get el() { return index.getElement(this); }
     dsDismiss;
-    dsId = notificationIdGenerator.next().value;
+    dsId = this.getUniqueId();
     variant = 'neutral';
     get dsVariant() {
         return this.variant;
@@ -141,6 +141,9 @@ const DsNotification = class extends index.Mixin(ariaDeprecationFactory.ariaDepr
             ...attributes.inheritAriaAttributes(this.el),
         };
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     handleDismissButtonClick = () => {
         this.dsDismiss.emit();
     };
@@ -153,7 +156,7 @@ const DsNotification = class extends index.Mixin(ariaDeprecationFactory.ariaDepr
         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: '2c7be9f4ca5c418b5c61bab132d4411bc004600a', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, index.h("div", { key: 'baa8bf00a8ff422725dfa35d7aa42ce1b447a0c9', class: contentClass }, this.dsIcon && (index.h("div", { key: 'd0352dd16b66822af92b018f9e0d53ce1bce2699', class: `${baseClass}__icon ds-p-3xs` }, index.h(this.DsIcon, { key: 'b8c98820afc69339a667e20b0daaef7c8145c229', dsName: this.dsIcon }))), index.h("div", { key: 'ab25e7e55e76721b70a96fd8cfe7f002e9677eca', class: textClass }, index.h("slot", { key: 'ec5ad0d4f45e5f0831e5dc670707d68d4989c7d4', name: "heading" }, this.dsHeading && (index.h("div", { key: 'e29e20300b860da979cb2285925348449b0ce2d5', 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: '86622fac36f1c0828e974ced4d5fae415fbffeb6', name: "description" }, this.dsDescription && (index.h("div", { key: 'b4161e753abf969b4fe2f895650bd32f5dfd8485', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), index.h("slot", { key: 'd4d2cfb91ec5c17073c8a2963998379586016a3a' })), this.dsDismissable && (index.h(this.DsButton, { key: '992e2ed905ae9eaefdabf15e9a3c4c006f4d7977', 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: 'e85535b98bd322df61f9b7dcc4f4a224f7d608f0', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
+        return (index.h("div", { key: '4a33a2341cb0ddedbae84d141d0bde4c0ce54b8f', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, index.h("div", { key: 'e3532247cd831b07110cdb896f362d67e4f00424', class: contentClass }, this.dsIcon && (index.h("div", { key: '6a49f7ba417d833f25d53e5d76b111212b4f3b3f', class: `${baseClass}__icon ds-p-3xs` }, index.h(this.DsIcon, { key: 'f836bfa593297f84170c7391f8d73a7fd6d4237b', dsName: this.dsIcon }))), index.h("div", { key: 'c9ee86cbdaf73853a7d1b5db7c2ad5b5ac3ff58d', class: textClass }, index.h("slot", { key: 'ef60097fe450dbe4074cd2f2c8c98b815e0e0d96', name: "heading" }, this.dsHeading && (index.h("div", { key: 'defc5e022ca33e908398d082cad0fe03e02cf018', 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: '195f482626decf81e679d0fd35c595dccf6d501b', name: "description" }, this.dsDescription && (index.h("div", { key: 'be1a3fdb821b62078d057c3f4c7f0fcd09e8facd', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), index.h("slot", { key: 'f3ec0b87eb5fa07fa06abb08502abee48bda182f' })), this.dsDismissable && (index.h(this.DsButton, { key: 'af7f0d6580693efc7a34a9e2592adbdec0c9f4d5', 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: '37979bae9dbbf7aaebd834c9cb1dda9dfeadc2e4', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
     }
     static get watchers() { return {
         "aria-label": [{

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

@@ -1,12 +1,12 @@
 'use strict';
-var index = require('./index-BSwr4Ukh.js');
+var index = require('./index-BNOD57K-.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-DOIzXqfM.js');
-var cx = require('./cx-D-SFhp5j.js');
+var utils = require('./utils-DMgbvnde.js');
+var cx = require('./cx-Bz5Mpvyi.js');
 var attributes = require('./attributes-5eBKMo1N.js');
-const dsOptionCss = () => `.ds-option__SPFJ1E.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__SPFJ1E.sc-ds-option:not(.ds-option__SPFJ1E--multiple){justify-content:space-between}.ds-option__SPFJ1E--hidden.sc-ds-option{display:none}.ds-option__SPFJ1E--disabled.sc-ds-option{cursor:not-allowed;user-select:none;color:var(--ds-textColor-disabled-onLight)}.ds-option__SPFJ1E.sc-ds-option:hover:not(.ds-option__SPFJ1E--disabled){background-color:var(--ds-bgColor-white-hover)}.ds-option__SPFJ1E.sc-ds-option:active:not(.ds-option__SPFJ1E--disabled){background-color:var(--ds-bgColor-white-active)}.ds-option__SPFJ1E--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__SPFJ1E--active.ds-option__SPFJ1E--selected.sc-ds-option:not(.ds-option__SPFJ1E--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__SPFJ1E--multiple.ds-option__SPFJ1E--disabled.sc-ds-option{color:var(--ds-textColor-default)}.ds-option__SPFJ1E--multiple.sc-ds-option .ds-option__SPFJ1E__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__SPFJ1E--multiple.ds-option__SPFJ1E--disabled.sc-ds-option .ds-option__SPFJ1E__checkbox.sc-ds-option{border-color:var(--ds-borderColor-transparent);background-color:var(--ds-bgColor-disabled-onLight)}.ds-option__SPFJ1E--multiple.ds-option__SPFJ1E--disabled.sc-ds-option:not(.ds-option__SPFJ1E--selected) .ds-option__SPFJ1E__checkbox.sc-ds-option{border-color:var(--ds-borderColor-disabled-onLight)}.ds-option__SPFJ1E--selected.sc-ds-option .ds-option__SPFJ1E__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__SPFJ1E--selected.sc-ds-option:not(.ds-option__SPFJ1E--multiple){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option__SPFJ1E--selected.sc-ds-option:not(.ds-option__SPFJ1E--multiple).ds-option__SPFJ1E--disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-option__SPFJ1E--selected.sc-ds-option:not(.ds-option__SPFJ1E--multiple) .ds-option__SPFJ1E__description.sc-ds-option{color:var(--ds-textColor-white)}.ds-option__SPFJ1E--selected.sc-ds-option:not(.ds-option__SPFJ1E--multiple) .ds-option__SPFJ1E__check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option__SPFJ1E--selected.sc-ds-option:not(.ds-option__SPFJ1E--multiple).ds-option__SPFJ1E--disabled .ds-option__SPFJ1E__check-icon.sc-ds-option{color:var(--ds-textColor-disabled-onLight)}.ds-option__SPFJ1E--selected.sc-ds-option:not(.ds-option__SPFJ1E--multiple):hover:not(.ds-option__SPFJ1E--disabled){background-color:var(--ds-bgColor-primary-hover)}.ds-option__SPFJ1E--selected.sc-ds-option:not(.ds-option__SPFJ1E--multiple):active:not(.ds-option__SPFJ1E--disabled){background-color:var(--ds-bgColor-primary-active)}.ds-option__SPFJ1E__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__SPFJ1E__check-icon.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}.ds-option__SPFJ1E__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__SPFJ1E__description.sc-ds-option:not(:empty){display:block}`;
+const dsOptionCss = () => `.ds-option__GqWYnG.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__GqWYnG.sc-ds-option:not(.ds-option__GqWYnG--multiple){justify-content:space-between}.ds-option__GqWYnG--hidden.sc-ds-option{display:none}.ds-option__GqWYnG--disabled.sc-ds-option{cursor:not-allowed;user-select:none;color:var(--ds-textColor-disabled-onLight)}.ds-option__GqWYnG.sc-ds-option:hover:not(.ds-option__GqWYnG--disabled){background-color:var(--ds-bgColor-white-hover)}.ds-option__GqWYnG.sc-ds-option:active:not(.ds-option__GqWYnG--disabled){background-color:var(--ds-bgColor-white-active)}.ds-option__GqWYnG--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__GqWYnG--active.ds-option__GqWYnG--selected.sc-ds-option:not(.ds-option__GqWYnG--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__GqWYnG--multiple.ds-option__GqWYnG--disabled.sc-ds-option{color:var(--ds-textColor-default)}.ds-option__GqWYnG--multiple.sc-ds-option .ds-option__GqWYnG__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__GqWYnG--multiple.ds-option__GqWYnG--disabled.sc-ds-option .ds-option__GqWYnG__checkbox.sc-ds-option{border-color:var(--ds-borderColor-transparent);background-color:var(--ds-bgColor-disabled-onLight)}.ds-option__GqWYnG--multiple.ds-option__GqWYnG--disabled.sc-ds-option:not(.ds-option__GqWYnG--selected) .ds-option__GqWYnG__checkbox.sc-ds-option{border-color:var(--ds-borderColor-disabled-onLight)}.ds-option__GqWYnG--selected.sc-ds-option .ds-option__GqWYnG__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__GqWYnG--selected.sc-ds-option:not(.ds-option__GqWYnG--multiple){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option__GqWYnG--selected.sc-ds-option:not(.ds-option__GqWYnG--multiple).ds-option__GqWYnG--disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-option__GqWYnG--selected.sc-ds-option:not(.ds-option__GqWYnG--multiple) .ds-option__GqWYnG__description.sc-ds-option{color:var(--ds-textColor-white)}.ds-option__GqWYnG--selected.sc-ds-option:not(.ds-option__GqWYnG--multiple) .ds-option__GqWYnG__check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option__GqWYnG--selected.sc-ds-option:not(.ds-option__GqWYnG--multiple).ds-option__GqWYnG--disabled .ds-option__GqWYnG__check-icon.sc-ds-option{color:var(--ds-textColor-disabled-onLight)}.ds-option__GqWYnG--selected.sc-ds-option:not(.ds-option__GqWYnG--multiple):hover:not(.ds-option__GqWYnG--disabled){background-color:var(--ds-bgColor-primary-hover)}.ds-option__GqWYnG--selected.sc-ds-option:not(.ds-option__GqWYnG--multiple):active:not(.ds-option__GqWYnG--disabled){background-color:var(--ds-bgColor-primary-active)}.ds-option__GqWYnG__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__GqWYnG__check-icon.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}.ds-option__GqWYnG__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__GqWYnG__description.sc-ds-option:not(:empty){display:block}`;
 const optionIdGenerator = utils.idGenerator('ds-option');
 const DsOption = class {
@@ -124,7 +124,7 @@ const DsOption = class {
 utils.declareComponentDependencies([index.h("ds-icon", { dsName: "" })]);
 DsOption.style = dsOptionCss();
-const dsOptionGroupCss = () => `.ds-option-group__SPFJ1E.sc-ds-option-group{display:block;font-family:var(--ds-fontFamily-body)}.ds-option-group__SPFJ1E--hidden.sc-ds-option-group{display:none}.ds-option-group__SPFJ1E.sc-ds-option-group ul.sc-ds-option-group{padding:0}.ds-option-group__SPFJ1E__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__SPFJ1E__label__shadow.sc-ds-option-group{box-shadow:var(--ds-shadow-overflow)}`;
+const dsOptionGroupCss = () => `.ds-option-group__GqWYnG.sc-ds-option-group{display:block;font-family:var(--ds-fontFamily-body)}.ds-option-group__GqWYnG--hidden.sc-ds-option-group{display:none}.ds-option-group__GqWYnG.sc-ds-option-group ul.sc-ds-option-group{padding:0}.ds-option-group__GqWYnG__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__GqWYnG__label__shadow.sc-ds-option-group{box-shadow:var(--ds-shadow-overflow)}`;
 const DsOptionGroup = class {
     constructor(hostRef) {
@@ -160,9 +160,9 @@ const DsOptionGroup = class {
     }
     render() {
         const baseClass = cx.cx('ds-option-group');
-        return (index.h("div", { key: 'b1161298f8ef8d2b305b9837a3d2f9501858837b', class: index$1.classNames(`${baseClass}`, {
+        return (index.h("div", { key: '291ebd488597a455c8a48938732478e686a79d85', class: index$1.classNames(`${baseClass}`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, index.h("div", { key: 'dff52700dd3d9aa86218b6a64969ea67970c2c3a', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), index.h("slot", { key: '3573bfa76edb767d6eb0fcef6dc752f4ed42cb64' })));
+            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, index.h("div", { key: '0e08dcdd6eb95fc52610fe9bbe2bd797d3d9fa91', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), index.h("slot", { key: '47b187c03a4cec508d01d11dd4a5ca943bbd4978' })));
     }
     static get watchers() { return {
         "dsLabel": [{

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

@@ -1,12 +1,12 @@
 'use strict';
-var index = require('./index-BSwr4Ukh.js');
-var store = require('./store-X-DFw257.js');
-var controlUtils = require('./controlUtils-BLiRltjz.js');
-var utils = require('./utils-DOIzXqfM.js');
-var cx = require('./cx-D-SFhp5j.js');
+var index = require('./index-BNOD57K-.js');
+var store = require('./store-DNuNXgOq.js');
+var controlUtils = require('./controlUtils-CcUudA6Q.js');
+var utils = require('./utils-DMgbvnde.js');
+var cx = require('./cx-Bz5Mpvyi.js');
-const dsOptionsMessageCss = () => `.ds-options-message__SPFJ1E.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__SPFJ1E__error.sc-ds-options-message{color:var(--ds-textColor-danger);text-align:center}.ds-options-message__SPFJ1E__error__icon.sc-ds-options-message{display:inline-block}.ds-options-message__SPFJ1E__error__title.sc-ds-options-message,.ds-options-message__SPFJ1E__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__SPFJ1E__no-results__title.sc-ds-options-message{hyphens:auto}.ds-options-message__SPFJ1E__error__text.sc-ds-options-message,.ds-options-message__SPFJ1E__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__GqWYnG.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__GqWYnG__error.sc-ds-options-message{color:var(--ds-textColor-danger);text-align:center}.ds-options-message__GqWYnG__error__icon.sc-ds-options-message{display:inline-block}.ds-options-message__GqWYnG__error__title.sc-ds-options-message,.ds-options-message__GqWYnG__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__GqWYnG__no-results__title.sc-ds-options-message{hyphens:auto}.ds-options-message__GqWYnG__error__text.sc-ds-options-message,.ds-options-message__GqWYnG__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 CHANGED Viewed

@@ -1,17 +1,17 @@
 'use strict';
-var index = require('./index-BSwr4Ukh.js');
+var index = require('./index-BNOD57K-.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-DOIzXqfM.js');
-var cx = require('./cx-D-SFhp5j.js');
+var utils = require('./utils-DMgbvnde.js');
+var cx = require('./cx-Bz5Mpvyi.js');
 var attributes = require('./attributes-5eBKMo1N.js');
 var constants = require('./constants-DQ8n-aJY.js');
-var controlUtils = require('./controlUtils-BLiRltjz.js');
-var multipleValueFactory = require('./multipleValueFactory-CYxWLtWJ.js');
+var controlUtils = require('./controlUtils-CcUudA6Q.js');
+var multipleValueFactory = require('./multipleValueFactory-Cpbuo1aI.js');
 var disableEventsFactory = require('./disableEventsFactory-B1wvz4el.js');
-require('./store-X-DFw257.js');
+require('./store-DNuNXgOq.js');
-const dsOptionsCss = () => `.ds-options__SPFJ1E__inner.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.ds-options__SPFJ1E.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0;font-family:var(--ds-fontFamily-body)}.ds-options__SPFJ1E.sc-ds-options:focus{outline:none}.ds-options__SPFJ1E__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__SPFJ1E__top-scrim.sc-ds-options,.ds-options__SPFJ1E__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__SPFJ1E__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__SPFJ1E__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__SPFJ1E.has-top-scrim.sc-ds-options .ds-options__SPFJ1E__top-scrim.sc-ds-options{display:block}.ds-options__SPFJ1E.has-bottom-scrim.sc-ds-options .ds-options__SPFJ1E__bottom-scrim.sc-ds-options{display:block}.ds-options__SPFJ1E.sc-ds-options li.sc-ds-options{cursor:pointer}.ds-options__SPFJ1E.sc-ds-options li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}`;
+const dsOptionsCss = () => `.ds-options__GqWYnG__inner.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.ds-options__GqWYnG.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0;font-family:var(--ds-fontFamily-body)}.ds-options__GqWYnG.sc-ds-options:focus{outline:none}.ds-options__GqWYnG__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__GqWYnG__top-scrim.sc-ds-options,.ds-options__GqWYnG__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__GqWYnG__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__GqWYnG__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__GqWYnG.has-top-scrim.sc-ds-options .ds-options__GqWYnG__top-scrim.sc-ds-options{display:block}.ds-options__GqWYnG.has-bottom-scrim.sc-ds-options .ds-options__GqWYnG__bottom-scrim.sc-ds-options{display:block}.ds-options__GqWYnG.sc-ds-options li.sc-ds-options{cursor:pointer}.ds-options__GqWYnG.sc-ds-options li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}`;
 const optionsIdGenerator = utils.idGenerator('ds-options');
 const DsOptions = class {
@@ -156,7 +156,7 @@ const DsOptions = class {
 };
 DsOptions.style = dsOptionsCss();
-const dsSelectCss = () => `.sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){:not(:has(.ds-select__SPFJ1E--full-width)).sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.ds-select__SPFJ1E-custom.sc-ds-select{position:relative;display:flex;align-items:center;border: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:2.75rem;width:100%}.ds-select__SPFJ1E-custom__dropdown-icon.sc-ds-select{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__SPFJ1E-custom-wrapper.sc-ds-select{position:relative}.ds-select__SPFJ1E-custom.sc-ds-select .ds-options__SPFJ1E.sc-ds-select{display:block}.ds-select__SPFJ1E-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__SPFJ1E-custom-input-container.sc-ds-select:has(.ds-select__SPFJ1E-custom__clear-button:hover) .ds-select__SPFJ1E-custom.sc-ds-select{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__SPFJ1E-custom.sc-ds-select:not(.ds-select__SPFJ1E-custom--open,.ds-select__SPFJ1E-custom--invalid.sc-ds-select,.ds-select__SPFJ1E-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__SPFJ1E-custom.sc-ds-select:active:not(.ds-select__SPFJ1E-custom--open,.ds-select__SPFJ1E-custom--invalid.sc-ds-select,.ds-select__SPFJ1E-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__SPFJ1E-custom--open.sc-ds-select,.ds-select__SPFJ1E-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__SPFJ1E-custom--open.sc-ds-select:not(.ds-select__SPFJ1E-custom--open--invalid,.ds-select__SPFJ1E-custom.sc-ds-select:focus-visible--invalid),.ds-select__SPFJ1E-custom.sc-ds-select:focus-visible:not(.ds-select__SPFJ1E-custom--open--invalid,.ds-select__SPFJ1E-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__SPFJ1E-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__SPFJ1E-custom--disabled.sc-ds-select .ds-select__SPFJ1E-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__SPFJ1E-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__SPFJ1E-custom--invalid.sc-ds-select:not(.ds-select__SPFJ1E-custom--invalid--open,.ds-select__SPFJ1E-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__SPFJ1E-custom--invalid.sc-ds-select:not(.ds-select__SPFJ1E-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__SPFJ1E-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__SPFJ1E-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-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-xSmall)}.ds-select__SPFJ1E-custom--has-icon.sc-ds-select .ds-select__SPFJ1E-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__SPFJ1E-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__SPFJ1E-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__SPFJ1E-custom__selected-option__text--none-selected.sc-ds-select{color:var(--ds-textColor-secondary)}.ds-select__SPFJ1E-custom__selected-option__text--disabled.sc-ds-select{color:var(--ds-textColor-disabled-onLight)}.ds-select__SPFJ1E-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__SPFJ1E-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__SPFJ1E-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__SPFJ1E-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__SPFJ1E-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__SPFJ1E-custom__clear-button.sc-ds-select{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__SPFJ1E-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__SPFJ1E-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__SPFJ1E-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__SPFJ1E-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__SPFJ1E-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__SPFJ1E-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__SPFJ1E-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__SPFJ1E-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__SPFJ1E-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__SPFJ1E-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__SPFJ1E-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__GqWYnG--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__GqWYnG-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__GqWYnG-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__GqWYnG-custom-wrapper.sc-ds-select{position:relative}.ds-select__GqWYnG-custom.sc-ds-select .ds-options__GqWYnG.sc-ds-select{display:block}.ds-select__GqWYnG-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__GqWYnG-custom-input-container.sc-ds-select:has(.ds-select__GqWYnG-custom__clear-button:hover) .ds-select__GqWYnG-custom.sc-ds-select{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__GqWYnG-custom.sc-ds-select:not(.ds-select__GqWYnG-custom--open,.ds-select__GqWYnG-custom--invalid.sc-ds-select,.ds-select__GqWYnG-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__GqWYnG-custom.sc-ds-select:active:not(.ds-select__GqWYnG-custom--open,.ds-select__GqWYnG-custom--invalid.sc-ds-select,.ds-select__GqWYnG-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__GqWYnG-custom--open.sc-ds-select,.ds-select__GqWYnG-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__GqWYnG-custom--open.sc-ds-select:not(.ds-select__GqWYnG-custom--open--invalid,.ds-select__GqWYnG-custom.sc-ds-select:focus-visible--invalid),.ds-select__GqWYnG-custom.sc-ds-select:focus-visible:not(.ds-select__GqWYnG-custom--open--invalid,.ds-select__GqWYnG-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__GqWYnG-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__GqWYnG-custom--disabled.sc-ds-select .ds-select__GqWYnG-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__GqWYnG-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__GqWYnG-custom--invalid.sc-ds-select:not(.ds-select__GqWYnG-custom--invalid--open,.ds-select__GqWYnG-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__GqWYnG-custom--invalid.sc-ds-select:not(.ds-select__GqWYnG-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__GqWYnG-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__GqWYnG-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__GqWYnG-custom--has-icon.sc-ds-select .ds-select__GqWYnG-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__GqWYnG-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__GqWYnG-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__GqWYnG-custom__selected-option__text--none-selected.sc-ds-select{color:var(--ds-textColor-secondary)}.ds-select__GqWYnG-custom__selected-option__text--disabled.sc-ds-select{color:var(--ds-textColor-disabled-onLight)}.ds-select__GqWYnG-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__GqWYnG-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__GqWYnG-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__GqWYnG-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__GqWYnG-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__GqWYnG-custom__clear-button.sc-ds-select{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__GqWYnG-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__GqWYnG-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__GqWYnG-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__GqWYnG-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__GqWYnG-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__GqWYnG-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__GqWYnG-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__GqWYnG-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__GqWYnG-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__GqWYnG-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__GqWYnG-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__GqWYnG-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 selectIdGenerator = utils.idGenerator('ds-select');
 const defaultTextFns = {
@@ -194,12 +194,14 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
     dsId = selectIdGenerator.next().value;
     dsName = this.dsId;
     dsLabel;
+    dsAssistiveText;
     dsPlaceholder;
     dsVariant = 'default';
     dsClearable = true;
     dsDisabled = false;
     dsErrorText = '';
     dsIcon;
+    dsIconSize;
     dsValue = null;
     dsLoading = false;
     dsLoadingText;
@@ -208,6 +210,7 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
     dsOptionsErrorText;
     dsFullWidth = false;
     dsRequired = false;
+    dsAriaLabel;
     activeOption = null;
     selectedOptions = [];
     selectedOptionsLabel;
@@ -218,27 +221,21 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
     iconRef;
     badgeRef;
     badgeContainerOffset = null;
-    texts = {
-        dsPlaceholder: controlUtils.selectAnOption(),
-    };
     feedback = [];
-    inputValidityId;
     get isNative() {
         return this.dsVariant === 'native';
     }
     get isMultiple() {
         return this.dsVariant === 'multiple';
     }
-    getInputValidityId() {
-        if (!this.inputValidityId) {
-            this.inputValidityId = `${this.dsId}-validity`;
-        }
-        return this.inputValidityId;
+    get inputValidityId() {
+        return `${this.dsId}-validity`;
     }
-    setTexts() {
-        this.texts = {
-            dsPlaceholder: getTextValue('dsPlaceholder', this.dsPlaceholder),
-        };
+    get assistiveTextId() {
+        return `${this.dsId}-assistive-text`;
+    }
+    get placeholder() {
+        return getTextValue('dsPlaceholder', this.dsPlaceholder);
     }
     handleInvalid = (e) => {
         e.preventDefault();
@@ -270,7 +267,6 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
     }
     componentWillLoad() {
         this.setDisableEventEmits(true);
-        this.setTexts();
         this.inheritedAttributes = {
             ...attributes.inheritAttributes(this, this.el),
             ...attributes.inheritAriaAttributes(this.el, this.isNative
@@ -289,7 +285,7 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
     }
     disconnectedCallback() {
         if (this.internals?.form && !this.isNative) {
-            this.el.addEventListener('invalid', this.handleInvalid);
+            this.el.removeEventListener('invalid', this.handleInvalid);
         }
         this.debouncedResetFeedback.cancel();
     }
@@ -315,9 +311,6 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
             this.customSelectRef?.focus();
         }
     }
-    handleLanguageChange() {
-        this.setTexts();
-    }
     onFocusIn() {
         this.hasFocus = true;
     }
@@ -418,12 +411,6 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
     clearButtonRefObserver() {
         this.getBadgeContainerWidthOffset();
     }
-    textPropObserver(newValue, _oldValue, propName) {
-        this.texts = {
-            ...this.texts,
-            [propName]: getTextValue(propName, newValue),
-        };
-    }
     valueObserver(newValue) {
         if (this.isNative)
             return;
@@ -514,7 +501,7 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
     };
     renderNativeSelect() {
         const DsSelectNative = utils.transformTagName('ds-select-native', 'ds-select', this.el);
-        return (index.h(DsSelectNative, { dsId: this.dsId, dsLabel: this.dsLabel, dsPlaceholder: this.texts.dsPlaceholder, dsIcon: this.dsIcon, dsName: this.dsName || this.dsId, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsRequired: this.dsRequired, dsFullWidth: this.dsFullWidth, dsValue: this.getValueItem(0) || '', onDsChange: (e) => {
+        return (index.h(DsSelectNative, { dsId: this.dsId, dsLabel: this.dsLabel, dsPlaceholder: this.placeholder, dsIcon: this.dsIcon, dsIconSize: this.dsIconSize, dsName: this.dsName || this.dsId, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsRequired: this.dsRequired, dsFullWidth: this.dsFullWidth, dsAriaLabel: this.dsAriaLabel, dsValue: this.getValueItem(0) || '', onDsChange: (e) => {
                 this.value = this.toValue(e.detail);
             }, onDsValidity: (e) => {
                 this.dsValidity.emit(e.detail);
@@ -527,7 +514,7 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
         const labelId = `${this.dsId}-label`;
         const badgeId = `${this.dsId}-badge`;
         const selectedOptionId = `${this.dsId}-selected-option`;
-        const ariaDescribedBy = this.dsErrorText ? this.getInputValidityId() : undefined;
+        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.inputValidityId].filter(Boolean).join(' ') || undefined;
         const optionsContainerId = `ds-select-options-${this.dsId}`;
         const customSelectClass = `${baseClass}-custom`;
         const DsBadge = utils.transformTagName('ds-badge', 'ds-select', this.el);
@@ -538,7 +525,7 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
         const clearButtonAriaLabel = controlUtils.removeSelection(true);
         return (index.h("div", { style: {
                 '--badge-container-offset': this.badgeContainerOffset ? `${this.badgeContainerOffset}px` : undefined,
-            } }, index.h(DsControlLabel, { dsId: labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, onClick: () => {
+            } }, index.h(DsControlLabel, { dsId: labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, onClick: () => {
                 this.customSelectRef?.focus();
                 this.toggleDropdown();
             } }, index.h("slot", { name: "label" })), index.h("div", { class: `${customSelectClass}-wrapper` }, index.h("div", { class: `${customSelectClass}-input-container` }, index.h("div", { id: this.dsId, ref: el => (this.customSelectRef = el), class: index$1.classNames(`${customSelectClass}`, {
@@ -548,7 +535,7 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
                 [`${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-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-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();
                 }
@@ -556,15 +543,14 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
                 if (!this.dsDisabled) {
                     this.handleKeyDown(event);
                 }
-            } }, index.h("div", { class: `${customSelectClass}__selected-option` }, this.dsIcon && index.h(this.DsIcon, { class: `${customSelectClass}__selected-option__placeholder-icon`, dsName: this.dsIcon }), index.h("span", { id: selectedOptionId, class: index$1.classNames(`${customSelectClass}__selected-option__text`, {
+            } }, index.h("div", { class: `${customSelectClass}__selected-option` }, this.dsIcon && index.h(this.DsIcon, { class: `${customSelectClass}__selected-option__placeholder-icon`, dsName: this.dsIcon, dsSize: this.dsIconSize }), index.h("span", { id: selectedOptionId, class: index$1.classNames(`${customSelectClass}__selected-option__text`, {
                 [`${customSelectClass}__selected-option__text--none-selected`]: noneSelected,
                 [`${customSelectClass}__selected-option__text--disabled`]: this.dsDisabled,
-            }) }, this.selectedOptionsLabel || this.texts.dsPlaceholder)), index.h(this.DsIcon, { ref: el => {
+            }) }, this.selectedOptionsLabel || this.placeholder)), index.h(this.DsIcon, { ref: el => {
                 this.iconRef = el;
-            }, class: {
-                [`${customSelectClass}__dropdown-icon`]: true,
+            }, class: index$1.classNames(`${customSelectClass}__dropdown-icon`, {
                 [`${customSelectClass}__dropdown-icon--has-clear-button`]: this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled,
-            }, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), this.isMultiple && this.selectedOptions?.length > 0 && (index.h("div", { class: `${customSelectClass}__badge-container` }, index.h(DsBadge, { ref: el => (this.badgeRef = el), dsId: badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: controlUtils.selections() }))), this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled && (index.h(DsButton, { ref: el => {
+            }), dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), this.isMultiple && this.selectedOptions?.length > 0 && (index.h("div", { class: `${customSelectClass}__badge-container` }, index.h(DsBadge, { ref: el => (this.badgeRef = el), dsId: badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: controlUtils.selections() }))), this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled && (index.h(DsButton, { ref: el => {
                 this.clearButtonRef = el;
             }, class: `${customSelectClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", dsIconTitle: clearButtonAriaLabel, dsIconAriaLabel: clearButtonAriaLabel, onClick: event => {
                 event.stopPropagation();
@@ -581,17 +567,17 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
             }, onClick: e => {
                 const option = e.target.closest(this.DsOption);
                 this.handleOptionClick(option);
-            } }, index.h(DsOptionsMessage, { dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsError: this.dsOptionsError, dsErrorTitle: this.dsOptionsErrorTitle, dsErrorText: this.dsOptionsErrorText }), index.h(DsOptions, { dsActiveIndex: this.activeIndex, onDsActiveIndexChange: e => {
+            } }, index.h(DsOptionsMessage, { dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsError: this.dsOptionsError, dsErrorTitle: this.dsOptionsErrorTitle, dsErrorText: this.dsOptionsErrorText }), index.h(DsOptions, { dsActiveIndex: this.activeIndex ?? undefined, onDsActiveIndexChange: e => {
                 this.activeIndex = e.detail;
             }, onDsEsc: () => {
                 this.isOpen = false;
             }, dsLabelId: labelId, dsAriaMultiselectable: this.isMultiple }, index.h("slot", null)))), this.internals?.form &&
             this.internals?.validity.valid &&
-            this.selectedOptions.map(option => index.h("input", { type: "hidden", name: this.dsName, value: option.dsValue, key: option.dsValue })), index.h(this.DsInputValidity, { id: this.getInputValidityId(), dsText: this.dsErrorText, dsType: "error" }), index.h(this.DsFeedback, { dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
+            this.selectedOptions.map(option => index.h("input", { type: "hidden", name: this.dsName, value: option.dsValue, key: option.dsValue })), index.h(this.DsInputValidity, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }), index.h(this.DsFeedback, { dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
     }
     render() {
         const baseClass = cx.cx('ds-select');
-        return (index.h(index.Host, { key: '3d3b24db037bfcc1799c04694dd66226cbf7db51', ...utils.ifDefined('name', this.isNative ? undefined : this.dsName) }, index.h("div", { key: '3ee46f44fb1489380eb1759a1ada5f8f7493f678', tabIndex: -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
+        return (index.h(index.Host, { key: '9baecfe636acf17e0281a7d948183e368ef84d39', ...utils.ifDefined('name', this.isNative ? undefined : this.dsName) }, index.h("div", { key: '4505bc36839629445cf84167c8eb24676f87c8ee', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -604,9 +590,6 @@ const DsSelect = class extends index.Mixin(multipleValueFactory.multipleValueFac
         "badgeRef": [{
                 "clearButtonRefObserver": 0
             }],
-        "dsPlaceholder": [{
-                "textPropObserver": 0
-            }],
         "value": [{
                 "valueObserver": 0
             }],

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

@@ -1,12 +1,12 @@
 'use strict';
-var index = require('./index-BSwr4Ukh.js');
-var cx = require('./cx-D-SFhp5j.js');
-var paginationFactory = require('./paginationFactory-BdmK4Pho.js');
-require('./paginationContext-B180TuuP.js');
-require('./utils-DOIzXqfM.js');
+var index = require('./index-BNOD57K-.js');
+var cx = require('./cx-Bz5Mpvyi.js');
+var paginationFactory = require('./paginationFactory-DZBVF8vr.js');
+require('./paginationContext-CEG8A2nR.js');
+require('./utils-DMgbvnde.js');
-const dsPaginationEllipsisCss = () => `.sc-ds-pagination-ellipsis-h{display:inline-flex;align-items:center;justify-content:center}.ds-pagination-ellipsis__SPFJ1E.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__GqWYnG.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 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: '0a3e284f6c60c4b36ac53d0b42de4e52f9e1e989', class: hostClass }, index.h("span", { key: '879286f1d496200d403161b0039fca97e6e2133c', class: baseClass, role: "img", "aria-label": ariaLabel }, "\u2026")));
+        return (index.h(index.Host, { key: '37dba82fa26a90751ed6df473e90be5f38cdeeb8', class: hostClass }, index.h("span", { key: '1f5af2af65bca8c1d8526819308792c7cc463084', class: baseClass, role: "img", "aria-label": ariaLabel }, "\u2026")));
     }
 };
 DsPaginationEllipsis.style = dsPaginationEllipsisCss();

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

@@ -1,13 +1,13 @@
 'use strict';
-var index = require('./index-BSwr4Ukh.js');
+var index = require('./index-BNOD57K-.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-D-SFhp5j.js');
-var utils = require('./utils-DOIzXqfM.js');
-var paginationFactory = require('./paginationFactory-BdmK4Pho.js');
-require('./paginationContext-B180TuuP.js');
+var cx = require('./cx-Bz5Mpvyi.js');
+var utils = require('./utils-DMgbvnde.js');
+var paginationFactory = require('./paginationFactory-DZBVF8vr.js');
+require('./paginationContext-CEG8A2nR.js');
-const dsPaginationItemCss = () => `.ds-pagination-item__SPFJ1E.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__SPFJ1E--disabled.sc-ds-pagination-item{cursor:default}[slot=full].sc-ds-pagination-item-h .ds-pagination-item__SPFJ1E--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__SPFJ1E--next.sc-ds-pagination-item{--ds-link-cta-padding-inline-end:var(--ds-spacing-3xSmall)}`;
+const dsPaginationItemCss = () => `.ds-pagination-item__GqWYnG.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__GqWYnG--disabled.sc-ds-pagination-item{cursor:default}[slot=full].sc-ds-pagination-item-h .ds-pagination-item__GqWYnG--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__GqWYnG--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) {

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

@@ -1,13 +1,13 @@
 'use strict';
-var index = require('./index-BSwr4Ukh.js');
+var index = require('./index-BNOD57K-.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-D-SFhp5j.js');
-var utils = require('./utils-DOIzXqfM.js');
-var paginationFactory = require('./paginationFactory-BdmK4Pho.js');
-require('./paginationContext-B180TuuP.js');
+var cx = require('./cx-Bz5Mpvyi.js');
+var utils = require('./utils-DMgbvnde.js');
+var paginationFactory = require('./paginationFactory-DZBVF8vr.js');
+require('./paginationContext-CEG8A2nR.js');
-const dsPaginationPageCss = () => `.sc-ds-pagination-page-h{display:inline-flex;align-items:center}.ds-pagination-page__SPFJ1E.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__SPFJ1E--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__GqWYnG.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__GqWYnG--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 DsPaginationPage = class extends index.Mixin(paginationFactory.paginationFactory) {
     constructor(hostRef) {

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

@@ -1,18 +1,20 @@
 'use strict';
-var index = require('./index-BSwr4Ukh.js');
+var index = require('./index-BNOD57K-.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-D-SFhp5j.js');
-var controlUtils = require('./controlUtils-BLiRltjz.js');
-var paginationUtils = require('./paginationUtils-DIpA_ywV.js');
-var paginationContext = require('./paginationContext-B180TuuP.js');
-require('./store-X-DFw257.js');
-require('./utils-DOIzXqfM.js');
+var cx = require('./cx-Bz5Mpvyi.js');
+var controlUtils = require('./controlUtils-CcUudA6Q.js');
+var paginationUtils = require('./paginationUtils-Dl6TypR4.js');
+var paginationContext = require('./paginationContext-CEG8A2nR.js');
+var componentFactory = require('./componentFactory-BmBVCz8f.js');
+require('./store-DNuNXgOq.js');
+require('./utils-DMgbvnde.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__SPFJ1E{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__SPFJ1E__compact slot,.ds-pagination__SPFJ1E__full slot{display:flex;align-items:center;gap:var(--ds-spacing-3xSmall);flex-wrap:wrap}.ds-pagination__SPFJ1E--compact .ds-pagination__SPFJ1E__compact,.ds-pagination__SPFJ1E--auto .ds-pagination__SPFJ1E__compact{width:100%}@media (min-width: 30rem){.ds-pagination__SPFJ1E--compact .ds-pagination__SPFJ1E__compact,.ds-pagination__SPFJ1E--auto .ds-pagination__SPFJ1E__compact{width:auto}}.ds-pagination__SPFJ1E--compact .ds-pagination__SPFJ1E__compact slot,.ds-pagination__SPFJ1E--auto .ds-pagination__SPFJ1E__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__SPFJ1E ::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__SPFJ1E--compact .ds-pagination__SPFJ1E__full{display:none}.ds-pagination__SPFJ1E--full .ds-pagination__SPFJ1E__compact{display:none}.ds-pagination__SPFJ1E--auto .ds-pagination__SPFJ1E__full{display:none}@media (min-width: 60rem){.ds-pagination__SPFJ1E--auto .ds-pagination__SPFJ1E__full{display:contents}.ds-pagination__SPFJ1E--auto .ds-pagination__SPFJ1E__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__GqWYnG{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__GqWYnG__compact slot,.ds-pagination__GqWYnG__full slot{display:flex;align-items:center;gap:var(--ds-spacing-3xSmall);flex-wrap:wrap}.ds-pagination__GqWYnG--compact .ds-pagination__GqWYnG__compact,.ds-pagination__GqWYnG--auto .ds-pagination__GqWYnG__compact{width:100%}@media (min-width: 30rem){.ds-pagination__GqWYnG--compact .ds-pagination__GqWYnG__compact,.ds-pagination__GqWYnG--auto .ds-pagination__GqWYnG__compact{width:auto}}.ds-pagination__GqWYnG--compact .ds-pagination__GqWYnG__compact slot,.ds-pagination__GqWYnG--auto .ds-pagination__GqWYnG__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__GqWYnG ::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__GqWYnG--compact .ds-pagination__GqWYnG__full{display:none}.ds-pagination__GqWYnG--full .ds-pagination__GqWYnG__compact{display:none}.ds-pagination__GqWYnG--auto .ds-pagination__GqWYnG__full{display:none}@media (min-width: 60rem){.ds-pagination__GqWYnG--auto .ds-pagination__GqWYnG__full{display:contents}.ds-pagination__GqWYnG--auto .ds-pagination__GqWYnG__compact{display:none}}`;
-const DsPagination = class {
+const DsPagination = class extends index.Mixin(componentFactory.componentFactory('ds-pagination')) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
     }
     get el() { return index.getElement(this); }
@@ -56,6 +58,7 @@ const DsPagination = class {
         this.storeContext();
     }
     componentDidLoad() {
+        this.componentMounted();
         this.updateContext();
     }
     componentDidUpdate() {
@@ -98,10 +101,10 @@ const DsPagination = class {
         const classes = index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsLayout}`);
         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: '13154d7bb5db1dd611d978201cadc8e1c53025d4', class: classes, "aria-label": this.dsAriaLabel || paginationUtils.pagination(), style: {
+        return (index.h("nav", { key: '3a2b18b268ab372ecb529492f9a169ba00468fbe', class: classes, "aria-label": this.dsAriaLabel || paginationUtils.pagination(), style: {
                 '--ds-pagination-font-size': fontSize,
                 '--ds-link-cta-min-width': minSize,
-            } }, index.h("div", { key: '044c3297eda5b36b6bf8f094dcca244002c3daa3', class: `${baseClass}__compact` }, index.h("slot", { key: '1a8293fe80d2f7e639f9b46cfa37c51c90244cd8', name: "compact", onSlotchange: () => this.updateContext() })), index.h("div", { key: 'e93e090e3386db2cdaa478f99718574166febe41', class: `${baseClass}__full` }, index.h("slot", { key: 'ad39a4e5b068e72d98ef8551f6f9ec92de275641', name: "full", onSlotchange: () => this.updateContext() }))));
+            } }, index.h("div", { key: '126a1a2c26939b1349709efd357e666bf52517ed', class: `${baseClass}__compact` }, index.h("slot", { key: 'b6d3ac267b0c23dff31cec2b583d88fa101e5ddb', name: "compact", onSlotchange: () => this.updateContext() })), index.h("div", { key: '3743f91508ddb26dd447bdd008c93169b394620c', class: `${baseClass}__full` }, index.h("slot", { key: '92c981f5dcdefd87d6e21a48a93528f12d369a1e', name: "full", onSlotchange: () => this.updateContext() }))));
     }
     static get watchers() { return {
         "dsCurrentPage": [{