@uh-design-system/component-library 1.1.0 → 1.2.0-rc.0

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

@@ -0,0 +1,137 @@
+import { useArgs } from "@storybook/preview-api";
+import { html } from "lit";
+import { ref, createRef } from "lit/directives/ref.js";
+const meta = {
+    title: 'Base Components/Select/Examples',
+    component: 'ds-select',
+};
+export default meta;
+const options = [
+    { value: 'cat', label: 'Cat' },
+    { value: 'wildcat', label: 'Wildcat' },
+    { value: 'bobcat', label: 'Bobcat' },
+    { value: 'catfish', label: 'Catfish' },
+    { value: 'housecat', label: 'Housecat' },
+];
+const optionsMap = new Map(options.map(option => [option.value, option.label]));
+const findClosestFocusableChipValue = (removedValue, dsValue) => {
+    if (typeof dsValue === 'string' || dsValue.length === 0) {
+        return undefined;
+    }
+    const removedIndex = options.findIndex(option => option.value === removedValue);
+    for (let i = removedIndex - 1; i >= 0; i--) {
+        if (dsValue.includes(options[i].value)) {
+            return options[i].value;
+        }
+    }
+    for (let i = removedIndex + 1; i < options.length; i++) {
+        if (dsValue.includes(options[i].value)) {
+            return options[i].value;
+        }
+    }
+    return undefined;
+};
+let prevValueCount = 0;
+let wasLastChipClick = false;
+let wasClearSelectionsClick = false;
+let closestFocusableChipValue;
+const allSelectionsClearedRef = createRef();
+const chipGroupRef = createRef();
+const renderOptions = () => options.map(option => html `<ds-option ds-variant="multiple" ds-value=${option.value}>${option.label}</ds-option>`);
+const renderChips = (dsValue) => {
+    if (typeof dsValue === 'string') {
+        return null;
+    }
+    return dsValue.map(value => html `<ds-chip key=${value} role="listitem" ds-variant="removable" ds-value=${value}>${optionsMap.get(value)}</ds-chip>`);
+};
+const renderSelect = () => {
+    const [{ dsValue }, updateArgs] = useArgs();
+    const showClearedMessage = prevValueCount > 0 && (dsValue === '' || dsValue.length === 0);
+    if (showClearedMessage && allSelectionsClearedRef.value && (wasLastChipClick || wasClearSelectionsClick)) {
+        setTimeout(() => {
+            allSelectionsClearedRef.value.classList.remove('ds-sb-hidden');
+            allSelectionsClearedRef.value.classList.add('ds-sb-focusable-paragraph');
+            allSelectionsClearedRef.value?.focus();
+            wasLastChipClick = false;
+            wasClearSelectionsClick = false;
+        }, 0);
+    }
+    if (closestFocusableChipValue && chipGroupRef.value && !showClearedMessage) {
+        setTimeout(() => {
+            chipGroupRef.value?.querySelector(`ds-chip[ds-value="${closestFocusableChipValue}"]`)?.setFocus();
+            closestFocusableChipValue = undefined;
+        }, 0);
+    }
+    return html `
+    <style>
+      .ds-sb-hidden {
+        display: none;
+      }
+      .ds-sb-focusable-paragraph:focus {
+        display: inline;
+        outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+        outline-offset: var(--ds-borderWidth-thin);
+      }
+    </style>
+    <ds-select
+      ds-label="Multiple select with chips"
+      ds-placeholder="Select one or more options"
+      ds-variant="multiple"
+      .dsValue=${dsValue}
+      @dsMultipleChange=${(event) => {
+        prevValueCount = dsValue?.length || 0;
+        updateArgs({ dsValue: event.detail.values });
+    }}
+    >
+      ${renderOptions()}
+    </ds-select>
+    ${dsValue?.length
+        ? html `<div style="display: flex; align-items: flex-start; flex-direction: column; gap: var(--ds-spacing-md);">
+          <ds-chip-group
+            ${ref(chipGroupRef)}
+            @dsChipClick=${(event) => {
+            const value = event.detail;
+            const newValue = dsValue.filter(v => v !== value);
+            prevValueCount = dsValue?.length || 0;
+            wasLastChipClick = prevValueCount === 1;
+            if (newValue.length > 0) {
+                closestFocusableChipValue = findClosestFocusableChipValue(value, dsValue);
+            }
+            updateArgs({ dsValue: newValue.length ? newValue : '' });
+        }}
+          >
+            ${renderChips(dsValue)}
+          </ds-chip-group>
+          <ds-button
+            ds-icon="delete"
+            ds-variant="supplementary"
+            ds-text="Clear selections"
+            @click=${() => {
+            wasClearSelectionsClick = true;
+            updateArgs({ dsValue: '' });
+        }}
+          ></ds-button>
+        </div>`
+        : null}
+    <div class="ds-mt-sm">
+      <p
+        ${ref(allSelectionsClearedRef)}
+        tabindex="0"
+        class="ds-sb-hidden"
+        @focusout=${() => {
+        allSelectionsClearedRef.value?.classList.remove('ds-sb-focusable-paragraph');
+        allSelectionsClearedRef.value?.classList.add('ds-sb-hidden');
+    }}
+      >
+        All selections have been cleared. Set focus to a meaningful target.<br />
+        This could be for instance a heading, another interactive element, or the select component.
+      </p>
+    </div>
+  `;
+};
+export const MultipleWithChips = {
+    args: {
+        dsValue: '',
+    },
+    render: renderSelect,
+};

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

@@ -1,3 +1,4 @@
+import { useArgs } from "@storybook/preview-api";
 import { html } from "lit";
 const meta = {
     title: 'Base Components/Select/Features',
@@ -138,6 +139,31 @@ export const DynamicOptionsError = {
     },
     name: 'Dynamic options (error)',
 };
+export const Multiple = {
+    argTypes: {
+        dsValue: { control: 'multi-select', options: ['option1', 'option2', 'option3', 'option4'] },
+    },
+    args: {
+        dsValue: ['option2', 'option3'],
+    },
+    render: () => {
+        const [{ dsValue }, updateArgs] = useArgs();
+        return html `
+      <ds-select
+        @dsMultipleChange=${(e) => updateArgs({ dsValue: e.detail.values })}
+        ds-label="Multiple"
+        ds-placeholder="Select options"
+        ds-variant="multiple"
+        .dsValue=${dsValue}
+      >
+        <ds-option ds-variant="multiple" ds-value="option1">Option 1</ds-option>
+        <ds-option ds-variant="multiple" ds-value="option2">Option 2</ds-option>
+        <ds-option ds-variant="multiple" ds-value="option3">Option 3</ds-option>
+        <ds-option ds-variant="multiple" ds-value="option4">Option 4</ds-option>
+      </ds-select>
+    `;
+    },
+};
 const slotsStyles = html `
   <style>
     .ds-sb-slots {

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

@@ -1,61 +1,12 @@
-import { html } from "lit";
-function renderDynamicOption(opt) {
-    if (typeof opt === 'string') {
-        try {
-            const parsed = JSON.parse(opt);
-            if (parsed && typeof parsed === 'object' && 'value' in parsed && 'label' in parsed) {
-                return html `<ds-option ds-value=${parsed.dsValue} ?ds-disabled=${parsed.dsDisabled}>${parsed.dsLabel}</ds-option>`;
-            }
-        }
-        catch {
-        }
-        return html `<ds-option ds-value=${opt} ?ds-disabled=${false}>${opt}</ds-option>`;
-    }
-    return html `<ds-option ds-value=${opt.dsValue} ?ds-disabled=${opt.dsDisabled}>${opt.dsLabel}</ds-option>`;
-}
+import { html, render } from "lit";
+import { icons } from "../../../00-foundations/icons/iconList";
 const meta = {
     title: 'Base Components/Select',
     component: 'ds-select',
     argTypes: {
-        dsVariant: {
-            control: 'radio',
-            options: ['native', 'default'],
-        },
-        dsLabel: {
-            control: 'text',
-        },
-        dsPlaceholder: {
-            control: 'text',
-        },
-        dsClearable: {
-            control: 'boolean',
-        },
-        dsDisabled: {
-            control: 'boolean',
-        },
-        dsErrorText: {
-            control: 'text',
-        },
         dsIcon: {
-            control: 'text',
-        },
-        dsValue: {
-            control: 'text',
-        },
-        dsLoading: {
-            control: 'boolean',
-        },
-        dsLoadingText: {
-            control: 'text',
-        },
-        dsOptionsError: {
-            control: 'boolean',
-        },
-        dsOptionsErrorTitle: {
-            control: 'text',
-        },
-        dsOptionsErrorText: {
-            control: 'text',
+            control: 'select',
+            options: icons.map(icon => icon.name),
         },
     },
 };
@@ -67,6 +18,35 @@ const options = [
     { value: 'catfish', label: 'Catfish' },
     { value: 'housecat', label: 'Housecat' },
 ];
+const getCustomOptions = (variant) => options.map(option => html `<ds-option ds-variant=${variant} ds-value=${option.value}>${option.label}</ds-option>`);
+const getNativeOptions = () => options.map(option => html `<option slot="native" value=${option.value}>${option.label}</option>`);
+const renderSelect = (args) => {
+    const wrapper = document.createElement('div');
+    const renderContent = () => {
+        render(html `
+        <ds-select
+          ds-label=${args.dsLabel}
+          ds-placeholder=${args.dsPlaceholder}
+          ds-variant=${args.dsVariant}
+          ?ds-clearable=${args.dsClearable}
+          ?ds-disabled=${args.dsDisabled}
+          ds-error-text=${args.dsErrorText}
+          ds-icon=${args.dsIcon}
+          ds-value=${args.dsValue}
+          ?ds-required=${args.dsRequired}
+          ?ds-loading=${args.dsLoading}
+          ds-loading-text=${args.dsLoadingText}
+          ?ds-options-error=${args.dsOptionsError}
+          ds-options-error-title=${args.dsOptionsErrorTitle}
+          ds-options-error-text=${args.dsOptionsErrorText}
+        >
+          ${args.dsVariant === 'native' ? getNativeOptions() : getCustomOptions(args.dsVariant)}
+        </ds-select>
+      `, wrapper);
+    };
+    renderContent();
+    return wrapper;
+};
 export const Default = {
     args: {
         dsLabel: 'Default Select',
@@ -77,33 +57,14 @@ export const Default = {
         dsErrorText: '',
         dsIcon: '',
         dsValue: '',
+        dsRequired: false,
         dsLoading: false,
         dsLoadingText: '',
         dsOptionsError: false,
         dsOptionsErrorTitle: '',
         dsOptionsErrorText: '',
     },
-    render: args => html `
-    <ds-select
-      ds-label=${args.dsLabel}
-      ds-placeholder=${args.dsPlaceholder}
-      ds-variant=${args.dsVariant}
-      ?ds-clearable=${args.dsClearable}
-      ?ds-disabled=${args.dsDisabled}
-      ds-error-text=${args.dsErrorText}
-      ds-icon=${args.dsIcon}
-      ds-value=${args.dsValue}
-      ?ds-loading=${args.dsLoading}
-      ds-loading-text=${args.dsLoadingText}
-      ?ds-options-error=${args.dsOptionsError}
-      ds-options-error-title=${args.dsOptionsErrorTitle}
-      ds-options-error-text=${args.dsOptionsErrorText}
-    >
-      <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>
-  `,
+    render: args => renderSelect(args),
 };
 const eventsOptions = options.map(option => ({ ...option, id: option.value }));
 export const Events = {
@@ -246,7 +207,9 @@ export const Events = {
 export const Playground = {
     args: {
         dsLabel: 'Playground',
-        dsPlaceholder: 'Select an option',
+        dsPlaceholder: 'playground-placeholder',
+        dsId: 'playground-id',
+        dsName: 'playground-name',
         dsVariant: 'default',
         dsClearable: true,
         dsDisabled: false,
@@ -259,42 +222,6 @@ export const Playground = {
         dsOptionsError: false,
         dsOptionsErrorTitle: '',
         dsOptionsErrorText: '',
-        options: [
-            { dsValue: 'option1', dsLabel: 'Option 1', dsDisabled: false },
-            { dsValue: 'option2', dsLabel: 'Option 2', dsDisabled: false },
-            { dsValue: 'option3', dsLabel: 'Option 3', dsDisabled: false },
-        ],
-    },
-    argTypes: {
-        options: {
-            control: 'object',
-            table: { category: 'Slots' },
-            defaultValue: [
-                { dsValue: 'option1', dsLabel: 'Option 1', dsDisabled: false },
-                { dsValue: 'option2', dsLabel: 'Option 2', dsDisabled: false },
-                { dsValue: 'option3', dsLabel: 'Option 3', dsDisabled: false },
-            ],
-            description: 'Options for dynamic select (Playground only)',
-        },
     },
-    render: args => html `
-    <ds-select
-      ds-label=${args.dsLabel}
-      ds-placeholder=${args.dsPlaceholder}
-      ds-variant=${args.dsVariant}
-      ?ds-clearable=${args.dsClearable}
-      ?ds-disabled=${args.dsDisabled}
-      ds-error-text=${args.dsErrorText}
-      ds-icon=${args.dsIcon}
-      ds-value=${args.dsValue}
-      ?ds-required=${args.dsRequired}
-      ?ds-loading=${args.dsLoading}
-      ds-loading-text=${args.dsLoadingText}
-      ?ds-options-error=${args.dsOptionsError}
-      ds-options-error-title=${args.dsOptionsErrorTitle}
-      ds-options-error-text=${args.dsOptionsErrorText}
-    >
-      ${!args.dsLoading && !args.dsOptionsError ? args.options.map(renderDynamicOption) : null}
-    </ds-select>
-  `,
+    render: args => renderSelect(args),
 };

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

@@ -177,54 +177,54 @@ body {
   font-weight: var(--ds-fontWeight-bold);
 }
 
-.ds-spinner__JDwdTJ {
+.ds-spinner__nkrEji {
   display: flex;
   align-items: center;
   justify-content: center;
   /* Size */
 }
-.ds-spinner__JDwdTJ--small {
+.ds-spinner__nkrEji--small {
   padding: 1.5px;
 }
-.ds-spinner__JDwdTJ--small:has(.ds-spinner__JDwdTJ__text) {
+.ds-spinner__nkrEji--small:has(.ds-spinner__nkrEji__text) {
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-spinner__JDwdTJ--medium {
+.ds-spinner__nkrEji--medium {
   padding: 3px;
 }
-.ds-spinner__JDwdTJ--medium:has(.ds-spinner__JDwdTJ__text) {
+.ds-spinner__nkrEji--medium:has(.ds-spinner__nkrEji__text) {
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-spinner__JDwdTJ--large {
+.ds-spinner__nkrEji--large {
   padding: 3px;
 }
-.ds-spinner__JDwdTJ--large:has(.ds-spinner__JDwdTJ__text) {
+.ds-spinner__nkrEji--large:has(.ds-spinner__nkrEji__text) {
   gap: var(--ds-spacing-xSmall);
 }
-.ds-spinner__JDwdTJ--xLarge {
+.ds-spinner__nkrEji--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__JDwdTJ--xLarge:has(.ds-spinner__JDwdTJ__text) {
+.ds-spinner__nkrEji--xLarge:has(.ds-spinner__nkrEji__text) {
   gap: 10px;
 }
-.ds-spinner__JDwdTJ--2xLarge {
+.ds-spinner__nkrEji--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__JDwdTJ--2xLarge:has(.ds-spinner__JDwdTJ__text) {
+.ds-spinner__nkrEji--2xLarge:has(.ds-spinner__nkrEji__text) {
   gap: var(--ds-spacing-small);
 }
-.ds-spinner__JDwdTJ {
+.ds-spinner__nkrEji {
   /* Position */
 }
-.ds-spinner__JDwdTJ--below {
+.ds-spinner__nkrEji--below {
   flex-direction: column;
   align-items: center;
 }
-.ds-spinner__JDwdTJ--right {
+.ds-spinner__nkrEji--right {
   flex-direction: row;
   align-items: center;
 }
-.ds-spinner__JDwdTJ__spinner {
+.ds-spinner__nkrEji__spinner {
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
   border-radius: 50%;
@@ -234,14 +234,14 @@ body {
   align-items: center;
   justify-content: center;
 }
-.ds-spinner__JDwdTJ__text {
+.ds-spinner__nkrEji__text {
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-default);
 }
-.ds-spinner__JDwdTJ__text--white {
+.ds-spinner__nkrEji__text--white {
   color: var(--ds-textColor-white);
 }
-.ds-spinner__JDwdTJ__segment {
+.ds-spinner__nkrEji__segment {
   display: block;
   position: absolute;
   width: var(--spinner-size, 24px);
@@ -251,13 +251,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__JDwdTJ__segment--1 {
+.ds-spinner__nkrEji__segment--1 {
   animation-delay: -0.3s;
 }
-.ds-spinner__JDwdTJ__segment--2 {
+.ds-spinner__nkrEji__segment--2 {
   animation-delay: -0.2s;
 }
-.ds-spinner__JDwdTJ__segment--3 {
+.ds-spinner__nkrEji__segment--3 {
   animation-delay: -0.1s;
 }
 
@@ -271,17 +271,17 @@ body {
 }
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
-  .ds-spinner__JDwdTJ__segment {
+  .ds-spinner__nkrEji__segment {
     animation-duration: 2.2s; /* Double the original duration (slower) */
     animation-timing-function: linear; /* More predictable motion */
   }
-  .ds-spinner__JDwdTJ__segment--1 {
+  .ds-spinner__nkrEji__segment--1 {
     animation-delay: -0.6s;
   }
-  .ds-spinner__JDwdTJ__segment--2 {
+  .ds-spinner__nkrEji__segment--2 {
     animation-delay: -0.4s;
   }
-  .ds-spinner__JDwdTJ__segment--3 {
+  .ds-spinner__nkrEji__segment--3 {
     animation-delay: -0.2s;
   }
 }

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

@@ -49,11 +49,11 @@ export class DsSpinner {
         const textClasses = classNames(`${baseClass}__text`, textSizeClass, `${baseClass}__text--${this.dsColour}`);
         const segmentClasses = (index) => classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
-        return (h("div", { key: 'b547ead78f41c2cfd71de186d0d9361b813b35a0', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (h("div", { key: '910b78b72187d79c0daa7bf57ffee0ed0bfabadc', 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.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: '82fa72097576c045075cc6746e526f669315d965', class: `${baseClass}__spinner` }, h("div", { key: 'e4e6a7e3d62c8fb5241d16c985fa7e3c09f6e9e3', class: segmentClasses(1) }), h("div", { key: 'bfeaf74150d914144fcea32b65ca9bcaacc472be', class: segmentClasses(2) }), h("div", { key: 'd8487ec860698e908e33b4ed2692723de361e8ea', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'e29e4b9033f52749da8c869b902ce87efaf03b6d' }, h("span", { key: '67146c4237b1fa2f73921a032d7d752922178040' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: 'f2adb748b53738dcf65a06c94417d10fa1a5af4e', class: textClasses }, this.dsText)));
+            }, ...this.inheritedAttributes }, h("div", { key: '35fae284b245927d308d954b541d2bfc2987ada4', class: `${baseClass}__spinner` }, h("div", { key: 'ff388baa600b9c9eb84b3ac474c1699383dd1f7e', class: segmentClasses(1) }), h("div", { key: 'd99d016e83afb77a7a7284bebf771fd73df63b30', class: segmentClasses(2) }), h("div", { key: 'c847591e37d191a0d99578623c944a4ef3cfd37a', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '715bbf0033dd217d8626b50698b68b18abdaf591' }, h("span", { key: '8e92e4d960dec0837cf72b4ab665c33017cb4f88' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '434bac5a72dc1c5c1df5661d37c0020923f92ba2', class: textClasses }, this.dsText)));
     }
     static get is() { return "ds-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,14 +1,14 @@
-.ds-tag__JDwdTJ:focus-visible {
+.ds-tag__nkrEji: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__JDwdTJ:focus-within {
+.ds-tag__nkrEji: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__JDwdTJ {
+.ds-tag__nkrEji {
   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__JDwdTJ.ds-tag__JDwdTJ--default {
+.ds-tag__nkrEji.ds-tag__nkrEji--default {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--default:has(.ds-tag__JDwdTJ__link:hover) {
+.ds-tag__nkrEji.ds-tag__nkrEji--default:has(.ds-tag__nkrEji__link:hover) {
   background-color: var(--ds-bgColor-neutral-hover);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--default:has(.ds-tag__JDwdTJ__link:active) {
+.ds-tag__nkrEji.ds-tag__nkrEji--default:has(.ds-tag__nkrEji__link:active) {
   background-color: var(--ds-bgColor-neutral-active);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--black {
+.ds-tag__nkrEji.ds-tag__nkrEji--black {
   color: var(--ds-textColor-white);
   background-color: var(--ds-bgColor-black);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--black:has(.ds-tag__JDwdTJ__link:hover) {
+.ds-tag__nkrEji.ds-tag__nkrEji--black:has(.ds-tag__nkrEji__link:hover) {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--black:has(.ds-tag__JDwdTJ__link:active) {
+.ds-tag__nkrEji.ds-tag__nkrEji--black:has(.ds-tag__nkrEji__link:active) {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--white {
+.ds-tag__nkrEji.ds-tag__nkrEji--white {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--white:has(.ds-tag__JDwdTJ__link:hover) {
+.ds-tag__nkrEji.ds-tag__nkrEji--white:has(.ds-tag__nkrEji__link:hover) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--white:has(.ds-tag__JDwdTJ__link:active) {
+.ds-tag__nkrEji.ds-tag__nkrEji--white:has(.ds-tag__nkrEji__link:active) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--info {
+.ds-tag__nkrEji.ds-tag__nkrEji--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--info:has(.ds-tag__JDwdTJ__link:hover) {
+.ds-tag__nkrEji.ds-tag__nkrEji--info:has(.ds-tag__nkrEji__link:hover) {
   background-color: var(--ds-bgColor-info-hover);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--info:has(.ds-tag__JDwdTJ__link:active) {
+.ds-tag__nkrEji.ds-tag__nkrEji--info:has(.ds-tag__nkrEji__link:active) {
   background-color: var(--ds-bgColor-info-active);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--danger {
+.ds-tag__nkrEji.ds-tag__nkrEji--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--danger:has(.ds-tag__JDwdTJ__link:hover) {
+.ds-tag__nkrEji.ds-tag__nkrEji--danger:has(.ds-tag__nkrEji__link:hover) {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--danger:has(.ds-tag__JDwdTJ__link:active) {
+.ds-tag__nkrEji.ds-tag__nkrEji--danger:has(.ds-tag__nkrEji__link:active) {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--attention {
+.ds-tag__nkrEji.ds-tag__nkrEji--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--attention:has(.ds-tag__JDwdTJ__link:hover) {
+.ds-tag__nkrEji.ds-tag__nkrEji--attention:has(.ds-tag__nkrEji__link:hover) {
   background-color: var(--ds-bgColor-attention-hover);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--attention:has(.ds-tag__JDwdTJ__link:active) {
+.ds-tag__nkrEji.ds-tag__nkrEji--attention:has(.ds-tag__nkrEji__link:active) {
   background-color: var(--ds-bgColor-attention-active);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--success {
+.ds-tag__nkrEji.ds-tag__nkrEji--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--success:has(.ds-tag__JDwdTJ__link:hover) {
+.ds-tag__nkrEji.ds-tag__nkrEji--success:has(.ds-tag__nkrEji__link:hover) {
   background-color: var(--ds-bgColor-success-hover);
 }
-.ds-tag__JDwdTJ.ds-tag__JDwdTJ--success:has(.ds-tag__JDwdTJ__link:active) {
+.ds-tag__nkrEji.ds-tag__nkrEji--success:has(.ds-tag__nkrEji__link:active) {
   background-color: var(--ds-bgColor-success-active);
 }
-.ds-tag__JDwdTJ__text {
+.ds-tag__nkrEji__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__JDwdTJ__link {
+.ds-tag__nkrEji__link {
   display: contents;
 }
-.ds-tag__JDwdTJ__link::part(link):focus-visible {
+.ds-tag__nkrEji__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

@@ -26,7 +26,7 @@ export class DsTag {
         });
         const DsIcon = transformTagName('ds-icon', 'ds-tag', this.el);
         const DsLink = transformTagName('ds-link', 'ds-tag', this.el);
-        return (h("div", { key: '0f2446c4b517db3ec20dfa950febccf0c7bfeb52', class: classes, ...this.inheritedAttributes }, h("slot", { key: '43e0a142a8f365d80cf58eaa759a7f7440ef2c30', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'ac1a060893498bc4bd9d6b87cc3f50d9074f1fac' }, 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: '8ac71e5fedcb5e8b0d1bf2e95174d014ca11e61a', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (h("div", { key: '8d70857291cba0f0b78df6f96007357491429af1', class: classes, ...this.inheritedAttributes }, h("slot", { key: '41844cd6f210458b7c35aecbf1b1244bac19f0ca', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '4153358a545f7bf1a19b71f7efbdb092fd5b254a' }, 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: '013d5f0a79aa1b22013e931f4cd9921b649723ba', 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() {

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

@@ -1,4 +1,4 @@
-.ds-tag-group__JDwdTJ__tags {
+.ds-tag-group__nkrEji__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

@@ -22,7 +22,7 @@ export class DsTagGroup {
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = attrAriaLabel || this.dsLabel;
-        return (h("div", { key: 'efc792b4d18a1111810a682a0d45dd5a30c127bb', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: '3bb21b89731d4eb10996b5c4f5b0cc5587265ab8', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: 'e523a123e46788ab4666f7e1d4c4dd9795be74af', name: "label" }), h("slot", { key: '973eb9d7e836724b40bcf1d802699a6158f3cf18', name: "assistiveText" })), h("div", { key: 'f8b272665b58a2ae3658dc4ad0f66fa6d0cd8ca9', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '9753af4408e89500b98fd52ad3b3d2b59f1abbea' }))));
+        return (h("div", { key: '46a743bcfa8039a5bb9c4e8cb05135ec0a0b584d', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'f5f06e97e135cc5996533c69b873f710c7ed03de', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '0576d2184ed1949f7e6c2f0bbef3cc2a3b4509fb', name: "label" }), h("slot", { key: '7d392dcce00873da075d971a975257e8185d3774', name: "assistiveText" })), h("div", { key: 'c374e6fe892fff8e29e2fa00820651c23afc5640', role: "list", class: `${baseClass}__tags` }, h("slot", { key: 'd4a85891863f2a0686c94bc75f90b298422b9027' }))));
     }
     static get is() { return "ds-tag-group"; }
     static get encapsulation() { return "scoped"; }