@uh-design-system/component-library 0.7.1 → 0.7.2-rc.0

package/dist/cjs/{ds-option_4.cjs.entry.js → ds-options_2.cjs.entry.js}

@@ -4,72 +4,7 @@ var index = require('./index-DgPeuNJP.js');
 var utils = require('./utils-CQYRBA7R.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() {
-        const DsIcon = utils.transformTagName('ds-icon', 'ds-option', this.el);
-        return (index.h("div", { key: 'b051e2ccd61a02f1c33e5c74f7f66dec856e1d04', 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: '8114317ed212116893f288753be27bc57487218c', class: "option-label" }, index.h("slot", { key: 'edc1ae43b1d32fd4d145e6f5c5bb296202e4f6bf' }), this.dsDescription && index.h("span", { key: '7a250b046d95c7bd74d742029100d7aed9a0b032', class: "option-description" }, this.dsDescription)), this.dsSelected && (index.h(DsIcon, { key: '23432b9e3f29189c6030003e61c02be9469a8a2e', dsName: "check", class: "option-check", "aria-hidden": "true" }))));
-    }
-    static get watchers() { return {
-        "dsActive": ["dsActiveObserver"]
-    }; }
-};
-utils.declareComponentDependencies([index.h("ds-icon", null)]);
-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: 'c764a70cf7cd2881404ea90b114957227259d37c', class: "group", role: "group", "aria-labelledby": this.groupId }, index.h("div", { key: '6a38a5db89ff8462704c740a7921e40312a9f466', class: "group-label", id: this.groupId }, this.dsLabel), index.h("slot", { key: 'b6bac535b5c569175f9fb84550d823829208142b' })));
-    }
-    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 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;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-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) {
@@ -80,6 +15,7 @@ const DsOptions = class {
     get el() { return index.getElement(this); }
     optionsListRef;
     optionsListInnerRef;
+    dsId;
     dsSelectedValue;
     dsOptions = [];
     dsActiveIndex = 0;
@@ -179,12 +115,12 @@ const DsOptions = class {
         }
     };
     dsOptionsError = false;
-    dsOptionsErrorTitle = "We couldn’t load the options";
-    dsOptionsErrorText = "Try again or if the problem persists contact support.";
+    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: '656aaa2ab4989958bf7d33914df5f082c91f7477', 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: '9aaef6b026ca0b5d8c7264ee69457df801fbdc19', name: "groups" }), index.h("div", { key: '399b0989af2d6cd0eadc10e18b10e2dac2e0f976', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, index.h("div", { key: '5eabc020be41e0fb2afcdb5c4e2cb3519212ac00', 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: 'a3180baebc60c132bd328e10fa77a554642a9d22', class: "bottom-scrim", "aria-hidden": "true" }))));
+        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"]
@@ -395,7 +331,7 @@ const DsSelect = class {
         const activeOption = allOptions[this.activeIndex];
         if (activeOption) {
             activeOption.focus();
-            activeOption.scrollIntoView({ block: 'nearest' });
+            activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
         }
     }
     getAllOptions() {
@@ -489,7 +425,7 @@ const DsSelect = class {
             } }, 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: '4716b1f759f34fd18f9f776fec0c21dcb6f62c00', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
+        return (index.h("div", { key: '9e3e4a236e65ad5002e3bcd3c86b4be35664f5d6', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
             ? this.renderNativeSelect()
             : this.renderCustomSelect()));
     }
@@ -506,7 +442,5 @@ utils.declareComponentDependencies([
 ]);
 DsSelect.style = dsSelectCss;
 
-exports.ds_option = DsOption;
-exports.ds_option_group = DsOptionGroup;
 exports.ds_options = DsOptions;
 exports.ds_select = DsSelect;

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

