@uh-design-system/component-library 0.5.1 → 0.5.3

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

@@ -0,0 +1,107 @@
+import { html } from "lit";
+import { litTemplateResultToString } from "../../../../utils/utils";
+const meta = {
+    title: 'Base Components/Spinner/Features',
+    component: 'ds-spinner',
+};
+export default meta;
+const spinnerColorsDom = html `
+    <div class="ds-sp-container">
+      <div class="ds-sp-item">
+        <span>Blue</span>
+        <ds-spinner spinner-color="blue" size="large"></ds-spinner>
+      </div>
+      <div class="ds-sp-item">
+        <span>Black</span>
+        <ds-spinner spinner-color="black" size="large"></ds-spinner>
+      </div>
+      <div class="ds-sp-item white">
+        <span>White</span>
+        <ds-spinner spinner-color="white" size="large"></ds-spinner>
+      </div>
+    </div>
+`;
+export const Colours = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(spinnerColorsDom),
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sp-container {
+        display: flex;
+        gap: 1rem;
+        width: 100%;
+      }
+      .ds-sp-item {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+        padding: 0.5rem;
+      }
+      .white {
+        color: #FFF;
+        background: #000;
+      }
+    </style>
+    ${spinnerColorsDom}
+  `
+};
+const spinnerSizesDom = html `
+  <div class="ds-sp-container">
+    <div class="ds-sp-item">
+      <span>Small</span>
+      <ds-spinner size="small"></ds-spinner>
+    </div>
+    <div class="ds-sp-item">
+      <span>Medium</span>
+      <ds-spinner size="medium"></ds-spinner>
+    </div>
+    <div class="ds-sp-item">
+      <span>Large</span>
+      <ds-spinner size="large"></ds-spinner>
+    </div>
+    <div class="ds-sp-item">
+      <span>xLarge</span>
+      <ds-spinner size="xLarge"></ds-spinner>
+    </div>
+    <div class="ds-sp-item">
+      <span>2xLarge</span>
+      <ds-spinner size="2xLarge"></ds-spinner>
+    </div>
+  </div>
+`;
+export const Sizes = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(spinnerSizesDom),
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sp-container {
+        display: flex;
+        gap: 1rem;
+        width: 100%;
+      }
+      .ds-sp-item {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+        padding: 0.5rem;
+      }
+      .white {
+        color: #FFF;
+        background: #000;
+      }
+    </style>
+    ${spinnerSizesDom}
+  `
+};

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

@@ -0,0 +1,59 @@
+const meta = {
+    title: 'Base Components/Spinner',
+    component: 'ds-spinner',
+    argTypes: {
+        text: { control: 'text' },
+        size: {
+            control: 'select',
+            options: [
+                'small',
+                'medium',
+                'large',
+                'xLarge',
+                '2xLarge',
+            ],
+            table: {
+                type: { summary: 'select' },
+                defaultValue: { summary: 'medium' },
+            },
+        },
+        spinnerTextPosition: {
+            control: 'select',
+            options: ['below', 'side'],
+            table: {
+                type: { summary: 'select' },
+                defaultValue: { summary: 'below' },
+            },
+        },
+        spinnerColor: {
+            control: 'select',
+            options: ['blue', 'black', 'white'],
+            table: {
+                type: { summary: 'select' },
+                defaultValue: { summary: 'blue' },
+            },
+        },
+        hiddenAssistiveText: {
+            name: 'Hidden assistive text',
+            control: 'text',
+        },
+        useRoleAlert: {
+            name: 'Use role="alert"',
+            control: 'boolean',
+        },
+        useAriaLive: {
+            name: 'Use aria-live="polite"',
+            control: 'boolean',
+        }
+    }
+};
+export default meta;
+export const Default = {};
+export const Playground = {
+    args: {
+        text: 'Loading...',
+        spinnerTextPosition: 'below',
+        size: 'medium',
+        spinnerColor: 'blue',
+    },
+};

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

@@ -6,7 +6,7 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
-.no-style-leak *, :host * {
+.dsNoStyleLeak *, :host * {
   all: unset;
   box-sizing: border-box;
   display: block;
@@ -31,7 +31,7 @@
   font-weight: var(--ds-fontWeight-semibold);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
-  color: var(--ds-textColor-default);
+  color: var(--ds-palette-black-95);
 }
 .ds-input--label-container small {
   font-family: var(--ds-fontFamily-body);
@@ -41,7 +41,7 @@
   line-height: var(--ds-lineHeight-large);
   display: block;
   margin-block-start: var(--ds-spacing-3xSmall);
-  color: var(--ds-textColor-secondary);
+  color: var(--ds-palette-black-70);
 }
 .ds-input--container {
   box-sizing: border-box;
@@ -51,74 +51,74 @@
   align-items: center;
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
-  border-color: var(--ds-borderColor-default);
+  border-color: var(--ds-palette-black-50);
   padding-inline: var(--ds-spacing-xSmall);
 }
 .ds-input--container:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline-color: var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
   outline-style: solid;
   outline-width: var(--ds-borderWidth-thin);
 }
 .ds-input--container:focus-within {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline-color: var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
   outline-style: solid;
   outline-width: var(--ds-borderWidth-thin);
 }
 .ds-input--container.invalid {
-  background-color: var(--ds-bgColor-danger);
-  border-color: var(--ds-borderColor-danger);
+  background-color: var(--ds-palette-red-05);
+  border-color: var(--ds-palette-red-50);
 }
 .ds-input--container.invalid:hover:not(.ds-input--container.invalid:focus-within) {
-  background-color: var(--ds-bgColor-danger-hover);
-  border-color: var(--ds-borderColor-danger);
+  background-color: var(--ds-palette-red-10);
+  border-color: var(--ds-palette-red-50);
 }
 .ds-input--container.invalid.active {
-  background-color: var(--ds-bgColor-danger-active);
-  border-color: var(--ds-borderColor-danger);
+  background-color: var(--ds-palette-red-20);
+  border-color: var(--ds-palette-red-50);
 }
 .ds-input--container.valid {
-  background-color: var(--ds-bgColor-success);
-  border-color: var(--ds-borderColor-success);
+  background-color: var(--ds-palette-green-05);
+  border-color: var(--ds-palette-green-50);
 }
 .ds-input--container.valid:hover:not(.ds-input--container.valid:focus-within) {
-  background-color: var(--ds-bgColor-success-hover);
-  border-color: var(--ds-borderColor-success);
+  background-color: var(--ds-palette-green-10);
+  border-color: var(--ds-palette-green-50);
 }
 .ds-input--container.valid.active {
-  background-color: var(--ds-bgColor-success-active);
-  border-color: var(--ds-borderColor-success);
+  background-color: var(--ds-palette-green-20);
+  border-color: var(--ds-palette-green-50);
 }
 .ds-input--container.readonly, .ds-input--container.disabled {
-  background-color: var(--ds-bgColor-disabled-onLight);
-  border-color: var(--ds-borderColor-disabled-onLight);
+  background-color: var(--ds-overlay-black-10);
+  border-color: var(--ds-overlay-black-15);
 }
 .ds-input--container:has(input:active) {
   outline: none;
 }
 .ds-input--container:has(input:active):not:has(input:disabled, input:readonly) {
-  border-color: var(--ds-borderColor-default);
+  border-color: var(--ds-palette-black-50);
 }
 .ds-input--container.active:not(.ds-input--container.disabled, .ds-input--container.readonly, .ds-input--container.invalid, .ds-input--container.valid) {
-  border-color: var(--ds-borderColor-default);
-  background-color: var(--ds-bgColor-white-active);
+  border-color: var(--ds-palette-black-50);
+  background-color: var(--ds-palette-black-20);
 }
 .ds-input--container:hover:not(.ds-input--container.disabled, .ds-input--container.readonly, .ds-input--container.active, .ds-input--container.invalid, .ds-input--container.valid, .ds-input--container:focus-within) {
-  border-color: var(--ds-borderColor-default);
-  background-color: var(--ds-bgColor-white-hover);
+  border-color: var(--ds-palette-black-50);
+  background-color: var(--ds-palette-black-10);
 }
 .ds-input--container:focus-within:not(.ds-input--container:focus-within.invalid, .ds-input--container:focus-within.valid, .ds-input--container:focus-within.readonly) {
-  border-color: var(--ds-borderColor-primary);
+  border-color: var(--ds-palette-mainBlue-70);
 }
 .ds-input--container:focus-within * > ds-button.suffix > button:focus-visible {
   background-clip: padding-box;
   outline-offset: -5px;
   box-shadow: none;
   height: var(--ds-spacing-xLarge);
-  background-color: var(--ds-bgColor-transparent-onLight-hover);
+  background-color: var(--ds-overlay-black-10);
 }
 .ds-input--container > input {
   font-family: var(--ds-fontFamily-body);
@@ -132,15 +132,15 @@
   flex-grow: 1;
   height: var(--ds-spacing-xLarge);
   line-height: var(--ds-fontSize-24);
-  color: var(--ds-textColor-default);
+  color: var(--ds-palette-black-95);
   border: none;
   padding-block: var(--ds-spacing-4xSmall);
 }
 .ds-input--container > input:disabled {
-  color: var(--ds-textColor-disabled-onLight);
+  color: var(--ds-palette-black-40);
 }
 .ds-input--container > input:disabled::placeholder {
-  color: var(--ds-textColor-disabled-onLight);
+  color: var(--ds-palette-black-40);
 }
 .ds-input--container > input::placeholder {
   font-family: var(--ds-fontFamily-body);
@@ -148,7 +148,7 @@
   font-weight: var(--ds-fontWeight-regular);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
-  color: var(--ds-textColor-secondary);
+  color: var(--ds-palette-black-70);
 }
 .ds-input--container > input:focus {
   outline: none;
@@ -175,7 +175,7 @@
 }
 .ds-input--container ds-icon.prefix, .ds-input--container ::slotted([slot=prefix]) {
   height: 1.5rem;
-  color: var(--ds-textColor-default);
+  color: var(--ds-palette-black-95);
 }
 .ds-input--container ds-button.suffix {
   margin-top: calc(var(--ds-spacing-3xSmall) * -1);
@@ -205,9 +205,9 @@
 }
 
 .error-text--container {
-  color: var(--ds-textColor-danger);
+  color: var(--ds-palette-red-70);
 }
 
 .success-text--container {
-  color: var(--ds-textColor-success);
+  color: var(--ds-palette-green-70);
 }

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js

@@ -3,6 +3,7 @@ import classNames from "classnames";
 import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
 import { isValidation } from "../../../store";
 import { idGenerator, getAriaLabel } from "../../../utils/utils";
+import { inheritAttributes } from "../../../utils/attributes/attributes";
 const INPUT_TYPE_ICONS_MAP = {
     search: 'search',
 };
@@ -12,6 +13,7 @@ const INPUT_TYPE_ACTION_BUTTON_ICON_MAP = {
 };
 const inputIdGenerator = idGenerator('ds-input');
 export class DsTextInput {
+    inheritedAttributes = {};
     suffixButtonElement;
     inputElement;
     assistiveTextId;
@@ -48,7 +50,7 @@ export class DsTextInput {
     icon = '';
     type = 'text';
     ariaLabel;
-    ariaLabelledBy;
+    ariaLabelledby;
     ariaDescribedby;
     hasFocus = false;
     clearButtonVisible = false;
@@ -81,6 +83,9 @@ export class DsTextInput {
         return this.label;
     };
     componentWillLoad() {
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+        };
         this.setIds();
         this.hasPrefixSlot = !!this.el.querySelector('[slot="prefix"]');
         this.hasSuffixSlot = !!this.el.querySelector('[slot="suffix"]');
@@ -109,6 +114,7 @@ export class DsTextInput {
                 return this.togglePasswordVisibility();
             case 'search':
                 this.clearInput();
+                return;
             default:
                 return;
         }
@@ -147,18 +153,18 @@ export class DsTextInput {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (h(Fragment, { key: 'efb783f742bb82b01fd6807a628eb693666a819b' }, h("div", { key: 'dde260b136af4b68de1fa15928529f5e57f54c3a', class: "ds-input--label-container" }, h("slot", { key: 'e7ba428a8b8202c9b3e4d9a9c6d4257b0b48d83a', name: "label" }, h("label", { key: '1f28c5fd53249068de50c6d0ea0aa88ccf65a1ec', htmlFor: this.identifier }, this.getLabelText())), h("slot", { key: 'e3c1ea925cfc7f9599ee651da0aeaab98fa806bb', name: "help-text" }, h("small", { key: '671ab99029e2775d964feb012beb8a20912be5e3', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '8eb744be9b95ddceb1dd5bed0274d29a26e7ec1d', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'b7fa7067a52d176b810eb88777423adf50dfd8b9', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
+        return (h(Fragment, { key: '9706a2c55f36b1888b7287344d91ddd10f96201d' }, h("div", { key: '35eafa8a92261bfdb4e0ed8325d98be85665eca6', class: "ds-input--label-container" }, h("slot", { key: '50e67a545686807337bda0c607888f6bf9bf9d58', name: "label" }, h("label", { key: '87ce740880e1fb5e966607a05af463a40655410d', htmlFor: this.identifier }, this.getLabelText())), h("slot", { key: 'f9c002b843341a3934df96611176fe8178c49c0d', name: "help-text" }, h("small", { key: '2e780ce79e6e0720dee0360fe7e11a4742a26fca', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '63d47cc268aaf3128799f907144048411a0e9be5', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'a060e806ef56c1b232ad2eacb5a1b675b01891f7', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 valid: !!this.successText,
-                invalid: !!this.errorText,
+                invalid: !!this.validationMessage,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: 'f619722a0c088fbd99d851b4cc49a220538da0ae', ref: e => (this.inputElement = e), id: this.identifier, name: this.name, "aria-label": getAriaLabel(this.label, this.ariaLabel), "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
+            }) }, this.renderPrefixContent(), h("input", { key: 'cb27157fde11dcb0fc305423fbc94fcafdc34b1c', ref: e => (this.inputElement = e), id: this.identifier, name: this.name, "aria-label": getAriaLabel(this.label, this.ariaLabel), "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby ||
                 classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
                     [this.errorTextId]: Boolean(this.validationMessage),
                     [this.successTextId]: Boolean(this.successText),
-                }), "aria-invalid": Boolean(this.validationMessage) ? 'true' : 'false', disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: this.handleInput, onFocus: () => (this.hasFocus = true), onBlur: this.handleBlur }), this.renderSuffixContent()), h("slot", { key: 'b70c638ad0de13e0bfa1c2f0ec366e748ab8e4e2', name: "input-validity" }, h("ds-input-validity", { key: '7c1da6ba8d42add8de43f4926c24c8a64bbe32e2', id: this.errorTextId, text: this.validationMessage, type: "error", role: "alert" }), h("ds-input-validity", { key: '46258021c17e3461ea4a0c2ae720fb44305550c5', id: this.successTextId, text: this.successText, type: "success", role: "status" }))));
+                }), "aria-invalid": this.validationMessage ? 'true' : 'false', disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: this.handleInput, onFocus: () => (this.hasFocus = true), onBlur: this.handleBlur, ...this.inheritedAttributes }), this.renderSuffixContent()), h("slot", { key: '8e961d353346bd088e6f5f6d4efa9508598a2596', name: "input-validity" }, h("ds-input-validity", { key: 'd784f945dec403f64721a71fba72ecc1f836e844', id: this.errorTextId, text: this.validationMessage, type: "error", role: "alert" }), h("ds-input-validity", { key: 'f343fc9fdbc4c4f33d345921a23f89fcb27b8a18', id: this.successTextId, text: this.successText, type: "success", role: "status" }))));
     }
     static get is() { return "ds-text-input"; }
     static get encapsulation() { return "scoped"; }
@@ -659,7 +665,7 @@ export class DsTextInput {
                 "attribute": "aria-label",
                 "reflect": false
             },
-            "ariaLabelledBy": {
+            "ariaLabelledby": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {

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

@@ -41,7 +41,7 @@ export const Playground = {
             options: textInputTypes,
         },
         ariaLabel: { name: 'aria-label', control: 'text' },
-        ariaLabelledBy: { name: 'aria-labelledby', control: 'text' },
+        ariaLabelledby: { name: 'aria-labelledby', control: 'text' },
         ariaDescribedby: { name: 'aria-describedby', control: 'text' },
         autocomplete: { control: 'text' },
     },
@@ -66,7 +66,7 @@ export const Playground = {
         type: 'text',
         autocomplete: '',
         ariaLabel: '',
-        ariaLabelledBy: '',
+        ariaLabelledby: '',
         ariaDescribedby: '',
     }
 };

package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.css

@@ -1,4 +1,4 @@
-:host {
+.ds-visually-hidden {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;

package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DsVisuallyHidden {
     render() {
-        return (h("slot", { key: '083eaed9210a85360479b367769c8904a6089f64' }));
+        return (h("div", { key: 'a4816a680d41ece91ad716ee0cc52a8c777990a4', class: "ds-visually-hidden" }, h("slot", { key: 'd5444d14b4fdab28a414ab687ca24b9eb14e1ac4' })));
     }
     static get is() { return "ds-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/attributes/attributes.js

@@ -1,4 +1,5 @@
-export const inheritAttributes = (el, attributes = []) => {
+const kebabToCamelCase = (str) => str.replace(/-./g, x => x[1].toUpperCase());
+export const inheritSpecifiedAttributes = (el, attributes = []) => {
     const attributeObject = {};
     attributes.forEach(attr => {
         if (el.hasAttribute(attr)) {
@@ -64,12 +65,22 @@ export const ariaAttributes = [
     'aria-valuenow',
     'aria-valuetext',
 ];
-const kebabToCamelCase = (attr) => attr.replace(/-./g, x => x[1].toUpperCase());
 export const getAriaAttributeArgTypes = (attrs) => attrs.reduce((acc, curr) => ((acc[kebabToCamelCase(curr)] = { control: 'text', name: curr }), acc), {});
 export const inheritAriaAttributes = (el, ignoreList) => {
     let attributesToInherit = [...ariaAttributes];
     if (ignoreList && ignoreList.length > 0) {
         attributesToInherit = attributesToInherit.filter(attr => !ignoreList.includes(attr));
     }
-    return inheritAttributes(el, attributesToInherit);
+    return inheritSpecifiedAttributes(el, attributesToInherit);
+};
+export const inheritAttributes = (component, elem) => {
+    const attributesToIgnore = new Set(['class', 'style', ...ariaAttributes]);
+    const propsToIgnore = new Set(Object.keys(component));
+    const attributes = {};
+    for (const attr of elem.attributes) {
+        if (!propsToIgnore.has(kebabToCamelCase(attr.name)) && !attributesToIgnore.has(attr.name)) {
+            attributes[attr.name] = attr.value;
+        }
+    }
+    return attributes;
 };

package/dist/collection/utils/button/buttonUtils.js

@@ -0,0 +1,14 @@
+export function handleButtonLoading(buttonElement, originalValue, loadValue, loadingDuration = 3000) {
+    if (buttonElement.getAttribute('is-loading') === 'true')
+        return;
+    const originalIsLoading = buttonElement.getAttribute('is-loading') || 'false';
+    const originalAriaDisabled = buttonElement.getAttribute('aria-disabled') || 'false';
+    buttonElement.setAttribute('value', loadValue);
+    buttonElement.setAttribute('is-loading', 'true');
+    buttonElement.setAttribute('aria-disabled', 'true');
+    setTimeout(() => {
+        buttonElement.setAttribute('value', originalValue);
+        buttonElement.setAttribute('is-loading', originalIsLoading);
+        buttonElement.setAttribute('aria-disabled', originalAriaDisabled);
+    }, loadingDuration);
+}

package/dist/collection/utils/colours/colourTypes.js

@@ -12,7 +12,7 @@ export const opaque = {
     '--ds-overlay-white': 'Opaque overlays|white',
 };
 export const semantic = {
-    '--ds-textColor': 'Semantic colours|text',
-    '--ds-bgColor': 'Semantic colours|background',
-    '--ds-borderColor': 'Semantic colours|border',
+    '$dsTextColor': 'Semantic colours|text',
+    '$dsBgColor': 'Semantic colours|background',
+    '$dsBorderColor': 'Semantic colours|border',
 };

package/dist/collection/utils/colours/colourUtils.js

@@ -22,17 +22,18 @@ const getStyles = (colourType) => {
     }
 };
 export const getColourVariables = (colourType) => {
-    const cssVariables = Array.from(getStyles(colourType).matchAll(/--[\w-]+:\s*[^;]+;/g)).map(match => match[0]);
+    const variablePattern = colourType === 'semantic' ? /\$[\w-]+:\s*[^;]+;/g : /--[\w-]+:\s*[^;]+;/g;
+    const cssVariables = Array.from(getStyles(colourType).matchAll(variablePattern)).map(match => match[0]);
     const categories = getCategories(colourType);
     return cssVariables
         .map(variable => {
         const [name, value] = variable.split(':').map(part => part.trim().replace(';', ''));
-        const cleanName = name.replace(/^--/, '');
+        const cleanName = name.replace(/^(\$|--)/, '');
         const categoryKey = Object.keys(categories).find(key => name.startsWith(key));
         if (categoryKey) {
             return { name: cleanName, variable, value, category: categories[categoryKey] };
         }
-        return null;
+        return { name: cleanName, variable, value, category: 'Other' };
     })
         .filter(variable => variable !== null);
 };
@@ -42,6 +43,7 @@ const createColourBox = (name, hex) => {
     const colourSwatch = document.createElement('div');
     colourSwatch.className = 'colour-swatch';
     colourSwatch.style.backgroundColor = hex;
+    colourSwatch.setAttribute('title', `${name}: ${hex}`);
     const colourInfo = document.createElement('div');
     colourInfo.className = 'colour-info';
     colourInfo.innerHTML = `${name} <br /> <code>${hex}</code>`;

package/dist/collection/utils/controls/controlUtils.js

@@ -1,2 +1,2 @@
-export const getOptionalText = (text, optionalText) => [text, Boolean(optionalText) ? optionalText : '(optional)'].join(' ');
+export const getOptionalText = (text, optionalText) => [text, optionalText || '(optional)'].join(' ');
 export const getRequiredText = (text) => [text, '*'].join(' ');

package/dist/collection/utils/spinner/spinnerUtils.js

@@ -0,0 +1,20 @@
+export function toggleSpinnerLoad(buttonElement, spinnerElement, results, buttonOriginalValue, loadValue, loadingDuration = 3000) {
+    if (buttonElement.getAttribute('is-loading') === 'true')
+        return;
+    console.log(buttonElement, spinnerElement, results);
+    const originalIsLoading = buttonElement.getAttribute('is-loading') || 'false';
+    const originalAriaDisabled = buttonElement.getAttribute('aria-disabled') || 'false';
+    buttonElement.setAttribute('value', loadValue);
+    buttonElement.setAttribute('is-loading', 'true');
+    buttonElement.setAttribute('aria-disabled', 'true');
+    results.classList.add('ds-sb-hidden');
+    spinnerElement.classList.remove('ds-sb-hidden');
+    setTimeout(() => {
+        buttonElement.setAttribute('value', buttonOriginalValue);
+        buttonElement.setAttribute('is-loading', originalIsLoading);
+        buttonElement.setAttribute('aria-disabled', originalAriaDisabled);
+        results.innerHTML = 'Sended';
+        results.classList.remove('ds-sb-hidden');
+        spinnerElement.classList.add('ds-sb-hidden');
+    }, loadingDuration);
+}

package/dist/collection/utils/tests/testUtils.js

@@ -29,3 +29,4 @@ export const addMockEventListener = (container, selector, eventName) => {
     elem.addEventListener(eventName, mockFunction);
     return mockFunction;
 };
+export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

package/dist/collection/utils/typography/typographyUtils.js

@@ -85,11 +85,11 @@ export const createCategorySection = (category, fonts, renderedCategories) => {
 };
 export const getCSSClasses = (prefix) => {
     const stylesheets = Array.from(document.styleSheets);
-    let classNames = [];
-    for (let sheet of stylesheets) {
+    const classNames = [];
+    for (const sheet of stylesheets) {
         try {
             const rules = Array.from(sheet.cssRules);
-            for (let rule of rules) {
+            for (const rule of rules) {
                 if (rule.selectorText) {
                     const selector = rule.selectorText;
                     if (selector.startsWith(`.${prefix}`)) {