@uh-design-system/component-library 1.2.0 → 1.3.0-rc.1

package/dist/collection/components/01-base-components/ds-select/ds-select.js

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { h, Host, forceUpdate, Mixin } from "@stencil/core";
-import { debounce, declareComponentDependencies, idGenerator, ifDefined, transformTagName } from "../../../utils/utils";
+import { componentOnReady, debounce, declareComponentDependencies, idGenerator, ifDefined, transformTagName } from "../../../utils/utils";
 import { atLeastOneOption, loadingOptions, selectAnOption, selections, thereAreOptionsToBrowse, tryAgainOrIfTheProblemPersists, weCouldNotLoadOptions, } from "../../../utils/controls/controlUtils";
 import { cx } from "../../../utils/cx";
 import { removeSelection } from "../../../utils/controls/controlUtils";
@@ -41,6 +41,7 @@ export class DsSelect extends Mixin(multipleValueFactory) {
     dsOptionsError = false;
     dsOptionsErrorTitle;
     dsOptionsErrorText;
+    dsFullWidth = false;
     dsRequired = false;
     activeOption = null;
     selectedOptions = [];
@@ -239,8 +240,8 @@ export class DsSelect extends Mixin(multipleValueFactory) {
         }
     }
     getBadgeContainerWidthOffset = async () => {
-        await this.clearButtonRef?.componentOnReady?.();
-        await this.badgeRef?.componentOnReady?.();
+        await componentOnReady(this.clearButtonRef);
+        await componentOnReady(this.badgeRef);
         const clearButtonWidth = this.clearButtonRef?.getBoundingClientRect().width || 0;
         const badgeContainerWidth = this.badgeRef?.getBoundingClientRect().width || 0;
         this.badgeContainerOffset = clearButtonWidth && badgeContainerWidth ? clearButtonWidth + badgeContainerWidth : null;
@@ -369,7 +370,7 @@ export class DsSelect extends Mixin(multipleValueFactory) {
     };
     renderNativeSelect() {
         const DsSelectNative = transformTagName('ds-select-native', 'ds-select', this.el);
-        return (h(DsSelectNative, { dsId: this.dsId, dsLabel: this.dsLabel, dsPlaceholder: this.texts.dsPlaceholder, dsIcon: this.dsIcon, dsName: this.dsName || this.dsId, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsRequired: this.dsRequired, dsValue: this.getValueItem(0) || '', onDsChange: (e) => {
+        return (h(DsSelectNative, { dsId: this.dsId, dsLabel: this.dsLabel, dsPlaceholder: this.texts.dsPlaceholder, dsIcon: this.dsIcon, dsName: this.dsName || this.dsId, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsRequired: this.dsRequired, dsFullWidth: this.dsFullWidth, dsValue: this.getValueItem(0) || '', onDsChange: (e) => {
                 this.value = this.toValue(e.detail);
             }, onDsValidity: (e) => {
                 this.dsValidity.emit(e.detail);
@@ -397,6 +398,7 @@ export class DsSelect extends Mixin(multipleValueFactory) {
                 this.customSelectRef?.focus();
                 this.toggleDropdown();
             } }, h("slot", { name: "label" })), h("div", { class: `${customSelectClass}-wrapper` }, h("div", { class: `${customSelectClass}-input-container` }, h("div", { id: this.dsId, ref: el => (this.customSelectRef = el), class: classNames(`${customSelectClass}`, {
+                [`${baseClass}--full-width`]: this.dsFullWidth,
                 [`${customSelectClass}--open`]: this.isOpen,
                 [`${customSelectClass}--none-selected`]: noneSelected,
                 [`${customSelectClass}--disabled`]: this.dsDisabled,
@@ -445,7 +447,7 @@ export class DsSelect extends Mixin(multipleValueFactory) {
     }
     render() {
         const baseClass = cx('ds-select');
-        return (h(Host, { key: '7c585847e96a32aa8cfa70e9927368ffdc1ff51b', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: '1c9b905cddc0fdd71a53d30920afa97f176b64a9', tabIndex: -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
+        return (h(Host, { key: '79ac153e47f7d1e967ce834c152ea6d5500b0311', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: '6cddaa1ce3301a7fb54243a996fb641e318de4b2', tabIndex: -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
     }
     static get is() { return "ds-select"; }
     static get encapsulation() { return "scoped"; }
@@ -775,6 +777,26 @@ export class DsSelect extends Mixin(multipleValueFactory) {
                 "reflect": false,
                 "attribute": "ds-options-error-text"
             },
+            "dsFullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the select takes the full width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-full-width",
+                "defaultValue": "false"
+            },
             "dsRequired": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/01-base-components/ds-select/stories/ds-select.examples.stories.js

@@ -89,6 +89,7 @@ const renderSelect = () => {
         ? html `<div style="display: flex; align-items: flex-start; flex-direction: column; gap: var(--ds-spacing-md);">
           <ds-chip-group
             ${ref(chipGroupRef)}
+            ds-aria-label="Selected options"
             @dsChipClick=${(event) => {
             const value = event.detail;
             const newValue = dsValue.filter(v => v !== value);

package/dist/collection/components/01-base-components/ds-select/stories/ds-select.features.stories.js

@@ -55,6 +55,15 @@ export const Invalid = {
     </ds-select>
   `,
 };
+export const FullWidth = {
+    render: () => html `
+    <ds-select ds-label="Full Width Select" ds-placeholder="Select an option" ds-variant="default" ds-full-width>
+      <ds-option ds-value="option1">Option 1</ds-option>
+      <ds-option ds-value="option2">Option 2</ds-option>
+      <ds-option ds-value="option3">Option 3</ds-option>
+    </ds-select>
+  `,
+};
 export const LongList = {
     render: () => html `
     <ds-select ds-label="Long List" ds-placeholder="Select an option" ds-variant="default">

package/dist/collection/components/01-base-components/ds-select/stories/ds-select.stories.js

@@ -39,6 +39,7 @@ const renderSelect = (args) => {
           ?ds-options-error=${args.dsOptionsError}
           ds-options-error-title=${args.dsOptionsErrorTitle}
           ds-options-error-text=${args.dsOptionsErrorText}
+          ?ds-full-width=${args.dsFullWidth}
         >
           ${args.dsVariant === 'native' ? getNativeOptions() : getCustomOptions(args.dsVariant)}
         </ds-select>
@@ -63,6 +64,7 @@ export const Default = {
         dsOptionsError: false,
         dsOptionsErrorTitle: '',
         dsOptionsErrorText: '',
+        dsFullWidth: false,
     },
     render: args => renderSelect(args),
 };
@@ -358,6 +360,7 @@ export const Playground = {
         dsOptionsError: false,
         dsOptionsErrorTitle: '',
         dsOptionsErrorText: '',
+        dsFullWidth: false,
     },
     render: args => renderSelect(args),
 };

package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.css

@@ -177,47 +177,47 @@ body {
   font-weight: var(--ds-fontWeight-bold);
 }
 
-.ds-spinner__DFAX9n {
+.ds-spinner__rbEY9j {
   display: inline-block;
 }
-.ds-spinner__DFAX9n:has(.ds-spinner__DFAX9n__text) {
+.ds-spinner__rbEY9j:has(.ds-spinner__rbEY9j__text) {
   display: inline-flex;
   align-items: center;
   gap: calc(var(--spinner-size) / 2);
 }
-.ds-spinner__DFAX9n {
+.ds-spinner__rbEY9j {
   /* Size */
 }
-.ds-spinner__DFAX9n--small {
+.ds-spinner__rbEY9j--small {
   padding: 1.5px;
 }
-.ds-spinner__DFAX9n--medium {
+.ds-spinner__rbEY9j--medium {
   padding: 3px;
 }
-.ds-spinner__DFAX9n--large {
+.ds-spinner__rbEY9j--large {
   padding: 3px;
 }
-.ds-spinner__DFAX9n--xLarge {
+.ds-spinner__rbEY9j--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__DFAX9n--2xLarge {
+.ds-spinner__rbEY9j--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__DFAX9n--custom {
+.ds-spinner__rbEY9j--custom {
   padding: calc(var(--spinner-size) / 8);
 }
-.ds-spinner__DFAX9n {
+.ds-spinner__rbEY9j {
   /* Position */
 }
-.ds-spinner__DFAX9n--below {
+.ds-spinner__rbEY9j--below {
   flex-direction: column;
   align-items: center;
 }
-.ds-spinner__DFAX9n--right {
+.ds-spinner__rbEY9j--right {
   flex-direction: row;
   align-items: center;
 }
-.ds-spinner__DFAX9n__spinner {
+.ds-spinner__rbEY9j__spinner {
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
   border-radius: 50%;
@@ -227,14 +227,14 @@ body {
   align-items: center;
   justify-content: center;
 }
-.ds-spinner__DFAX9n__text {
+.ds-spinner__rbEY9j__text {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
 }
-.ds-spinner__DFAX9n__text--white {
+.ds-spinner__rbEY9j__text--white {
   color: var(--ds-textColor-white);
 }
-.ds-spinner__DFAX9n__segment {
+.ds-spinner__rbEY9j__segment {
   display: block;
   position: absolute;
   width: var(--spinner-size, 24px);
@@ -244,13 +244,13 @@ body {
   animation: ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;
   border-color: var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color);
 }
-.ds-spinner__DFAX9n__segment--1 {
+.ds-spinner__rbEY9j__segment--1 {
   animation-delay: -0.3s;
 }
-.ds-spinner__DFAX9n__segment--2 {
+.ds-spinner__rbEY9j__segment--2 {
   animation-delay: -0.2s;
 }
-.ds-spinner__DFAX9n__segment--3 {
+.ds-spinner__rbEY9j__segment--3 {
   animation-delay: -0.1s;
 }
 
@@ -264,17 +264,17 @@ body {
 }
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
-  .ds-spinner__DFAX9n__segment {
+  .ds-spinner__rbEY9j__segment {
     animation-duration: 2.2s; /* Double the original duration (slower) */
     animation-timing-function: linear; /* More predictable motion */
   }
-  .ds-spinner__DFAX9n__segment--1 {
+  .ds-spinner__rbEY9j__segment--1 {
     animation-delay: -0.6s;
   }
-  .ds-spinner__DFAX9n__segment--2 {
+  .ds-spinner__rbEY9j__segment--2 {
     animation-delay: -0.4s;
   }
-  .ds-spinner__DFAX9n__segment--3 {
+  .ds-spinner__rbEY9j__segment--3 {
     animation-delay: -0.2s;
   }
 }

package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.js

@@ -21,6 +21,7 @@ const SPINNER_COLORS = {
     blue: 'var(--ds-palette-mainBlue-70)',
     black: 'var(--ds-palette-black-95)',
     white: 'var(--ds-palette-white)',
+    danger: 'var(--ds-palette-red-70)',
 };
 export class DsSpinner {
     inheritedAttributes = {};
@@ -54,11 +55,11 @@ export class DsSpinner {
         const segmentClasses = (index) => classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
         const spinnerSizeValue = this.dsCustomSize ? `calc(${this.dsCustomSize} / 1.5833333333)` : `${sizeInPixels}px`;
-        return (h("div", { key: '8913c8c5401dffba3bb7abe43db3c1afd6775ee3', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (h("div", { key: 'd78da25f71202bd5f5c5dc2d92e13c581e834d7f', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': spinnerSizeValue,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: 'e707f822461892f6ccc1bb6b417875ac306ae547', class: `${baseClass}__spinner` }, h("div", { key: '35db86067a9438c5f39798a8acbfa222dcddcfc7', class: segmentClasses(1) }), h("div", { key: '92be670780d43cee87ef8893dca076d9cf0959f2', class: segmentClasses(2) }), h("div", { key: 'dc6b5b27c285f28c0c20a18740b9e879c7226694', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'f92b2cc2f0e096119a36b92b91da4b15bc688866' }, h("span", { key: '5ca590701eb04d3beab6dd416510ff586bfff2b6' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: 'bac1e20291e903aa0c723118d14f307982bea009', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+            }, ...this.inheritedAttributes }, h("div", { key: 'b2e3d79566f25b904d01ab91d593c78eaf8025d7', class: `${baseClass}__spinner` }, h("div", { key: 'a7b7fd1c0e9360eeb14f65cce4518603af7d6852', class: segmentClasses(1) }), h("div", { key: '8d674f11ab642a2e106933f9e7e77cb24c128d4a', class: segmentClasses(2) }), h("div", { key: '49590fb7f9072695c5a7f49abda7510fd78e7f5c', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '6f93eb6b3c9516f41fee693ae65012164db26ee9' }, h("span", { key: '0fbc33095e1e691abc4d9230ef2804ff2f14c94b' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: '95f3a5de9dfe908d52f1dc7b6840d6a3d5667433', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
     }
     static get is() { return "ds-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -186,7 +187,7 @@ export class DsSpinner {
                 "mutable": false,
                 "complexType": {
                     "original": "SpinnerColor",
-                    "resolved": "\"black\" | \"blue\" | \"white\"",
+                    "resolved": "\"black\" | \"blue\" | \"danger\" | \"white\"",
                     "references": {
                         "SpinnerColor": {
                             "location": "global",

package/dist/collection/components/01-base-components/ds-tag/ds-tag.css

@@ -1,14 +1,14 @@
-.ds-tag__DFAX9n:focus-visible {
+.ds-tag__rbEY9j:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-tag__DFAX9n:focus-within {
+.ds-tag__rbEY9j: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);
 }
-.ds-tag__DFAX9n {
+.ds-tag__rbEY9j {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -17,87 +17,87 @@
   padding: calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--default {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--default {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--default:has(.ds-tag__DFAX9n__link:hover) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--default:has(.ds-tag__rbEY9j__link:hover) {
   background-color: var(--ds-bgColor-neutral-hover);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--default:has(.ds-tag__DFAX9n__link:active) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--default:has(.ds-tag__rbEY9j__link:active) {
   background-color: var(--ds-bgColor-neutral-active);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--black {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--black {
   color: var(--ds-textColor-white);
   background-color: var(--ds-bgColor-black);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--black:has(.ds-tag__DFAX9n__link:hover) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--black:has(.ds-tag__rbEY9j__link:hover) {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--black:has(.ds-tag__DFAX9n__link:active) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--black:has(.ds-tag__rbEY9j__link:active) {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--white {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--white {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--white:has(.ds-tag__DFAX9n__link:hover) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--white:has(.ds-tag__rbEY9j__link:hover) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--white:has(.ds-tag__DFAX9n__link:active) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--white:has(.ds-tag__rbEY9j__link:active) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--info {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--info:has(.ds-tag__DFAX9n__link:hover) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--info:has(.ds-tag__rbEY9j__link:hover) {
   background-color: var(--ds-bgColor-info-hover);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--info:has(.ds-tag__DFAX9n__link:active) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--info:has(.ds-tag__rbEY9j__link:active) {
   background-color: var(--ds-bgColor-info-active);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--danger {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--danger:has(.ds-tag__DFAX9n__link:hover) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--danger:has(.ds-tag__rbEY9j__link:hover) {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--danger:has(.ds-tag__DFAX9n__link:active) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--danger:has(.ds-tag__rbEY9j__link:active) {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--attention {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--attention:has(.ds-tag__DFAX9n__link:hover) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--attention:has(.ds-tag__rbEY9j__link:hover) {
   background-color: var(--ds-bgColor-attention-hover);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--attention:has(.ds-tag__DFAX9n__link:active) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--attention:has(.ds-tag__rbEY9j__link:active) {
   background-color: var(--ds-bgColor-attention-active);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--success {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--success:has(.ds-tag__DFAX9n__link:hover) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--success:has(.ds-tag__rbEY9j__link:hover) {
   background-color: var(--ds-bgColor-success-hover);
 }
-.ds-tag__DFAX9n.ds-tag__DFAX9n--success:has(.ds-tag__DFAX9n__link:active) {
+.ds-tag__rbEY9j.ds-tag__rbEY9j--success:has(.ds-tag__rbEY9j__link:active) {
   background-color: var(--ds-bgColor-success-active);
 }
-.ds-tag__DFAX9n__text {
+.ds-tag__rbEY9j__text {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-semibold);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-tag__DFAX9n__link {
+.ds-tag__rbEY9j__link {
   display: contents;
 }
-.ds-tag__DFAX9n__link::part(link):focus-visible {
+.ds-tag__rbEY9j__link::part(link):focus-visible {
   box-shadow: none;
   outline: none;
   outline-offset: none;

package/dist/collection/components/01-base-components/ds-tag/ds-tag.js

@@ -13,6 +13,7 @@ export class DsTag {
     dsTarget;
     dsHref;
     dsColour = 'default';
+    dsRole;
     dsAriaHidden;
     componentWillLoad() {
         this.inheritedAttributes = {
@@ -28,8 +29,9 @@ export class DsTag {
         const DsIcon = transformTagName('ds-icon', 'ds-tag', this.el);
         const DsLink = transformTagName('ds-link', 'ds-tag', this.el);
         const ariaHidden = this.dsAriaHidden !== undefined ? this.dsAriaHidden : this.dsHref ? false : true;
-        const restAttributes = omit(this.inheritedAttributes, ['aria-hidden']);
-        return (h("div", { key: '2036fd3502b7a7d035db204f94a2d2d72ae54dec', class: classes, ...restAttributes, "aria-hidden": ariaHidden }, h("slot", { key: 'b15093ac785e26444835eee3a0051e520f3f31e7', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '89800d5086bf1b52dc4c5791985e5dbb98a614ec' }, this.dsHref ? (h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: `${baseClass}__text` }, this.dsText))), h("slot", { key: 'b13686f17d29f22d2ba343399b7711a71a2a65ac', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        const role = this.dsRole ?? this.inheritedAttributes.role;
+        const restAttributes = omit(this.inheritedAttributes, ['aria-hidden', 'role']);
+        return (h("div", { key: 'c3866cb7a61595782d3b805eeb2c4c9d4042c80c', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, h("slot", { key: 'db69537f46a5cf7ef6279fedf18e56472230463b', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'f89f267cd490dc5889e235c705b74533eb25ac8d' }, this.dsHref ? (h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: `${baseClass}__text` }, this.dsText))), h("slot", { key: '08098e89678baedc1a2510cd0896d463acb89d90', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
     }
     static get is() { return "ds-tag"; }
     static get originalStyleUrls() {
@@ -192,6 +194,25 @@ export class DsTag {
                 "attribute": "ds-colour",
                 "defaultValue": "'default'"
             },
+            "dsRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `role` attribute of the tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-role"
+            },
             "dsAriaHidden": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/01-base-components/ds-tag-group/ds-tag-group.css

@@ -1,4 +1,4 @@
-.ds-tag-group__DFAX9n__tags {
+.ds-tag-group__rbEY9j__tags {
   display: inline-flex;
   flex-flow: row wrap;
   gap: var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);

package/dist/collection/components/01-base-components/ds-tag-group/ds-tag-group.js

@@ -23,7 +23,7 @@ export class DsTagGroup {
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
-        return (h("div", { key: 'ca526c5ac71155054926bdb68b9e326e29bddf56', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'ca4dde5c79963b76b5c18835d5dbf1d14869debf', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '6314740e852ad1e528036244217648260ffa3354', name: "label" }), h("slot", { key: 'cca7f56ae4e961ca36eacdf7b6f304497360bcd0', name: "assistiveText" })), h("div", { key: '4ebf0810f30588917820730bc02cada9a8632e5d', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '12bb06986972f647f6ae8780664df68fe292f98d' }))));
+        return (h("div", { key: 'bc8fd8590b4e3f84e80cb468a68cfe019e7a1150', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'c126d0b13ee8347fa94c6d03ef45eec6107e1930', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '07decc48acbd5c236017dd1958a17c16a725d0cc', name: "label" }), h("slot", { key: '6d411db48cc848fd851ab4927e5fb932612b2cf6', name: "assistiveText" })), h("div", { key: 'f6183c90fca865eeab8ad01fd67c1b628676c5ca', role: "list", class: `${baseClass}__tags` }, h("slot", { key: 'ce4eeebdb12e5c4ab179eb2e476387a028c5f787' }))));
     }
     static get is() { return "ds-tag-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-text-area/ds-text-area.css

@@ -7,21 +7,21 @@
 :host {
   display: inline-block;
 }
-:host:has(.ds-text-area__DFAX9n__container--full-width) {
+:host:has(.ds-text-area__rbEY9j__container--full-width) {
   width: 100%;
 }
 
-.ds-text-area__DFAX9n__container:focus-visible {
+.ds-text-area__rbEY9j__container:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-text-area__DFAX9n__container:focus-within {
+.ds-text-area__rbEY9j__container: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);
 }
-.ds-text-area__DFAX9n__container {
+.ds-text-area__rbEY9j__container {
   box-sizing: border-box;
   display: inline-flex;
   position: relative;
@@ -31,73 +31,73 @@
   border-color: var(--ds-borderColor-default);
   padding: 0;
 }
-.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid {
+.ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid:hover:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid:focus-within) {
+.ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--invalid:hover:not(.ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid.ds-text-area__DFAX9n__container--active {
+.ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--invalid.ds-text-area__rbEY9j__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__DFAX9n__container--valid {
+.ds-text-area__rbEY9j__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__DFAX9n__container--valid:hover:not(.ds-text-area__DFAX9n__container--valid:focus-within) {
+.ds-text-area__rbEY9j__container--valid:hover:not(.ds-text-area__rbEY9j__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__DFAX9n__container--valid.ds-text-area__DFAX9n__container--active {
+.ds-text-area__rbEY9j__container--valid.ds-text-area__rbEY9j__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__DFAX9n__container--readonly, .ds-text-area__DFAX9n__container--disabled {
+.ds-text-area__rbEY9j__container--readonly, .ds-text-area__rbEY9j__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-area__DFAX9n__container:focus-within:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--valid, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--readonly) {
+.ds-text-area__rbEY9j__container:focus-within:not(.ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--invalid, .ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--valid, .ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-area__DFAX9n__container:hover:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--disabled, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--readonly, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--active, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--valid, .ds-text-area__DFAX9n__container:focus-within) {
+.ds-text-area__rbEY9j__container:hover:not(.ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--disabled, .ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--readonly, .ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--active, .ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--invalid, .ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--valid, .ds-text-area__rbEY9j__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-area__DFAX9n__container.active:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--disabled, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--readonly, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--valid) {
+.ds-text-area__rbEY9j__container.active:not(.ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--disabled, .ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--readonly, .ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--invalid, .ds-text-area__rbEY9j__container.ds-text-area__rbEY9j__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-area__DFAX9n__container--full-width {
+.ds-text-area__rbEY9j__container--full-width {
   width: 100%;
 }
-.ds-text-area__DFAX9n__external-button,
-.ds-text-area__DFAX9n ::slotted([slot=suffix]) {
+.ds-text-area__rbEY9j__external-button,
+.ds-text-area__rbEY9j ::slotted([slot=suffix]) {
   margin-inline-start: var(--ds-spacing-xSmall);
   align-self: flex-start;
 }
-.ds-text-area__DFAX9n__validity-container {
+.ds-text-area__rbEY9j__validity-container {
   align-items: center;
   width: 100%;
   font-size: var(--ds-fontSize-14);
 }
-.ds-text-area__DFAX9n__validity-container--has-character-limit {
+.ds-text-area__rbEY9j__validity-container--has-character-limit {
   display: flex;
   gap: var(--ds-spacing-small);
   justify-content: space-between;
 }
-.ds-text-area__DFAX9n__character-count {
+.ds-text-area__rbEY9j__character-count {
   margin-top: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__DFAX9n__character-count--over-limit {
+.ds-text-area__rbEY9j__character-count--over-limit {
   color: var(--ds-textColor-danger);
 }
-.ds-text-area__DFAX9n__character-count > small {
+.ds-text-area__rbEY9j__character-count > small {
   display: inline-block;
 }
-.ds-text-area__DFAX9n__textarea {
+.ds-text-area__rbEY9j__textarea {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -112,7 +112,7 @@
   border: none;
   padding: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__DFAX9n__textarea::placeholder {
+.ds-text-area__rbEY9j__textarea::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -120,33 +120,33 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-area__DFAX9n__textarea:disabled {
+.ds-text-area__rbEY9j__textarea:disabled {
   color: var(--ds-textColor-disabled-onLight);
   background-color: var(--ds-bgColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-text-area__DFAX9n__textarea:disabled::placeholder {
+.ds-text-area__rbEY9j__textarea:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-area__DFAX9n__textarea:focus {
+.ds-text-area__rbEY9j__textarea:focus {
   outline: none;
   border: none;
 }
-.ds-text-area__DFAX9n__textarea--resize-both {
+.ds-text-area__rbEY9j__textarea--resize-both {
   resize: both;
 }
-.ds-text-area__DFAX9n__textarea--resize-auto, .ds-text-area__DFAX9n__textarea--resize-none {
+.ds-text-area__rbEY9j__textarea--resize-auto, .ds-text-area__rbEY9j__textarea--resize-none {
   resize: none;
 }
-.ds-text-area__DFAX9n__textarea--resize-auto {
+.ds-text-area__rbEY9j__textarea--resize-auto {
   overflow: hidden;
 }
-.ds-text-area__DFAX9n__textarea--resize-vertical {
+.ds-text-area__rbEY9j__textarea--resize-vertical {
   resize: vertical;
 }
-.ds-text-area__DFAX9n__textarea--resize-horizontal {
+.ds-text-area__rbEY9j__textarea--resize-horizontal {
   resize: horizontal;
 }
-.ds-text-area__DFAX9n__textarea--full-width {
+.ds-text-area__rbEY9j__textarea--full-width {
   width: 100%;
 }