@uh-design-system/component-library 0.6.1-rc.0 → 0.7.0

package/dist/cjs/ds-input-validity.cjs.entry.js

@@ -1,8 +1,7 @@
 'use strict';
 
-var index = require('./index-CsSCWgdp.js');
+var index = require('./index-Cz4FoSKZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var index$2 = require('./index-D56lnXzC.js');
 
 const dsInputValidityCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-input-validity{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.ds-input-validity--error{color:var(--ds-palette-red-70)}.ds-input-validity--success{color:var(--ds-palette-green-70)}.ds-input-validity ds-icon{display:block;height:1.5rem}.ds-input-validity small{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}";
 
@@ -27,7 +26,7 @@ const DsInputValidity = class {
             'ds-input-validity--success': this.dsType === 'success',
         });
         const icon = this.dsType === 'success' ? 'check_circle_fill' : 'warning_fill';
-        return (index.h("div", { key: '456156620314cb5fc03bd3544e44587818025d66', role: index$2.isValidation('client') ? this.dsValidityRole : undefined, "aria-live": index$2.isValidation('client') ? this.dsAriaLive : undefined, "aria-atomic": index$2.isValidation('client') ? this.dsAriaAtomic : undefined }, this.dsText && (index.h("div", { key: '7f1d665276b7a3771db20e890443f1884e50911e', class: classes }, index.h("ds-icon", { key: '10000d724a2e82460a42e03b7394334b40d8fa2e', dsName: icon }), index.h("small", { key: '8c139737440f25e304f97f421319cbd05abea15b', id: this.identifier }, this.dsText)))));
+        return (index.h("div", { key: 'c56f67e7067eeb576b2c0ddc5a63f656a5670658', role: this.dsValidityRole, "aria-live": this.dsAriaLive, "aria-atomic": this.dsAriaAtomic }, this.dsText && (index.h("div", { key: 'e180b75368843c56dd85e4243bb7e74e79af0d26', class: classes }, index.h("ds-icon", { key: '66ca3abcccda0e7c3e6a11daa0c3110f97a9c1d9', dsName: icon }), index.h("small", { key: 'df1304b07c01b8399734769869521f281bdc475f', id: this.identifier }, this.dsText)))));
     }
 };
 DsInputValidity.style = dsInputValidityCss;

package/dist/cjs/ds-link-with-arrow.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CsSCWgdp.js');
+var index = require('./index-Cz4FoSKZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var linkUtils = require('./linkUtils-CkIDFVO-.js');
+var linkUtils = require('./linkUtils-Ce4ioJ7A.js');
 var utils = require('./utils-BjZTECpy.js');
-require('./index-D56lnXzC.js');
+require('./index-CNUFAH0H.js');
 
-const dsLinkWithArrowCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-palette-white);background-color:var(--ds-palette-mainBlue-70)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-palette-mainBlue-80)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-palette-mainBlue-90)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-with-arrow:hover{color:var(--ds-palette-mainBlue-80)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-palette-mainBlue-90)}";
+const dsLinkWithArrowCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2rem;height:2rem;line-height:0;align-items:center;justify-content:center;color:var(--ds-palette-white);background-color:var(--ds-palette-mainBlue-70)}@media (min-width: 30rem){.ds-link-with-arrow__icon{width:2.5rem;height:2.5rem}}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-palette-mainBlue-80)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-palette-mainBlue-90)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-with-arrow:hover{color:var(--ds-palette-mainBlue-80)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-palette-mainBlue-90)}";
 
 const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
 const DsLinkWithArrow = class {
@@ -25,6 +25,7 @@ const DsLinkWithArrow = class {
     dsTarget;
     dsAriaLabel;
     dsTag = 'a';
+    iconSize = '2rem';
     get linkAttributes() {
         if (this.dsTag !== 'a')
             return {};
@@ -34,7 +35,14 @@ const DsLinkWithArrow = class {
             target: this.dsTarget
         };
     }
+    setIconSize = () => {
+        this.iconSize = window.innerWidth < 480 ? '1.5rem' : '2rem';
+    };
+    resizeListener() {
+        this.setIconSize();
+    }
     componentWillLoad() {
+        this.setIconSize();
         this.inheritedAttributes = {
             ...attributes.inheritAriaAttributes(this.el, ['aria-label']),
             ...attributes.inheritSpecifiedAttributes(this.el, ['lang']),
@@ -50,7 +58,7 @@ const DsLinkWithArrow = class {
             'ds-link-with-arrow__icon--start': this.dsIconPosition === 'start',
             'ds-link-with-arrow__icon--end': this.dsIconPosition === 'end',
         });
-        return (index.h(this.dsTag, { key: 'b142cdc185c70a015a7cbbc24ec939bab1213893', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, index.h("slot", { key: 'ecaa05624d6f769a261f82874542c5d8575b10c6', name: "prefix" }, this.dsIconPosition === 'start' && index.h("ds-icon", { key: 'd1ad08fa56dd3d1157cc777057a6071b056dca62', dsName: this.icon, class: iconClasses, dsSize: "1.4em" })), this.dsText, index.h("slot", { key: 'b10ea714396f7cbd59c3e067deb9b848b013364a', name: "suffix" }, this.dsIconPosition === 'end' && index.h("ds-icon", { key: 'fbb07740cf94729aa3e81b83f127f648818a72a8', dsName: this.icon, class: iconClasses, dsSize: "1.4em" })), linkUtils.opensInNewTab(this.dsTarget) && index.h("ds-visually-hidden", { key: '90c6af76ad761af742719ca200f607bddb0d16d3', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText())));
+        return (index.h(this.dsTag, { key: 'f33caca2eda5c54cc3d5b30f15e091f65006f2c2', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, index.h("slot", { key: '2b4f7a313148bb5217d8907a5e3fad01a1ceff1d', name: "prefix" }, this.dsIconPosition === 'start' && index.h("ds-icon", { key: '7b826f07ce18fe842bca8a5006e474be98a0838b', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, index.h("slot", { key: '1184a385c1f75a49e4820eac3d21910ba0b54b3f', name: "suffix" }, this.dsIconPosition === 'end' && index.h("ds-icon", { key: '16607d6ff25bce5fb3fae5c6aca9fd808cb2710f', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), linkUtils.opensInNewTab(this.dsTarget) && index.h("ds-visually-hidden", { key: 'e68cfe34cd5e6c78c9e4bdaa4cc0f4deac88a048', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, linkUtils.visuallyHiddenAssistiveText())));
     }
 };
 DsLinkWithArrow.style = dsLinkWithArrowCss;

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

@@ -1,15 +1,23 @@
 'use strict';
 
-var index = require('./index-CsSCWgdp.js');
+var index = require('./index-Cz4FoSKZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var linkUtils = require('./linkUtils-CkIDFVO-.js');
+var linkUtils = require('./linkUtils-Ce4ioJ7A.js');
 var utils = require('./utils-BjZTECpy.js');
-require('./index-D56lnXzC.js');
+require('./index-CNUFAH0H.js');
 
-const dsLinkCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-palette-mainBlue-80)}.ds-link:active{color:var(--ds-palette-mainBlue-90)}.ds-link:visited{color:#551a8b}.ds-link--standalone{color:var(--ds-palette-mainBlue-70);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-palette-mainBlue-80)}.ds-link--standalone:active{color:var(--ds-palette-mainBlue-90)}.ds-link--standalone:focus-visible{color:var(--ds-palette-mainBlue-70)}.ds-link--standalone:visited{color:var(--ds-palette-mainBlue-70)}.ds-link--colour-white{color:var(--ds-palette-white)}.ds-link--colour-white:hover,.ds-link--colour-white:active,.ds-link--colour-white:visited,.ds-link--colour-white:focus-visible{color:var(--ds-palette-white)}.ds-link--colour-black{color:var(--ds-palette-black-95)}.ds-link--colour-black:hover,.ds-link--colour-black:active,.ds-link--colour-black:visited,.ds-link--colour-black:focus-visible{color:var(--ds-palette-black-95)}";
+const dsLinkCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link{box-sizing:border-box;display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-palette-mainBlue-80)}.ds-link:active{color:var(--ds-palette-mainBlue-90)}.ds-link:visited{color:#551a8b}.ds-link--standalone{color:var(--ds-palette-mainBlue-70);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-palette-mainBlue-80)}.ds-link--standalone:active{color:var(--ds-palette-mainBlue-90)}.ds-link--standalone:focus-visible{color:var(--ds-palette-mainBlue-70)}.ds-link--standalone:visited{color:var(--ds-palette-mainBlue-70)}.ds-link--colour-white{color:var(--ds-palette-white)}.ds-link--colour-white:hover,.ds-link--colour-white:active,.ds-link--colour-white:visited,.ds-link--colour-white:focus-visible{color:var(--ds-palette-white)}.ds-link--colour-black{color:var(--ds-palette-black-95)}.ds-link--colour-black:hover,.ds-link--colour-black:active,.ds-link--colour-black:visited,.ds-link--colour-black:focus-visible{color:var(--ds-palette-black-95)}";
 
 const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
+const linkIconSizeMap = {
+    '2xLarge': '1.375rem',
+    'xLarge': '1.25rem',
+    'large': '1.125rem',
+    'medium': '1rem',
+    'small': '0.875rem',
+    'xSmall': '0.75rem',
+};
 const DsLink = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -39,7 +47,7 @@ const DsLink = class {
             href: this.dsHref,
             rel: this.rel,
             target: this.dsTarget,
-            download: this.dsDownload
+            download: this.dsDownload,
         };
     }
     componentWillLoad() {
@@ -62,7 +70,8 @@ const DsLink = class {
             [`ds-link__icon--start-${this.dsVariant}`]: this.dsIconPosition === 'start',
             [`ds-link__icon--end-${this.dsVariant}`]: this.dsIconPosition === 'end',
         });
-        return (index.h(this.dsTag, { key: '7dfe1669cb6eee4d9c34549db4bb63889db314c7', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, index.h("slot", { key: '5658fff18e509c3e8b1e0896fa25d9b9078d2973', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && (index.h("ds-icon", { key: 'd4082b28e19a2224e2555e0af18c267d949e071b', dsName: this.dsIcon, class: iconClasses, dsSize: "1em", dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), this.dsText, index.h("slot", { key: '77bc5d8f27eb890d523b34352d2a303d925c67d9', name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && (index.h("ds-icon", { key: '9a8be5140a2ed1c160dd0a11f4c53e4c53bc4890', dsName: this.dsIcon, class: iconClasses, dsSize: "1em", dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), linkUtils.opensInNewTab(this.dsTarget) && index.h("ds-visually-hidden", { key: 'dfe1d9995e5ee579b672b20d4987f8e061c6610e', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText())));
+        const iconSize = linkIconSizeMap[this.dsSize] ?? '1rem';
+        return (index.h(this.dsTag, { key: 'c752b279607128f89e3972785faec2528a721421', part: "ds-link", class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, index.h("slot", { key: '3a46af0939d725ca47dc903ec218776c53242e23', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && (index.h("ds-icon", { key: '93461318d5c5ea371c2b2221b1574791edb7d307', dsName: this.dsIcon, class: iconClasses, dsSize: iconSize, dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), this.dsText, index.h("slot", { key: 'a6a2a6c33680a5bdf15ab2cdcd45512298d8fae7', name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && (index.h("ds-icon", { key: '62beb495660c54c22640517ee5eef23109e11cb4', dsName: this.dsIcon, class: iconClasses, dsSize: iconSize, dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), linkUtils.opensInNewTab(this.dsTarget) && index.h("ds-visually-hidden", { key: '6177cbc4a13aee2b63b69d12e46e402dad1f87a8', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, linkUtils.visuallyHiddenAssistiveText())));
     }
 };
 DsLink.style = dsLinkCss;

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

@@ -0,0 +1,487 @@
+'use strict';
+
+var index = require('./index-Cz4FoSKZ.js');
+var utils = require('./utils-BjZTECpy.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+
+const dsOptionCss = ".sc-ds-option:root,.sc-ds-option-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.option.sc-ds-option{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:0.625rem var(--ds-spacing-small);position:relative;cursor:pointer;background-color:var(--ds-palette-white);color:var(--ds-palette-black-95)}.option.sc-ds-option:hover{background-color:var(--ds-palette-black-10)}.option.sc-ds-option:active{background-color:var(--ds-palette-black-20)}.option.active.sc-ds-option{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 * 1)}.option.selected.sc-ds-option{background-color:var(--ds-palette-mainBlue-70);color:var(--ds-palette-white)}.option.selected.sc-ds-option .check-icon.sc-ds-option{visibility:visible;color:var(--ds-palette-white)}.option.selected.sc-ds-option:hover{background-color:var(--ds-palette-mainBlue-80)}.option.selected.sc-ds-option:active{background-color:var(--ds-palette-mainBlue-90)}.option.sc-ds-option .option-label.sc-ds-option{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;grid-column:1;grid-row:1}.option.sc-ds-option .check-icon.sc-ds-option{grid-column:2;grid-row:1/span 2;align-self:center;justify-self:end;margin-left:auto;visibility:hidden}.option.sc-ds-option .option-description.sc-ds-option{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.option.sc-ds-option .option-description.sc-ds-option:not(:empty){display:block}.option.selected.sc-ds-option .option-description.sc-ds-option{color:var(--ds-palette-white)}.option.sc-ds-option .option-check.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}";
+
+const DsOption = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    dsValue;
+    dsDisabled = false;
+    dsDescription;
+    dsActive = false;
+    dsSelected = false;
+    internalTabIndex = -1;
+    optionRef;
+    dsActiveObserver(newValue) {
+        this.internalTabIndex = newValue && !this.dsDisabled ? 0 : -1;
+        if (newValue && !this.dsDisabled) {
+            this.dsFocus();
+        }
+    }
+    async dsFocus() {
+        this.optionRef?.focus();
+    }
+    componentWillLoad() {
+        this.internalTabIndex = this.dsActive && !this.dsDisabled ? 0 : -1;
+    }
+    render() {
+        return (index.h("div", { key: '1299b9ceff5e1c29230a7693acf22a7f1c0b0dac', ref: el => this.optionRef = el, class: {
+                option: true,
+                active: this.dsActive,
+                selected: this.dsSelected,
+                disabled: this.dsDisabled,
+            }, role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), tabIndex: this.internalTabIndex }, index.h("span", { key: 'a02d4b4551d4c248a3eeebe8f365d889358ac2ac', class: "option-label" }, index.h("slot", { key: '9b55b8fb9d075a87bc3868d15133d2841de0c12b' }), this.dsDescription && index.h("span", { key: '9f1123d8a1d60ba2237ed1cd2a8bfd8bee1bcf2b', class: "option-description" }, this.dsDescription)), this.dsSelected && (index.h("ds-icon", { key: 'd1a0545f6599e154caf8df710aa5750539f8dfee', dsName: "check", class: "option-check", "aria-hidden": "true" }))));
+    }
+    static get watchers() { return {
+        "dsActive": ["dsActiveObserver"]
+    }; }
+};
+DsOption.style = dsOptionCss;
+
+const dsOptionGroupCss = ".group.sc-ds-option-group ul.sc-ds-option-group{padding:0}.group-label.sc-ds-option-group{position:sticky;display:block;top:0;background-color:var(--ds-palette-black-03);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.group-label.shadow.sc-ds-option-group{box-shadow:0 -2px 7px var(--ds-overlay-black-50)}";
+
+const DsOptionGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dsLabel;
+    groupId;
+    dsLabelObserver(newValue) {
+        this.groupId = `ds-option-group-label-${newValue.replace(/\s+/g, '-').toLowerCase()}`;
+    }
+    componentWillLoad() {
+        this.groupId = `ds-option-group-label-${this.dsLabel.replace(/\s+/g, '-').toLowerCase()}`;
+    }
+    render() {
+        return (index.h("div", { key: '2471766ca7de5398081839e044d55fdddb578c3a', class: "group", role: "group", "aria-labelledby": this.groupId }, index.h("div", { key: 'ae62a44855bc54f481ce12ec69f076798bf99699', class: "group-label", id: this.groupId }, this.dsLabel), index.h("slot", { key: '365deafb4b1add8c532eb261e3d73b8246f8bcab' })));
+    }
+    static get watchers() { return {
+        "dsLabel": ["dsLabelObserver"]
+    }; }
+};
+DsOptionGroup.style = dsOptionGroupCss;
+
+const dsOptionsCss = ".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-palette-red-70)}.options-error--error-message.sc-ds-options{color:var(--ds-palette-black-95);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;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-palette-white) 0%, var(--ds-overlay-white-00) 100%)}.bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-palette-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;
+    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');
+            }
+        });
+    };
+    focusActiveOption() {
+        const optionEls = Array.from(this.el.querySelectorAll('ds-option'));
+        if (optionEls[this.dsActiveIndex]) {
+            optionEls[this.dsActiveIndex].focus();
+        }
+    }
+    handleKeyDown = (e) => {
+        const optionEls = Array.from(this.el.querySelectorAll('ds-option'));
+        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() {
+        return (index.h("div", { key: '7f582725e7e7e4119ba636b2b327b5e530e706cd', 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: '652b05b45610f838be7ced7f4c5b275d7c18d6d4', name: "groups" }), index.h("div", { key: 'd299689df895de9f7ccc2c716ce99a7fe3d634bd', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, index.h("div", { key: '124ca6b19c1a4bce6fc1f317d2bdb26c97f60529', class: "top-scrim", "aria-hidden": "true" }), this.dsOptionsError ? (index.h("div", { class: "options-error" }, index.h("ds-icon", { 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("ds-spinner", { dsSize: "large" }), index.h("div", { class: "options-loading--loading-text" }, this.dsLoadingText))) : (index.h("slot", null)), index.h("div", { key: 'c50bb98b3eea026bac446c847b8d0a47136a3156', class: "bottom-scrim", "aria-hidden": "true" }))));
+    }
+    static get watchers() { return {
+        "dsActiveIndex": ["onActiveIndexChange"]
+    }; }
+};
+DsOptions.style = dsOptionsCss;
+
+const dsSelectCss = ".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-palette-black-50);background-color:var(--ds-palette-white);color:var(--ds-palette-black-70);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-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);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-palette-black-40);border-left-color:var(--ds-overlay-black-15);cursor:not-allowed}.invalid.native-select-wrapper.sc-ds-select,.invalid.custom-select.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.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-palette-red-20);border-color:var(--ds-palette-red-50)}.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-palette-black-10)}.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-palette-black-10)}.custom-select.sc-ds-select:active:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled){background-color:var(--ds-palette-black-20)}.custom-select--open.sc-ds-select,.custom-select.sc-ds-select:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);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-palette-mainBlue-70)}.custom-select--disabled.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.custom-select--disabled.sc-ds-select .dropdown-icon.sc-ds-select{color:var(--ds-palette-black-40);border-left-color:var(--ds-overlay-black-15);cursor:not-allowed}.custom-select--invalid.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.custom-select--invalid.sc-ds-select:not(.custom-select--invalid--open):not(.custom-select--invalid--disabled):active{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.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-overlay-black-15);color:var(--ds-palette-black-70);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-palette-black-95)}.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-palette-black-20);background-color:var(--ds-palette-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-palette-black-70)}.native-select.sc-ds-select:disabled{background-color:var(--ds-overlay-black-10);color:var(--ds-palette-black-40);cursor:not-allowed}.native-select-wrapper.sc-ds-select:hover{background-color:var(--ds-palette-black-10)}.native-select-wrapper.sc-ds-select:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.native-select-wrapper--disabled.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.native-select-wrapper--invalid.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}";
+
+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);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('focusout', this.handleFocusOut);
+    }
+    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('ds-option');
+                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({ block: 'nearest' });
+        }
+    }
+    getAllOptions() {
+        return Array.from(this.el.querySelectorAll('ds-option'));
+    }
+    handleStateChange() {
+        this.updateOptionStates();
+    }
+    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');
+            }
+        });
+    }
+    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("ds-icon", { class: "dropdown-icon", dsName: "keyboard_arrow_down" })), !!this.dsErrorText && (index.h("ds-input-validity", { 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';
+        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("ds-icon", { class: "placeholder-icon", dsName: this.dsIcon })), this.selectedOption || this.dsPlaceholder || 'Select an option'), this.dsClearable && this.selectedOption && !this.dsDisabled && (index.h("ds-button", { 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("ds-icon", { 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('ds-option');
+                if (option && !option.dsDisabled) {
+                    this.selectOption(option);
+                }
+            } }, index.h("ds-options", { 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("ds-input-validity", { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
+    }
+    render() {
+        return (index.h("div", { key: 'e5635c0348a16fe23dd8f81827f5d6aecdd21baa', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
+            ? this.renderNativeSelect()
+            : this.renderCustomSelect()));
+    }
+    static get watchers() { return {
+        "activeIndex": ["handleStateChange"],
+        "dsValue": ["handleStateChange"]
+    }; }
+};
+DsSelect.style = dsSelectCss;
+
+exports.ds_option = DsOption;
+exports.ds_option_group = DsOptionGroup;
+exports.ds_options = DsOptions;
+exports.ds_select = DsSelect;