@@ -4,7 +4,7 @@ var index = require('./index-DgPeuNJP.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');
+var controlUtils = require('./controlUtils-CbCwh0cS.js');
 require('./index-DwxkNCwi.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)}";

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-DgPeuNJP.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var controlUtils = require('./controlUtils-B1PRSMat.js');
+var controlUtils = require('./controlUtils-CbCwh0cS.js');
 var utils = require('./utils-CQYRBA7R.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 require('./index-DwxkNCwi.js');

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

@@ -52,11 +52,11 @@ const DsSpinner = class {
         const textClasses = index$1.classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
         const segmentClasses = (index) => index$1.classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
         const DsVisuallyHidden = utils.transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
-        return (index.h("div", { key: '41ac2e9d4a4d47ba260cf0573c625c4cc3285772', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (index.h("div", { key: '717b10fb2a73640df5c104205af85f119129ad99', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': `${sizeInPixels}px`,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsSpinnerColor == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, index.h("div", { key: '8f275e0bdbdd5ace7ad4c9cf3c7ce367ba5882ee', class: "ds-spinner__spinner" }, index.h("div", { key: '2ae06bbf92492d0f6c63054c360257da685a2310', class: segmentClasses(1) }), index.h("div", { key: 'c5a12fd927eee963657c2a82d91ecfa81eb88a2d', class: segmentClasses(2) }), index.h("div", { key: '80c36207963e53a3ca4041d993e60854f74dccae', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (index.h(DsVisuallyHidden, { key: 'aea851246b5b233128c94b4dc49eee409d19cc15' }, index.h("span", { key: '6ffda5a7cc47eb4842dc8cf945ae7a2dbb4f49c7' }, this.dsHiddenAssistiveText))), this.dsText && index.h("span", { key: '020b3ccab3864a19ce3939661183731ae4db1d08', class: textClasses }, this.dsText)));
+            }, ...this.inheritedAttributes }, index.h("div", { key: '0ef5e3de363770fc1b15b4c20b78246f4c11eb03', class: "ds-spinner__spinner" }, index.h("div", { key: '65f925540b6fd8c0214d6392e3c6fe8751fc7de4', class: segmentClasses(1) }), index.h("div", { key: '1e062bc0fc9e78b9cd6d2413a61428d710f621b7', class: segmentClasses(2) }), index.h("div", { key: '520be4f4915f2c455ba58c009f12853b651f2f1b', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (index.h(DsVisuallyHidden, { key: 'b26675a2f64cc5833cbeeed1f7874b833352fa9f' }, index.h("span", { key: 'aedee4d1d142804207bb0764d212c0c7a9075a56' }, this.dsHiddenAssistiveText))), this.dsText && index.h("span", { key: '681c87db1c71a74461e68ba6702f3e766a7c4674', class: textClasses }, this.dsText)));
     }
 };
 utils.declareComponentDependencies([index.h("ds-visually-hidden", null)]);

package/dist/cjs/ds-tag-group.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DgPeuNJP.js');
 
-const dsTagGroupCss = ".ds-tag-group__label{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-tag-group__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-tag-group__tags{display:inline-flex;flex-direction:row;flex-wrap:wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}";
+const dsTagGroupCss = ".ds-tag-group__label{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-palette-black-95)}.ds-tag-group__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-tag-group__tags{display:inline-flex;flex-direction:row;flex-wrap:wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}";
 
 const DsTagGroup = class {
     constructor(hostRef) {
@@ -14,7 +14,7 @@ const DsTagGroup = class {
     render() {
         const assistiveTextId = this.dsAssistiveText ? 'ds-tag-group-assistive-text' : undefined;
         const ariaDescribedBy = assistiveTextId ? assistiveTextId : undefined;
-        return (index.h("div", { key: '5e132f0aa006d74722358f2ac3b0b74c4116ea9a', class: "ds-tag-group", role: "group", "aria-label": this.dsLabel, "aria-describedby": ariaDescribedBy }, (this.dsLabel || this.dsAssistiveText) && (index.h("div", { key: '2fe72fffe735931ff5472162cac5b3babda6b957' }, this.dsLabel && (index.h("div", { key: '5388aa1fb591062e25c51f03390af5f34a9e81e9', class: "ds-tag-group__label" }, this.dsLabel)), this.dsAssistiveText && (index.h("small", { key: 'd63eb8fc20ef2e361890a45709d2a7e54c4f9a02', class: "ds-tag-group__assistive-text", id: assistiveTextId }, this.dsAssistiveText)))), index.h("ul", { key: '35f882de376802e7048f4ea6b06291288d233c64', class: "ds-tag-group__tags" }, Array.from(this.el.children).map(child => index.h("li", { innerHTML: child.outerHTML })))));
+        return (index.h("div", { key: '8dd881ca483b1141dc2805d1c366cf113e319983', class: "ds-tag-group", role: "group", "aria-label": this.dsLabel, "aria-describedby": ariaDescribedBy }, (this.dsLabel || this.dsAssistiveText) && (index.h("div", { key: '8ade266da86fd06e2fec19e68dad547bffae769a' }, this.dsLabel && (index.h("div", { key: '4c3867f4c1ee11ee8afd2c94c07303212477e432', class: "ds-tag-group__label" }, this.dsLabel)), this.dsAssistiveText && (index.h("small", { key: 'eb2cee2d745da0cc0782e7d7958973419eec8b45', class: "ds-tag-group__assistive-text", id: assistiveTextId }, this.dsAssistiveText)))), index.h("ul", { key: '2fd183e8bd7a02310d7b178513b7f5ceb39da676', class: "ds-tag-group__tags" }, Array.from(this.el.children).map(child => index.h("li", { innerHTML: child.outerHTML })))));
     }
 };
 DsTagGroup.style = dsTagGroupCss;

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

@@ -24,7 +24,7 @@ const DsTag = class {
         });
         const DsIcon = utils.transformTagName('ds-icon', 'ds-tag', this.el);
         const DsLink = utils.transformTagName('ds-link', 'ds-tag', this.el);
-        return (index.h("div", { key: '40d1e7607357b556097b27c6aad58a1b2e5af0fb', class: classes }, index.h("slot", { key: '416e038155b38f758d5f31994ee45e619facff1b', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? index.h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), index.h("slot", { key: 'a276c53fd88b357f40a6a0227d79576318c0b708' }, this.dsHref ? (index.h(DsLink, { class: "ds-tag__link", dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (index.h("span", { class: "ds-tag__text" }, this.dsText))), index.h("slot", { key: 'e0ec39cd2378889d15b4a22e62742e730ce33a21', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? index.h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (index.h("div", { key: '5d8a76a14859706d464cd1adeb9ab5c582fa96f0', class: classes }, index.h("slot", { key: '362817b32966797fca889c46db2df2ab9fa30c97', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? index.h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), index.h("slot", { key: '1e85dfbd43e344798f6e839a690183f6a5f65f38' }, this.dsHref ? (index.h(DsLink, { class: "ds-tag__link", dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (index.h("span", { class: "ds-tag__text" }, this.dsText))), index.h("slot", { key: '082057267859654374533f420dc774cbf9d4cdb1', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? index.h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
     }
 };
 utils.declareComponentDependencies([index.h("ds-icon", null), index.h("ds-link", { dsText: '' })]);

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-DgPeuNJP.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var controlUtils = require('./controlUtils-B1PRSMat.js');
+var controlUtils = require('./controlUtils-CbCwh0cS.js');
 var utils = require('./utils-CQYRBA7R.js');
 var attributes = require('./attributes-BMbXzbwU.js');
 require('./index-DwxkNCwi.js');

package/dist/cjs/ds-visually-hidden.cjs.entry.js

@@ -10,7 +10,7 @@ const DsVisuallyHidden = class {
     }
     dsTag = 'div';
     render() {
-        return (index.h(this.dsTag, { key: '4294edab8fcf553ad50c2e0f268df30e9338382f', class: "ds-visually-hidden" }, index.h("slot", { key: '33181a1b5924f4e58b71a1795ebcc42e72b66971' })));
+        return (index.h(this.dsTag, { key: '12110ddea5e3ca5632d213e91c86adff4f9b279f', class: "ds-visually-hidden" }, index.h("slot", { key: '6e1f3a1cc4327d4b0b67b1104926e51ed21d505e' })));
     }
 };
 DsVisuallyHidden.style = dsVisuallyHiddenCss;