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

@uh-design-system/component-library 0.7.1 → 0.7.2-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 (1575) hide show

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

@@ -0,0 +1,487 @@
+'use strict';
+var index = require('./index-DscNJSZx.js');
+var utils = require('./utils-CQYRBA7R.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+const dsOptionsCss = ".sc-ds-options:root,.sc-ds-options-h{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.options-list-inner.sc-ds-options,.options-loading.sc-ds-options,.options-error.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.options-list.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0}.options-list.sc-ds-options:focus{outline:none}.options-list-inner.sc-ds-options,.options-loading.sc-ds-options,.options-error.sc-ds-options{overflow-y:auto;list-style-type:none;padding:0;margin:0;width:100%;position:relative;display:flex;flex-direction:column}.options-loading.sc-ds-options,.options-error.sc-ds-options{height:18.5rem;align-items:center;justify-content:center}.options-loading--loading-text.sc-ds-options{padding-top:var(--ds-spacing-2xSmall);padding-bottom:var(--ds-spacing-large);text-align:center}.options-error.sc-ds-options{color:var(--ds-textColor-danger)}.options-error--error-message.sc-ds-options{color:var(--ds-textColor-default);text-align:center}.options-error--error-title.sc-ds-options{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.options-error--error-text.sc-ds-options{padding-bottom:var(--ds-spacing-small)}.top-scrim.sc-ds-options,.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}.top-scrim.sc-ds-options{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.options-list.has-top-scrim.sc-ds-options .top-scrim.sc-ds-options{display:block}.options-list.has-bottom-scrim.sc-ds-options .bottom-scrim.sc-ds-options{display:block}li.sc-ds-options{cursor:pointer}li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}";
+const DsOptions = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsOptionsEsc = index.createEvent(this, "dsOptionsEsc");
+        this.dsOptionsActiveIndexChange = index.createEvent(this, "dsOptionsActiveIndexChange");
+    }
+    get el() { return index.getElement(this); }
+    optionsListRef;
+    optionsListInnerRef;
+    dsId;
+    dsSelectedValue;
+    dsOptions = [];
+    dsActiveIndex = 0;
+    dsLabelId;
+    dsLoading = false;
+    dsLoadingText = 'Loading options...';
+    dsOptionsEsc;
+    dsOptionsActiveIndexChange;
+    onActiveIndexChange() {
+        setTimeout(() => this.focusActiveOption(), 0);
+    }
+    componentDidLoad() {
+        this.updateScrimClasses();
+    }
+    componentDidUpdate() {
+        this.updateScrimClasses();
+    }
+    handleScroll = () => {
+        this.updateScrimClasses();
+    };
+    updateScrimClasses = () => {
+        const wrapper = this.optionsListRef;
+        const scrollEl = this.optionsListInnerRef;
+        if (!wrapper || !scrollEl)
+            return;
+        const isAtTop = scrollEl.scrollTop === 0;
+        const isAtBottom = Math.ceil(scrollEl.scrollTop + scrollEl.clientHeight) >= scrollEl.scrollHeight;
+        wrapper.classList.toggle('has-top-scrim', !isAtTop);
+        wrapper.classList.toggle('has-bottom-scrim', !isAtBottom);
+        const groupLabels = wrapper.querySelectorAll('.group-label');
+        groupLabels.forEach(label => {
+            const rect = label.getBoundingClientRect();
+            const parentRect = wrapper.getBoundingClientRect();
+            if (scrollEl.scrollTop > 0 && rect.top <= parentRect.top && rect.bottom > parentRect.top) {
+                label.classList.add('shadow');
+            }
+            else {
+                label.classList.remove('shadow');
+            }
+        });
+    };
+    get DsOptionTag() {
+        return utils.transformTagName('ds-option', 'ds-options', this.el);
+    }
+    focusActiveOption() {
+        const optionEls = Array.from(this.el.querySelectorAll(this.DsOptionTag));
+        if (optionEls[this.dsActiveIndex]) {
+            optionEls[this.dsActiveIndex].focus();
+        }
+    }
+    handleKeyDown = (e) => {
+        const optionEls = Array.from(this.el.querySelectorAll(this.DsOptionTag));
+        if (!optionEls.length)
+            return;
+        let nextIndex = this.dsActiveIndex;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            let safe = 0;
+            do {
+                nextIndex = (nextIndex + 1) % optionEls.length;
+                safe++;
+                if (safe > optionEls.length * 2)
+                    break;
+            } while (optionEls[nextIndex].dsDisabled && nextIndex !== this.dsActiveIndex);
+            this.dsActiveIndex = nextIndex;
+            this.dsOptionsActiveIndexChange.emit(this.dsActiveIndex);
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            let safe = 0;
+            do {
+                nextIndex = (nextIndex - 1 + optionEls.length) % optionEls.length;
+                safe++;
+                if (safe > optionEls.length * 2)
+                    break;
+            } while (optionEls[nextIndex].dsDisabled && nextIndex !== this.dsActiveIndex);
+            this.dsActiveIndex = nextIndex;
+            this.dsOptionsActiveIndexChange.emit(this.dsActiveIndex);
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            const option = optionEls[this.dsActiveIndex];
+            if (option && !option.dsDisabled) {
+                option.click();
+            }
+        }
+        if (e.key === 'Tab') {
+            const option = optionEls[this.dsActiveIndex];
+            if (option && !option.dsDisabled) {
+                option.click();
+                this.dsOptionsEsc.emit();
+            }
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.dsOptionsEsc.emit();
+        }
+    };
+    dsOptionsError = false;
+    dsOptionsErrorTitle = 'We couldn’t load the options';
+    dsOptionsErrorText = 'Try again or if the problem persists contact support.';
+    render() {
+        const DsIcon = utils.transformTagName('ds-icon', 'ds-options', this.el);
+        const DsSpinner = utils.transformTagName('ds-spinner', 'ds-options', this.el);
+        return (index.h("div", { key: '14cb98aa2c547dff59858bbbc7be8865523e7c7a', id: this.dsId, class: "options-list", role: "listbox", tabindex: 0, "aria-labelledby": this.dsLabelId, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses }, index.h("slot", { key: '742bef67faea9b6b97cb20784be1c3116c3bd896', name: "groups" }), index.h("div", { key: '0b3463b06faac8bf302d065e209789d0cd1f023c', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, index.h("div", { key: '9af505259c0cd9f0e4102db26f2d3dd3dfd61a11', class: "top-scrim", "aria-hidden": "true" }), this.dsOptionsError ? (index.h("div", { class: "options-error" }, index.h(DsIcon, { dsName: "warning", dsSize: '2rem', class: "options-error-icon" }), index.h("div", { class: "options-error--error-message" }, index.h("div", { class: "options-error--error-title" }, this.dsOptionsErrorTitle), index.h("div", { class: "options-error--error-text" }, this.dsOptionsErrorText)))) : this.dsLoading ? (index.h("div", { class: "options-loading" }, index.h(DsSpinner, { dsSize: "large" }), index.h("div", { class: "options-loading--loading-text" }, this.dsLoadingText))) : (index.h("slot", null)), index.h("div", { key: '0587f561552f1634a572ed5a09529cb8fecacb0f', class: "bottom-scrim", "aria-hidden": "true" }))));
+    }
+    static get watchers() { return {
+        "dsActiveIndex": ["onActiveIndexChange"]
+    }; }
+};
+utils.declareComponentDependencies([index.h("ds-icon", null), index.h("ds-spinner", null)]);
+DsOptions.style = dsOptionsCss;
+const dsSelectCss = ".sc-ds-select:root,.sc-ds-select-h{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.sc-ds-select:root,.sc-ds-select-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.native-select-wrapper.sc-ds-select,.custom-select.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%}.disabled.native-select-wrapper.sc-ds-select,.disabled.custom-select.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}.disabled.native-select-wrapper.sc-ds-select .dropdown-icon.sc-ds-select,.disabled.custom-select.sc-ds-select .dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.invalid.native-select-wrapper.sc-ds-select,.invalid.custom-select.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.invalid.native-select-wrapper.sc-ds-select:not(.open):not(.disabled):active,.invalid.custom-select.sc-ds-select:not(.open):not(.disabled):active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.native-select-wrapper.sc-ds-select:not(.open):not(.invalid):not(.disabled):hover,.custom-select.sc-ds-select:not(.open):not(.invalid):not(.disabled):hover{background-color:var(--ds-bgColor-white-hover)}.custom-select.sc-ds-select .selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall)}.custom-select.sc-ds-select .placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.custom-select--open.sc-ds-select+.options-container.sc-ds-select{display:block;box-shadow:0rem var(--ds-spacing-4xSmall) var(--ds-spacing-3xSmall) calc(-1 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15), 0rem var(--ds-spacing-3xSmall) calc(var(--ds-spacing-xSmall) / 2) calc(-0.5 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15)}.custom-select--open.sc-ds-select .options-list.sc-ds-select{display:block}.custom-select.sc-ds-select:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled):hover{background-color:var(--ds-bgColor-white-hover)}.custom-select.sc-ds-select:active:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled){background-color:var(--ds-bgColor-white-active)}.custom-select--open.sc-ds-select,.custom-select.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)}.custom-select--open.sc-ds-select:not(.custom-select--open--invalid,.custom-select.sc-ds-select:focus-visible--invalid),.custom-select.sc-ds-select:focus-visible:not(.custom-select--open--invalid,.custom-select.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.custom-select--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}.custom-select--disabled.sc-ds-select .dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.custom-select--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.custom-select--invalid.sc-ds-select:not(.custom-select--invalid--open):not(.custom-select--invalid--disabled):active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.selected-option.sc-ds-select{flex:1;font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.custom-select--has-icon.sc-ds-select .selected-option.sc-ds-select{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.dropdown-icon.sc-ds-select{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)}.clear-button.sc-ds-select,.dropdown-icon.sc-ds-select{cursor:pointer}.select-title.sc-ds-select{display:inline-block;font-weight:var(--ds-fontWeight-semibold);margin-bottom:var(--ds-spacing-2xSmall);color:var(--ds-textColor-default)}.selected-text.sc-ds-select{flex:1;padding:0 var(--ds-spacing-xSmall);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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)}.native-select.sc-ds-select{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;outline:none;padding:0 var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-16);font-family:inherit;background-color:transparent;color:inherit;flex:1}.native-select.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.native-select.sc-ds-select:disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.native-select-wrapper.sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.native-select-wrapper.sc-ds-select:focus-within{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)}.native-select-wrapper--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}.native-select-wrapper--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}";
+const selectIdGenerator = utils.idGenerator('ds-select');
+const DsSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsChange = index.createEvent(this, "dsChange");
+    }
+    get el() { return index.getElement(this); }
+    dsId = selectIdGenerator.next().value;
+    dsTitle = 'Default Select';
+    dsPlaceholder = 'Select an option';
+    dsVariant = 'default';
+    dsClearable = true;
+    dsDisabled = false;
+    dsInvalid = false;
+    dsErrorText = '';
+    dsIcon;
+    dsValue = null;
+    dsLoading = false;
+    dsLoadingText = 'Loading options...';
+    dsOptionsError = false;
+    dsOptionsErrorTitle = "We couldn’t load the options";
+    dsOptionsErrorText = "Try again or if the problem persists contact support.";
+    selectedOption = null;
+    isOpen = false;
+    activeIndex = null;
+    inputValidityId = `${this.dsId}-validity`;
+    dsChange;
+    connectedCallback() {
+        this.el.addEventListener('focusout', this.handleFocusOut);
+    }
+    componentDidLoad() {
+        this.updateSelectedOptionFromValue(this.dsValue);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('focusout', this.handleFocusOut);
+    }
+    get DsIconTag() {
+        return utils.transformTagName('ds-icon', 'ds-select', this.el);
+    }
+    get DsInputValidityTag() {
+        return utils.transformTagName('ds-input-validity', 'ds-select', this.el);
+    }
+    get DsOptionTag() {
+        return utils.transformTagName('ds-option', 'ds-select', this.el);
+    }
+    customSelectRef;
+    nativeSelectRef;
+    handleFocusOut = (e) => {
+        const nextFocused = (e && 'relatedTarget' in e) ? e.relatedTarget : null;
+        if (this.isOpen &&
+            (!nextFocused || !this.el.contains(nextFocused))) {
+            this.isOpen = false;
+        }
+    };
+    handleOptionSelect(option) {
+        if (this.dsDisabled)
+            return;
+        this.selectedOption = option.label;
+        this.dsValue = option.dsValue;
+        this.isOpen = false;
+        this.dsChange.emit(option.dsValue);
+    }
+    selectOption(option) {
+        if (!option)
+            return;
+        if (option.dsDisabled)
+            return;
+        const labelEl = option.querySelector('.option-label');
+        let label = '';
+        if (labelEl) {
+            const descEl = labelEl.querySelector('.option-description');
+            if (descEl) {
+                label = labelEl.textContent?.replace(descEl.textContent || '', '').trim() || '';
+            }
+            else {
+                label = labelEl.textContent?.trim() || '';
+            }
+        }
+        else {
+            label = option.textContent?.trim() || '';
+        }
+        this.selectedOption = label;
+        this.dsValue = option.dsValue;
+        const options = this.getAllOptions();
+        const idx = options.findIndex(opt => String(opt.dsValue) === String(option.dsValue));
+        if (idx !== -1) {
+            this.activeIndex = idx;
+        }
+        this.isOpen = false;
+        this.dsChange.emit(option.dsValue);
+        const combobox = this.el.querySelector(`[id="${this.dsId}"]`);
+        combobox?.focus();
+    }
+    toggleDropdown() {
+        if (this.dsDisabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            setTimeout(() => {
+                const options = this.getAllOptions();
+                let focusIndex = 0;
+                if (this.dsValue) {
+                    const selectedIndex = options.findIndex(opt => String(opt.dsValue) === String(this.dsValue));
+                    focusIndex = selectedIndex !== -1 ? selectedIndex : 0;
+                }
+                else {
+                    const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
+                    focusIndex = firstEnabled !== -1 ? firstEnabled : 0;
+                }
+                this.activeIndex = focusIndex;
+                this.scrollToActiveOption();
+                const optionEls = this.el.querySelectorAll(this.DsOptionTag);
+                const active = optionEls[this.activeIndex];
+                active?.focus();
+            }, 0);
+        }
+    }
+    handleClearSelection() {
+        if (this.dsDisabled)
+            return;
+        this.selectedOption = null;
+        this.dsValue = null;
+        const options = this.getAllOptions();
+        const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
+        this.activeIndex = firstEnabled !== -1 ? firstEnabled : 0;
+        this.isOpen = false;
+        this.dsChange.emit(null);
+        const combobox = this.el.querySelector(`[id="${this.dsId}"]`);
+        combobox?.focus();
+    }
+    handleScroll(event) {
+        const target = event.target;
+        const isScrolledToTop = target.scrollTop === 0;
+        const isScrolledToBottom = Math.ceil(target.scrollTop + target.clientHeight) >= target.scrollHeight;
+        if (isScrolledToTop) {
+            target.classList.remove('scrolled-up');
+        }
+        else {
+            target.classList.add('scrolled-up');
+        }
+        if (isScrolledToBottom) {
+            target.classList.remove('scrolled-down');
+        }
+        else {
+            target.classList.add('scrolled-down');
+        }
+        const groups = target.querySelectorAll('.group');
+        groups.forEach((group) => {
+            const firstOption = group.querySelector('.option');
+            const groupLabel = group.querySelector('.group-label');
+            if (!firstOption || !groupLabel)
+                return;
+            const firstOptionTop = firstOption.getBoundingClientRect().top;
+            const groupLabelBottom = groupLabel.getBoundingClientRect().bottom;
+            const containerTop = target.getBoundingClientRect().top;
+            if (firstOptionTop < groupLabelBottom && containerTop < groupLabelBottom) {
+                groupLabel.classList.add('shadow');
+                firstOption.style.marginTop = `${groupLabelBottom - firstOptionTop}px`;
+            }
+            else {
+                groupLabel.classList.remove('shadow');
+                firstOption.style.marginTop = '';
+            }
+        });
+    }
+    handleKeyDown(event) {
+        if (this.isOpen) {
+            return;
+        }
+        if (event.key === 'ArrowDown' ||
+            event.key === 'ArrowUp' ||
+            event.key === 'Enter' ||
+            event.key === ' ') {
+            event.preventDefault();
+            this.isOpen = true;
+            const options = this.getAllOptions();
+            let focusIndex = 0;
+            if (this.dsValue) {
+                const selectedIndex = options.findIndex(opt => String(opt.dsValue) === String(this.dsValue));
+                focusIndex = selectedIndex !== -1 ? selectedIndex : 0;
+            }
+            else {
+                const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
+                focusIndex = firstEnabled !== -1 ? firstEnabled : 0;
+            }
+            this.activeIndex = focusIndex;
+            this.scrollToActiveOption();
+            setTimeout(() => {
+                const optionsList = this.el.querySelector('.options-list');
+                optionsList?.focus();
+            }, 0);
+        }
+    }
+    scrollToActiveOption() {
+        if (this.activeIndex === null)
+            return;
+        const optionsList = this.el.querySelector('.options-list');
+        const allOptions = optionsList?.querySelectorAll('.option');
+        if (!allOptions || this.activeIndex >= allOptions.length)
+            return;
+        const activeOption = allOptions[this.activeIndex];
+        if (activeOption) {
+            activeOption.focus();
+            activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
+        }
+    }
+    getAllOptions() {
+        return Array.from(this.el.querySelectorAll(this.DsOptionTag));
+    }
+    handleActiveIndexChange() {
+        this.updateOptionStates();
+    }
+    handleDsValueChange(newValue) {
+        this.updateOptionStates();
+        setTimeout(() => {
+            this.updateSelectedOptionFromValue(newValue);
+        }, 0);
+    }
+    updateOptionStates() {
+        const options = this.getAllOptions();
+        options.forEach((opt, idx) => {
+            opt.dsActive = idx === this.activeIndex;
+            opt.dsSelected = opt.dsValue === this.dsValue;
+            if (idx === this.activeIndex) {
+                opt.setAttribute('active', '');
+            }
+            else {
+                opt.removeAttribute('active');
+            }
+            if (opt.dsValue === this.dsValue) {
+                opt.setAttribute('selected', '');
+            }
+            else {
+                opt.removeAttribute('selected');
+            }
+        });
+    }
+    updateSelectedOptionFromValue(value) {
+        if (value === null) {
+            this.selectedOption = null;
+            return;
+        }
+        const options = this.getAllOptions();
+        const matchingOption = options.find(opt => String(opt.dsValue) === String(value));
+        if (matchingOption) {
+            const labelEl = matchingOption.querySelector('.option-label');
+            let label = '';
+            if (labelEl) {
+                const descEl = labelEl.querySelector('.option-description');
+                if (descEl) {
+                    label = labelEl.textContent?.replace(descEl.textContent || '', '').trim() || '';
+                }
+                else {
+                    label = labelEl.textContent?.trim() || '';
+                }
+            }
+            else {
+                label = matchingOption.textContent?.trim() || '';
+            }
+            this.selectedOption = label;
+            const idx = options.findIndex(opt => String(opt.dsValue) === String(value));
+            if (idx !== -1) {
+                this.activeIndex = idx;
+            }
+        }
+        else {
+            this.selectedOption = null;
+        }
+    }
+    renderNativeSelect() {
+        const ariaDescribedBy = this.dsErrorText ? this.inputValidityId : undefined;
+        const selectId = this.dsId || `${this.inputValidityId}-select`;
+        const baseClass = 'native-select-wrapper';
+        return (index.h("div", null, this.dsTitle && index.h("label", { class: "select-title", htmlFor: selectId }, this.dsTitle), index.h("div", { class: index$1.classNames(`${baseClass}`, {
+                [`${baseClass}--disabled`]: this.dsDisabled,
+                [`${baseClass}--invalid`]: !!this.dsErrorText,
+            }), onClick: () => {
+                if (!this.dsDisabled) {
+                    const selectElement = this.nativeSelectRef;
+                    if (selectElement) {
+                        selectElement.focus();
+                        selectElement.click();
+                    }
+                }
+            } }, index.h("div", { class: "selected-text", "aria-hidden": "true" }, this.selectedOption || this.dsPlaceholder || 'Select an option'), index.h("select", { ref: el => this.nativeSelectRef = el, id: selectId, class: "native-select", disabled: this.dsDisabled, required: !!this.dsErrorText, "aria-describedby": ariaDescribedBy, "aria-controls": `${selectId}-listbox`, "aria-haspopup": "listbox", onInput: (event) => {
+                const target = event.target;
+                this.dsValue = target.value;
+                this.selectedOption = target.selectedOptions[0]?.textContent || '';
+                this.dsChange.emit(target.value);
+            } }, index.h("option", { value: "", disabled: true, selected: !this.selectedOption }, this.dsPlaceholder || 'Select an option'), index.h("slot", { name: "native" })), index.h(this.DsIconTag, { class: "dropdown-icon", dsName: "keyboard_arrow_down" })), !!this.dsErrorText && (index.h(this.DsInputValidityTag, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
+    }
+    renderCustomSelect() {
+        const noneSelected = !this.selectedOption;
+        const selectId = this.dsId || `${this.inputValidityId}-custom-select`;
+        const labelId = `${selectId}-label`;
+        const ariaDescribedBy = this.dsErrorText ? this.inputValidityId : undefined;
+        const optionsContainerId = `ds-select-options-${selectId}`;
+        const baseClass = 'custom-select';
+        const DsButton = utils.transformTagName('ds-button', 'ds-select', this.el);
+        const DsOptions = utils.transformTagName('ds-options', 'ds-select', this.el);
+        return (index.h("div", null, this.dsTitle && (index.h("div", { class: "select-title-wrapper" }, index.h("label", { id: labelId, class: "select-title", htmlFor: selectId, onClick: () => {
+                const customSelect = this.customSelectRef;
+                customSelect?.focus();
+                this.toggleDropdown();
+            } }, this.dsTitle))), index.h("div", { class: "custom-select-wrapper", style: { position: 'relative' } }, index.h("div", { id: selectId, ref: el => this.customSelectRef = el, class: index$1.classNames(`${baseClass}`, {
+                [`${baseClass}--open`]: this.isOpen,
+                [`${baseClass}--none-selected`]: noneSelected,
+                [`${baseClass}--disabled`]: this.dsDisabled,
+                [`${baseClass}--invalid`]: !!this.dsErrorText,
+                [`${baseClass}--has-icon`]: !!this.dsIcon,
+            }), tabIndex: this.dsDisabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-disabled": String(this.dsDisabled), "aria-labelledby": labelId, "aria-describedby": ariaDescribedBy, "aria-controls": optionsContainerId, "aria-activedescendant": this.activeIndex !== null ? `${selectId}-option-${this.activeIndex}` : undefined, onClick: () => {
+                if (!this.dsDisabled) {
+                    this.toggleDropdown();
+                }
+            }, onKeyDown: (event) => {
+                if (!this.dsDisabled) {
+                    this.handleKeyDown(event);
+                }
+            } }, index.h("div", { class: "selected-option" }, this.dsIcon && (index.h(this.DsIconTag, { class: "placeholder-icon", dsName: this.dsIcon })), this.selectedOption || this.dsPlaceholder || 'Select an option'), this.dsClearable && this.selectedOption && !this.dsDisabled && (index.h(DsButton, { class: "clear-button", dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", onClick: (event) => {
+                event.stopPropagation();
+                this.handleClearSelection();
+            }, onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.handleClearSelection();
+                }
+            }, "aria-label": "Clear selection" })), index.h(this.DsIconTag, { class: "dropdown-icon", dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), index.h("div", { id: optionsContainerId, class: "options-container", onClick: (e) => {
+                const option = e.target.closest(this.DsOptionTag);
+                if (option && !option.dsDisabled) {
+                    this.selectOption(option);
+                }
+            } }, index.h(DsOptions, { dsActiveIndex: this.activeIndex, onDsOptionsActiveIndexChange: e => this.activeIndex = e.detail, onDsOptionsEsc: () => { this.isOpen = false; }, dsLabelId: labelId, dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsOptionsError: this.dsOptionsError, dsOptionsErrorTitle: this.dsOptionsErrorTitle, dsOptionsErrorText: this.dsOptionsErrorText }, index.h("slot", null)))), !!this.dsErrorText && (index.h(this.DsInputValidityTag, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
+    }
+    render() {
+        return (index.h("div", { key: 'ea977586362c2f69257e0bb0fcdb8bfacd0d8ac8', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
+            ? this.renderNativeSelect()
+            : this.renderCustomSelect()));
+    }
+    static get watchers() { return {
+        "activeIndex": ["handleActiveIndexChange"],
+        "dsValue": ["handleDsValueChange"]
+    }; }
+};
+utils.declareComponentDependencies([
+    index.h("ds-icon", null),
+    index.h("ds-input-validity", null),
+    index.h("ds-button", null),
+    index.h("ds-options", null)
+]);
+DsSelect.style = dsSelectCss;
+exports.ds_options = DsOptions;
+exports.ds_select = DsSelect;

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

@@ -1,13 +1,13 @@
 'use strict';
-var index = require('./index-DgPeuNJP.js');
+var index = require('./index-DscNJSZx.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-CQYRBA7R.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var controlUtils = require('./controlUtils-B1PRSMat.js');
-require('./index-DwxkNCwi.js');
+var controlUtils = require('./controlUtils-qCtArL_U.js');
+require('./index-CS1B-DeV.js');
-const dsRadioButtonGroupCss = ".ds-radio-button-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-radio-button-group__radio-buttons-slot{display:inline-flex;flex-direction:column}.ds-radio-button-group__radio-buttons-slot--horizontal{flex-flow:row wrap;gap:var(--ds-spacing-small)}.ds-radio-button-group__legend{padding-inline:0;color:var(--ds-palette-black-95);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__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}";
+const dsRadioButtonGroupCss = ":root,:host{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.ds-radio-button-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-radio-button-group__radio-buttons-slot{display:inline-flex;flex-direction:column}.ds-radio-button-group__radio-buttons-slot--horizontal{flex-flow:row wrap;gap:var(--ds-spacing-small)}.ds-radio-button-group__legend{padding-inline:0;color:var(--ds-textColor-default);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__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}";
 const radioButtonGroupIdGenerator = utils.idGenerator('ds-radio-button-group');
 const DsRadioButtonGroup = class {

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

@@ -1,13 +1,13 @@
 'use strict';
-var index = require('./index-DgPeuNJP.js');
+var index = require('./index-DscNJSZx.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var controlUtils = require('./controlUtils-B1PRSMat.js');
+var controlUtils = require('./controlUtils-qCtArL_U.js');
 var utils = require('./utils-CQYRBA7R.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-require('./index-DwxkNCwi.js');
+require('./index-CS1B-DeV.js');
-const dsRadioButtonCss = ".sc-ds-radio-button:root,.sc-ds-radio-button-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-radio-button.sc-ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-palette-black-95)}.ds-radio-button--disabled.sc-ds-radio-button{color:var(--ds-palette-black-40)}.ds-radio-button__validity.sc-ds-radio-button{margin-left:10px}.ds-radio-button.sc-ds-radio-button:has(input:focus-visible) .ds-radio-button__icon.sc-ds-radio-button{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 5)}.ds-radio-button__icon.sc-ds-radio-button{border-radius:50%;height:44px;width:44px}.ds-radio-button__text.sc-ds-radio-button{margin-top:11px}.ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-white)}.ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-70);fill:var(--ds-palette-white)}.ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-10)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-palette-white)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-80)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-20)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-palette-white)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-90)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-overlay-black-15)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button-fieldset.sc-ds-radio-button{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button-fieldset__legend.sc-ds-radio-button{padding-inline:0;color:var(--ds-palette-black-95);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-fieldset__assistive-text.sc-ds-radio-button{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}";
+const dsRadioButtonCss = ".sc-ds-radio-button:root,.sc-ds-radio-button-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-radio-button:root,.sc-ds-radio-button-h{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.ds-radio-button.sc-ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-textColor-default)}.ds-radio-button--disabled.sc-ds-radio-button{color:var(--ds-textColor-disabled-onLight)}.ds-radio-button__validity.sc-ds-radio-button{margin-left:10px}.ds-radio-button.sc-ds-radio-button:has(input:focus-visible) .ds-radio-button__icon.sc-ds-radio-button{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-bgColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-bgColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 5)}.ds-radio-button__icon.sc-ds-radio-button{border-radius:50%;height:44px;width:44px}.ds-radio-button__text.sc-ds-radio-button{margin-top:11px}.ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white)}.ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-primary);fill:var(--ds-bgColor-white)}.ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-hover)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-bgColor-white)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-hover)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-active)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-bgColor-white)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-active)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-transparent-onLight-active)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-white)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-white)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary)}.ds-radio-button-fieldset.sc-ds-radio-button{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button-fieldset__legend.sc-ds-radio-button{padding-inline:0;color:var(--ds-textColor-default);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-fieldset__assistive-text.sc-ds-radio-button{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}";
 const radioButtonIdGenerator = utils.idGenerator('ds-radio-button');
 const DsRadioButton = class {