npm - @uh-design-system/component-library - Versions diffs - 1.5.2 → 1.6.0-rc.1 - Mend

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

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 (2711) hide show

package/dist/esm/ds-options_2.entry.js CHANGED Viewed

@@ -1,16 +1,15 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h, f as forceUpdate, H as Host } from './index-KrLJvXEc.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h, f as forceUpdate, H as Host } from './index-DC3hrKbf.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { t as transformTagName, c as componentOnReady, a as debounce, i as ifDefined, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { c as cx } from './cx-COyyiGn2.js';
-import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
-import { S as SCRIM_HEIGHT, F as FEEDBACK_RESET_TIMEOUT } from './constants-CLNvzo86.js';
-import { m as multiselectable, y as selectAnOption, b as atLeastOneOption, e as thereAreOptionsToBrowse, l as loadingOptions, w as weCouldNotLoadOptions, f as tryAgainOrIfTheProblemPersists, r as removeSelection, h as selections } from './controlUtils-Ddynysnm.js';
-import { c as componentFactory } from './componentFactory-Ct4nz3XH.js';
-import { m as multipleValueFactory } from './multipleValueFactory-Cobyje8Z.js';
-import { d as disableEventsFactory } from './disableEventsFactory-Dj3sSg-t.js';
-import './store-Cj7kJXiG.js';
+import { t as transformTagName, S as SCRIM_HEIGHT, c as componentOnReady, e as debounce, F as FEEDBACK_RESET_TIMEOUT, a as ifDefined, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { c as cx } from './cx-DAxPJw14.js';
+import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-Dzq9qJk7.js';
+import { m as multiselectable, y as selectAnOption, b as atLeastOneOption, e as thereAreOptionsToBrowse, l as loadingOptions, w as weCouldNotLoadOptions, f as tryAgainOrIfTheProblemPersists, r as removeSelection, h as selections } from './controlUtils-CuF9Fnfg.js';
+import { c as componentFactory } from './componentFactory-DmszWHOG.js';
+import { m as multipleValueFactory } from './multipleValueFactory-Cn-bjcP5.js';
+import { d as disableEventsFactory } from './disableEventsFactory-DeCjjcHf.js';
+import './store-DjcJcxKC.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__izAhxK__inner.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.ds-options__izAhxK.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0;font-family:var(--ds-fontFamily-body)}.ds-options__izAhxK.sc-ds-options:focus{outline:none}.ds-options__izAhxK__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__izAhxK__top-scrim.sc-ds-options,.ds-options__izAhxK__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__izAhxK__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__izAhxK__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__izAhxK.has-top-scrim.sc-ds-options .ds-options__izAhxK__top-scrim.sc-ds-options{display:block}.ds-options__izAhxK.has-bottom-scrim.sc-ds-options .ds-options__izAhxK__bottom-scrim.sc-ds-options{display:block}.ds-options__izAhxK.sc-ds-options li.sc-ds-options{cursor:pointer}.ds-options__izAhxK.sc-ds-options li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}`;
 const DsOptions = class extends Mixin(componentFactory('ds-options')) {
     constructor(hostRef) {
@@ -53,10 +52,10 @@ const DsOptions = class extends Mixin(componentFactory('ds-options')) {
     updateScrimClasses = () => {
         if (!this.optionsListRef || !this.optionsListInnerRef)
             return;
-        this.hasBottomScrim = !(Math.ceil(this.optionsListInnerRef.scrollTop + this.optionsListInnerRef.clientHeight) >= this.optionsListInnerRef.scrollHeight);
+        this.hasBottomScrim = Math.ceil(this.optionsListInnerRef.scrollTop + this.optionsListInnerRef.clientHeight) < this.optionsListInnerRef.scrollHeight;
         this.hasTopScrim = this.optionsListInnerRef.scrollTop > 0;
         const groupLabels = this.optionsListRef.querySelectorAll(`.${cx('ds-option-group')}__label`);
-        groupLabels.forEach(label => {
+        for (const label of groupLabels) {
             const rect = label.getBoundingClientRect();
             const parentRect = this.optionsListRef.getBoundingClientRect();
             if (this.optionsListInnerRef.scrollTop > 0 && rect.top <= parentRect.top && rect.bottom > parentRect.top) {
@@ -65,7 +64,7 @@ const DsOptions = class extends Mixin(componentFactory('ds-options')) {
             else {
                 label.classList.remove(`${cx('ds-option-group')}__label__shadow`);
             }
-        });
+        }
     };
     get DsOptionTag() {
         return transformTagName('ds-option', 'ds-options', this.el);
@@ -90,7 +89,6 @@ const DsOptions = class extends Mixin(componentFactory('ds-options')) {
         }
         if (this.hasTopScrim && optionRect.top < optionsListInnerRect.top + SCRIM_HEIGHT) {
             this.optionsListInnerRef.scrollTop -= optionsListInnerRect.top + SCRIM_HEIGHT - optionRect.top;
-            return;
         }
     };
     moveToNextEnabledOption(optionEls, direction) {
@@ -142,10 +140,10 @@ const DsOptions = class extends Mixin(componentFactory('ds-options')) {
     };
     render() {
         const baseClass = cx('ds-options');
-        return (h("div", { key: 'f7263a82d5100ea95eee5db8ff9be591c9f38c41', id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: '4e0aca6cfcb613d0920454fede0001b5973f95a0', id: this.dsId, class: classNames(baseClass, {
                 'has-bottom-scrim': this.hasBottomScrim,
                 'has-top-scrim': this.hasTopScrim,
-            }), role: "listbox", tabindex: 0, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses, "aria-multiselectable": this.dsAriaMultiselectable ? 'true' : 'false', "aria-label": this.dsAriaMultiselectable ? multiselectable() : undefined, "aria-labelledby": [this.dsLabelId, this.dsId].filter(Boolean).join(' '), ...this.inheritedAttributes }, h("div", { key: '4ca1b1fbe2acb2a03497bb811f4d84a71110c07a', class: `${baseClass}__inner`, ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: 'e7cb51b51f04af2835fc16ae28f57606a31da2f7', class: `${baseClass}__top-scrim`, "aria-hidden": "true" }), h("slot", { key: 'ac9bea619694fb8b1acb1c7bf83ff6e09dc00c08' }), h("div", { key: '060f23986a4c24648b976ba9562e0553c7e9a0c5', class: `${baseClass}__bottom-scrim`, "aria-hidden": "true" }))));
+            }), role: "listbox", tabindex: 0, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses, "aria-multiselectable": this.dsAriaMultiselectable ? 'true' : 'false', "aria-label": this.dsAriaMultiselectable ? multiselectable() : undefined, "aria-labelledby": [this.dsLabelId, this.dsId].filter(Boolean).join(' '), ...this.inheritedAttributes }, h("div", { key: 'ff849fbb4c6c45bcca8321c3d4a32e36eb2f77d9', class: `${baseClass}__inner`, ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: 'b5f48033e0b651b3a4ebc472c0fe5ae6c4d7f9a3', class: `${baseClass}__top-scrim`, "aria-hidden": "true" }), h("slot", { key: '230d60fd69dbc9b96966f1179826a64a076015b2' }), h("div", { key: '37e8f33bf1eca761051db1e015fc484deaade18d', class: `${baseClass}__bottom-scrim`, "aria-hidden": "true" }))));
     }
     static get watchers() { return {
         "dsActiveIndex": [{
@@ -155,7 +153,7 @@ const DsOptions = class extends Mixin(componentFactory('ds-options')) {
 };
 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__izAhxK--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__izAhxK-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__izAhxK-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__izAhxK-custom-wrapper.sc-ds-select{position:relative}.ds-select__izAhxK-custom.sc-ds-select .ds-options__izAhxK.sc-ds-select{display:block}.ds-select__izAhxK-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__izAhxK-custom-input-container.sc-ds-select:has(.ds-select__izAhxK-custom__clear-button:hover) .ds-select__izAhxK-custom.sc-ds-select{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__izAhxK-custom.sc-ds-select:not(.ds-select__izAhxK-custom--open,.ds-select__izAhxK-custom--invalid.sc-ds-select,.ds-select__izAhxK-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__izAhxK-custom.sc-ds-select:active:not(.ds-select__izAhxK-custom--open,.ds-select__izAhxK-custom--invalid.sc-ds-select,.ds-select__izAhxK-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__izAhxK-custom--open.sc-ds-select,.ds-select__izAhxK-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__izAhxK-custom--open.sc-ds-select:not(.ds-select__izAhxK-custom--open--invalid,.ds-select__izAhxK-custom.sc-ds-select:focus-visible--invalid),.ds-select__izAhxK-custom.sc-ds-select:focus-visible:not(.ds-select__izAhxK-custom--open--invalid,.ds-select__izAhxK-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__izAhxK-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__izAhxK-custom--disabled.sc-ds-select .ds-select__izAhxK-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__izAhxK-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__izAhxK-custom--invalid.sc-ds-select:not(.ds-select__izAhxK-custom--invalid--open,.ds-select__izAhxK-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__izAhxK-custom--invalid.sc-ds-select:not(.ds-select__izAhxK-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__izAhxK-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__izAhxK-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__izAhxK-custom--has-icon.sc-ds-select .ds-select__izAhxK-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__izAhxK-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__izAhxK-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__izAhxK-custom__selected-option__text--none-selected.sc-ds-select{color:var(--ds-textColor-secondary)}.ds-select__izAhxK-custom__selected-option__text--disabled.sc-ds-select{color:var(--ds-textColor-disabled-onLight)}.ds-select__izAhxK-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__izAhxK-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__izAhxK-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__izAhxK-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__izAhxK-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__izAhxK-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__izAhxK-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__izAhxK-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__izAhxK-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__izAhxK-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__izAhxK-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__izAhxK-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__izAhxK-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__izAhxK-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__izAhxK-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__izAhxK-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__izAhxK-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__izAhxK-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__izAhxK-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: selectAnOption,
@@ -367,17 +365,19 @@ const DsSelect = class extends Mixin(componentFactory('ds-select', { stopRootTra
             event.preventDefault();
             this.isOpen = true;
             this.updateActiveIndex();
-            window.requestAnimationFrame(() => {
+            globalThis.requestAnimationFrame(() => {
                 const optionsList = this.el.querySelector(`.${cx('ds-options')}`);
                 optionsList?.focus();
             });
         }
     }
     getBadgeContainerWidthOffset = async () => {
+        if (!this.clearButtonRef || !this.badgeRef)
+            return;
         await componentOnReady(this.clearButtonRef);
         await componentOnReady(this.badgeRef);
-        const clearButtonWidth = this.clearButtonRef?.getBoundingClientRect().width || 0;
-        const badgeContainerWidth = this.badgeRef?.getBoundingClientRect().width || 0;
+        const clearButtonWidth = this.clearButtonRef.getBoundingClientRect().width || 0;
+        const badgeContainerWidth = this.badgeRef.getBoundingClientRect().width || 0;
         this.badgeContainerOffset = clearButtonWidth && badgeContainerWidth ? clearButtonWidth + badgeContainerWidth : null;
     };
     getAllOptions() {
@@ -401,11 +401,11 @@ const DsSelect = class extends Mixin(componentFactory('ds-select', { stopRootTra
     }
     activeIndexObserver(newValue) {
         const options = this.getAllOptions();
-        this.activeOption = newValue !== null ? options[newValue] : null;
-        options.forEach((opt, idx) => {
+        this.activeOption = newValue === null ? null : options[newValue];
+        for (const [idx, opt] of options.entries()) {
             opt.dsActive = idx === this.activeIndex;
             opt.dsSelected = this.inValue(opt.dsValue);
-        });
+        }
     }
     clearButtonRefObserver() {
         this.getBadgeContainerWidthOffset();
@@ -424,8 +424,11 @@ const DsSelect = class extends Mixin(componentFactory('ds-select', { stopRootTra
         const removedValues = oldValues.filter(val => !newValues.includes(val));
         const addedValues = newValues.filter(val => !oldValues.includes(val));
         const hasChanged = removedValues.length > 0 || addedValues.length > 0;
-        oldValue?.forEach(opt => (opt.dsSelected = false));
-        newValue.forEach(opt => (opt.dsSelected = true));
+        if (oldValue)
+            for (const opt of oldValue)
+                opt.dsSelected = false;
+        for (const opt of newValue)
+            opt.dsSelected = true;
         const shouldEmit = this.getShouldEmit([hasChanged]);
         this._setDisableEventEmits(true);
         if (shouldEmit) {
@@ -438,12 +441,8 @@ const DsSelect = class extends Mixin(componentFactory('ds-select', { stopRootTra
         });
     }
     hasFocusObserver(newValue) {
-        if (newValue) {
-            this.dsFocus.emit();
-        }
-        else {
-            this.dsBlur.emit();
-        }
+        const eventEmitter = newValue ? this.dsFocus : this.dsBlur;
+        eventEmitter.emit();
     }
     resetFeedback = () => {
         this.feedback = [];
@@ -458,7 +457,7 @@ const DsSelect = class extends Mixin(componentFactory('ds-select', { stopRootTra
         this.feedback = this.feedback.filter(item => item.key !== key);
     };
     getFeedbackMessage = () => {
-        return this.feedback.length > 0 ? this.feedback[this.feedback.length - 1]?.message : '';
+        return this.feedback.length > 0 ? this.feedback.at(-1)?.message : '';
     };
     optionsMessagePropertyObserver(newValue, _oldValue, propName) {
         if (!newValue) {
@@ -474,7 +473,6 @@ const DsSelect = class extends Mixin(componentFactory('ds-select', { stopRootTra
         }
         if (propName === 'dsOptionsError' && newValue) {
             this.appendFeedback(propName, this.dsOptionsErrorText || `${weCouldNotLoadOptions()} ${tryAgainOrIfTheProblemPersists()}`);
-            return;
         }
     }
     setSelectedOptionsFromValue = async (values) => {
@@ -534,7 +532,7 @@ const DsSelect = class extends Mixin(componentFactory('ds-select', { stopRootTra
                 [`${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 ? undefined : `${this.dsId}-option-${this.activeIndex}`, onClick: () => {
                 if (!this.dsDisabled) {
                     this.toggleDropdown();
                 }
@@ -545,13 +543,9 @@ const DsSelect = class extends Mixin(componentFactory('ds-select', { stopRootTra
             } }, h("div", { class: `${customSelectClass}__selected-option` }, this.dsIcon && h(this.DsIcon, { class: `${customSelectClass}__selected-option__placeholder-icon`, dsName: this.dsIcon, dsSize: this.dsIconSize }), h("span", { id: selectedOptionId, class: classNames(`${customSelectClass}__selected-option__text`, {
                 [`${customSelectClass}__selected-option__text--none-selected`]: noneSelected,
                 [`${customSelectClass}__selected-option__text--disabled`]: this.dsDisabled,
-            }) }, this.selectedOptionsLabel || this.placeholder)), h(this.DsIcon, { ref: el => {
-                this.iconRef = el;
-            }, class: classNames(`${customSelectClass}__dropdown-icon`, {
+            }) }, this.selectedOptionsLabel || this.placeholder)), h(this.DsIcon, { ref: el => (this.iconRef = el), class: 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 && (h("div", { class: `${customSelectClass}__badge-container` }, h(DsBadge, { ref: el => (this.badgeRef = el), dsId: badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: selections() }))), this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled && (h(DsButton, { ref: el => {
-                this.clearButtonRef = el;
-            }, class: `${customSelectClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", dsIconTitle: clearButtonAriaLabel, dsIconAriaLabel: clearButtonAriaLabel, onClick: event => {
+            }), dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), this.isMultiple && this.selectedOptions?.length > 0 && (h("div", { class: `${customSelectClass}__badge-container` }, h(DsBadge, { ref: el => (this.badgeRef = el), dsId: badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: selections() }))), this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled && (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();
                 this.handleClearSelection();
             }, onKeyDown: event => {
@@ -576,7 +570,7 @@ const DsSelect = class extends Mixin(componentFactory('ds-select', { stopRootTra
     }
     render() {
         const baseClass = cx('ds-select');
-        return (h(Host, { key: '3c2dd72616c0c522d4c8bc90e24049fdbba9ba51', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: 'b9c1004ca24fe0735b18f41a376c37d8c4b431d7', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
+        return (h(Host, { key: '8aea54cbb8dfa36ea92510ea35de4a3f0a7f53e4', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: 'f4ce8d85fe9c6644c9506a0cc75c62f8507fec4d', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -1,10 +1,10 @@
-import { M as Mixin, r as registerInstance, e as getElement, h, H as Host } from './index-KrLJvXEc.js';
-import { c as cx } from './cx-COyyiGn2.js';
-import { p as paginationFactory } from './paginationFactory-DcRWFrN5.js';
-import './paginationContext-BTvEDwAJ.js';
-import './utils-BGPSuOgq.js';
+import { M as Mixin, r as registerInstance, e as getElement, h, H as Host } from './index-DC3hrKbf.js';
+import { c as cx } from './cx-DAxPJw14.js';
+import { p as paginationFactory } from './paginationFactory-09JYZQfp.js';
+import './paginationContext-DQbBqFRL.js';
+import './utils-CRB48Q9-.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__izAhxK.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 Mixin(paginationFactory) {
     constructor(hostRef) {
@@ -17,7 +17,7 @@ const DsPaginationEllipsis = class extends Mixin(paginationFactory) {
         const variant = this.paginationContext?.variant || 'medium';
         const hostClass = cx(`ds-pagination-ellipsis-variant--${variant}`);
         const ariaLabel = this.paginationContext?.texts.ellipsis || 'Ellipsis';
-        return (h(Host, { key: '37dba82fa26a90751ed6df473e90be5f38cdeeb8', class: hostClass }, h("span", { key: '1f5af2af65bca8c1d8526819308792c7cc463084', class: baseClass, role: "img", "aria-label": ariaLabel }, "\u2026")));
+        return (h(Host, { key: '1cc7a1b9f87796c3dc7e1a89e591f6242bcea288', class: hostClass }, h("span", { key: 'b4fc2e3f4599a5d02227a1688494839fc39b6bd0', class: baseClass, role: "img", "aria-label": ariaLabel }, "\u2026")));
     }
 };
 DsPaginationEllipsis.style = dsPaginationEllipsisCss();

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

@@ -1,11 +1,11 @@
-import { M as Mixin, r as registerInstance, e as getElement, h, H as Host } from './index-KrLJvXEc.js';
+import { M as Mixin, r as registerInstance, e as getElement, h, H as Host } from './index-DC3hrKbf.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-COyyiGn2.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { p as paginationFactory } from './paginationFactory-DcRWFrN5.js';
-import './paginationContext-BTvEDwAJ.js';
+import { c as cx } from './cx-DAxPJw14.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { p as paginationFactory } from './paginationFactory-09JYZQfp.js';
+import './paginationContext-DQbBqFRL.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__izAhxK.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__izAhxK--disabled.sc-ds-pagination-item{cursor:default}[slot=full].sc-ds-pagination-item-h .ds-pagination-item__izAhxK--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__izAhxK--next.sc-ds-pagination-item{--ds-link-cta-padding-inline-end:var(--ds-spacing-3xSmall)}`;
 const DsPaginationItem = class extends Mixin(paginationFactory) {
     constructor(hostRef) {
@@ -97,6 +97,7 @@ const DsPaginationItem = class extends Mixin(paginationFactory) {
         const linkProps = {
             class: classes,
             dsVariant: 'supplementary',
+            dsColour: this.paginationContext.colour,
             dsSize: this.paginationContext.variant,
             dsAriaLabel: this.ariaLabel,
             dsText: textToDisplay,
@@ -105,7 +106,8 @@ const DsPaginationItem = class extends Mixin(paginationFactory) {
             dsIconPosition: iconPosition,
             dsHref: isSpan ? undefined : this.dsHref,
             dsDisabled: this.isDisabled,
-            dsTag: (isSpan ? 'span' : 'a'),
+            dsTag: isSpan ? 'span' : 'a',
+            dsTabIndex: this.isDisabled ? '-1' : undefined,
         };
         return (h(Host, null, h(this.DsLinkCta, { ...linkProps })));
     }

package/dist/esm/ds-pagination-page-info.entry.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { M as Mixin, r as registerInstance, e as getElement, h, H as Host } from './index-DC3hrKbf.js';
+import { c as cx } from './cx-DAxPJw14.js';
+import { p as paginationFactory } from './paginationFactory-09JYZQfp.js';
+import './paginationContext-DQbBqFRL.js';
+import './utils-CRB48Q9-.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__izAhxK.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 Mixin(paginationFactory) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    render() {
+        if (!this.paginationContext) {
+            return h(Host, null);
+        }
+        const baseClass = cx('ds-pagination-page-info');
+        const { currentPage, totalPages } = this.paginationContext;
+        return (h(Host, null, h("span", { class: baseClass }, currentPage, " / ", totalPages)));
+    }
+};
+DsPaginationPageInfo.style = dsPaginationPageInfoCss();
+export { DsPaginationPageInfo as ds_pagination_page_info };

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

@@ -1,11 +1,11 @@
-import { M as Mixin, r as registerInstance, e as getElement, h, H as Host } from './index-KrLJvXEc.js';
+import { M as Mixin, r as registerInstance, e as getElement, h, H as Host } from './index-DC3hrKbf.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-COyyiGn2.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { p as paginationFactory } from './paginationFactory-DcRWFrN5.js';
-import './paginationContext-BTvEDwAJ.js';
+import { c as cx } from './cx-DAxPJw14.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { p as paginationFactory } from './paginationFactory-09JYZQfp.js';
+import './paginationContext-DQbBqFRL.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__izAhxK.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__izAhxK--current.sc-ds-pagination-page{pointer-events:none}`;
 const DsPaginationPage = class extends Mixin(paginationFactory) {
     constructor(hostRef) {
@@ -16,6 +16,7 @@ const DsPaginationPage = class extends Mixin(paginationFactory) {
     dsPage;
     dsHref;
     dsIsCurrent;
+    dsAriaLabel;
     dsTag;
     get isCurrent() {
         if (this.dsIsCurrent !== undefined)
@@ -24,6 +25,13 @@ const DsPaginationPage = class extends Mixin(paginationFactory) {
             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 transformTagName('ds-link-cta', 'ds-pagination-page', this.el);
     }
@@ -40,11 +48,13 @@ const DsPaginationPage = class extends Mixin(paginationFactory) {
         const linkProps = {
             'class': classes,
             'dsVariant': variant,
+            'dsColour': this.paginationContext.colour,
             'dsSize': this.paginationContext.variant,
-            'dsTag': (isSpan ? 'span' : 'a'),
+            '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(`ds-pagination-page-variant--${this.paginationContext.variant}`);

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

@@ -1,14 +1,14 @@
-import { M as Mixin, r as registerInstance, e as getElement, h } from './index-KrLJvXEc.js';
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-DC3hrKbf.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-COyyiGn2.js';
-import { p as ellipsis } from './controlUtils-Ddynysnm.js';
-import { a as currentPage, g as goToNextPage, b as goToPreviousPage, d as goToLastPage, e as goToFirstPage, n as nextPage, p as previousPage, l as lastPage, f as firstPage, h as pagination } from './paginationUtils-BkkZOm5C.js';
-import { s as storePaginationContext, p as providePaginationContextToSlots } from './paginationContext-BTvEDwAJ.js';
-import { c as componentFactory } from './componentFactory-Ct4nz3XH.js';
-import './store-Cj7kJXiG.js';
-import './utils-BGPSuOgq.js';
+import { c as cx } from './cx-DAxPJw14.js';
+import { p as ellipsis } from './controlUtils-CuF9Fnfg.js';
+import { p as pageNumber, a as currentPage, g as goToNextPage, b as goToPreviousPage, d as goToLastPage, e as goToFirstPage, n as nextPage, f as previousPage, l as lastPage, h as firstPage, i as pagination } from './paginationUtils-C-ppbnkx.js';
+import { s as storePaginationContext, p as providePaginationContextToSlots } from './paginationContext-DQbBqFRL.js';
+import { c as componentFactory } from './componentFactory-DmszWHOG.js';
+import './store-DjcJcxKC.js';
+import './utils-CRB48Q9-.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__izAhxK{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__izAhxK__compact slot,.ds-pagination__izAhxK__full slot{display:flex;align-items:center;gap:var(--ds-spacing-3xSmall);flex-wrap:wrap}.ds-pagination__izAhxK--compact .ds-pagination__izAhxK__compact,.ds-pagination__izAhxK--auto .ds-pagination__izAhxK__compact{width:100%}@media (min-width: 30rem){.ds-pagination__izAhxK--compact .ds-pagination__izAhxK__compact,.ds-pagination__izAhxK--auto .ds-pagination__izAhxK__compact{width:auto}}.ds-pagination__izAhxK--compact .ds-pagination__izAhxK__compact slot,.ds-pagination__izAhxK--auto .ds-pagination__izAhxK__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__izAhxK ::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__izAhxK--white{--ds-pagination-ellipsis-colour:var(--ds-textColor-white)}.ds-pagination__izAhxK--white ::slotted([class*=pagination-page-info]){color:var(--ds-textColor-white)}.ds-pagination__izAhxK--compact .ds-pagination__izAhxK__full{display:none}.ds-pagination__izAhxK--full .ds-pagination__izAhxK__compact{display:none}.ds-pagination__izAhxK--auto .ds-pagination__izAhxK__full{display:none}@media (min-width: 60rem){.ds-pagination__izAhxK--auto .ds-pagination__izAhxK__full{display:contents}.ds-pagination__izAhxK--auto .ds-pagination__izAhxK__compact{display:none}}`;
 const DsPagination = class extends Mixin(componentFactory('ds-pagination', { stopRootTracking: true })) {
     constructor(hostRef) {
@@ -20,6 +20,7 @@ const DsPagination = class extends Mixin(componentFactory('ds-pagination', { sto
     dsTotalPages = 1;
     dsLayout = 'auto';
     dsVariant = 'medium';
+    dsColour = 'blue';
     dsAriaLabel;
     get texts() {
         return {
@@ -33,9 +34,10 @@ const DsPagination = class extends Mixin(componentFactory('ds-pagination', { sto
             goToNextPage: goToNextPage(),
             currentPage: currentPage(),
             ellipsis: ellipsis(),
+            pageNumber: (page) => pageNumber(page),
         };
     }
-    langObserver() {
+    configurationPropertyObserver() {
         this.updateContext();
     }
     dsCurrentPageObserver(newValue) {
@@ -75,6 +77,7 @@ const DsPagination = class extends Mixin(componentFactory('ds-pagination', { sto
             currentPage: this.dsCurrentPage,
             totalPages: this.dsTotalPages,
             variant: this.dsVariant,
+            colour: this.dsColour,
             layout: this.dsLayout,
             isCompact: false,
             texts: this.texts,
@@ -82,17 +85,23 @@ const DsPagination = class extends Mixin(componentFactory('ds-pagination', { sto
     }
     render() {
         const baseClass = cx('ds-pagination');
-        const classes = classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsLayout}`);
+        const classes = 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 (h("nav", { key: '37a0983233833510e18500c528483bf1bc01a3c1', class: classes, "aria-label": this.dsAriaLabel || pagination(), style: {
+        return (h("nav", { key: 'ef22ab4865a3139b74d2d3e0e64c2d953dd723e5', class: classes, "aria-label": this.dsAriaLabel || pagination(), style: {
                 '--ds-pagination-font-size': fontSize,
                 '--ds-link-cta-min-width': minSize,
-            } }, h("div", { key: 'd61235ad8e8c3f1886e5cf4a555e6cbaf80a7dab', class: `${baseClass}__compact` }, h("slot", { key: 'a478f9bbdeb51e59af0a11b8dc24a90ad77b2400', name: "compact", onSlotchange: () => this.updateContext() })), h("div", { key: 'dcf0e3b5ab81d3eec7f9ac614fe291901ff4f4cd', class: `${baseClass}__full` }, h("slot", { key: 'd4c69cbb062be42ed2af3b52764192348b332baa', name: "full", onSlotchange: () => this.updateContext() }))));
+            } }, h("div", { key: 'f6a5be74c7b21c633edb69cb340f1f8f6aa88a73', class: `${baseClass}__compact` }, h("slot", { key: '143093d797e6d97e3ad37ede26b53d819f3d6004', name: "compact", onSlotchange: () => this.updateContext() })), h("div", { key: '7d4fb67fb8f5a1b56ee6de1cf70f190989793191', class: `${baseClass}__full` }, h("slot", { key: 'b934f23fe9506be0a929ed50ae5d0571cfe9676e', name: "full", onSlotchange: () => this.updateContext() }))));
     }
     static get watchers() { return {
         "lang": [{
-                "langObserver": 0
+                "configurationPropertyObserver": 0
+            }],
+        "dsColour": [{
+                "configurationPropertyObserver": 0
+            }],
+        "dsVariant": [{
+                "configurationPropertyObserver": 0
             }],
         "dsCurrentPage": [{
                 "dsCurrentPageObserver": 0

package/dist/esm/ds-radio-button-group.entry.js CHANGED Viewed

@@ -1,14 +1,14 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h, H as Host } from './index-KrLJvXEc.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h, H as Host } from './index-DC3hrKbf.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { d as disableEventsFactory } from './disableEventsFactory-Dj3sSg-t.js';
-import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
-import { g as getRequiredText, b as atLeastOneOption } from './controlUtils-Ddynysnm.js';
-import { c as cx } from './cx-COyyiGn2.js';
-import { c as componentFactory } from './componentFactory-Ct4nz3XH.js';
-import './store-Cj7kJXiG.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { d as disableEventsFactory } from './disableEventsFactory-DeCjjcHf.js';
+import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-Dzq9qJk7.js';
+import { g as getRequiredText, b as atLeastOneOption } from './controlUtils-CuF9Fnfg.js';
+import { c as cx } from './cx-DAxPJw14.js';
+import { c as componentFactory } from './componentFactory-DmszWHOG.js';
+import './store-DjcJcxKC.js';
-const dsRadioButtonGroupCss = () => `.ds-no-style-leak.sc-ds-radio-button-group *.sc-ds-radio-button-group{all:unset;box-sizing:border-box;display:block}.ds-radio-button-group__MsKlb0.sc-ds-radio-button-group{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-radio-button-group__MsKlb0__radio-buttons-slot.sc-ds-radio-button-group{display:inline-flex;flex-direction:column}.ds-radio-button-group__MsKlb0__radio-buttons-slot--horizontal.sc-ds-radio-button-group{flex-flow:row wrap;gap:var(--ds-spacing-small)}.ds-radio-button-group__MsKlb0__legend.sc-ds-radio-button-group{padding-inline:0;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-group__MsKlb0__assistive-text.sc-ds-radio-button-group{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}`;
+const dsRadioButtonGroupCss = () => `.ds-no-style-leak.sc-ds-radio-button-group *.sc-ds-radio-button-group{all:unset;box-sizing:border-box;display:block}.ds-radio-button-group__izAhxK.sc-ds-radio-button-group{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-radio-button-group__izAhxK__radio-buttons-slot.sc-ds-radio-button-group{display:inline-flex;flex-direction:column}.ds-radio-button-group__izAhxK__radio-buttons-slot--horizontal.sc-ds-radio-button-group{flex-flow:row wrap;gap:var(--ds-spacing-small)}.ds-radio-button-group__izAhxK__legend.sc-ds-radio-button-group{padding-inline:0;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-group__izAhxK__assistive-text.sc-ds-radio-button-group{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}`;
 const DsRadioButtonGroup = class extends Mixin(componentFactory('ds-radio-button-group', { stopRootTracking: true }), disableEventsFactory) {
     constructor(hostRef) {
@@ -98,7 +98,7 @@ const DsRadioButtonGroup = class extends Mixin(componentFactory('ds-radio-button
     formResetCallback() {
         this.dsErrorText = '';
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input') ?? undefined);
         }
         else {
             this.internals?.setValidity({});
@@ -165,7 +165,7 @@ const DsRadioButtonGroup = class extends Mixin(componentFactory('ds-radio-button
         });
         this.syncErrorAriaDescribedby();
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input') ?? undefined);
         }
     }
     async getValue() {
@@ -183,7 +183,7 @@ const DsRadioButtonGroup = class extends Mixin(componentFactory('ds-radio-button
             this.dsChange.emit({ value });
         }
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: !value }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: !value }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input') ?? undefined);
         }
         if (this.wasInvalidOnBlur) {
             this.dsValidity.emit({
@@ -234,7 +234,7 @@ const DsRadioButtonGroup = class extends Mixin(componentFactory('ds-radio-button
             return;
         }
         e.preventDefault();
-        const currentIndex = radios.findIndex(r => r === targetRadio);
+        const currentIndex = radios.indexOf(targetRadio);
         let nextIndex = currentIndex;
         if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
             nextIndex = currentIndex === 0 ? radios.length - 1 : currentIndex - 1;
@@ -257,7 +257,7 @@ const DsRadioButtonGroup = class extends Mixin(componentFactory('ds-radio-button
         });
         const errorClasses = classNames(`${baseClass}__error`);
         const DsInputValidity = transformTagName('ds-input-validity', 'ds-radio-button-group', this.el);
-        return (h(Host, { key: '492bdd624d08b1a3f74ed610296b0a8401f8479b', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: 'dc95e240361d7e3539588660fe87d34053fee1e6', id: this.fieldsetId, class: classes, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, h("legend", { key: '5deb758f5a4e5adb4a2a50f357c5759e51ece66a', id: this.legendId, class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: 'b384fbf9b8591844f01b4df44066f1de199a2d79', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), h("div", { key: '226a55d6f44e882e7a0bdf61b10fdc572a1518c1', class: radioButtonsSlotClasses }, h("slot", { key: '5de33b42d3ec92dfe1d43d43e952a679a4a4df4d' })), h("div", { key: '9cfe8b0934aebfb930883987c06e978b3650306c', class: errorClasses }, h(DsInputValidity, { key: '2434f28ca9d1c80bc6d489c719f03131869e0f7e', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" })))));
+        return (h(Host, { key: '0733c0a9c04691a265410376a1211fbbd34b1f81', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: 'f4714673d79620236ce854f700dc88a7d78bf3e1', id: this.fieldsetId, class: classes, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, h("legend", { key: '9c54939eca8a9b70335b741c9085813e4ea72275', id: this.legendId, class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: 'a89970ed23e91b01f2752dbb829192e5630270f5', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), h("div", { key: 'bad700b57c7c02dfce4470f47164c1ade6e17b73', class: radioButtonsSlotClasses }, h("slot", { key: 'a6113f4ca3c4cf6897e42d9050f24b173280c931' })), h("div", { key: '286d6eed005c1b00b19f3f54c5759a43cbcda50c', class: errorClasses }, h(DsInputValidity, { key: '58d55556cd4dcec58ab38b0adeff379a1d6861ca', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {